Add multiselects

Author: rvsia

packages/carbon-component-mapper/demo/index.js

@@ -46,16 +46,6 @@ class App extends React.Component {
             FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
             onCancel={console.log}
             schema={this.state.schema}
-            /*schema={{
-              fields: [
-                {
-                  component: 'time-picker',
-                  name: 'tp',
-                  twelveHoursFormat: true,
-                  timezones: [{ value: 'utc', label: 'UTC' }]
-                }
-              ]
-            }}*/
             {...this.state.additionalOptions}
           />
         </div>

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

@@ -1,42 +1,162 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { bool } from 'prop-types';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import DataDrivenSelect from '@data-driven-forms/common/src/select';
-import useIsMounted from '@data-driven-forms/common/src/hooks/use-is-mounted';
 import fnToString from '@data-driven-forms/common/src/utils/fn-to-string';
 
 import { Select as CarbonSelect, MultiSelect, SelectItem } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
-const ClearedMultiSelectFilterable = (props) => {
-  return 'multi.searchable';
+const ClearedMultiSelectFilterable = ({
+  invalidText,
+  hideSelectedOptions,
+  noOptionsMessage,
+  onInputChange,
+  options,
+  isFetching,
+  invalid,
+  isMulti,
+  classNamePrefix,
+  closeMenuOnSelect,
+  onChange,
+  originalOnChange,
+  carbonLabel,
+  placeholder,
+  isDisabled,
+  ...rest
+}) => (
+  <MultiSelect.Filterable
+    disabled={isDisabled}
+    {...rest}
+    placeholder={carbonLabel || placeholder}
+    onChange={originalOnChange}
+    titleText={rest.labelText}
+    id={rest.name}
+    invalid={Boolean(invalidText)}
+    invalidText={invalidText}
+    items={options}
+    initialSelectedItems={Array.isArray(rest.value) ? rest.value : []}
+  />
+);
+
+ClearedMultiSelectFilterable.propTypes = {
+  invalidText: PropTypes.node,
+  hideSelectedOptions: PropTypes.any,
+  noOptionsMessage: PropTypes.any,
+  onInputChange: PropTypes.func,
+  options: PropTypes.array,
+  isFetching: PropTypes.bool,
+  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.any,
+  closeMenuOnSelect: PropTypes.any,
+  onChange: PropTypes.func,
+  originalOnChange: PropTypes.func,
+  carbonLabel: PropTypes.node,
+  placeholder: PropTypes.node,
+  isDisabled: PropTypes.bool
 };
 
-const ClearedMultiSelect = (props) => {
-  return 'multi';
+const ClearedMultiSelect = ({
+  invalidText,
+  hideSelectedOptions,
+  noOptionsMessage,
+  onInputChange,
+  options,
+  isFetching,
+  invalid,
+  isMulti,
+  classNamePrefix,
+  closeMenuOnSelect,
+  onChange,
+  originalOnChange,
+  carbonLabel,
+  placeholder,
+  isDisabled,
+  ...rest
+}) => (
+  <MultiSelect
+    disabled={isDisabled}
+    {...rest}
+    label={carbonLabel || placeholder}
+    onChange={originalOnChange}
+    titleText={rest.labelText}
+    id={rest.name}
+    invalid={Boolean(invalidText)}
+    invalidText={invalidText}
+    items={options}
+    initialSelectedItems={Array.isArray(rest.value) ? rest.value : []}
+  />
+);
+
+ClearedMultiSelect.propTypes = {
+  invalidText: PropTypes.node,
+  hideSelectedOptions: PropTypes.any,
+  noOptionsMessage: PropTypes.any,
+  onInputChange: PropTypes.func,
+  options: PropTypes.array,
+  isFetching: PropTypes.bool,
+  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.any,
+  closeMenuOnSelect: PropTypes.any,
+  onChange: PropTypes.func,
+  originalOnChange: PropTypes.func,
+  carbonLabel: PropTypes.node,
+  placeholder: PropTypes.node,
+  isDisabled: PropTypes.bool
 };
 
-const ClearedSelect = ({ invalidText, hideSelectedOptions, noOptionsMessage, onInputChange, options, isFetching, invalid, ...rest }) => {
-  return (
-    <CarbonSelect {...rest} if={rest.name} invalid={Boolean(invalidText)} invalidText={invalidText}>
-      {options.map((option, index) => (
-        <SelectItem key={option.value || index} text={option.label} {...option} />
-      ))}
-    </CarbonSelect>
-  );
+const ClearedSelect = ({
+  isSearchable,
+  isClearable,
+  isDisabled,
+  isMulti,
+  invalidText,
+  hideSelectedOptions,
+  noOptionsMessage,
+  onInputChange,
+  options,
+  isFetching,
+  invalid,
+  classNamePrefix,
+  closeMenuOnSelect,
+  originalOnChange,
+  placeholder,
+  ...rest
+}) => (
+  <CarbonSelect disabled={isFetching} {...rest} id={rest.name} invalid={Boolean(invalidText)} invalidText={invalidText}>
+    {isFetching && <SelectItem text={placeholder} value={''} />}
+    {options.map((option, index) => (
+      <SelectItem key={option.value || index} text={option.label} {...option} />
+    ))}
+  </CarbonSelect>
+);
+
+ClearedSelect.propTypes = {
+  invalidText: PropTypes.node,
+  hideSelectedOptions: PropTypes.any,
+  noOptionsMessage: PropTypes.any,
+  onInputChange: PropTypes.func,
+  options: PropTypes.array,
+  isFetching: PropTypes.bool,
+  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.any,
+  closeMenuOnSelect: PropTypes.any,
+  onChange: PropTypes.func,
+  originalOnChange: PropTypes.func,
+  carbonLabel: PropTypes.node,
+  placeholder: PropTypes.node,
+  isDisabled: PropTypes.bool,
+  isSearchable: bool,
+  isClearable: bool
 };
 
 const Select = (props) => {
   const { isMulti, isSearchable, loadOptions, input, meta, ...rest } = useFieldApi(prepareProps(props));
 
-  const [isFetching, setFetching] = useState(loadOptions ? true : false);
-  const [options, setOptions] = useState(props.options || []);
-  const isMounted = useIsMounted();
-
-  // common select controls the string of loadOptions and if the string changed, then it reloads options
-  // however we are enhancing the loadOptions here so the string is always the same
-  // by increasing this counter, we can enforce the update
   const [loadOptionsChangeCounter, setCounter] = useState(0);
 
   const loadOptionsStr = fnToString(loadOptions);
@@ -46,36 +166,28 @@ const Select = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadOptionsStr]);
 
-  const loadOptionsEnhanced = loadOptions
-    ? (value) => {
-        if (isMounted.current) {
-          setFetching(true);
-        }
-
-        return loadOptions(value).then((data) => {
-          if (isMounted.current) {
-            setOptions([...options, ...data.filter(({ value }) => !options.find((option) => option.value === value))]);
-            setFetching(false);
-          }
-
-          return data;
-        });
-      }
-    : undefined;
-
   const Component = isMulti && isSearchable ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : ClearedSelect;
 
   const invalidText = (meta.touched && meta.error) || '';
 
+  const specialOnChange = ({ selectedItems }) => {
+    if (rest.simpleValue) {
+      return input.onChange(selectedItems.map(({ value }) => value));
+    } else {
+      return input.onChange(selectedItems);
+    }
+  };
+
   return (
     <DataDrivenSelect
       SelectComponent={Component}
+      simpleValue={false}
       {...rest}
       {...input}
+      loadOptions={loadOptions}
       invalidText={invalidText}
       loadOptionsChangeCounter={loadOptionsChangeCounter}
-      loadOptions={loadOptionsEnhanced}
-      simpleValue={false}
+      originalOnChange={specialOnChange}
     />
   );
 };
@@ -90,4 +202,8 @@ Select.propTypes = {
   )
 };
 
+Select.defaultProps = {
+  loadingMessage: 'Loading...'
+};
+
 export default Select;