Revert changes to Select component (#250)

Removed debounce time again.
equinor · Sep 7, 2022 · 44b73fc · 44b73fc
1 parent 292af0a
commit 44b73fc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 86 deletions.
diff --git a/react/src/lib/components/Select/Select.stories.tsx b/react/src/lib/components/Select/Select.stories.tsx
@@ -17,38 +17,14 @@ export default {
     },
 } as ComponentMeta<typeof Select>;
 
-const Template: ComponentStory<typeof Select> = (args) => {
-    const { setProps, debounce_time_ms, ...other } = args;
-
-    const [selected, setSelected] = React.useState<
-        string | number | (string | number)[]
-    >([]);
-
-    return (
-        <>
-            <Select
-                setProps={(prop) => setSelected(prop.value)}
-                debounce_time_ms={debounce_time_ms}
-                {...other}
-            />
-            <div>{`Debounce time: ${debounce_time_ms?.toString()} ms`}</div>
-            <div>{`Selected values: ${selected.toString()}`}</div>
-        </>
-    );
-};
+const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
 
 export const Basic = Template.bind({});
 Basic.args = {
     id: Select.defaultProps?.id || "select-component",
-    size: Select.defaultProps?.size || 5,
-    options: [
-        { label: 1, value: 1 },
-        { label: 2, value: 2 },
-        { label: 3, value: 3 },
-        { label: 4, value: 4 },
-    ],
+    size: Select.defaultProps?.size || 4,
+    options: Select.defaultProps?.options || [],
     value: Select.defaultProps?.value || [],
-    debounce_time_ms: Select.defaultProps?.debounce_time_ms || 1000,
     multi: Select.defaultProps?.multi || true,
     className: Select.defaultProps?.className || "",
     style: Select.defaultProps?.style || {},
@@ -57,7 +33,4 @@ Basic.args = {
     persistence: Select.defaultProps?.persistence || false,
     persisted_props: Select.defaultProps?.persisted_props || ["value"],
     persistence_type: Select.defaultProps?.persistence_type || "local",
-    setProps: () => {
-        return;
-    },
 };
diff --git a/react/src/lib/components/Select/Select.tsx b/react/src/lib/components/Select/Select.tsx
@@ -7,7 +7,6 @@
 
 import React from "react";
 import PropTypes, { InferProps } from "prop-types";
-import { isEqual } from "lodash";
 
 import {
     getPropsWithMissingValuesSetToDefault,
@@ -67,12 +66,6 @@ const propTypes = {
             ]).isRequired
         ).isRequired,
     ]),
-    /**
-     * Debounce time for props update for user. The value prop for selected
-     * values for Dash callbacks are debounced with the configured number
-     * of milliseconds.
-     */
-    debounce_time_ms: PropTypes.number,
     /**
      * If true, the user can select multiple values
      */
@@ -132,7 +125,6 @@ const defaultProps: Optionals<InferProps<typeof propTypes>> = {
     size: 4,
     value: [],
     multi: true,
-    debounce_time_ms: 500,
     style: {},
     parent_style: {},
     className: "",
@@ -157,57 +149,31 @@ export const Select: React.FC<InferProps<typeof propTypes>> = (
         parent_style,
         value,
         multi,
-        debounce_time_ms: debounce_time_ms,
         size,
         className,
         style,
         options,
         setProps,
     } = getPropsWithMissingValuesSetToDefault(props, defaultProps);
 
-    const [selectedValues, setSelectedValues] =
-        React.useState<string | number | (string | number)[]>(value);
-
-    const debounceTimer =
-        React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    React.useEffect(() => {
-        if (!isEqual(value, selectedValues)) {
-            setSelectedValues(value);
-        }
-    }, [value]);
-
-    React.useEffect(() => {
-        return () => {
-            debounceTimer.current && clearTimeout(debounceTimer.current);
-        };
-    }, []);
-
-    const handleChange = React.useCallback(
-        (e: React.ChangeEvent) => {
-            const selectedOptions = [].slice.call(
-                (e.target as HTMLSelectElement).selectedOptions
-            );
-            const values = options
-                .filter((option) =>
-                    selectedOptions.some(
-                        (selectedOption: HTMLOptionElement) =>
-                            selectedOption.value === option.value.toString()
-                    )
+    const handleChange = (e: React.ChangeEvent) => {
+        const selectedOptions = [].slice.call(
+            (e.target as HTMLSelectElement).selectedOptions
+        );
+        const values: (string | number)[] = [];
+
+        for (let i = 0; i < options.length; i++) {
+            if (
+                selectedOptions.some(
+                    (el: HTMLOptionElement) =>
+                        el.value === options[i].value.toString()
                 )
-                .map((option) => option.value);
-
-            if (!isEqual(values, selectedValues)) {
-                setSelectedValues(values);
+            ) {
+                values.push(options[i].value);
             }
-
-            debounceTimer.current && clearTimeout(debounceTimer.current);
-            debounceTimer.current = setTimeout(() => {
-                setProps({ value: values });
-            }, debounce_time_ms);
-        },
-        [debounceTimer.current, setProps]
-    );
+        }
+        setProps({ value: values });
+    };
 
     return (
         <div
@@ -217,12 +183,11 @@ export const Select: React.FC<InferProps<typeof propTypes>> = (
         >
             <select
                 value={
-                    selectedValues
-                        ? typeof selectedValues === "string" ||
-                          typeof selectedValues === "number"
-                            ? selectedValues
-                            : (selectedValues as (string | number)[]).map(
-                                  (el) => el.toString()
+                    value
+                        ? typeof value === "string" || typeof value === "number"
+                            ? value
+                            : (value as (string | number)[]).map((el) =>
+                                  el.toString()
                               )
                         : ""
                 }