Merge pull request #180 from data-driven-forms/allow-array-value-select

Allow array value select

Author: rvsia

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -261,6 +261,7 @@ const output = {
                   title: 'Dropdown',
                   dataType: 'string',
                   component: components.SELECT_COMPONENT,
+                  initialValue: [ '1' ],
                   isSearchable: true,
                   options: [
                     {

packages/pf3-component-mapper/src/form-fields/select/index.js

@@ -86,10 +86,12 @@ class Select extends Component {
       loadingMessage,
       simpleValue,
       options: _options, // catch options from props, if they are undefined (bcs they would overwrite the state)
+      pluckSingleValue,
       ...rest
     } = this.props;
 
     const { options, isLoading } = this.state;
+    const { value, ...inputRest } = input;
 
     if (isLoading) {
       return <ReactSelect
@@ -100,10 +102,12 @@ class Select extends Component {
       />;
     }
 
+    const selectValue = pluckSingleValue ? rest.multi ? value : Array.isArray(value) && value[0] ? value[0] : value : value;
+
     return <ReactSelect
       className={ `final-form-select ${invalid ? 'has-error' : ''}` }
       styles={ customStyles }
-      { ...input }
+      { ...inputRest }
       options={ options }
       placeholder={ placeholder || 'Please choose' }
       isMulti={ rest.multi }
@@ -121,7 +125,7 @@ class Select extends Component {
           ? option.map(item => item.value)
           : option ? option.value : undefined)
         : input.onChange(option) }
-      value={ simpleValue ? options.filter(({ value }) => rest.multi ? input.value.includes(value) : value === input.value) : input.value }
+      value={ simpleValue ? options.filter(({ value }) => rest.multi ? input.value.includes(value) : isEqual(value, selectValue)) : selectValue }
       { ...rest }
     />;
   }
@@ -135,6 +139,7 @@ Select.propTypes = {
     value: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
+      PropTypes.array,
     ]),
   })),
   invalid: PropTypes.oneOfType([
@@ -156,6 +161,7 @@ Select.propTypes = {
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   loadingMessage: PropTypes.string,
+  pluckSingleValue: PropTypes.bool,
 };
 
 Select.defaultProps = {
@@ -164,6 +170,7 @@ Select.defaultProps = {
   },
   loadingMessage: 'Loading...',
   simpleValue: true,
+  pluckSingleValue: true,
 };
 
 export default Select;

packages/pf3-component-mapper/src/tests/form-fields/__snapshots__/select.test.js.snap

@@ -114,6 +114,7 @@ exports[`<SelectField /> should mount Async correctly 1`] = `
                 },
               ]
             }
+            pluckSingleValue={true}
             simpleValue={true}
           >
             <StateManager

packages/pf3-component-mapper/src/tests/form-fields/select.test.js

@@ -5,6 +5,7 @@ import SelectPF3 from '../../form-fields/select/index';
 import { mount } from 'enzyme';
 import Select from 'react-select';
 import isEqual from 'lodash/isEqual';
+import ReactSelect, { components } from 'react-select';
 
 describe('<SelectField />', () => {
   let initialProps;
@@ -179,5 +180,23 @@ describe('<SelectField />', () => {
         });
       });
     });
+
+    it('should pick correct value for single select when passed array', () => {
+      const wrapper = mount(<SelectField { ...initialProps } input={{ ...initialProps.input, value: [ 2 ]}}/>);
+      expect(wrapper.find(ReactSelect).instance().state.value).toEqual([{ value: 2, label: 'option 2' }]);
+    });
+
+    it('should pick correct array value for single select when passed array', () => {
+      let wrapper = mount(<SelectField { ...initialProps } input={{ ...initialProps.input, value: [ 2 ]}} pluckSingleValue={ false }/>);
+      expect(wrapper.find(ReactSelect).instance().state.value).toEqual([]);
+
+      wrapper = mount(<SelectField
+        { ...initialProps }
+        options={ [ ...initialProps.options, { label: 'array options', value: [ 2 ]}] }
+        input={{ ...initialProps.input, value: [ 2 ]}}
+        pluckSingleValue={ false }
+      />);
+      expect(wrapper.find(ReactSelect).instance().state.value).toEqual([{ label: 'array options', value: [ 2 ]}]);
+    });
   });
 });

packages/react-renderer-demo/src/docs-components/pf3-select.md

@@ -1,3 +1,11 @@
+### Select
+
+There are some additional props for PF3 variant to match PF3 requirements.
+
+|prop name|type|default value|description|
+|---------|----|-------------|-----------|
+|pluckSingleValue|`bool`|`true`|If a value is an array, component will pick its first item and set it as a new value. This will override the value in state from `[2, 4, 5]` to `2` for example.|
+
 ### Async Select
 
 PF3 Select allows to load the options asynchronously.