Merge pull request #54984 from mkzie2/mkzie2-issue/53928

Add space between destination and subrate
Expensify · Jan 16, 2025 · 1ee7261 · 1ee7261
2 parents 1dbf9a4 + d550cbe
commit 1ee7261
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 25 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -120,6 +120,7 @@ function BaseSelectionList<TItem extends ListItem>(
         onContentSizeChange,
         listItemTitleStyles,
         initialNumToRender = 12,
+        listItemTitleContainerStyles,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -552,6 +553,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     titleStyles={listItemTitleStyles}
                     shouldHighlightSelectedItem={shouldHighlightSelectedItem}
                     singleExecution={singleExecution}
+                    titleContainerStyles={listItemTitleContainerStyles}
                 />
             </View>
         );

diff --git 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<TItem extends ListItem> = Omit<BaseListItemProps<TItem>, 'onSelectRow'> &
@@ -13,6 +13,7 @@ type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListI
         normalizedIndex: number;
         singleExecution: ReturnType<typeof useSingleExecution>['singleExecution'];
         titleStyles?: StyleProp<TextStyle>;
+        titleContainerStyles?: StyleProp<ViewStyle>;
     };
 
 function BaseSelectionListItemRenderer<TItem extends ListItem>({
@@ -41,9 +42,10 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     wrapperStyle,
     titleStyles,
     singleExecution,
+    titleContainerStyles,
 }: BaseSelectionListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
-        if (SearchUIUtils.isReportListItemType(item)) {
+        if (isReportListItemType(item)) {
             return onCheckboxPress;
         }
         return onCheckboxPress ? () => onCheckboxPress(item) : undefined;
@@ -86,6 +88,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 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
@@ -26,6 +26,7 @@ function TableListItem<TItem extends ListItem>({
     onFocus,
     onLongPressRow,
     shouldSyncFocus,
+    titleContainerStyles,
 }: TableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -115,7 +116,7 @@ function TableListItem<TItem extends ListItem>({
                             ]}
                         />
                     )}
-                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
+                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, titleContainerStyles]}>
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={item.text ?? ''}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -300,6 +300,9 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Styles applied for the title */
     titleStyles?: StyleProp<TextStyle>;
+
+    /** Styles applid for the title container of the list item */
+    titleContainerStyles?: StyleProp<ViewStyle>;
 };
 
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
@@ -569,6 +572,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Styles applid for the title of the list item */
     listItemTitleStyles?: StyleProp<TextStyle>;
 
+    /** Styles applid for the title container of the list item */
+    listItemTitleContainerStyles?: StyleProp<ViewStyle>;
+
     /** 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
@@ -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: (
                         <>
-                            <View style={styles.flex1}>
-                                <Text style={[styles.alignItemsStart, styles.textSupporting, styles.label]}>{value.subRateName}</Text>
+                            <View style={styles.flex2}>
+                                <Text style={[styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2]}>{value.subRateName}</Text>
                             </View>
                             <View style={styles.flex1}>
-                                <Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>
-                                    {CurrencyUtils.convertAmountToDisplayString(value.rate, value.currency)}
-                                </Text>
+                                <Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>{convertAmountToDisplayString(value.rate, value.currency)}</Text>
                             </View>
                         </>
                     ),
                 };
             }),
-        [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 = () => (
         <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, canSelectMultiple && styles.pl3, !canSelectMultiple && [styles.ph9, styles.pv3, styles.pb5]]}>
-            <View style={styles.flex1}>
+            <View style={styles.flex3}>
                 <Text style={[styles.searchInputStyle, styles.alignSelfStart]}>{translate('common.destination')}</Text>
             </View>
-            <View style={styles.flex1}>
-                <Text style={[styles.searchInputStyle, styles.alignItemsStart]}>{translate('common.subrate')}</Text>
+            <View style={styles.flex2}>
+                <Text style={[styles.searchInputStyle, styles.alignItemsStart, styles.pl2]}>{translate('common.subrate')}</Text>
             </View>
             <View style={styles.flex1}>
                 <Text style={[styles.searchInputStyle, styles.alignSelfEnd]}>{translate('workspace.perDiem.amount')}</Text>
@@ -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) {
                 <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.perDiem.subtitle')}</Text>
                 <TextLink
                     style={[styles.textNormal, styles.link]}
-                    onPress={() => Link.openExternalLink(CONST.DEEP_DIVE_PER_DIEM)}
+                    onPress={() => openExternalLink(CONST.DEEP_DIVE_PER_DIEM)}
                 >
                     {translate('workspace.common.learnMore')}
                 </TextLink>
@@ -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}
                     />
                 )}