Merge pull request #272 from data-driven-forms/common-select

Use select componsition to style pf3 select

Author: rvsia

packages/common/package.json

@@ -4,8 +4,7 @@
   "description": "Common components, helpers and other pieces of code",
   "license": "Apache-2.0",
   "main": "index.js",
-  "scripts": {
-  },
+  "scripts": {},
   "repository": "[email protected]:data-driven-forms/react-forms.git",
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -47,7 +46,10 @@
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.1.0"
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "clsx": "^1.0.4",
+    "lodash": "^4.17.15",
+    "react-select": "^3.0.8"
   },
   "peerDependencies": {
     "react": "^16.6.0",

packages/common/src/prop-types-templates.js

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+
+export const optionsPropType = PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired, value: PropTypes.any }));

packages/common/src/select/index.js

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import ReactSelect from 'react-select';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import isEqual from 'lodash/isEqual';
+
+const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) => simpleValue
+  ? allOptions.filter(({ value }) => isMulti
+    ? stateValue.includes(value)
+    : isEqual(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, simpleValue, isMulti, pluckSingleValue, options, ...props } = this.props;
+    const { value, onChange, ...inputProps } = input;
+
+    const selectValue = pluckSingleValue ? isMulti ? value : Array.isArray(value) && value[0] ? value[0] : value : value;
+
+    return (
+      <ReactSelect
+        className={ clsx(classNamePrefix, {
+          'has-error': invalid,
+        }) }
+        { ...props }
+        { ...inputProps }
+        options={ options }
+        classNamePrefix={ classNamePrefix }
+        isMulti={ isMulti }
+        value={ getSelectValue(selectValue, simpleValue, isMulti, options) }
+        onChange={ option => handleSelectChange(option, simpleValue, isMulti, onChange) }
+      />
+    );
+  }
+}
+
+Select.propTypes = {
+  options: PropTypes.array,
+  onChange: PropTypes.func,
+  classNamePrefix: PropTypes.string.isRequired,
+  invalid: PropTypes.bool,
+  simpleValue: PropTypes.bool,
+  isMulti: PropTypes.bool,
+  pluckSingleValue: PropTypes.bool,
+};
+
+Select.defaultProps = {
+  options: [],
+  invalid: false,
+  simpleValue: true,
+  pluckSingleValue: true,
+};
+
+const DataDrivenSelect = ({ multi, ...props }) => {
+  const isMulti = props.isMulti || multi;
+  const closeMenuOnSelect = !isMulti;
+  return (
+    <Select
+      hideSelectedOptions={ false }
+      isMulti={ isMulti }
+      { ...props }
+      closeMenuOnSelect={ closeMenuOnSelect }
+    />
+  );
+};
+
+DataDrivenSelect.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  multi: PropTypes.bool,
+  placeholder: PropTypes.string,
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.string.isRequired,
+};
+
+DataDrivenSelect.defaultProps = {
+  placeholder: 'Choose...',
+  isSearchable: false,
+  isClearable: false,
+};
+
+export default DataDrivenSelect;

packages/common/src/utils/fn-to-string.js

@@ -0,0 +1,3 @@
+const fnToString = (fn = '') => fn.toString().replace(/\s+/g, ' ');
+
+export default fnToString;

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

@@ -10,23 +10,111 @@ import wizardSchema from './demo-schemas/wizard-schema';
 import sandbox from './demo-schemas/sandbox';
 import Switch from "../src/form-fields/switch-field";
 
