Refactor Dropdown & Fix multi option removed.

Author: T4rk1n

Diff for: components/dash-core-components/src/fragments/Dropdown.react.js

@@ -1,5 +1,5 @@
-import {isNil, pluck, omit, type} from 'ramda';
-import React, {Component} from 'react';
+import {isNil, pluck, omit, type, without} from 'ramda';
+import React, {useState, useCallback, useEffect, useMemo} from 'react';
 import ReactDropdown from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
 import '../components/css/[email protected]';
@@ -23,88 +23,104 @@ const TOKENIZER = {
 
 const DELIMITER = ',';
 
-export default class Dropdown extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            filterOptions: createFilterOptions({
-                options: sanitizeOptions(props.options),
+const Dropdown = props => {
+    const {
+        id,
+        clearable,
+        multi,
+        options,
+        setProps,
+        style,
+        loading_state,
+        value,
+    } = props;
+    const [optionsCheck, setOptionsCheck] = useState(null);
+    const [sanitizedOptions, filterOptions] = useMemo(() => {
+        const sanitized = sanitizeOptions(options);
+        return [
+            sanitized,
+            createFilterOptions({
+                options: options,
                 tokenizer: TOKENIZER,
             }),
-        };
-    }
+        ];
+    }, [options]);
 
-    UNSAFE_componentWillReceiveProps(newProps) {
-        if (newProps.options !== this.props.options) {
-            this.setState({
-                filterOptions: createFilterOptions({
-                    options: sanitizeOptions(newProps.options),
-                    tokenizer: TOKENIZER,
-                }),
-            });
-        }
-    }
+    const selectedValue = useMemo(
+        () => (type(value) === 'Array' ? value.join(DELIMITER) : value),
+        [value]
+    );
 
-    render() {
-        const {
-            id,
-            clearable,
-            multi,
-            options,
-            setProps,
-            style,
-            loading_state,
-            value,
-        } = this.props;
-        const {filterOptions} = this.state;
-        let selectedValue;
-        if (type(value) === 'Array') {
-            selectedValue = value.join(DELIMITER);
-        } else {
-            selectedValue = value;
-        }
-        return (
-            <div
-                id={id}
-                className="dash-dropdown"
-                style={style}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
+    const onChange = useCallback(
+        selectedOption => {
+            if (multi) {
+                let value;
+                if (isNil(selectedOption)) {
+                    value = [];
+                } else {
+                    value = pluck('value', selectedOption);
                 }
-            >
-                <ReactDropdown
-                    filterOptions={filterOptions}
-                    options={sanitizeOptions(options)}
-                    value={selectedValue}
-                    onChange={selectedOption => {
-                        if (multi) {
-                            let value;
-                            if (isNil(selectedOption)) {
-                                value = [];
-                            } else {
-                                value = pluck('value', selectedOption);
-                            }
-                            setProps({value});
-                        } else {
-                            let value;
-                            if (isNil(selectedOption)) {
-                                value = null;
-                            } else {
-                                value = selectedOption.value;
-                            }
-                            setProps({value});
-                        }
-                    }}
-                    onInputChange={search_value => setProps({search_value})}
-                    backspaceRemoves={clearable}
-                    deleteRemoves={clearable}
-                    inputProps={{autoComplete: 'off'}}
-                    {...omit(['setProps', 'value', 'options'], this.props)}
-                />
-            </div>
-        );
-    }
-}
+                setProps({value});
+            } else {
+                let value;
+                if (isNil(selectedOption)) {
+                    value = null;
+                } else {
+                    value = selectedOption.value;
+                }
+                setProps({value});
+            }
+        },
+        [multi]
+    );
+
+    const onInputChange = useCallback(
+        search_value => setProps({search_value}),
+        []
+    );
+
+    useEffect(() => {
+        if (optionsCheck !== sanitizedOptions && !isNil(value)) {
+            const values = sanitizedOptions.map(option => option.value);
+            if (multi) {
+                const invalids = value.filter(v => !values.includes(v));
+                if (invalids.length) {
+                    setProps({value: without(invalids, value)});
+                }
+            } else {
+                if (!values.includes(selectedValue)) {
+                    setProps({value: null});
+                }
+            }
+            setOptionsCheck(sanitizedOptions);
+        }
+    }, [sanitizedOptions, optionsCheck, multi, value, selectedValue]);
+
+    return (
+        <div
+            id={id}
+            className="dash-dropdown"
+            style={style}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        >
+            <ReactDropdown
+                filterOptions={filterOptions}
+                options={sanitizeOptions(options)}
+                value={selectedValue}
+                onChange={onChange}
+                onInputChange={onInputChange}
+                backspaceRemoves={clearable}
+                deleteRemoves={clearable}
+                inputProps={{autoComplete: 'of'}}
+                {...omit(['setProps', 'value', 'options'], props)}
+            />
+        </div>
+    );
+};
 
 Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
+
+export default Dropdown;