Merge pull request Expensify#75906 from software-mansion-labs/@OlGierd03/migrate-NetSuiteCustomListSelectorModal

Make NetSuiteCustomListSelectorModal use new SelectionList

Author: grgia

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx

@@ -3,8 +3,8 @@ import React, {useMemo} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionListWithSections';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import type {CustomListSelectorType} from '@pages/workspace/accounting/netsuite/types';
@@ -37,8 +37,10 @@ function NetSuiteCustomListSelectorModal({isVisible, currentCustomListValue, onC
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
 
-    const {sections, headerMessage, showTextInput} = useMemo(() => {
-        const customLists = policy?.connections?.netsuite?.options?.data?.customLists ?? [];
+    const rawCustomLists = policy?.connections?.netsuite?.options?.data?.customLists;
+
+    const {options, showTextInput} = useMemo(() => {
+        const customLists = rawCustomLists ?? [];
         const customListData = customLists.map((customListRecord) => ({
             text: customListRecord.name,
             value: customListRecord.name,
@@ -52,17 +54,20 @@ function NetSuiteCustomListSelectorModal({isVisible, currentCustomListValue, onC
         const isEmpty = debouncedSearchValue.trim() && !filteredCustomLists.length;
 
         return {
-            sections: isEmpty
-                ? []
-                : [
-                      {
-                          data: filteredCustomLists,
-                      },
-                  ],
-            headerMessage: isEmpty ? translate('common.noResultsFound') : '',
+            options: isEmpty ? [] : filteredCustomLists,
             showTextInput: customListData.length > CONST.STANDARD_LIST_ITEM_LIMIT,
         };
-    }, [debouncedSearchValue, policy?.connections?.netsuite?.options?.data?.customLists, translate, currentCustomListValue]);
+    }, [debouncedSearchValue, rawCustomLists, currentCustomListValue]);
+
+    const textInputOptions = useMemo(
+        () => ({
+            value: searchValue,
+            label: showTextInput ? translate('common.search') : undefined,
+            onChangeText: setSearchValue,
+            headerMessage: debouncedSearchValue.trim() && options.length === 0 ? translate('common.noResultsFound') : '',
+        }),
+        [searchValue, showTextInput, translate, setSearchValue, debouncedSearchValue, options.length],
+    );
 
     return (
         <Modal
@@ -84,17 +89,13 @@ function NetSuiteCustomListSelectorModal({isVisible, currentCustomListValue, onC
                     onBackButtonPress={onClose}
                 />
                 <SelectionList
-                    sections={sections}
-                    textInputValue={searchValue}
-                    textInputLabel={showTextInput ? translate('common.search') : undefined}
-                    onChangeText={setSearchValue}
+                    data={options}
+                    textInputOptions={textInputOptions}
                     onSelectRow={onCustomListSelected}
-                    headerMessage={headerMessage}
                     ListItem={RadioListItem}
-                    initiallyFocusedOptionKey={currentCustomListValue}
+                    initiallyFocusedItemKey={currentCustomListValue}
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation
-                    shouldUseDynamicMaxToRenderPerBatch
                     addBottomSafeAreaPadding
                 />
             </ScreenWrapper>