diff --git a/src/components/SelectionListWithSections/TravelDomainListItem.tsx b/src/components/SelectionList/ListItem/TravelDomainListItem.tsx similarity index 91% rename from src/components/SelectionListWithSections/TravelDomainListItem.tsx rename to src/components/SelectionList/ListItem/TravelDomainListItem.tsx index 19a180281823..907fb9c6c21a 100644 --- a/src/components/SelectionListWithSections/TravelDomainListItem.tsx +++ b/src/components/SelectionList/ListItem/TravelDomainListItem.tsx @@ -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 = BaseListItemProps; - -function TravelDomainListItem({item, isFocused, showTooltip, isDisabled, onSelectRow, onCheckboxPress, onFocus, shouldSyncFocus}: DomainItemProps) { +function TravelDomainListItem({item, isFocused, showTooltip, isDisabled, onSelectRow, onCheckboxPress, onFocus, shouldSyncFocus}: TravelDomainListItemProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); diff --git a/src/components/SelectionList/ListItem/types.ts b/src/components/SelectionList/ListItem/types.ts index 050ce0b1a0cf..5b30b7f1b59e 100644 --- a/src/components/SelectionList/ListItem/types.ts +++ b/src/components/SelectionList/ListItem/types.ts @@ -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 = { /** Text to display */ @@ -234,7 +235,13 @@ type ListItemProps = CommonListItemProps & { 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 = CommonListItemProps & { item: TItem; @@ -267,6 +274,16 @@ type SpendCategorySelectorListItemProps = ListItemProps< type UserListItemProps = ListItemProps & ForwardedFSClassProps; +type TravelDomainListItemProps = BaseListItemProps< + TItem & { + /** Value of the domain */ + value?: string; + + /** Should display tag 'Recommended' */ + isRecommended?: boolean; + } +>; + export type { BaseListItemProps, ExtendedTargetedEvent, @@ -277,6 +294,7 @@ export type { ValidListItem, SingleSelectListItemProps, MultiSelectListItemProps, + TravelDomainListItemProps, SpendCategorySelectorListItemProps, UserListItemProps, }; diff --git a/src/components/SelectionListWithSections/types.ts b/src/components/SelectionListWithSections/types.ts index 39e70490e721..f120699a5257 100644 --- a/src/components/SelectionListWithSections/types.ts +++ b/src/components/SelectionListWithSections/types.ts @@ -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 = { @@ -579,7 +578,6 @@ type ValidListItem = | typeof ChatListItem | typeof SearchQueryListItem | typeof SearchRouterItem - | typeof TravelDomainListItem | typeof UnreportedExpenseListItem; type Section = { diff --git a/src/pages/Travel/DomainSelectorPage.tsx b/src/pages/Travel/DomainSelectorPage.tsx index 21a07cd7dd45..9851ee799757 100644 --- a/src/pages/Travel/DomainSelectorPage.tsx +++ b/src/pages/Travel/DomainSelectorPage.tsx @@ -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'; @@ -81,10 +82,12 @@ function DomainSelectorPage({route}: DomainSelectorPageProps) { onBackButtonPress={() => Navigation.goBack(route.params.backTo)} /> {translate('travel.domainSelector.subtitle')} + + {translate('travel.domainSelector.title')} + setSelectedDomain(option.value)} - sections={[{title: translate('travel.domainSelector.title'), data}]} - canSelectMultiple + data={data} ListItem={TravelDomainListItem} shouldShowTooltips footerContent={