[CP Staging] Revert "Make TimezoneSelectPage use new SelectionList"

src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx

@@ -1,8 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SelectionList from '@components/SelectionListWithSections';
+import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -56,16 +56,6 @@ function CountrySelectionPage({route}: CountrySelectionPageProps) {
         [route],
     );
 
-    const textInputOptions = useMemo(
-        () => ({
-            value: searchValue,
-            label: translate('common.country'),
-            onChangeText: setSearchValue,
-            headerMessage,
-        }),
-        [headerMessage, searchValue, translate, setSearchValue],
-    );
-
     return (
         <ScreenWrapper
             testID={CountrySelectionPage.displayName}
@@ -82,12 +72,16 @@ function CountrySelectionPage({route}: CountrySelectionPageProps) {
             />
 
             <SelectionList
-                data={searchResults}
-                textInputOptions={textInputOptions}
+                headerMessage={headerMessage}
+                textInputLabel={translate('common.country')}
+                textInputValue={searchValue}
+                sections={[{data: searchResults}]}
                 ListItem={RadioListItem}
                 onSelectRow={selectCountry}
                 shouldSingleExecuteRowSelect
-                initiallyFocusedItemKey={currentCountry}
+                onChangeText={setSearchValue}
+                initiallyFocusedOptionKey={currentCountry}
+                shouldUseDynamicMaxToRenderPerBatch
                 addBottomSafeAreaPadding
             />
         </ScreenWrapper>

src/pages/settings/Profile/TimezoneSelectPage.tsx

@@ -1,9 +1,9 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useState} from 'react';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SelectionList from '@components/SelectionListWithSections';
+import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useInitialValue from '@hooks/useInitialValue';
@@ -42,33 +42,20 @@ function TimezoneSelectPage({currentUserPersonalDetails}: TimezoneSelectPageProp
         updateSelectedTimezone(text as SelectedTimezone, currentUserPersonalDetails.accountID);
     };
 
-    const filterShownTimezones = useCallback(
-        (searchText: string) => {
-            setTimezoneInputText(searchText);
-            const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) ?? [];
-            setTimezoneOptions(
-                allTimezones.filter((tz) =>
-                    searchWords.every((word) =>
-                        tz.text
-                            .toLowerCase()
-                            .replaceAll(/[^a-z0-9]/g, ' ')
-                            .includes(word),
-                    ),
+    const filterShownTimezones = (searchText: string) => {
+        setTimezoneInputText(searchText);
+        const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) ?? [];
+        setTimezoneOptions(
+            allTimezones.filter((tz) =>
+                searchWords.every((word) =>
+                    tz.text
+                        .toLowerCase()
+                        .replaceAll(/[^a-z0-9]/g, ' ')
+                        .includes(word),
                 ),
-            );
-        },
-        [allTimezones],
-    );
-
-    const textInputOptions = useMemo(
-        () => ({
-            headerMessage: timezoneInputText.trim() && !timezoneOptions.length ? translate('common.noResultsFound') : '',
-            value: timezoneInputText,
-            label: translate('timezonePage.timezone'),
-            onChangeText: filterShownTimezones,
-        }),
-        [filterShownTimezones, timezoneInputText, timezoneOptions.length, translate],
-    );
+            ),
+        );
+    };
 
     return (
         <ScreenWrapper
@@ -80,14 +67,18 @@ function TimezoneSelectPage({currentUserPersonalDetails}: TimezoneSelectPageProp
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
             />
             <SelectionList
-                data={timezoneOptions}
-                textInputOptions={textInputOptions}
+                headerMessage={timezoneInputText.trim() && !timezoneOptions.length ? translate('common.noResultsFound') : ''}
+                textInputLabel={translate('timezonePage.timezone')}
+                textInputValue={timezoneInputText}
+                onChangeText={filterShownTimezones}
                 onSelectRow={saveSelectedTimezone}
                 shouldSingleExecuteRowSelect
-                initiallyFocusedItemKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
+                sections={[{data: timezoneOptions, isDisabled: timezone.automatic}]}
+                initiallyFocusedOptionKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
                 showScrollIndicator
                 shouldShowTooltips={false}
                 ListItem={RadioListItem}
+                shouldPreventActiveCellVirtualization
             />
         </ScreenWrapper>
     );