Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TS migration] Remove 'OptionsSelector' component #41077

Merged
Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
e3e9e7b
wip
war-in Apr 23, 2024
0ab6923
wip....
war-in Apr 23, 2024
3f1c13c
show tick next to payee
war-in Apr 23, 2024
7cd7718
show amount
war-in Apr 26, 2024
0eff692
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in Apr 26, 2024
b05192b
align items
war-in Apr 26, 2024
1e65a85
remove optionsSelector
war-in Apr 26, 2024
affc169
fix typecheck
war-in Apr 26, 2024
1ad6d78
styling
war-in Apr 26, 2024
3db3fb4
add correct styling
war-in Apr 26, 2024
f5148ed
use ScrollView
war-in Apr 29, 2024
115be37
add second ScrollView to get rid of error
war-in Apr 29, 2024
01840ca
styling
war-in Apr 29, 2024
04b9907
use SelectionList as main component
war-in Apr 29, 2024
dadec41
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in Apr 29, 2024
b34b47e
fix lint
war-in Apr 29, 2024
08b162e
move children to `listFooterContent`
war-in Apr 29, 2024
1259b8d
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in Apr 29, 2024
3eb6751
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in Apr 30, 2024
eb8d61e
prettier
war-in Apr 30, 2024
830d71c
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 6, 2024
48d9fdd
review suggestions
war-in May 7, 2024
3d36eb2
add styles and do not show ✅
war-in May 7, 2024
838ebdf
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 7, 2024
6adda9c
wip
war-in May 7, 2024
fbb7b60
almost done (there are still some bugs)
war-in May 7, 2024
f2ba6c4
fix errors
war-in May 10, 2024
0ad9d3a
fix typecheck
war-in May 10, 2024
d673fc0
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 13, 2024
492ea96
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 13, 2024
c274163
remove ArrowKeyFocusManager.js
war-in May 13, 2024
d9a5d2f
show non-editable amount when needed
war-in May 13, 2024
de9138d
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 13, 2024
dcc0582
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 14, 2024
929d7f1
fix padding
war-in May 14, 2024
720900d
Merge branch 'refs/heads/main' into war-in/options-selector-removal
war-in May 14, 2024
8cc152c
padding -> margin
war-in May 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/CONST.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3581,10 +3581,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
Expand Down
142 changes: 0 additions & 142 deletions src/components/ArrowKeyFocusManager.js

This file was deleted.

5 changes: 2 additions & 3 deletions src/components/MoneyRequestConfirmationList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={[StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(currencySymbol ?? '') + styles.pl1.paddingLeft)]}
war-in marked this conversation as resolved.
Show resolved Hide resolved
onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value))}
maxLength={formattedTotalAmount.length}
/>
Expand Down
8 changes: 4 additions & 4 deletions src/components/SelectionList/BaseSelectionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) : [];
Expand All @@ -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}
/>
Expand Down Expand Up @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,7 @@ export default {
splitAmounts: 'Split amounts',
whatsItFor: "What's it for?",
},
optionsSelector: {
selectionList: {
nameEmailOrPhoneNumber: 'Name, email, or phone number',
findMember: 'Find a member',
},
Expand Down
2 changes: 1 addition & 1 deletion src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,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',
},
Expand Down
11 changes: 0 additions & 11 deletions src/libs/OptionsListUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2038,16 +2038,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
*/
Expand Down Expand Up @@ -2412,7 +2402,6 @@ export {
getSearchValueForPhoneOrEmail,
getPersonalDetailsForAccountIDs,
getIOUConfirmationOptionsFromPayeePersonalDetail,
getIOUConfirmationOptionsFromParticipants,
getSearchText,
getAllReportErrors,
getPolicyExpenseReportOption,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ChatFinderPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/InviteReportParticipantsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/NewChatPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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))}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RoomInvitePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RoomMembersPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/iou/request/MoneyRequestParticipantsSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
*/
Expand Down Expand Up @@ -333,7 +333,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()}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/tasks/TaskAssigneeSelectorModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/tasks/TaskShareDestinationSelectorModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/WorkspaceInvitePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading