Added handling of simple value to common select

Author: Hyperkid123

packages/common/src/select/index.js

@@ -3,12 +3,39 @@ import ReactSelect from 'react-select';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
+const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) => simpleValue
+  ? allOptions.filter(({ value }) => isMulti
+    ? stateValue.includes(value)
+    : value === stateValue)
+  : stateValue;
+
+const handleSelectChange = (option, simpleValue, isMulti, onChange) => {
+  const sanitizedOption =  !option && isMulti ? [] : option;
+  return simpleValue
+    ? onChange(isMulti
+      ? sanitizedOption.map(item => item.value)
+      : sanitizedOption ? sanitizedOption.value : undefined)
+    : onChange(sanitizedOption);
+};
+
 class Select extends Component {
   render() {
+    const { input, invalid, classNamePrefix, options, simpleValue, isMulti, ...props } = this.props;
+    const { value, onChange, ...inputProps } = input;
+
     return (
-      <ReactSelect className={ clsx(this.props.classNamePrefix, {
-        'has-error': this.props.invalid,
-      }) } { ...this.props } {...this.props.input} />
+      <ReactSelect
+        className={ clsx(classNamePrefix, {
+          'has-error': invalid,
+        }) }
+        { ...props }
+        { ...inputProps }
+        classNamePrefix={ classNamePrefix }
+        options={ options }
+        isMulti={ isMulti }
+        value={ getSelectValue(value, simpleValue, isMulti, options) }
+        onChange={ option => handleSelectChange(option, simpleValue, isMulti, onChange) }
+      />
     );
   }
 }
@@ -18,11 +45,14 @@ Select.propTypes = {
   onChange: PropTypes.func,
   classNamePrefix: PropTypes.string.isRequired,
   invalid: PropTypes.bool,
+  simpleValue: PropTypes.bool,
+  isMulti: PropTypes.bool,
 };
 
 Select.defaultProps = {
   options: [],
   invalid: false,
+  simpleValue: true,
 };
 
 const DataDrivenSelect = ({ multi, ...props }) => {

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

@@ -12,6 +12,17 @@ import Switch from "../src/form-fields/switch-field";
 
 const selectSchema = {
   fields: [{
+    component: 'select-field',
+    name: 'select-single',
+    label: 'Select single',
+    options: [{
+      label: 'foo',
+      value: 123
+    }, {
+      label: 'bar',
+      value: 231
+    }]
+  }, {
     component: 'select-field',
     name: 'select-search',
     label: 'Select search',
@@ -62,16 +73,13 @@ const selectSchema = {
 
 class App extends React.Component {
   render() {
-    const initialValues = {
-      date_control_1: new Date()
-    }
     return (
     <div>
       <h1>Pf3 component mapper</h1>
       <Grid>
         <Row>
           <FormRenderer
-            initialValues={initialValues}
+            initialValues={{}}
             onSubmit={console.log}
             schemaType="default"
             formFieldsMapper={formFieldsMapper}

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

@@ -6,16 +6,16 @@ import isEqual from 'lodash/isEqual';
 import './react-select.scss';
 
 /**
- * New implementation of select of PF4
+ * New implementation of select of PF3
  */
 
 import NewSelect from '@data-driven-forms/common/src/select';
-import './react-select.scss';
 import Option from './option';
 import DropdownIndicator from './dropdown-indicator';
 import ClearIndicator from './clear-indicator';
 import { DropdownButton, FormControl } from 'patternfly-react';
 import clsx from 'clsx';
+import './react-select.scss';
 
 const fnToString = (fn = '') => fn.toString().replace(/\s+/g, ' ');
 
@@ -325,21 +325,25 @@ export class P3Select extends Component {
                 DropdownIndicator: null,
                 IndicatorSeparator: null,
                 Placeholder: () => null,
-                Input: ({ selectProps, cx, isHidden, isDisabled, innerRef, getStyles, ...props }) => <SearchInput id={ this.props.input.name } { ...props } />,
+                Input: ({ selectProps, cx, isHidden, isDisabled, innerRef, getStyles, ...props }) =>
+                  <SearchInput id={ this.props.input.name } { ...props } />,
               }} /> }
           </DropdownButton>
         </div>
       );
     }
 
     return (
-      <NewSelect { ...props }
+      <NewSelect
+        { ...this.props }
+        input={ input }
         className={ props.classNamePrefix }
         components={{
           ClearIndicator,
           Option,
           DropdownIndicator,
-        }} />
+        }}
+      />
     );
 
   }