20354 category picker list refactor

src/components/CategoryPicker/index.js

@@ -1,22 +1,18 @@
 import lodashGet from 'lodash/get';
-import React, {useMemo, useState} from 'react';
+import React, {useMemo} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import OptionsSelector from '@components/OptionsSelector';
+import SelectionList from '@components/SelectionList';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './categoryPickerPropTypes';
 
 function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, onSubmit}) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [searchValue, setSearchValue] = useState('');
-
-    const policyCategoriesCount = OptionsListUtils.getEnabledCategoriesCount(_.values(policyCategories));
-    const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
+    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
 
     const selectedOptions = useMemo(() => {
         if (!selectedCategory) {
@@ -28,17 +24,18 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
                 name: selectedCategory,
                 enabled: true,
                 accountID: null,
+                isSelected: true,
             },
         ];
     }, [selectedCategory]);
 
-    const sections = useMemo(() => {
+    const [sections, headerMessage, policyCategoriesCount, shouldShowTextInput] = useMemo(() => {
         const validPolicyRecentlyUsedCategories = _.filter(policyRecentlyUsedCategories, (p) => !_.isEmpty(p));
         const {categoryOptions} = OptionsListUtils.getFilteredOptions(
             {},
             {},
             [],
-            searchValue,
+            debouncedSearchValue,
             selectedOptions,
             [],
             false,
@@ -49,31 +46,28 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             false,
         );
 
-        return categoryOptions;
-    }, [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions]);
+        const header = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(categoryOptions, '[0].data', []).length > 0, debouncedSearchValue);
+        const policiesCount = OptionsListUtils.getEnabledCategoriesCount(_.values(policyCategories));
+        const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
+        const showInput = !isCategoriesCountBelowThreshold;
+
+        return [categoryOptions, header, policiesCount, showInput];
+    }, [policyCategories, policyRecentlyUsedCategories, debouncedSearchValue, selectedOptions]);
 
-    const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue);
-    const shouldShowTextInput = !isCategoriesCountBelowThreshold;
-    const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (category) => category.searchText === selectedCategory)[0], 'keyForList');
+    const selectedOptionKey = useMemo(
+        () => lodashGet(_.filter(lodashGet(sections, '[0].data', []), (category) => category.searchText === selectedCategory)[0], 'keyForList'),
+        [sections, selectedCategory],
+    );
 
     return (
-        <OptionsSelector
-            optionHoveredStyle={styles.hoveredComponentBG}
-            sectionHeaderStyle={styles.mt5}
+        <SelectionList
             sections={sections}
-            selectedOptions={selectedOptions}
-            // Focus the first option when searching
-            focusedIndex={0}
-            // Focus the selected option on first load
-            initiallyFocusedOptionKey={selectedOptionKey}
             headerMessage={headerMessage}
-            shouldShowTextInput={shouldShowTextInput}
-            textInputLabel={translate('common.search')}
-            boldStyle
-            highlightSelectedOptions
-            isRowMultilineSupported
+            textInputValue={searchValue}
+            textInputLabel={shouldShowTextInput && translate('common.search')}
             onChangeText={setSearchValue}
             onSelectRow={onSubmit}
+            initiallyFocusedOptionKey={selectedOptionKey}
         />
     );
 }

src/libs/OptionsListUtils.ts

@@ -78,6 +78,7 @@ type CategorySection = {
 type Category = {
     name: string;
     enabled: boolean;
+    isSelected?: boolean;
 };
 
 type Hierarchy = Record<string, Category & {[key: string]: Hierarchy & Category}>;
@@ -900,6 +901,7 @@ function getCategoryOptionTree(options: Record<string, Category> | Category[], i
                 searchText: option.name,
                 tooltipText: option.name,
                 isDisabled: !option.enabled,
+                isSelected: !!option.isSelected,
             });
 
             return;
@@ -920,6 +922,7 @@ function getCategoryOptionTree(options: Record<string, Category> | Category[], i
                 searchText,
                 tooltipText: optionName,
                 isDisabled: isChild ? !option.enabled : true,
+                isSelected: !!option.isSelected,
             });
         });
     });