fix(pf4): Added load options to downshift select

Author: Hyperkid123

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -23,8 +23,47 @@ const options = [
   }
 ];
 
+const loadOptions = (inputValue = '') => {
+  return new Promise((res) =>
+    setTimeout(() => {
+      if (inputValue.length === 0) {
+        return res(options.slice(0, 3));
+      }
+
+      return res(options.filter(({ label }) => label.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase())));
+    }, 1500)
+  );
+};
+
 const selectSchema = {
   fields: [
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-async-select',
+      label: 'Simple async select',
+      loadOptions
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-searchable-async-select',
+      label: 'Simple searchable async select',
+      loadOptions,
+      isSearchable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'multi-async-select',
+      label: 'multi async select',
+      loadOptions,
+      isMulti: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'searchable-multi-async-select',
+      label: 'Multi searchable async select',
+      loadOptions,
+      isSearchable: true
+    },
     {
       component: componentTypes.SELECT,
       name: 'multi-simple-select',
@@ -79,4 +118,6 @@ const selectSchema = {
   ]
 };
 
-export default selectSchema;
+export default {
+  ...selectSchema
+};

packages/pf4-component-mapper/src/common/select/empty-options.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const EmptyOptions = ({ noOptionsMessage, noResultsMessage, getInputProps, isSearchable }) => {
+const EmptyOptions = ({ noOptionsMessage, noResultsMessage, getInputProps, isSearchable, isFetching }) => {
   const { value } = getInputProps();
-  const message = isSearchable && value ? noResultsMessage : noOptionsMessage();
+  const message = isFetching ? noOptionsMessage() : isSearchable && value ? noResultsMessage : noOptionsMessage();
   return <div className="pf-c-select__menu-item pf-m-disabled">{message}</div>;
 };
 
 EmptyOptions.propTypes = {
   noOptionsMessage: PropTypes.func.isRequired,
   noResultsMessage: PropTypes.node.isRequired,
   getInputProps: PropTypes.func.isRequired,
-  isSearchable: PropTypes.bool
+  isSearchable: PropTypes.bool,
+  isFetching: PropTypes.bool
 };
 
 export default EmptyOptions;

packages/pf4-component-mapper/src/common/select/menu.js

@@ -15,7 +15,8 @@ const Menu = ({
   getInputProps,
   highlightedIndex,
   selectedItem,
-  isMulti
+  isMulti,
+  isFetching
 }) => {
   const filteredOptions = isSearchable ? filterOptions(options, filterValue) : options;
   return (
@@ -27,6 +28,7 @@ const Menu = ({
           noOptionsMessage={noOptionsMessage}
           noResultsMessage={noResultsMessage}
           getInputProps={getInputProps}
+          isFetching={isFetching}
         />
       )}
       {filteredOptions.map((item, index) => {

packages/pf4-component-mapper/src/common/select/select-styles.scss

@@ -3,6 +3,10 @@
   100% { transform: rotate(360deg); }
 }
 
+.ddorg__pf4-component-mapper__select-loading-icon {
+  animation: spin 2s linear infinite;
+}
+
 .ddorg__pf4-component-mapper__select {
   &.single-select {
     .ddorg__pf4-component-mapper__select__placeholder {

packages/pf4-component-mapper/src/common/select/select.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import DataDrivenSelect from '@data-driven-forms/common/src/select';
 import parseInternalValue from '@data-driven-forms/common/src/select/parse-internal-value';
 import Downshift from 'downshift';
-import { CaretDownIcon, CloseIcon } from '@patternfly/react-icons';
+import { CaretDownIcon, CloseIcon, CircleNotchIcon } from '@patternfly/react-icons';
 import '@patternfly/react-styles/css/components/Select/select.css';
 import '@patternfly/react-styles/css/components/Chip/chip.css';
 import '@patternfly/react-styles/css/components/ChipGroup/chip-group.css';
@@ -109,6 +109,9 @@ const InternalSelect = ({
   isDisabled,
   isClearable,
   isMulti,
+  isFetching,
+  onInputChange,
+  loadingMessage,
   ...props
 }) => {
   const [showMore, setShowMore] = useState(false);
@@ -121,8 +124,13 @@ const InternalSelect = ({
       id={props.id || props.name}
       onChange={handleChange}
       itemToString={(value) => itemToString(value, isMulti, showMore, handleShowMore, handleChange)}
-      selectedItem={value}
+      selectedItem={value || ''}
       stateReducer={(state, changes) => stateReducer(state, changes, isMulti)}
+      onInputValueChange={(inputValue) => {
+        if (onInputChange && typeof inputValue === 'string') {
+          onInputChange(inputValue);
+        }
+      }}
     >
       {({ isOpen, inputValue, itemToString, selectedItem, clearSelection, getInputProps, getToggleButtonProps, getItemProps, highlightedIndex }) => {
         const toggleButtonProps = getToggleButtonProps();
@@ -134,13 +142,14 @@ const InternalSelect = ({
               </div>
               {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
               <span className="pf-c-select__toggle-arrow">
-                <CaretDownIcon />
+                {isFetching ? <CircleNotchIcon className="ddorg__pf4-component-mapper__select-loading-icon" /> : <CaretDownIcon />}
               </span>
             </div>
             {isOpen && (
               <Menu
                 noResultsMessage={noResultsMessage}
                 noOptionsMessage={noOptionsMessage}
+                isFetching={isFetching}
                 inputRef={inputRef}
                 isDisabled={isDisabled}
                 placeholder={placeholder}
@@ -180,7 +189,10 @@ InternalSelect.propTypes = {
   isClearable: PropTypes.bool,
   noResultsMessage: PropTypes.node,
   noOptionsMessage: PropTypes.func,
-  isMulti: PropTypes.bool
+  isMulti: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  onInputChange: PropTypes.func,
+  loadingMessage: PropTypes.node
 };
 
 const Select = ({ selectVariant, menuIsPortal, ...props }) => {