feat(select-field): allow to provide any option

p3ol · Nov 22, 2019 · 6fd28a8 · 6fd28a8
1 parent 9c7d4b2
commit 6fd28a8
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/examples/components/SelectFieldPage.js b/examples/components/SelectFieldPage.js
@@ -18,6 +18,7 @@ class SelectFieldPage extends React.Component {
       autocomplete: {},
       forceLabel: {},
       animated: {},
+      acceptAnyOption: {},
       animating: false,
     };
 
@@ -235,6 +236,30 @@ class SelectFieldPage extends React.Component {
             <pre>{ JSON.stringify(this.state.animated, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Accept any option</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <SelectField
+              required={true}
+              disabled={this.props.disabled}
+              error={this.props.error}
+              boxed={this.props.boxed}
+              onChange={this.onChange.bind(this, 'acceptAnyOption')}
+              label="Label"
+              placeholder="Select one..."
+              options={this.objectOptions}
+              parseTitle={val => val.title}
+              parseValue={val => val.value}
+              value={{title: '100 items', value: 100}}
+              acceptAnyOption
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.acceptAnyOption, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/src/SelectField.js b/src/SelectField.js
@@ -35,6 +35,7 @@ class SelectField extends React.Component {
     parseTitle: PropTypes.func,
     parseValue: PropTypes.func,
     validate: PropTypes.func,
+    acceptAnyOption: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -77,7 +78,9 @@ class SelectField extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
+    const { parseValue } = this.props;
+
+    if (parseValue(prevProps.value) !== parseValue(this.props.value)) {
       this.onPropValueChange();
     }
 
@@ -104,12 +107,27 @@ class SelectField extends React.Component {
     });
   }
 
+  getIndex(value) {
+    const { options, parseValue } = this.props;
+    return options.findIndex((item) => parseValue(item) === parseValue(value));
+  }
+
   onPropValueChange(propagateChange = true) {
-    const { native, options, value, parseValue, autoComplete } = this.props;
+    const {
+      native,
+      options,
+      value,
+      autoComplete,
+      acceptAnyOption,
+    } = this.props;
+
+    if (value && acceptAnyOption && this.getIndex(value) === -1) {
+      options.unshift(value);
+    }
 
     const index = typeof value === 'undefined' || value === null
       ? -1
-      : options.findIndex((item) => parseValue(item) === value);
+      : this.getIndex(value);
 
     if (native && !autoComplete) {
       this.onNativeChange(null, index, propagateChange);
@@ -230,7 +248,7 @@ class SelectField extends React.Component {
       : placeholder;
   }
 
-  getIndex() {
+  getNativeIndex() {
     const { options, parseValue } = this.props;
     const value = this.getValue();
 
@@ -310,11 +328,12 @@ class SelectField extends React.Component {
             <select
               { ...omit(rest, [
                 'validate', 'parseValue', 'autoCompleteThreshold', 'placement',
+                'acceptAnyOption',
               ]) }
               id={id}
               ref={ref => this.nativeField = ref}
               className="field"
-              value={this.getIndex()}
+              value={this.getNativeIndex()}
               disabled={disabled}
               onChange={this.onNativeChange.bind(this)}
             >
@@ -335,6 +354,7 @@ class SelectField extends React.Component {
             <Dropdown
               { ...omit(rest, [
                 'validate', 'parseValue', 'autoCompleteThreshold', 'onChange',
+                'acceptAnyOption',
               ]) }
               isOpen={opened}
               theme={theme}