Skip to content

Add space between destination and subrate #54984

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
MarioExpensify merged 10 commits into from
Jan 16, 2025
Merged

Add space between destination and subrate #54984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fe4bda8
Add space between destination and subrate
mkzie2 Jan 9, 2025
3c39972
remove unchange code
mkzie2 Jan 9, 2025
7b54f74
Merge branch 'main' into mkzie2-issue/53928
mkzie2 Jan 14, 2025
155818e
update perdiem column ratio
mkzie2 Jan 14, 2025
118449d
remove unchange
mkzie2 Jan 14, 2025
6c9c0e4
fix eslint error
mkzie2 Jan 14, 2025
809bbcd
update ratio to 3:2:1
mkzie2 Jan 14, 2025
be2e5fe
Merge branch 'main' into mkzie2-issue/53928
mkzie2 Jan 14, 2025
95c0a8c
fix lint error
mkzie2 Jan 14, 2025
d550cbe
Merge branch 'main' into mkzie2-issue/53928
mkzie2 Jan 16, 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
2 changes: 2 additions & 0 deletions src/components/SelectionList/BaseSelectionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function BaseSelectionList<TItem extends ListItem>(
onContentSizeChange,
listItemTitleStyles,
initialNumToRender = 12,
listItemTitleContainerStyles,
}: BaseSelectionListProps<TItem>,
ref: ForwardedRef<SelectionListHandle>,
) {
Expand Down Expand Up @@ -552,6 +553,7 @@ function BaseSelectionList<TItem extends ListItem>(
titleStyles={listItemTitleStyles}
shouldHighlightSelectedItem={shouldHighlightSelectedItem}
singleExecution={singleExecution}
titleContainerStyles={listItemTitleContainerStyles}
/>
</View>
);
Expand Down
9 changes: 6 additions & 3 deletions src/components/SelectionList/BaseSelectionListItemRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'> &
Expand All @@ -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>({
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -86,6 +88,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
shouldHighlightSelectedItem={shouldHighlightSelectedItem}
wrapperStyle={wrapperStyle}
titleStyles={titleStyles}
titleContainerStyles={titleContainerStyles}
/>
{item.footerContent && item.footerContent}
</>
Expand Down
3 changes: 2 additions & 1 deletion src/components/SelectionList/TableListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function TableListItem<TItem extends ListItem>({
onFocus,
onLongPressRow,
shouldSyncFocus,
titleContainerStyles,
}: TableListItemProps<TItem>) {
const styles = useThemeStyles();
const theme = useTheme();
Expand Down Expand Up @@ -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 ?? ''}
Expand Down
6 changes: 6 additions & 0 deletions src/components/SelectionList/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> & {
Expand Down Expand Up @@ -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;

Expand Down
41 changes: 20 additions & 21 deletions src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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});
Expand Down Expand Up @@ -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) => {
Expand All @@ -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}>
Comment on lines +208 to 214
Copy link
Copy Markdown
Member

@s77rt s77rt Feb 15, 2025

Choose a reason for hiding this comment

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

This gave the amount column too little space that in mobile the amount is rendered in two lines #55945.

We have changed the ratio to 3:2:2

<Text style={[styles.searchInputStyle, styles.alignSelfEnd]}>{translate('workspace.perDiem.amount')}</Text>
Expand All @@ -228,7 +226,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
};

const handleDeletePerDiemRates = () => {
PerDiem.deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem);
deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem);
setSelectedPerDiem([]);
setDeletePerDiemConfirmModalVisible(false);
};
Expand Down Expand Up @@ -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>
Expand All @@ -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));
Expand All @@ -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);
});
},
Expand Down Expand Up @@ -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}
/>
)}
Expand Down
⚡