Merge pull request Expensify#75817 from software-mansion-labs/@zfurtak/migrate-WorkspaceMembersSelectionList

Make `WorkspaceMembersSelectionList` use new `SelectionList`

Author: grgia

src/components/WorkspaceMembersSelectionList.tsx

@@ -1,5 +1,4 @@
 import React, {useMemo} from 'react';
-import type {SectionListData} from 'react-native';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -15,9 +14,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import {FallbackAvatar} from './Icon/Expensicons';
 import {usePersonalDetails} from './OnyxListItemProvider';
-import SelectionList from './SelectionListWithSections';
-import InviteMemberListItem from './SelectionListWithSections/InviteMemberListItem';
-import type {Section} from './SelectionListWithSections/types';
+import SelectionList from './SelectionList';
+import InviteMemberListItem from './SelectionList/ListItem/InviteMemberListItem';
 
 type SelectionListApprover = {
     text: string;
@@ -29,7 +27,6 @@ type SelectionListApprover = {
     icons: Icon[];
     value?: number;
 };
-type ApproverSection = SectionListData<SelectionListApprover, Section<SelectionListApprover>>;
 
 type WorkspaceMembersSelectionListProps = {
     policyID: string;
@@ -45,7 +42,7 @@ function WorkspaceMembersSelectionList({policyID, selectedApprover, setApprover}
     const policy = usePolicy(policyID);
     const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
 
-    const sections: ApproverSection[] = useMemo(() => {
+    const orderedApprovers = useMemo(() => {
         const approvers: SelectionListApprover[] = [];
 
         if (policy?.employeeList) {
@@ -84,34 +81,34 @@ function WorkspaceMembersSelectionList({policyID, selectedApprover, setApprover}
 
         const filteredApprovers = tokenizedSearch(approvers, getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode), (approver) => [approver.text ?? '', approver.login ?? '']);
 
-        return [
-            {
-                title: undefined,
-                data: sortAlphabetically(filteredApprovers, 'text', localeCompare),
-                shouldShow: true,
-            },
-        ];
+        return sortAlphabetically(filteredApprovers, 'text', localeCompare);
     }, [policy?.employeeList, policy?.owner, debouncedSearchTerm, countryCode, localeCompare, personalDetails, selectedApprover]);
 
     const handleOnSelectRow = (approver: SelectionListApprover) => {
         setApprover(approver.login);
     };
 
-    const headerMessage = useMemo(() => (searchTerm && !sections.at(0)?.data.length ? translate('common.noResultsFound') : ''), [searchTerm, sections, translate]);
+    const textInputOptions = useMemo(
+        () => ({
+            label: translate('selectionList.nameEmailOrPhoneNumber'),
+            value: searchTerm,
+            headerMessage: searchTerm && !orderedApprovers.length ? translate('common.noResultsFound') : '',
+            onChangeText: setSearchTerm,
+        }),
+        [searchTerm, orderedApprovers, setSearchTerm, translate],
+    );
 
     return (
         <SelectionList
-            sections={sections}
+            data={orderedApprovers}
             ListItem={InviteMemberListItem}
-            textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
-            textInputValue={searchTerm}
-            onChangeText={setSearchTerm}
-            headerMessage={headerMessage}
             onSelectRow={handleOnSelectRow}
-            showScrollIndicator
+            textInputOptions={textInputOptions}
             showLoadingPlaceholder={!didScreenTransitionEnd}
             shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
+            disableMaintainingScrollPosition
             addBottomSafeAreaPadding
+            showScrollIndicator
         />
     );
 }