+const loadOptions = () => new Promise((res) => {
+  setTimeout(() => {
+    fetch('https://dog.ceo/api/breeds/list/all')
+      .then(data => data.json())
+      .then(({ message: { bulldog } }) => bulldog.map(dog => ({ label: dog, value: dog })))
+      .then(data => res(data))
+  }, 250)
+}) 
+
+const selectSchema = {
+  fields: [{
+    component: 'select-field',
+    name: 'async-single',
+    label: 'Async single',
+    multi: true,
+    loadOptions
+  },{
+    component: 'select-field',
+    name: 'async-single-search',
+    label: 'Async single search',
+    isSearchable: true,
+    loadOptions
+  }, {
+    component: 'select-field',
+    name: 'async-multi-search',
+    label: 'Async multi search',
+    isSearchable: true,
+    multi: true,
+    loadOptions
+  }, {
+    component: 'select-field',
+    name: 'select-single',
+    label: 'Select single',
+    isDisabled: true,
+    options: [{
+      label: 'foo',
+      value: 123
+    }, {
+      label: 'bar',
+      value: 231
+    }]
+  }, {
+    component: 'select-field',
+    name: 'select-search',
+    label: 'Select search',
+    isRequired: true,
+    validateOnMount: true,
+    isDisabled: true,
+    isClearable: true,
+    multi: true,
+    isSearchable: true,
+    placeholder: 'Placeholder',
+    validate: [{
+      type: 'required-validator'
+    }],
+    options: [{
+      label: 'foo',
+      value: 123
+    }, {
+      label: 'bar',
+      value: 231
+    }, {
+      label: 'Super long option label, Super long option label, Super long option label, Super long option label, Super long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option label',
+      value: 'x'
+    }]
+  }, {
+    component: 'select-field',
+    name: 'select',
+    label: 'Select',
+    isRequired: true,
+    validateOnMount: true,
+    isClearable: true,
+    multi: false,
+    isSearchable: true,
+    placeholder: 'Placeholder',
+    validate: [{
+      type: 'required-validator'
+    }],
+    options: [{
+      label: 'foo',
+      value: 123
+    }, {
+      label: 'bar',
+      value: 231
+    }, {
+      label: 'Super long option label, Super long option label, Super long option label, Super long option label, Super long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option label',
+      value: 'x'
+    }]
+  }]
+}
+
 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}
             layoutMapper={layoutMapper}
-            schema={sandbox}
+            schema={selectSchema}
             onCancel={() => console.log('cancel')}
           />
         </Row>

packages/pf3-component-mapper/package.json

@@ -88,8 +88,9 @@
     ]
   },
   "dependencies": {
+    "clsx": "^1.0.4",
     "react-day-picker": "^7.3.2",
-    "react-select": "^2.1.2"
+    "react-select": "^3.0.8"
   },
   "resolutions": {
     "terser": "3.14.1"

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

@@ -7,9 +7,10 @@ import MultipleChoiceList from './multiple-choice-list';
 import RequiredLabel from './required-label';
 import Switch from './switch-field';
 import { DateTimePicker } from './date-time-picker/date-time-picker';
-import Select from './select';
+
 import RagioGroup from './radio';
 import PlainText from './plain-text';
+import Select from './select';
 
 const selectComponent = ({
   componentType,
@@ -51,9 +52,10 @@ const selectComponent = ({
   ),
   [componentTypes.SELECT_COMPONENT]: () => <div>
     <Select
+      classNamePrefix="ddorg__pf3-component-mapper__select"
       loadOptions={ loadOptions }
       options={ options }
-      invalid={ invalid }
+      invalid={ !!invalid }
       input={ input }
       placeholder={ placeholder }
       isSearchable={ isSearchable }

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ClearIndicator = ({
+  clearValue,
+  innerProps: { ref, ...restInnerProps },
+}) => (
+  <button { ...restInnerProps } onClick={ clearValue } className="ddorg__pf3-component-mapper__select__close-indicator">
+    <i className="fa fa-times" />
+  </button>
+);
+
+ClearIndicator.propTypes = {
+  innerProps: PropTypes.object.isRequired,
+  clearValue: PropTypes.func.isRequired,
+};
+
+export default ClearIndicator;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+const DropdownIndicator = ({ selectProps: { isFetching, value }}) => isFetching
+  ? <i className={ clsx('ddorg__pf3-component-mapper__select__dropdown-indicator fa fa-circle-o-notch spin', {
+    placeholder: value.length === 0,
+  }) } />
+  : <i className={ clsx('ddorg__pf3-component-mapper__select__dropdown-indicator fa fa-angle-down', {
+    placeholder: value.length === 0,
+  }) }/>;
+
+DropdownIndicator.propTypes = {
+  selectProps: PropTypes.shape({
+    isFetching: PropTypes.bool,
+    value: PropTypes.any,
+  }).isRequired,
+};
+
+export default DropdownIndicator;