feat(Select): add creatable select

8base · Sep 9, 2020 · 5274706 · 5274706
1 parent 13025ce
commit 5274706
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import ReactSelect, { components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import { withTheme } from 'emotion-theming';
 import { css } from '@emotion/core';
 import { type SerializedStyles } from '@emotion/utils';
@@ -20,7 +21,9 @@ type SelectProps = {|
   value?: any | any[],
   loading?: boolean,
   disabled?: boolean,
+  /* Multiple prop is deprecated */
   multiple?: boolean,
+  isMulti?: boolean,
   clearable?: boolean,
   hasError?: boolean,
   withPortal?: boolean,
@@ -38,6 +41,7 @@ type SelectProps = {|
   stretch?: boolean,
   isSearchable?: boolean,
   css?: SerializedStyles,
+  creatable?: boolean;
 |};
 
 type SelectPropsFromHOCs = {|
@@ -142,17 +146,29 @@ const ClearIndicator = props => {
 };
 
 
-const findOptionByValue = (value, options) => {
+const getCreatableOptionByValue = (value) => {
   if (Array.isArray(value)) {
-    return value.map((valueItem) => findOptionByValue(valueItem, options));
+    return value.map(valueItem => getCreatableOptionByValue(valueItem));
+  } else {
+    return {
+      label: value,
+      value,
+    };
+  }
+};
+
+
+const getOptionByValue = (value, options) => {
+  if (Array.isArray(value)) {
+    return value.map((valueItem) => getOptionByValue(valueItem, options));
   }
 
   const foundOption = options.reduce((result, option) => {
     if (result === null) {
       if (option.value === value) {
         return option;
       } else if (Array.isArray(option.options)) {
-        return findOptionByValue(value, option.options);
+        return getOptionByValue(value, option.options);
       }
     }
 
@@ -170,10 +186,11 @@ class Select extends React.Component<SelectProps & SelectPropsFromHOCs> {
   };
 
   onChange = (option: Object) => {
+    const { isMulti } = this.props;
     let value = null;
 
-    if (Array.isArray(option)) {
-      value = option.map(({ value }) => value);
+    if (Array.isArray(option) || isMulti) {
+      value = (option || []).map(({ value }) => value);
     } else if (option) {
       ({ value } = option);
     }
@@ -188,6 +205,7 @@ class Select extends React.Component<SelectProps & SelectPropsFromHOCs> {
       clearable,
       disabled,
       multiple,
+      isMulti,
       options,
       placeholder,
       valueComponent,
@@ -204,18 +222,21 @@ class Select extends React.Component<SelectProps & SelectPropsFromHOCs> {
       getOptionValue,
       getOptionLabel,
       isSearchable,
+      creatable,
       ...rest
     } = this.props;
 
-    const selectValue = findOptionByValue(value, options);
+    const selectValue = creatable ? getCreatableOptionByValue(value) : getOptionByValue(value, options || []);
+
+    const SelectComponent = creatable ? CreatableSelect : ReactSelect;
 
     return (
       <SelectTag { ...rest } aria-busy={ String(loading || false) }>
-        <ReactSelect
+        <SelectComponent
           isClearable={ clearable }
           isDisabled={ disabled }
           isLoading={ loading }
-          isMulti={ multiple }
+          isMulti={ multiple || isMulti }
           menuPlacement="auto"
           menuPortalTarget={ withPortal ? document.body : false }
           onChange={ this.onChange }

diff --git a/src/components/SelectField/SelectField.js b/src/components/SelectField/SelectField.js
@@ -33,7 +33,9 @@ class SelectField extends React.Component<SelectFieldProps> {
   }
 
   collectSelectProps() {
-    const { input = {}, meta, placeholder, options, multiple, stretch, filterOption, getOptionValue, getOptionLabel } = this.props;
+    const {
+      input = {}, meta, placeholder, options, multiple, isMulti, creatable, stretch, filterOption, getOptionValue, getOptionLabel,
+    } = this.props;
 
     const hasError = formUtils.hasError(meta);
 
@@ -46,6 +48,8 @@ class SelectField extends React.Component<SelectFieldProps> {
       options,
       stretch,
       multiple,
+      isMulti,
+      creatable,
       filterOption,
       getOptionValue,
       getOptionLabel,