From 54eb925a1b922c9467f10c7014520d66c00f9dc7 Mon Sep 17 00:00:00 2001
From: Julien Ducro <julien.ducro@deskpro.com>
Date: Fri, 27 Jul 2018 09:49:13 +0200
Subject: [PATCH] Fix MultipleDropDown

---
 package-lock.json                           |  6 +--
 package.json                                |  2 +-
 src/Components/Choices/MultipleDropDown.jsx | 46 +++++++++++----------
 src/style.css                               | 14 +++----
 tests/storybook/multiple_dropdown.jsx       |  2 +-
 5 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5c5ae3ca..004e5d12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,9 +60,9 @@
       "integrity": "sha512-j6OPXm0OHHo07wmBqAzaquN4mbEej5xcEz6u5JJdLRzrKTK0oQGhkFUGD9K46j75hkvuvm8tW5FuX20ok/cGsQ=="
     },
     "@deskpro/react-datepicker-hijri": {
-      "version": "1.4.2-beta.1",
-      "resolved": "https://registry.npmjs.org/@deskpro/react-datepicker-hijri/-/react-datepicker-hijri-1.4.2-beta.1.tgz",
-      "integrity": "sha512-+KzwjXc5kYh17kh5ELjs7/McOeVd9FquW/krOFzOI75wq0ETbCRhsQ67P8YmD8lYzRk9SzVe/NYIGRWJrFzmfQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@deskpro/react-datepicker-hijri/-/react-datepicker-hijri-1.5.0.tgz",
+      "integrity": "sha512-O3CcdED1NVVU+aY+2dPOufkQFBbzX8GR5qMH6T7gdY7P4Jcmpjcq6f7ofSVF6twhrobOsvh+k7N0tU0fK9vJvw==",
       "requires": {
         "classnames": "^2.2.5",
         "prop-types": "^15.6.0",
diff --git a/package.json b/package.json
index e2ac5a55..308411a0 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "homepage": "https://deskpro.github.io/portal-components",
   "dependencies": {
     "@deskpro/js-utils": "^1.0.4",
-    "@deskpro/react-datepicker-hijri": "^1.4.2-beta.1",
+    "@deskpro/react-datepicker-hijri": "^1.5.0",
     "@storybook/addon-knobs": "^3.4.3",
     "ajv": "^6.5.2",
     "classnames": "^2.2.5",
diff --git a/src/Components/Choices/MultipleDropDown.jsx b/src/Components/Choices/MultipleDropDown.jsx
index 083c4fa8..1c7acddf 100644
--- a/src/Components/Choices/MultipleDropDown.jsx
+++ b/src/Components/Choices/MultipleDropDown.jsx
@@ -89,33 +89,35 @@ class MultipleDropDown extends Field {
   };
 
   renderField = (form) => {
-    const { name, options, ...props } = this.props;
-    return (
-      <ReactSelect
-        value={getIn(form.values, name)}
-        name={name}
-        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)}
-        classNamePrefix="react-select"
-        isMulti
-        {...props}
-      />
-    );
+    const { name, dataSource, ...props } = this.props;
+    if (Array.isArray(dataSource.getOptions)) {
+      return (
+        <ReactSelect
+          value={dataSource.getOptions.filter(o => getIn(form.values, name).includes(o.value))}
+          name={name}
+          isClearable={false}
+          onChange={value => this.handleChange(form, value)}
+          onBlur={() => form.setFieldTouched(name, true)}
+          options={dataSource.getOptions}
+          hideSelectedOptions={false}
+          menuIsOpen
+          components={{ Option, SelectContainer }}
+          optionRenderer={option => this.renderOption(option, form)}
+          classNamePrefix="react-select"
+          isMulti
+          {...props}
+        />
+      );
+    }
+    return null;
   }
 }
 
 MultipleDropDown.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,
 };
 
diff --git a/src/style.css b/src/style.css
index 4cd3a405..fb12e50d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -80,8 +80,7 @@
   }
   & input:focus ~ .dp-pc_label,
   &:not(.dp-pc_empty) .dp-pc_label,
-  & .Select.is-focused ~ .dp-pc_label,
-  & .Select.is-open ~ .dp-pc_label {
+  & .react-select__is-focused ~ .dp-pc_label {
     top: 11px;
     left: 10px;
     font-size: 10px;
@@ -335,24 +334,23 @@
       & .react-select__multi-value {
         line-height: 1.2;
         background-color: var(--option-background);
-        border-color: var(--checkbox-border);
         color: var(--text-color);
         border-radius: 4px;
-        border-width: 2px;
+        border: 2px solid var(--checkbox-border);
         margin-top: 15px;
       }
     }
-    & .Select-control .Select-value-label {
+    & .react-select__multi-value__label {
       position: static;
       font-size: 12px;
     }
-    & .Select-value-icon {
+    & .react-select__multi-value__remove {
       border-right: none;
       font-size: 18px;
       padding: 0 5px;
     }
-    & .Select-control .Select-input > input {
-      margin-top: 6px;
+    & .react-select__input > input {
+      margin-top: 12px;
     }
   }
   & .react-select__menu {
diff --git a/tests/storybook/multiple_dropdown.jsx b/tests/storybook/multiple_dropdown.jsx
index 13feb093..40479a48 100644
--- a/tests/storybook/multiple_dropdown.jsx
+++ b/tests/storybook/multiple_dropdown.jsx
@@ -22,7 +22,7 @@ storiesOf('Choices', module)
         <Form>
           <MultipleDropDown
             name="filling"
-            options={options}
+            dataSource={{ getOptions: options }}
             label="Filling"
           />
           <Submit>Submit</Submit>