Skip to content

Commit 1ee7261

Browse files
MarioExpensifyMarioExpensify
authored
Merge pull request #54984 from mkzie2/mkzie2-issue/53928
Add space between destination and subrate
2 parents 1dbf9a4 + d550cbe commit 1ee7261

5 files changed

Lines changed: 36 additions & 25 deletions

File tree

‎src/components/SelectionList/BaseSelectionList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ function BaseSelectionList<TItem extends ListItem>(
120120
onContentSizeChange,
121121
listItemTitleStyles,
122122
initialNumToRender = 12,
123+
listItemTitleContainerStyles,
123124
}: BaseSelectionListProps<TItem>,
124125
ref: ForwardedRef<SelectionListHandle>,
125126
) {
@@ -552,6 +553,7 @@ function BaseSelectionList<TItem extends ListItem>(
552553
titleStyles={listItemTitleStyles}
553554
shouldHighlightSelectedItem={shouldHighlightSelectedItem}
554555
singleExecution={singleExecution}
556+
titleContainerStyles={listItemTitleContainerStyles}
555557
/>
556558
</View>
557559
);

‎src/components/SelectionList/BaseSelectionListItemRenderer.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import type {StyleProp, TextStyle} from 'react-native';
2+
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
33
import type useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
44
import type useSingleExecution from '@hooks/useSingleExecution';
5-
import * as SearchUIUtils from '@libs/SearchUIUtils';
5+
import {isReportListItemType} from '@libs/SearchUIUtils';
66
import type {BaseListItemProps, BaseSelectionListProps, ListItem} from './types';
77

88
type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListItemProps<TItem>, 'onSelectRow'> &
@@ -13,6 +13,7 @@ type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListI
1313
normalizedIndex: number;
1414
singleExecution: ReturnType<typeof useSingleExecution>['singleExecution'];
1515
titleStyles?: StyleProp<TextStyle>;
16+
titleContainerStyles?: StyleProp<ViewStyle>;
1617
};
1718

1819
function BaseSelectionListItemRenderer<TItem extends ListItem>({
@@ -41,9 +42,10 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
4142
wrapperStyle,
4243
titleStyles,
4344
singleExecution,
45+
titleContainerStyles,
4446
}: BaseSelectionListItemRendererProps<TItem>) {
4547
const handleOnCheckboxPress = () => {
46-
if (SearchUIUtils.isReportListItemType(item)) {
48+
if (isReportListItemType(item)) {
4749
return onCheckboxPress;
4850
}
4951
return onCheckboxPress ? () => onCheckboxPress(item) : undefined;
@@ -86,6 +88,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
8688
shouldHighlightSelectedItem={shouldHighlightSelectedItem}
8789
wrapperStyle={wrapperStyle}
8890
titleStyles={titleStyles}
91+
titleContainerStyles={titleContainerStyles}
8992
/>
9093
{item.footerContent && item.footerContent}
9194
</>

‎src/components/SelectionList/TableListItem.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ function TableListItem<TItem extends ListItem>({
2626
onFocus,
2727
onLongPressRow,
2828
shouldSyncFocus,
29+
titleContainerStyles,
2930
}: TableListItemProps<TItem>) {
3031
const styles = useThemeStyles();
3132
const theme = useTheme();
@@ -115,7 +116,7 @@ function TableListItem<TItem extends ListItem>({
115116
]}
116117
/>
117118
)}
118-
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
119+
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, titleContainerStyles]}>
119120
<TextWithTooltip
120121
shouldShowTooltip={showTooltip}
121122
text={item.text ?? ''}

‎src/components/SelectionList/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,9 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
300300

301301
/** Styles applied for the title */
302302
titleStyles?: StyleProp<TextStyle>;
303+
304+
/** Styles applid for the title container of the list item */
305+
titleContainerStyles?: StyleProp<ViewStyle>;
303306
};
304307

305308
type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
@@ -569,6 +572,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
569572
/** Styles applid for the title of the list item */
570573
listItemTitleStyles?: StyleProp<TextStyle>;
571574

575+
/** Styles applid for the title container of the list item */
576+
listItemTitleContainerStyles?: StyleProp<ViewStyle>;
577+
572578
/** This may improve scroll performance for large lists */
573579
removeClippedSubviews?: boolean;
574580

‎src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@ import useTheme from '@hooks/useTheme';
2828
import useThemeStyles from '@hooks/useThemeStyles';
2929
import useWindowDimensions from '@hooks/useWindowDimensions';
3030
import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
31-
import * as CurrencyUtils from '@libs/CurrencyUtils';
32-
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
31+
import {deleteWorkspacePerDiemRates, downloadPerDiemCSV, openPolicyPerDiemPage} from '@libs/actions/Policy/PerDiem';
32+
import {convertAmountToDisplayString} from '@libs/CurrencyUtils';
33+
import {canUseTouchScreen} from '@libs/DeviceCapabilities';
3334
import localeCompare from '@libs/LocaleCompare';
3435
import Navigation from '@libs/Navigation/Navigation';
3536
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
3637
import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
3738
import {getPerDiemCustomUnit} from '@libs/PolicyUtils';
3839
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
39-
import * as Link from '@userActions/Link';
40-
import * as Modal from '@userActions/Modal';
41-
import * as PerDiem from '@userActions/Policy/PerDiem';
40+
import {openExternalLink} from '@userActions/Link';
41+
import {close} from '@userActions/Modal';
4242
import CONST from '@src/CONST';
4343
import ROUTES from '@src/ROUTES';
4444
import type SCREENS from '@src/SCREENS';
@@ -138,7 +138,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
138138
const canSelectMultiple = shouldUseNarrowLayout ? selectionMode?.isEnabled : true;
139139

