Merge pull request #147 from the-deep/fix/select-input-options-sorting

Only sort/filter options when sortFunction is defined
the-deep · Apr 19, 2022 · e7d6364 · e7d6364
2 parents 14af098 + 615461e
commit e7d6364
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 76 deletions.
diff --git a/src/components/MultiSelectInput/index.tsx b/src/components/MultiSelectInput/index.tsx
@@ -8,6 +8,8 @@ type Def = { containerClassName?: string };
 type NameType = string | number | undefined;
 type OptionKey = string | number;
 
+// FIXME: the omissions is not correct
+// we need multiple omission for SearchMultiSelectInputProps
 export type Props<
     T extends OptionKey,
     K extends NameType,
@@ -21,16 +23,13 @@ function MultiSelectInput<T extends OptionKey, K extends NameType, O extends obj
     props: Props<T, K, O, P>,
 ) {
     const {
-        name,
         options,
-        totalOptionsCount, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
         ...otherProps
     } = props;
 
     return (
         <SearchMultiSelectInput
             {...otherProps}
-            name={name}
             options={options}
             sortFunction={rankedSearchOnList}
             searchOptions={options}

diff --git a/src/components/SearchMultiSelectInput/index.tsx b/src/components/SearchMultiSelectInput/index.tsx
@@ -2,14 +2,14 @@ import React, { useCallback, useMemo, useState } from 'react';
 import {
     _cs,
     listToMap,
-    isDefined,
     unique,
+    isDefined,
 } from '@togglecorp/fujs';
 import SelectInputContainer, {
     Props as SelectInputContainerProps,
 } from '../SelectInputContainer';
 import DismissibleList from '../DismissibleList';
-import { rankedSearchOnList, genericMemo } from '../../utils';
+import { genericMemo } from '../../utils';
 import Option from './Option';
 
 import styles from './styles.css';
@@ -42,6 +42,8 @@ export type Props<
     onShowDropdownChange?: (value: boolean) => void;
     selectedOptionContainerClassName?: string;
     selectionListShown?: boolean;
+    selectedOptionsAtTop?: boolean;
+    ellipsizeOptions?: boolean;
 }, OMISSION> & (
     SelectInputContainerProps<T, K, O, P,
         'name'
@@ -65,9 +67,7 @@ export type Props<
         | 'onFocusedKeyChange'
         | 'hasValue'
     >
-) & {
-    ellipsizeOptions?: boolean;
-};
+);
 
 const emptyList: unknown[] = [];
 
@@ -100,6 +100,7 @@ function SearchMultiSelectInput<
         readOnly,
         inputDescription,
         ellipsizeOptions,
+        selectedOptionsAtTop = true,
         ...otherProps
     } = props;
 
@@ -118,13 +119,6 @@ function SearchMultiSelectInput<
         [key: string]: boolean,
     }>({});
 
