Update to react 2.0.0 + add async on dropdown

deskpro · Jul 25, 2018 · 063018f · 063018f
1 parent a70876b
commit 063018f
Show file tree

Hide file tree

Showing 13 changed files with 4,299 additions and 4,106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,15 @@
     "@storybook/addon-knobs": "^3.4.3",
     "ajv": "^6.5.2",
     "classnames": "^2.2.5",
+    "emotion": "^9.2.6",
     "formik": "^0.11.11",
     "immutable": "^3.8.2",
     "lodash": "^4.17.10",
     "moment": "^2.22.1",
     "moment-hijri": "^2.0.1",
     "raw-loader": "^0.5.1",
     "react-dropzone": "^4.2.9",
-    "react-select": "^1.2.1",
+    "react-select": "^2.0.0",
     "react-svg-inline": "^2.1.0",
     "react-textarea-autosize": "^6.1.0",
     "yup": "^0.24.1"

diff --git a/src/Components/Choices/DropDown.jsx b/src/Components/Choices/DropDown.jsx
@@ -1,27 +1,80 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getIn } from 'formik';
-import ReactSelect from 'react-select';
-
+import ReactSelect, { components } from 'react-select';
+import AsyncSelect from 'react-select/lib/Async';
+import classNames from 'classnames';
 import Field from '../Field';
 
+
+const SelectContainer = ({ children, ...props }) => (
+  <components.SelectContainer {...props} className={classNames({ 'react-select__is-focused': props.isFocused })}>
+    {children}
+  </components.SelectContainer>
+);
+
+SelectContainer.propTypes = components.SelectContainer.propTypes;
+
 class DropDown extends Field {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: null
+    };
+  }
+
   handleChange = (form, value) => {
     const { name, handleChange } = this.props;
+    this.setState({
+      value
+    });
     const newValue = value ? value.value : null;
     form.setFieldValue(name, newValue);
     handleChange(newValue);
   };
 
+  loadOptions = (form, inputValue) => {
+    const { dataSource, name } = this.props;
+    return dataSource.getOptions(inputValue).then((options) => {
+      const value = options.find(o => o.value === getIn(form.values, name));
+      this.setState({
+        value
+      });
+      return options;
+    });
+  };
+
   renderField = (form) => {
-    const { name, options, ...props } = this.props;
+    const {
+      name, dataSource, isClearable, ...props
+    } = this.props;
+    if (Array.isArray(dataSource.getOptions)) {
+      return (
+        <ReactSelect
+          value={dataSource.getOptions.find(o => o.value === getIn(form.values, name))}
+          name={name}
+          isClearable={isClearable}
+          components={{ SelectContainer }}
+          onChange={value => this.handleChange(form, value)}
+          onBlur={() => form.setFieldTouched(name, true)}
+          options={dataSource.getOptions}
+          classNamePrefix="react-select"
+          {...props}
+        />
+      );
+    }
     return (
-      <ReactSelect
-        value={getIn(form.values, name)}
+      <AsyncSelect
+        value={this.state.value}
         name={name}
-        onChange={value => this.handleChange(form, value)}
+        isClearable={isClearable}
+        onChange={(value, action) => this.handleChange(form, value, action)}
         onBlur={() => form.setFieldTouched(name, true)}
-        options={options}
+        defaultOptions
+        cacheOptions
+        components={{ SelectContainer }}
+        loadOptions={inputValue => this.loadOptions(form, inputValue)}
+        classNamePrefix="react-select"
         {...props}
       />
     );
@@ -30,15 +83,16 @@ class DropDown extends Field {
 
 DropDown.propTypes = {
   ...Field.propTypes,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    value: PropTypes.any.isRequired
-  })),
+  dataSource: PropTypes.shape({
+    getOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.array]).isRequired,
+  }).isRequired,
   handleChange: PropTypes.func,
+  isClearable:  PropTypes.bool,
 };
 
 DropDown.defaultProps = {
-  handleChange() {}
+  handleChange() {},
+  isClearable: true,
 };
 
 export default DropDown;
diff --git a/src/Components/Choices/MultipleDropDown.jsx b/src/Components/Choices/MultipleDropDown.jsx
@@ -1,11 +1,63 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { css } from 'emotion';
 import { getIn } from 'formik';
-import ReactSelect from 'react-select';
+import ReactSelect, { components } from 'react-select';
 
 import Field from '../Field';
 
+const SelectContainer = ({ children, ...props }) => (
+  <components.SelectContainer {...props} className={classNames({ 'react-select__is-focused': props.isFocused })}>
+    {children}
+  </components.SelectContainer>
+);
+
+SelectContainer.propTypes = components.SelectContainer.propTypes;
+
+const Option = (props) => {
+  const {
+    className,
+    cx,
+    getStyles,
+    label,
+    isDisabled,
+    isFocused,
+    isSelected,
+    innerRef,
+    innerProps
+  } = props;
+  return (
+    <div
+      ref={innerRef}
+      className={cx(
+        css(getStyles('option', props)),
+        {
+          option:                true,
+          'option--is-disabled': isDisabled,
+          'option--is-focused':  isFocused,
+          'option--is-selected': isSelected,
+        },
+        'dp-pc_checkbox',
+        className
+      )}
+      {...innerProps}
+    >
+      <span
+        className="dp-pc_checkbox__checkbox"
+      >
+        <input type="checkbox" checked={isSelected} readOnly />
+        <i />
+        <span className="dp-pc_checkbox__label">
+          {label}
+        </span>
+      </span>
+    </div>
+  );
+};
+
+Option.propTypes = components.Option.propTypes;
+
 class MultipleDropDown extends Field {
   handleChange = (form, value) => {
     const { name, handleChange } = this.props;
@@ -42,13 +94,16 @@ class MultipleDropDown extends Field {
       <ReactSelect
         value={getIn(form.values, name)}
         name={name}
-        clearable={false}
+        isClearable={false}
         onChange={value => this.handleChange(form, value)}
         onBlur={() => form.setFieldTouched(name, true)}
         options={options}
         removeSelected={false}
+        menuIsOpen
+        components={{ Option, SelectContainer }}
         optionRenderer={option => this.renderOption(option, form)}
-        multi
+        classNamePrefix="react-select"
+        isMulti
         {...props}
       />
     );

diff --git a/src/Components/TicketDepartment.jsx b/src/Components/TicketDepartment.jsx
@@ -14,7 +14,7 @@ class TicketDepartment extends React.Component {
       <DropDown
         name="department"
         label="Department"
-        options={departments}
+        dataSource={{ getOptions: departments }}
         handleChange={handleChange}
         clearable={false}
       />

diff --git a/src/Components/TicketField.jsx b/src/Components/TicketField.jsx
@@ -40,7 +40,8 @@ class TicketField extends React.Component {
         break;
       case 'choice':
         Component = DropDown;
-        props.options = field.getIn(['data', 'choices'], [])
+        props.dataSource = {};
+        props.dataSource.getOptions = field.getIn(['data', 'choices'], [])
           .toArray().map(option => ({ value: option.get('id'), label: option.get('title') }));
         break;
       case 'radio':
@@ -58,7 +59,8 @@ class TicketField extends React.Component {
         break;
       case 'multichoice':
         Component = MultipleDropDown;
-        props.options = field.getIn(['data', 'choices'], [])
+        props.dataSource = {};
+        props.dataSource.getOptions = field.getIn(['data', 'choices'], [])
           .toArray().map(option => ({ value: option.get('id'), label: option.get('title') }));
         break;
       case 'text':