Skip to content

Make DomainSelectorPage use new SelectionList #72573

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.

Sign up for GitHub

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

Merged
grgia merged 7 commits into from
Oct 24, 2025
Merged

Make DomainSelectorPage use new SelectionList #72573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
96f919b
Make DomainSelectorPage use new SelectionList
zfurtak Oct 13, 2025
c8e21d2
Merge branch 'main' into @zfurtak/migrate-DomainSelectorPage
zfurtak Oct 14, 2025
753ace7
Make DomainSelectorPage use new SelectionList
zfurtak Oct 14, 2025
826b1c2
Merge branch 'main' into @zfurtak/migrate-DomainSelectorPage
zfurtak Oct 15, 2025
f951929
Merge branch 'main' into @zfurtak/migrate-DomainSelectorPage
zfurtak Oct 17, 2025
13eb604
Merge branch 'main' into @zfurtak/migrate-DomainSelectorPage
zfurtak Oct 23, 2025
733b1f8
Remove TravelDomainListItem from SelectionListWithSections
zfurtak Oct 23, 2025
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
11 changes: 2 additions & 9 deletions ...ListWithSections/TravelDomainListItem.tsx → ...ionList/ListItem/TravelDomainListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,9 @@ import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import BaseListItem from './BaseListItem';
import type {BaseListItemProps, ListItem} from './types';
import type {ListItem, TravelDomainListItemProps} from './types';

type AdditionalDomainItemProps = {
value?: string;
isRecommended?: boolean;
};

type DomainItemProps<TItem extends ListItem> = BaseListItemProps<TItem & AdditionalDomainItemProps>;

function TravelDomainListItem<TItem extends ListItem>({item, isFocused, showTooltip, isDisabled, onSelectRow, onCheckboxPress, onFocus, shouldSyncFocus}: DomainItemProps<TItem>) {
function TravelDomainListItem<TItem extends ListItem>({item, isFocused, showTooltip, isDisabled, onSelectRow, onCheckboxPress, onFocus, shouldSyncFocus}: TravelDomainListItemProps<TItem>) {
const styles = useThemeStyles();
const {translate} = useLocalize();

Expand Down
20 changes: 19 additions & 1 deletion src/components/SelectionList/ListItem/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type MultiSelectListItem from './MultiSelectListItem';
import type RadioListItem from './RadioListItem';
import type SingleSelectListItem from './SingleSelectListItem';
import type SpendCategorySelectorListItem from './SpendCategorySelectorListItem';
import type TravelDomainListItem from './TravelDomainListItem';

type ListItem<K extends string | number = string> = {
/** Text to display */
Expand Down Expand Up @@ -234,7 +235,13 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
shouldUseDefaultRightHandSideCheckmark?: boolean;
};

type ValidListItem = typeof RadioListItem | typeof BaseListItem | typeof MultiSelectListItem | typeof SingleSelectListItem | typeof SpendCategorySelectorListItem;
type ValidListItem =
| typeof RadioListItem
| typeof BaseListItem
| typeof MultiSelectListItem
| typeof SingleSelectListItem
| typeof SpendCategorySelectorListItem
| typeof TravelDomainListItem;

type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
item: TItem;
Expand Down Expand Up @@ -267,6 +274,16 @@ type SpendCategorySelectorListItemProps<TItem extends ListItem> = ListItemProps<

type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & ForwardedFSClassProps;

type TravelDomainListItemProps<TItem extends ListItem> = BaseListItemProps<
TItem & {
/** Value of the domain */
value?: string;

/** Should display tag 'Recommended' */
isRecommended?: boolean;
}
>;

export type {
BaseListItemProps,
ExtendedTargetedEvent,
Expand All @@ -277,6 +294,7 @@ export type {
ValidListItem,
SingleSelectListItemProps,
MultiSelectListItemProps,
TravelDomainListItemProps,
SpendCategorySelectorListItemProps,
UserListItemProps,
};
2 changes: 0 additions & 2 deletions src/components/SelectionListWithSections/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ import type SearchQueryListItem from './Search/SearchQueryListItem';
import type TransactionGroupListItem from './Search/TransactionGroupListItem';
import type TransactionListItem from './Search/TransactionListItem';
import type TableListItem from './TableListItem';
import type TravelDomainListItem from './TravelDomainListItem';
import type UserListItem from './UserListItem';

type TRightHandSideComponent<TItem extends ListItem> = {
Expand Down Expand Up @@ -579,7 +578,6 @@ type ValidListItem =
| typeof ChatListItem
| typeof SearchQueryListItem
| typeof SearchRouterItem
| typeof TravelDomainListItem
| typeof UnreportedExpenseListItem;

type Section<TItem extends ListItem> = {
Expand Down
13 changes: 8 additions & 5 deletions src/pages/Travel/DomainSelectorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useMemo, useState} from 'react';
import {View} from 'react-native';
import Button from '@components/Button';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionListWithSections';
import TravelDomainListItem from '@components/SelectionListWithSections/TravelDomainListItem';
import type {ListItem} from '@components/SelectionListWithSections/types';
import SelectionList from '@components/SelectionList';
import TravelDomainListItem from '@components/SelectionList/ListItem/TravelDomainListItem';
import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
Expand Down Expand Up @@ -81,10 +82,12 @@ function DomainSelectorPage({route}: DomainSelectorPageProps) {
onBackButtonPress={() => Navigation.goBack(route.params.backTo)}
/>
<Text style={[styles.mt3, styles.mr5, styles.mb5, styles.ml5]}>{translate('travel.domainSelector.subtitle')}</Text>
<View style={[styles.optionsListSectionHeader]}>
<Text style={[styles.ph5, styles.textLabelSupporting]}>{translate('travel.domainSelector.title')}</Text>
</View>
<SelectionList
onSelectRow={(option) => setSelectedDomain(option.value)}
sections={[{title: translate('travel.domainSelector.title'), data}]}
canSelectMultiple

@OlGierd03 OlGierd03 Oct 15, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just making sure, this list shouldn't be multi-selectable (according to your changes). Right?

@zfurtak zfurtak Oct 15, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it shouldn't, I think it could be a mistake

data={data}
ListItem={TravelDomainListItem}
shouldShowTooltips
footerContent={
Expand Down
Loading