140140
const fetchPerDiem = useCallback(() => {
141-
PerDiem.openPolicyPerDiemPage(policyID);
141+
openPolicyPerDiemPage(policyID);
142142
}, [policyID]);
143143

144144
const {isOffline} = useNetwork({onReconnect: fetchPerDiem});
@@ -170,19 +170,17 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
170170
pendingAction: value.pendingAction,
171171
rightElement: (
172172
<>
173-
<View style={styles.flex1}>
174-
<Text style={[styles.alignItemsStart, styles.textSupporting, styles.label]}>{value.subRateName}</Text>
173+
<View style={styles.flex2}>
174+
<Text style={[styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2]}>{value.subRateName}</Text>
175175
</View>
176176
<View style={styles.flex1}>
177-
<Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>
178-
{CurrencyUtils.convertAmountToDisplayString(value.rate, value.currency)}
179-
</Text>
177+
<Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>{convertAmountToDisplayString(value.rate, value.currency)}</Text>
180178
</View>
181179
</>
182180
),
183181
};
184182
}),
185-
[allSubRates, selectedPerDiem, canSelectMultiple, styles.flex1, styles.alignItemsStart, styles.textSupporting, styles.label, styles.alignSelfEnd, styles.pl2],
183+
[allSubRates, selectedPerDiem, canSelectMultiple, styles.flex2, styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2, styles.flex1, styles.alignSelfEnd],
186184
);
187185

188186
const toggleSubRate = (subRate: PolicyOption) => {
@@ -207,11 +205,11 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
207205

208206
const getCustomListHeader = () => (
209207
<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, canSelectMultiple && styles.pl3, !canSelectMultiple && [styles.ph9, styles.pv3, styles.pb5]]}>
210-
<View style={styles.flex1}>
208+
<View style={styles.flex3}>
211209
<Text style={[styles.searchInputStyle, styles.alignSelfStart]}>{translate('common.destination')}</Text>
212210
</View>
213-
<View style={styles.flex1}>
214-
<Text style={[styles.searchInputStyle, styles.alignItemsStart]}>{translate('common.subrate')}</Text>
211+
<View style={styles.flex2}>
212+
<Text style={[styles.searchInputStyle, styles.alignItemsStart, styles.pl2]}>{translate('common.subrate')}</Text>
215213
</View>
216214
<View style={styles.flex1}>
217215
<Text style={[styles.searchInputStyle, styles.alignSelfEnd]}>{translate('workspace.perDiem.amount')}</Text>
@@ -228,7 +226,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
228226
};
229227

230228
const handleDeletePerDiemRates = () => {
231-
PerDiem.deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem);
229+
deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem);
232230
setSelectedPerDiem([]);
233231
setDeletePerDiemConfirmModalVisible(false);
234232
};
@@ -289,7 +287,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
289287
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.perDiem.subtitle')}</Text>
290288
<TextLink
291289
style={[styles.textNormal, styles.link]}
292-
onPress={() => Link.openExternalLink(CONST.DEEP_DIVE_PER_DIEM)}
290+
onPress={() => openExternalLink(CONST.DEEP_DIVE_PER_DIEM)}
293291
>
294292
{translate('workspace.common.learnMore')}
295293
</TextLink>
@@ -304,7 +302,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
304302
text: translate('spreadsheet.importSpreadsheet'),
305303
onSelected: () => {
306304
if (isOffline) {
307-
Modal.close(() => setIsOfflineModalVisible(true));
305+
close(() => setIsOfflineModalVisible(true));
308306
return;
309307
}
310308
Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_IMPORT.getRoute(policyID));
@@ -315,10 +313,10 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
315313
text: translate('spreadsheet.downloadCSV'),
316314
onSelected: () => {
317315
if (isOffline) {
318-
Modal.close(() => setIsOfflineModalVisible(true));
316+
close(() => setIsOfflineModalVisible(true));
319317
return;
320318
}
321-
PerDiem.downloadPerDiemCSV(policyID, () => {
319+
downloadPerDiemCSV(policyID, () => {
322320
setIsDownloadFailureModalVisible(true);
323321
});
324322
},
@@ -415,12 +413,13 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
415413
sections={[{data: subRatesList, isDisabled: false}]}
416414
onCheckboxPress={toggleSubRate}
417415
onSelectRow={openSubRateDetails}
418-
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
416+
shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
419417
onSelectAll={toggleAllSubRates}
420418
ListItem={TableListItem}
421419
customListHeader={getCustomListHeader()}
422420
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
423421
listHeaderContent={shouldUseNarrowLayout ? getHeaderText() : null}
422+
listItemTitleContainerStyles={styles.flex3}
424423
showScrollIndicator={false}
425424
/>
426425
)}

0 commit comments

Comments
 (0)
⚡