feat(pf4): common select

Author: rvsia

packages/common/src/select/index.js

@@ -1,9 +1,14 @@
-import React, { Component } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useReducer } from 'react';
 import ReactSelect from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import isEqual from 'lodash/isEqual';
 import { input } from '../prop-types-templates';
+import fnToString from '../utils/fn-to-string';
+import reducer from './reducer';
 
 const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) =>
   simpleValue ? allOptions.filter(({ value }) => (isMulti ? stateValue.includes(value) : isEqual(value, stateValue))) : stateValue;
@@ -15,29 +20,132 @@ const handleSelectChange = (option, simpleValue, isMulti, onChange) => {
     : onChange(sanitizedOption);
 };
 
-class Select extends Component {
-  render() {
-    const { input, invalid, classNamePrefix, simpleValue, isMulti, pluckSingleValue, options, ...props } = this.props;
-    const { value, onChange, ...inputProps } = input;
-
-    const selectValue = pluckSingleValue ? (isMulti ? value : Array.isArray(value) && value[0] ? value[0] : value) : value;
-
-    return (
-      <ReactSelect
-        className={clsx(classNamePrefix, {
-          'has-error': invalid
-        })}
-        {...props}
-        {...inputProps}
-        options={options}
-        classNamePrefix={classNamePrefix}
-        isMulti={isMulti}
-        value={getSelectValue(selectValue, simpleValue, isMulti, options)}
-        onChange={(option) => handleSelectChange(option, simpleValue, isMulti, onChange)}
-      />
-    );
+const selectProvider = (type) =>
+  ({
+    createable: CreatableSelect
+  }[type] || ReactSelect);
+
+const Select = ({
+  invalid,
+  classNamePrefix,
+  simpleValue,
+  isMulti,
+  pluckSingleValue,
+  options: propsOptions,
+  loadOptions,
+  loadingMessage,
+  loadingProps,
+  selectVariant,
+  updatingMessage,
+  noOptionsMessage,
+  value,
+  onChange,
+  ...props
+}) => {
+  const [state, dispatch] = useReducer(reducer, {
+    isLoading: false,
+    options: propsOptions,
+    promises: {},
+    isMounted: false
+  });
+
+  const updateOptions = () => {
+    dispatch({ type: 'startLoading' });
+
+    return loadOptions().then((data) => {
+      if (Array.isArray(value)) {
+        const selectValue = value.filter((value) =>
+          typeof value === 'object' ? data.find((option) => value.value === option.value) : data.find((option) => value === option.value)
+        );
+        onChange(selectValue.length === 0 ? undefined : selectValue);
+      } else if (!data.find(({ value: internalValue }) => internalValue === value)) {
+        onChange(undefined);
+      }
+
+      dispatch({ type: 'updateOptions', payload: data });
+    });
+  };
+
+  useEffect(() => {
+    if (loadOptions) {
+      updateOptions();
+    }
+
+    dispatch({ type: 'mounted' });
+
+    return () => {
+      dispatch({ type: 'unmounted' });
+    };
+  }, []);
+
+  const loadOptionsStr = loadOptions ? fnToString(loadOptions) : '';
+
+  useEffect(() => {
+    if (loadOptionsStr && state.isMounted) {
+      updateOptions();
+    }
+  }, [loadOptionsStr]);
+
+  useEffect(() => {
+    if (state.isMounted) {
+      if (!propsOptions.map(({ value }) => value).includes(value)) {
+        onChange(undefined);
+      }
+
+      dispatch({ type: 'setOptions', payload: propsOptions });
+    }
+  }, [propsOptions]);
+
+  if (state.isLoading) {
+    return <ReactSelect isDisabled={true} placeholder={loadingMessage} options={state.options} {...loadingProps} />;
   }
-}
+
+  const onInputChange = (inputValue) => {
+    if (loadOptions && state.promises[inputValue] === undefined) {
+      dispatch({ type: 'setPromises', payload: { [inputValue]: true } });
+
+      loadOptions(inputValue)
+        .then((options) => {
+          if (state.isMounted) {
+            dispatch({
+              type: 'setPromises',
+              payload: { [inputValue]: false },
+              options
+            });
+          }
+        })
+        .catch((error) => {
+          dispatch({ type: 'setPromises', payload: { [inputValue]: false } });
+          throw error;
+        });
+    }
+  };
+
+  const renderNoOptionsMessage = () => (Object.values(state.promises).some((value) => value) ? () => updatingMessage : () => noOptionsMessage);
+
+  const selectValue = pluckSingleValue ? (isMulti ? value : Array.isArray(value) && value[0] ? value[0] : value) : value;
+
+  const SelectFinal = selectProvider(selectVariant);
+
+  return (
+    <SelectFinal
+      className={clsx(classNamePrefix, {
+        'has-error': invalid
+      })}
+      {...props}
+      options={state.options}
+      classNamePrefix={classNamePrefix}
+      isMulti={isMulti}
+      value={getSelectValue(selectValue, simpleValue, isMulti, state.options)}
+      onChange={(option) => handleSelectChange(option, simpleValue, isMulti, onChange)}
+      onInputChange={onInputChange}
+      isFetching={Object.values(state.promises).some((value) => value)}
+      noOptionsMessage={renderNoOptionsMessage()}
+      hideSelectedOptions={false}
+      closeMenuOnSelect={!isMulti}
+    />
+  );
+};
 
 Select.propTypes = {
   options: PropTypes.array,
@@ -47,33 +155,19 @@ Select.propTypes = {
   simpleValue: PropTypes.bool,
   isMulti: PropTypes.bool,
   pluckSingleValue: PropTypes.bool,
-  input
+  value: PropTypes.any,
+  placeholder: PropTypes.string,
+  ...input
 };
 
 Select.defaultProps = {
   options: [],
   invalid: false,
   simpleValue: true,
-  pluckSingleValue: true
-};
-
-const DataDrivenSelect = ({ isMulti, ...props }) => {
-  const closeMenuOnSelect = !isMulti;
-  return <Select hideSelectedOptions={false} isMulti={isMulti} {...props} closeMenuOnSelect={closeMenuOnSelect} />;
-};
-
-DataDrivenSelect.propTypes = {
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  isMulti: PropTypes.bool,
-  placeholder: PropTypes.string,
-  classNamePrefix: PropTypes.string.isRequired
-};
-
-DataDrivenSelect.defaultProps = {
+  pluckSingleValue: true,
   placeholder: 'Choose...',
   isSearchable: false,
   isClearable: false
 };
 
-export default DataDrivenSelect;
+export default Select;

packages/common/src/select/reducer.js

@@ -0,0 +1,49 @@
+const reducer = (state, { type, payload, options = [] }) => {
+  switch (type) {
+    case 'updateOptions':
+      return {
+        ...state,
+        options: payload,
+        isLoading: false,
+        promises: {}
+      };
+    case 'loaded':
+      return {
+        ...state,
+        isLoading: false
+      };
+    case 'startLoading':
+      return {
+        ...state,
+        isLoading: true
+      };
+    case 'setOptions':
+      return {
+        ...state,
+        options: payload
+      };
+    case 'mounted':
+      return {
+        ...state,
+        isMounted: true
+      };
+    case 'unmounted':
+      return {
+        ...state,
+        isMounted: false
+      };
+    case 'setPromises':
+      return {
+        ...state,
+        promises: {
+          ...state.promises,
+          ...payload
+        },
+        options: [...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))]
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;