Merge pull request #397 from rvsia/pf4selectMulti

[V2] Share functionality in common select

Author: Hyperkid123

packages/common/src/hooks/use-is-mounted.js

@@ -0,0 +1,12 @@
+import { useRef, useEffect } from 'react';
+
+const useIsMounted = () => {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => (isMounted.current = false);
+  }, []);
+  return isMounted;
+};
+
+export default useIsMounted;

packages/common/src/select/index.js

@@ -1,9 +1,15 @@
-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';
+import useIsMounted from '../hooks/use-is-mounted';
 
 const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) =>
   simpleValue ? allOptions.filter(({ value }) => (isMulti ? stateValue.includes(value) : isEqual(value, stateValue))) : stateValue;
@@ -15,65 +21,165 @@ 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 selectProvider = {
+  createable: CreatableSelect
+};
+
+const Select = ({
+  invalid,
+  classNamePrefix,
+  simpleValue,
+  isMulti,
+  pluckSingleValue,
+  options: propsOptions,
+  loadOptions,
+  loadingMessage,
+  loadingProps,
+  selectVariant,
+  updatingMessage,
+  noOptionsMessage,
+  value,
+  onChange,
+  loadOptionsChangeCounter,
+  ...props
+}) => {
+  const [state, dispatch] = useReducer(reducer, {
+    isLoading: false,
+    options: propsOptions,
+    promises: {},
+    isInitialLoaded: false
+  });
+
+  const isMounted = useIsMounted();
+
+  const updateOptions = () => {
+    dispatch({ type: 'startLoading' });
+
+    return loadOptions().then((data) => {
+      if (isMounted) {
+        if (value && 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 (value && !data.find(({ value: internalValue }) => internalValue === value)) {
+          onChange(undefined);
+        }
+
+        dispatch({ type: 'updateOptions', payload: data });
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (loadOptions) {
+      updateOptions();
+    }
 
-    const selectValue = pluckSingleValue ? (isMulti ? value : Array.isArray(value) && value[0] ? value[0] : value) : value;
+    dispatch({ type: 'initialLoaded' });
+  }, []);
 
+  const loadOptionsStr = loadOptions ? fnToString(loadOptions) : '';
+
+  useEffect(() => {
+    if (loadOptionsStr && state.isInitialLoaded) {
+      updateOptions();
+    }
+  }, [loadOptionsStr, loadOptionsChangeCounter]);
+
+  useEffect(() => {
+    if (state.isInitialLoaded) {
+      if (value && !propsOptions.map(({ value }) => value).includes(value)) {
+        onChange(undefined);
+      }
+
+      dispatch({ type: 'setOptions', payload: propsOptions });
+    }
+  }, [propsOptions]);
+
+  if (state.isLoading) {
     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)}
+        isDisabled={true}
+        placeholder={loadingMessage}
+        options={state.options}
+        {...loadingProps}
       />
     );
   }
-}
+
+  const onInputChange = (inputValue) => {
+    if (inputValue && loadOptions && state.promises[inputValue] === undefined && props.isSearchable) {
+      dispatch({ type: 'setPromises', payload: { [inputValue]: true } });
+
+      loadOptions(inputValue)
+        .then((options) => {
+          if (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] || ReactSelect;
+
+  return (
+    <SelectFinal
+      className={clsx(classNamePrefix, {
+        'has-error': invalid
+      })}
+      {...props}
+      isDisabled={props.isDisabled || props.isReadOnly}
+      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,
   onChange: PropTypes.func,
-  classNamePrefix: PropTypes.string.isRequired,
+  classNamePrefix: PropTypes.string,
   invalid: PropTypes.bool,
   simpleValue: PropTypes.bool,
   isMulti: PropTypes.bool,
   pluckSingleValue: PropTypes.bool,
-  input
+  value: PropTypes.any,
+  placeholder: PropTypes.string,
+  loadOptionsChangeCounter: PropTypes.number,
+  ...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,44 @@
+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 'initialLoaded':
+      return {
+        ...state,
+        isInitialLoaded: true
+      };
+    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;

packages/mui-component-mapper/src/files/select.js

@@ -7,53 +7,27 @@ import { meta, input } from '@data-driven-forms/common/src/prop-types-templates'
 import MUISelect from './select/integration-select';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
-const selectValue = (option) => option.sort((a, b) => a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })).map((item) => item.value);
-
 const Select = (props) => {
-  const {
-    input,
-    isReadOnly,
-    isDisabled,
-    placeholder,
-    isRequired,
-    label,
-    helperText,
-    validateOnMount,
-    meta,
-    options,
-    isSearchable,
-    description,
-    ...rest
-  } = useFieldApi(props);
+  const { input, placeholder, label, helperText, validateOnMount, meta, isSearchable, description, ...rest } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
   return (
     <FormFieldGrid>
       <MUISelect
         fullWidth
         {...input}
-        options={options.filter((option) => Object.prototype.hasOwnProperty.call(option, 'value') && option.value !== null)}
-        placeholder={placeholder || 'Please choose'}
-        value={options.filter(({ value }) => (rest.isMulti ? input.value.includes(value) : value === input.value))}
-        isMulti={rest.isMulti}
         isSearchable={!!isSearchable}
         isClearable={false}
-        hideSelectedOptions={false}
-        closeMenuOnSelect={!rest.isMulti}
-        noOptionsMessage={() => 'No option found'}
         invalid={invalid}
-        isDisabled={isDisabled}
         textFieldProps={{
           label,
           color: invalid ? 'red' : 'blue',
           InputLabelProps: {
             shrink: true
           }
         }}
-        onChange={(option) => input.onChange(rest.isMulti ? selectValue(option) : option ? option.value : undefined)}
         input={input}
         label={label}
-        isRequired={isRequired}
         helperText={invalid || helperText || description}
         {...rest}
       />
@@ -64,10 +38,7 @@ const Select = (props) => {
 Select.propTypes = {
   input,
   meta,
-  isReadOnly: PropTypes.bool,
-  isDisabled: PropTypes.bool,
   placeholder: PropTypes.node,
-  isRequired: PropTypes.bool,
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
@@ -76,4 +47,9 @@ Select.propTypes = {
   description: PropTypes.node
 };
 
+Select.defaultProps = {
+  placeholder: 'Please choose',
+  noOptionsMessage: 'No option found'
+};
+
 export default Select;

packages/mui-component-mapper/src/files/select/integration-select.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import Select from 'react-select';
+import Select from '@data-driven-forms/common/src/select';
 import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles';
 import { Typography, NoSsr, TextField, Paper, Chip, MenuItem, FormControl, FormHelperText, FormLabel } from '@material-ui/core';
 import CancelIcon from '@material-ui/icons/Cancel';