-    const optionsMap = useMemo(
-        () => (
-            listToMap(options, keySelector, (i) => i)
-        ),
-        [options, keySelector],
-    );
-
     const optionsLabelMap = useMemo(
         () => (
             listToMap(options, keySelector, labelSelector)
@@ -139,6 +133,13 @@ function SearchMultiSelectInput<
         [value, optionsLabelMap],
     );
 
+    const optionsMap = useMemo(
+        () => (
+            listToMap(options, keySelector, (i) => i)
+        ),
+        [options, keySelector],
+    );
+
     // NOTE: we can skip this calculation if optionsShowInitially is false
     const selectedOptions = useMemo(
         () => value.map((valueKey) => optionsMap[valueKey]).filter(isDefined),
@@ -147,10 +148,18 @@ function SearchMultiSelectInput<
 
     const realOptions = useMemo(
         () => {
-            const allOptions = unique(
-                [...searchOptions, ...selectedOptions],
-                keySelector,
-            );
+            const allOptions = searchInputValue
+                ? searchOptions
+                : unique(
+                    [...searchOptions, ...selectedOptions],
+                    keySelector,
+                );
+
+            if (!selectedOptionsAtTop) {
+                return sortFunction
+                    ? sortFunction(allOptions, searchInputValue, labelSelector)
+                    : allOptions;
+            }
 
             const initiallySelected = allOptions
                 .filter((item) => selectedKeys[keySelector(item)]);
@@ -159,13 +168,13 @@ function SearchMultiSelectInput<
 
             if (sortFunction) {
                 return [
-                    ...rankedSearchOnList(initiallySelected, searchInputValue, labelSelector),
+                    ...sortFunction(initiallySelected, searchInputValue, labelSelector),
                     ...sortFunction(initiallyNotSelected, searchInputValue, labelSelector),
                 ];
             }
 
             return [
-                ...rankedSearchOnList(initiallySelected, searchInputValue, labelSelector),
+                ...initiallySelected,
                 ...initiallyNotSelected,
             ];
         },
@@ -177,6 +186,7 @@ function SearchMultiSelectInput<
             selectedKeys,
             selectedOptions,
             sortFunction,
+            selectedOptionsAtTop,
         ],
     );
 
@@ -218,6 +228,7 @@ function SearchMultiSelectInput<
 
     const optionRendererParams = useCallback(
         (key: OptionKey, option: O) => {
+            // FIXME: use map
             const isActive = value.findIndex((item) => item === key) !== -1;
 
             return {
@@ -228,7 +239,7 @@ function SearchMultiSelectInput<
                 ellipsize: ellipsizeOptions,
             };
         },
-        [labelSelector, value, optionLabelSelector, ellipsizeOptions],
+        [value, labelSelector, optionLabelSelector, ellipsizeOptions],
     );
 
     // FIXME: value should not be on dependency list
@@ -287,9 +298,9 @@ function SearchMultiSelectInput<
             onFocusedChange={setFocused}
             focusedKey={focusedKey}
             onFocusedKeyChange={setFocusedKey}
+            hasValue={isDefined(value) && value.length > 0}
             persistentOptionPopup
             nonClearable={false}
-            hasValue={isDefined(value) && value.length > 0}
             disabled={disabled}
             readOnly={readOnly}
             inputDescription={(

diff --git a/src/components/SearchSelectInput/index.tsx b/src/components/SearchSelectInput/index.tsx
@@ -11,7 +11,7 @@ import ElementFragments from '../ElementFragments';
 import SelectInputContainer, {
     Props as SelectInputContainerProps,
 } from '../SelectInputContainer';
-import { rankedSearchOnList, genericMemo } from '../../utils';
+import { genericMemo } from '../../utils';
 
 import styles from './styles.css';
 
@@ -64,6 +64,8 @@ export type Props<
     sortFunction?: (options: O[], search: string, labelSelector: (option: O) => string) => O[];
     onSearchValueChange?: (value: string) => void;
     onShowDropdownChange?: (value: boolean) => void;
+    selectedOptionsAtTop?: boolean;
+    ellipsizeOptions?: boolean;
 }, OMISSION> & (
     SelectInputContainerProps<T, K, O, P,
         'name'
@@ -95,9 +97,7 @@ export type Props<
         nonClearable?: false;
         onChange: (newValue: T | undefined, name: K) => void;
     }
-) & {
-    ellipsizeOptions?: boolean;
-};
+);
 
 const emptyList: unknown[] = [];
 
@@ -125,6 +125,7 @@ function SearchSelectInput<
         onSearchValueChange,
         onShowDropdownChange,
         ellipsizeOptions,
+        selectedOptionsAtTop = true,
         ...otherProps
     } = props;
 
@@ -162,10 +163,18 @@ function SearchSelectInput<
 
     const realOptions = useMemo(
         () => {
-            const allOptions = unique(
-                [...searchOptions, ...selectedOptions],
-                keySelector,
-            );
+            const allOptions = searchInputValue
+                ? searchOptions
+                : unique(
+                    [...searchOptions, ...selectedOptions],
+                    keySelector,
+                );
+
+            if (!selectedOptionsAtTop) {
+                return sortFunction
+                    ? sortFunction(allOptions, searchInputValue, labelSelector)
+                    : allOptions;
+            }
 
             const initiallySelected = allOptions
                 .filter((item) => selectedKeys[keySelector(item)]);
@@ -174,13 +183,13 @@ function SearchSelectInput<
 
             if (sortFunction) {
                 return [
-                    ...rankedSearchOnList(initiallySelected, searchInputValue, labelSelector),
+                    ...sortFunction(initiallySelected, searchInputValue, labelSelector),
                     ...sortFunction(initiallyNotSelected, searchInputValue, labelSelector),
                 ];
             }
 
             return [
-                ...rankedSearchOnList(initiallySelected, searchInputValue, labelSelector),
+                ...initiallySelected,
                 ...initiallyNotSelected,
             ];
         },
@@ -192,6 +201,7 @@ function SearchSelectInput<
             selectedKeys,
             selectedOptions,
             sortFunction,
+            selectedOptionsAtTop,
         ],
     );
 

