diff --git a/src/CONST.ts b/src/CONST.ts index 08fc5908d328..c7bdbb2b35e7 100755 --- 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 deleted file mode 100644 index 2532e52156df..000000000000 --- a/src/components/ArrowKeyFocusManager.js +++ /dev/null @@ -1,142 +0,0 @@ -import {useIsFocused} from '@react-navigation/native'; -import PropTypes from 'prop-types'; -import React, {Component} from 'react'; -import KeyboardShortcut from '@libs/KeyboardShortcut'; -import CONST from '@src/CONST'; - -const propTypes = { - /** Children to render. */ - children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired, - - /** Array of disabled indexes. */ - disabledIndexes: PropTypes.arrayOf(PropTypes.number), - - /** The current focused index. */ - focusedIndex: PropTypes.number.isRequired, - - /** The maximum index – provided so that the focus can be sent back to the beginning of the list when the end is reached. */ - maxIndex: PropTypes.number.isRequired, - - /** Whether navigation is focused */ - isFocused: PropTypes.bool.isRequired, - - /** A callback executed when the focused input changes. */ - onFocusedIndexChanged: PropTypes.func.isRequired, - - /** If this value is true, then we exclude TextArea Node. */ - shouldExcludeTextAreaNodes: PropTypes.bool, - - /** If this value is true, then the arrow down callback would be triggered when the max index is exceeded */ - shouldResetIndexOnEndReached: PropTypes.bool, -}; - -const defaultProps = { - disabledIndexes: [], - shouldExcludeTextAreaNodes: true, - shouldResetIndexOnEndReached: true, -}; - -class BaseArrowKeyFocusManager extends Component { - componentDidMount() { - const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; - const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; - - this.onArrowUpKey = this.onArrowUpKey.bind(this); - this.onArrowDownKey = this.onArrowDownKey.bind(this); - - this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, this.onArrowUpKey, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, false, 0, true, [ - this.props.shouldExcludeTextAreaNodes && 'TEXTAREA', - ]); - - this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe( - arrowDownConfig.shortcutKey, - this.onArrowDownKey, - arrowDownConfig.descriptionKey, - arrowDownConfig.modifiers, - true, - false, - 0, - true, - [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA'], - ); - } - - componentDidUpdate(prevProps) { - if (prevProps.maxIndex === this.props.maxIndex) { - return; - } - if (this.props.focusedIndex > this.props.maxIndex && this.props.shouldResetIndexOnEndReached) { - this.onArrowDownKey(); - } - } - - componentWillUnmount() { - if (this.unsubscribeArrowUpKey) { - this.unsubscribeArrowUpKey(); - } - - if (this.unsubscribeArrowDownKey) { - this.unsubscribeArrowDownKey(); - } - } - - onArrowUpKey() { - if (this.props.maxIndex < 0 || !this.props.isFocused) { - return; - } - - const currentFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; - let newFocusedIndex = currentFocusedIndex; - - while (this.props.disabledIndexes.includes(newFocusedIndex)) { - newFocusedIndex = newFocusedIndex > 0 ? newFocusedIndex - 1 : this.props.maxIndex; - if (newFocusedIndex === currentFocusedIndex) { - // all indexes are disabled - return; // no-op - } - } - - this.props.onFocusedIndexChanged(newFocusedIndex); - } - - onArrowDownKey() { - if (this.props.maxIndex < 0 || !this.props.isFocused) { - return; - } - - const currentFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; - let newFocusedIndex = currentFocusedIndex; - - while (this.props.disabledIndexes.includes(newFocusedIndex)) { - newFocusedIndex = newFocusedIndex < this.props.maxIndex ? newFocusedIndex + 1 : 0; - if (newFocusedIndex === currentFocusedIndex) { - // all indexes are disabled - return; // no-op - } - } - - this.props.onFocusedIndexChanged(newFocusedIndex); - } - - render() { - return this.props.children; - } -} - -function ArrowKeyFocusManager(props) { - const isFocused = useIsFocused(); - - return ( - - ); -} - -BaseArrowKeyFocusManager.propTypes = propTypes; -BaseArrowKeyFocusManager.defaultProps = defaultProps; -ArrowKeyFocusManager.displayName = 'ArrowKeyFocusManager'; - -export default ArrowKeyFocusManager; diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 06000716b851..6ee364f458f1 100755 --- 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 index d783b311f5d4..2c87504bc0e7 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -171,7 +171,7 @@ function BaseSelectionList( }, [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( }), ); - 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 ? ( @@ -229,7 +229,7 @@ function BaseSelectionList( // 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 index cccf3ee19a92..8aa2c4360c96 100755 --- 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 index b512bcaeaf52..68ff6df208d7 100644 --- 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 index 5f72a8712893..544ced533e82 100644 --- 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, amountText: string): Array { - 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 index 55b101a7d982..e3d1e1db8e0d 100644 --- 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 index da97ef26414b..74bb5bec96d7 100644 --- 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 index 36be521215fa..555a7c855d42 100755 --- 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 index 9c1178adc76c..c78094594f16 100644 --- 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 index 51f1b0d3f999..c81e82d84667 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -290,7 +290,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { { diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 14686eaba78a..b525a2c1e3dd 100644 --- 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 index 58c3be7df6b1..05ec664fb4c0 100644 --- 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 index 9a3993a6b649..3116b8a84152 100644 --- 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 index 859dfa36a33f..4d731d59a9e7 100644 --- 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 index 2ba3cd88f137..c564ce00542b 100644 --- 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 index 3682ef27d2a0..6125fef93183 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsApproverPage.tsx @@ -176,7 +176,7 @@ function WorkspaceWorkflowsApproverPage({policy, personalDetails, isLoadingRepor />