diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 9533a81257ec..2d3b6af3ad98 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -120,6 +120,7 @@ function BaseSelectionList( onContentSizeChange, listItemTitleStyles, initialNumToRender = 12, + listItemTitleContainerStyles, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -552,6 +553,7 @@ function BaseSelectionList( titleStyles={listItemTitleStyles} shouldHighlightSelectedItem={shouldHighlightSelectedItem} singleExecution={singleExecution} + titleContainerStyles={listItemTitleContainerStyles} /> ); diff --git a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx index 915e2c0fcf80..204b147508b4 100644 --- a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx +++ b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import type {StyleProp, TextStyle} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import type useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import type useSingleExecution from '@hooks/useSingleExecution'; -import * as SearchUIUtils from '@libs/SearchUIUtils'; +import {isReportListItemType} from '@libs/SearchUIUtils'; import type {BaseListItemProps, BaseSelectionListProps, ListItem} from './types'; type BaseSelectionListItemRendererProps = Omit, 'onSelectRow'> & @@ -13,6 +13,7 @@ type BaseSelectionListItemRendererProps = Omit['singleExecution']; titleStyles?: StyleProp; + titleContainerStyles?: StyleProp; }; function BaseSelectionListItemRenderer({ @@ -41,9 +42,10 @@ function BaseSelectionListItemRenderer({ wrapperStyle, titleStyles, singleExecution, + titleContainerStyles, }: BaseSelectionListItemRendererProps) { const handleOnCheckboxPress = () => { - if (SearchUIUtils.isReportListItemType(item)) { + if (isReportListItemType(item)) { return onCheckboxPress; } return onCheckboxPress ? () => onCheckboxPress(item) : undefined; @@ -86,6 +88,7 @@ function BaseSelectionListItemRenderer({ shouldHighlightSelectedItem={shouldHighlightSelectedItem} wrapperStyle={wrapperStyle} titleStyles={titleStyles} + titleContainerStyles={titleContainerStyles} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index 7c11a55a7b7f..f584ad787a0e 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -26,6 +26,7 @@ function TableListItem({ onFocus, onLongPressRow, shouldSyncFocus, + titleContainerStyles, }: TableListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -115,7 +116,7 @@ function TableListItem({ ]} /> )} - + = CommonListItemProps & { /** Styles applied for the title */ titleStyles?: StyleProp; + + /** Styles applid for the title container of the list item */ + titleContainerStyles?: StyleProp; }; type BaseListItemProps = CommonListItemProps & { @@ -569,6 +572,9 @@ type BaseSelectionListProps = Partial & { /** Styles applid for the title of the list item */ listItemTitleStyles?: StyleProp; + /** Styles applid for the title container of the list item */ + listItemTitleContainerStyles?: StyleProp; + /** This may improve scroll performance for large lists */ removeClippedSubviews?: boolean; diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx index bd65f8bb9d8d..1f51af583d8a 100644 --- a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx +++ b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx @@ -28,17 +28,17 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; -import * as CurrencyUtils from '@libs/CurrencyUtils'; -import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import {deleteWorkspacePerDiemRates, downloadPerDiemCSV, openPolicyPerDiemPage} from '@libs/actions/Policy/PerDiem'; +import {convertAmountToDisplayString} from '@libs/CurrencyUtils'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import {getPerDiemCustomUnit} from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; -import * as Link from '@userActions/Link'; -import * as Modal from '@userActions/Modal'; -import * as PerDiem from '@userActions/Policy/PerDiem'; +import {openExternalLink} from '@userActions/Link'; +import {close} from '@userActions/Modal'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; @@ -138,7 +138,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { const canSelectMultiple = shouldUseNarrowLayout ? selectionMode?.isEnabled : true; const fetchPerDiem = useCallback(() => { - PerDiem.openPolicyPerDiemPage(policyID); + openPolicyPerDiemPage(policyID); }, [policyID]); const {isOffline} = useNetwork({onReconnect: fetchPerDiem}); @@ -170,19 +170,17 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { pendingAction: value.pendingAction, rightElement: ( <> - - {value.subRateName} + + {value.subRateName} - - {CurrencyUtils.convertAmountToDisplayString(value.rate, value.currency)} - + {convertAmountToDisplayString(value.rate, value.currency)} ), }; }), - [allSubRates, selectedPerDiem, canSelectMultiple, styles.flex1, styles.alignItemsStart, styles.textSupporting, styles.label, styles.alignSelfEnd, styles.pl2], + [allSubRates, selectedPerDiem, canSelectMultiple, styles.flex2, styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2, styles.flex1, styles.alignSelfEnd], ); const toggleSubRate = (subRate: PolicyOption) => { @@ -207,11 +205,11 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { const getCustomListHeader = () => ( - + {translate('common.destination')} - - {translate('common.subrate')} + + {translate('common.subrate')} {translate('workspace.perDiem.amount')} @@ -228,7 +226,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { }; const handleDeletePerDiemRates = () => { - PerDiem.deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem); + deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem); setSelectedPerDiem([]); setDeletePerDiemConfirmModalVisible(false); }; @@ -289,7 +287,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { {translate('workspace.perDiem.subtitle')} Link.openExternalLink(CONST.DEEP_DIVE_PER_DIEM)} + onPress={() => openExternalLink(CONST.DEEP_DIVE_PER_DIEM)} > {translate('workspace.common.learnMore')} @@ -304,7 +302,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { text: translate('spreadsheet.importSpreadsheet'), onSelected: () => { if (isOffline) { - Modal.close(() => setIsOfflineModalVisible(true)); + close(() => setIsOfflineModalVisible(true)); return; } Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_IMPORT.getRoute(policyID)); @@ -315,10 +313,10 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { text: translate('spreadsheet.downloadCSV'), onSelected: () => { if (isOffline) { - Modal.close(() => setIsOfflineModalVisible(true)); + close(() => setIsOfflineModalVisible(true)); return; } - PerDiem.downloadPerDiemCSV(policyID, () => { + downloadPerDiemCSV(policyID, () => { setIsDownloadFailureModalVisible(true); }); }, @@ -415,12 +413,13 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { sections={[{data: subRatesList, isDisabled: false}]} onCheckboxPress={toggleSubRate} onSelectRow={openSubRateDetails} - shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} + shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} onSelectAll={toggleAllSubRates} ListItem={TableListItem} customListHeader={getCustomListHeader()} listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} listHeaderContent={shouldUseNarrowLayout ? getHeaderText() : null} + listItemTitleContainerStyles={styles.flex3} showScrollIndicator={false} /> )}