diff --git a/src/components/SelectInput/index.tsx b/src/components/SelectInput/index.tsx
@@ -11,8 +11,8 @@ type Def = { containerClassName?: string };
 type OptionKey = string | number;
 type NameType = string | number | undefined;
 
-const emptyList: unknown[] = [];
-
+// FIXME: the omissions is not correct
+// we need multiple omission for SearchMultiSelectInputProps
 export type Props<
     T extends OptionKey,
     K extends NameType,
@@ -26,55 +26,16 @@ function SelectInput<T extends OptionKey, K extends NameType, O extends object,
     props: Props<T, K, O, P>,
 ) {
     const {
-        name,
         options,
-        labelSelector,
-        nonClearable, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
-        onChange, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
-        totalOptionsCount, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
         ...otherProps
     } = props;
 
-    const [searchInputValue, setSearchInputValue] = React.useState('');
-
-    const searchOptions = React.useMemo(
-        () => rankedSearchOnList(options ?? (emptyList as O[]), searchInputValue, labelSelector),
-        [options, searchInputValue, labelSelector],
-    );
-
-    // NOTE: this looks weird but we need to use typeguard to identify between
-    // different union types (for onChange and nonClearable)
-    // eslint-disable-next-line react/destructuring-assignment
-    if (props.nonClearable) {
-        return (
-            <SearchSelectInput
-                {...otherProps}
-                // eslint-disable-next-line react/destructuring-assignment
-                onChange={props.onChange}
-                // eslint-disable-next-line react/destructuring-assignment
-                nonClearable={props.nonClearable}
-                name={name}
-                options={options}
-                labelSelector={labelSelector}
-                onSearchValueChange={setSearchInputValue}
-                searchOptions={searchOptions}
-                // searchOptionsShownInitially
-            />
-        );
-    }
     return (
         <SearchSelectInput
             {...otherProps}
-            // eslint-disable-next-line react/destructuring-assignment
-            onChange={props.onChange}
-            // eslint-disable-next-line react/destructuring-assignment
-            nonClearable={props.nonClearable}
-            name={name}
             options={options}
-            labelSelector={labelSelector}
-            onSearchValueChange={setSearchInputValue}
-            searchOptions={searchOptions}
-            // searchOptionsShownInitially
+            searchOptions={options}
+            sortFunction={rankedSearchOnList}
         />
     );
 }

diff --git a/storybook/stories/Calendar.stories.tsx b/storybook/stories/Calendar.stories.tsx
@@ -16,4 +16,5 @@ const Template: Story<CalendarProps<CalendarDateProps>> = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
+    initialDate: '2020-10-12',
 };
diff --git a/storybook/stories/SearchMultiSelectInput.stories.tsx b/storybook/stories/SearchMultiSelectInput.stories.tsx
@@ -84,6 +84,12 @@ Default.args = {
     value: ['1', '3'],
 };
 
+export const NormalSorting = Template.bind({});
+NormalSorting.args = {
+    value: ['1', '3'],
+    selectedOptionsAtTop: false,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
     value: ['1', '3'],

diff --git a/storybook/stories/SelectInput.stories.tsx b/storybook/stories/SelectInput.stories.tsx
@@ -59,6 +59,12 @@ Default.args = {
     ellipsizeOptions: true,
 };
 
+export const NormalSorting = Template.bind({});
+NormalSorting.args = {
+    value: '1',
+    selectedOptionsAtTop: false,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
     value: '1',