Merge pull request #41077 from software-mansion-labs/war-in/options-s…

…elector-removal [TS migration] Remove 'OptionsSelector' component
Expensify · May 15, 2024 · 947f9c6 · 947f9c6
2 parents 76846da + 8cc152c
commit 947f9c6
Show file tree

Hide file tree

Showing 19 changed files with 24 additions and 178 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -3584,10 +3584,10 @@ const CONST = {
     BACK_BUTTON_NATIVE_ID: 'backButton',
 
     /**
-     * The maximum count of items per page for OptionsSelector.
+     * The maximum count of items per page for SelectionList.
      * When paginate, it multiplies by page number.
      */
-    MAX_OPTIONS_SELECTOR_PAGE_LENGTH: 500,
+    MAX_SELECTION_LIST_PAGE_LENGTH: 500,
 
     /**
      * Bank account names

diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js
diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -506,10 +506,9 @@ function MoneyRequestConfirmationList({
                     hideCurrencySymbol
                     formatAmountOnBlur
                     prefixContainerStyle={[styles.pv0]}
-                    inputStyle={
-                        [styles.optionRowAmountInput, StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(currencySymbol ?? '') + styles.pl1.paddingLeft), amountWidth] as TextStyle[]
-                    }
+                    inputStyle={[styles.optionRowAmountInput, amountWidth] as TextStyle[]}
                     containerStyle={[styles.textInputContainer]}
+                    touchableInputWrapperStyle={[styles.ml3]}
                     onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value))}
                     maxLength={formattedTotalAmount.length}
                 />
@@ -529,8 +528,8 @@ function MoneyRequestConfirmationList({
         styles.textLabel,
         styles.pv0,
         styles.optionRowAmountInput,
-        styles.pl1.paddingLeft,
         styles.textInputContainer,
+        styles.ml3,
         transaction?.comment?.splits,
         transaction?.splitShares,
         onSplitShareChange,

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -171,7 +171,7 @@ function BaseSelectionList<TItem extends ListItem>(
     }, [canSelectMultiple, sections]);
 
     const [slicedSections, ShowMoreButtonInstance] = useMemo(() => {
-        let remainingOptionsLimit = CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage;
+        let remainingOptionsLimit = CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage;
         const processedSections = getSectionsWithIndexOffset(
             sections.map((section) => {
                 const data = !isEmpty(section.data) && remainingOptionsLimit > 0 ? section.data.slice(0, remainingOptionsLimit) : [];
@@ -184,11 +184,11 @@ function BaseSelectionList<TItem extends ListItem>(
             }),
         );
 
-        const shouldShowMoreButton = flattenedSections.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage;
+        const shouldShowMoreButton = flattenedSections.allOptions.length > CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage;
         const showMoreButton = shouldShowMoreButton ? (
             <ShowMoreButton
                 containerStyle={[styles.mt2, styles.mb5]}
-                currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage}
+                currentCount={CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage}
                 totalCount={flattenedSections.allOptions.length}
                 onPress={incrementPage}
             />
@@ -229,7 +229,7 @@ function BaseSelectionList<TItem extends ListItem>(
     // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
         initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey),
-        maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage - 1),
+        maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
         disabledIndexes: flattenedSections.disabledOptionsIndexes,
         isActive: true,
         onFocusedIndexChange: (index: number) => {

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -412,7 +412,7 @@ export default {
         splitAmounts: 'Split amounts',
         whatsItFor: "What's it for?",
     },
-    optionsSelector: {
+    selectionList: {
         nameEmailOrPhoneNumber: 'Name, email, or phone number',
         findMember: 'Find a member',
     },

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -403,7 +403,7 @@ export default {
         splitAmounts: 'Importes a dividir',
         whatsItFor: '¿Para qué es?',
     },
-    optionsSelector: {
+    selectionList: {
         nameEmailOrPhoneNumber: 'Nombre, email o número de teléfono',
         findMember: 'Encuentra un miembro',
     },

diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts
@@ -2042,16 +2042,6 @@ function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail: Person
     };
 }
 
-/**
- * Build the IOUConfirmationOptions for showing participants
- */
-function getIOUConfirmationOptionsFromParticipants(participants: Array<Participant | ReportUtils.OptionData>, amountText: string): Array<Participant | ReportUtils.OptionData> {
-    return participants.map((participant) => ({
-        ...participant,
-        descriptiveText: amountText,
-    }));
-}
-
 /**
  * Build the options for the New Group view
  */
@@ -2416,7 +2406,6 @@ export {
     getSearchValueForPhoneOrEmail,
     getPersonalDetailsForAccountIDs,
     getIOUConfirmationOptionsFromPayeePersonalDetail,
-    getIOUConfirmationOptionsFromParticipants,
     getSearchText,
     getAllReportErrors,
     getPolicyExpenseReportOption,

diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx
@@ -175,7 +175,7 @@ function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPa
                 sections={areOptionsInitialized ? sections : CONST.EMPTY_ARRAY}
                 ListItem={UserListItem}
                 textInputValue={searchValue}
-                textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                 textInputHint={offlineMessage}
                 onChangeText={setSearchValue}
                 headerMessage={headerMessage}

diff --git a/src/pages/InviteReportParticipantsPage.tsx b/src/pages/InviteReportParticipantsPage.tsx
@@ -204,7 +204,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
                     canSelectMultiple
                     sections={sections}
                     ListItem={InviteMemberListItem}
-                    textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                    textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                     textInputValue={searchTerm}
                     onChangeText={setSearchTerm}
                     headerMessage={headerMessage}

diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
@@ -306,7 +306,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
                     textInputValue={searchTerm}
                     textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                     onChangeText={setSearchTerm}
-                    textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                    textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                     headerMessage={headerMessage}
                     onSelectRow={createChat}
                     onConfirm={(e, option) => (selectedOptions.length > 0 ? createGroup() : createChat(option))}

diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx
@@ -241,7 +241,7 @@ function RoomInvitePage({
                     canSelectMultiple
                     sections={sections}
                     ListItem={UserListItem}
-                    textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                    textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                     textInputValue={searchTerm}
                     onChangeText={(value) => {
                         SearchInputManager.searchInput = value;

diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx
@@ -290,7 +290,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
                         <SelectionList
                             canSelectMultiple
                             sections={[{data, isDisabled: false}]}
-                            textInputLabel={translate('optionsSelector.findMember')}
+                            textInputLabel={translate('selectionList.findMember')}
                             disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                             textInputValue={searchValue}
                             onChangeText={(value) => {

diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx
@@ -77,7 +77,7 @@ function MoneyRequestParticipantsSelector({participants = [], onFinish, onPartic
     }, [debouncedSearchTerm]);
 
     /**
-     * Returns the sections needed for the OptionsSelector
+     * Returns the sections needed for the SelectionList
      *
      * @returns {Array}
      */
@@ -353,7 +353,7 @@ function MoneyRequestParticipantsSelector({participants = [], onFinish, onPartic
             sections={areOptionsInitialized ? sections : CONST.EMPTY_ARRAY}
             ListItem={InviteMemberListItem}
             textInputValue={searchTerm}
-            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+            textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
             textInputHint={offlineMessage}
             onChangeText={setSearchTerm}
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}

diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
@@ -108,7 +108,7 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) {
                         onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={searchOptions.headerMessage}
-                        textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                         textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                         showLoadingPlaceholder={!didScreenTransitionEnd}
                         isLoadingNewOptions={!!isSearchingForReports}

diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.tsx b/src/pages/tasks/TaskAssigneeSelectorModal.tsx
@@ -220,7 +220,7 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro
                         onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={headerMessage}
-                        textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                         showLoadingPlaceholder={!areOptionsInitialized}
                         isLoadingNewOptions={!!isSearchingForReports}
                     />

diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.tsx b/src/pages/tasks/TaskShareDestinationSelectorModal.tsx
@@ -108,7 +108,7 @@ function TaskShareDestinationSelectorModal() {
                         onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={options.headerMessage}
-                        textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                         showLoadingPlaceholder={areOptionsInitialized && debouncedSearchValue.trim() === '' ? options.sections.length === 0 : !didScreenTransitionEnd}
                         isLoadingNewOptions={!!isSearchingForReports}
                         textInputHint={textInputHint}

diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx
@@ -314,7 +314,7 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli
                     canSelectMultiple
                     sections={sections}
                     ListItem={InviteMemberListItem}
-                    textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                    textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                     textInputValue={searchTerm}
                     onChangeText={(value) => {
                         SearchInputManager.searchInput = value;

diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx
@@ -176,7 +176,7 @@ function WorkspaceWorkflowsApproverPage({policy, personalDetails, isLoadingRepor
                     />
                     <SelectionList
                         sections={sections}
-                        textInputLabel={translate('optionsSelector.findMember')}
+                        textInputLabel={translate('selectionList.findMember')}
                         textInputValue={searchTerm}
                         onChangeText={setSearchTerm}
                         headerMessage={headerMessage}

diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx
@@ -186,7 +186,7 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR
                     />
                     <SelectionList
                         sections={sections}
-                        textInputLabel={translate('optionsSelector.findMember')}
+                        textInputLabel={translate('selectionList.findMember')}
                         textInputValue={searchTerm}
                         onChangeText={setSearchTerm}
                         headerMessage={headerMessage}