Skip to content

Commit 301125e

Browse files
JS00001JS00001
authored
Merge pull request Expensify#89575 from Krishna2323/krishna2323/issue/86203-reapply
Reapply compact table and row styles for report transaction list
2 parents 3caeca4 + b74c4bb commit 301125e

11 files changed

Lines changed: 149 additions & 101 deletions

‎src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import React, {useCallback, useMemo} from 'react';
1+
import React from 'react';
22
import {View} from 'react-native';
33
import Checkbox from '@components/Checkbox';
44
import OfflineWithFeedback from '@components/OfflineWithFeedback';
55
import Text from '@components/Text';
66
import {useCurrencyListActions} from '@hooks/useCurrencyList';
77
import useLocalize from '@hooks/useLocalize';
88
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
9+
import useTheme from '@hooks/useTheme';
910
import useThemeStyles from '@hooks/useThemeStyles';
1011
import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils';
1112
import variables from '@styles/variables';
1213
import CONST from '@src/CONST';
1314
import type {GroupedTransactions} from '@src/types/onyx';
1415
import type {PendingAction} from '@src/types/onyx/OnyxCommon';
1516

16-
const DESKTOP_HEIGHT = 28;
17-
1817
type MoneyRequestReportGroupHeaderProps = {
1918
/** The grouped transaction data */
2019
group: GroupedTransactions;
@@ -65,6 +64,7 @@ function MoneyRequestReportGroupHeader({
6564
}: MoneyRequestReportGroupHeaderProps) {
6665
const {convertToDisplayString} = useCurrencyListActions();
6766
const styles = useThemeStyles();
67+
const theme = useTheme();
6868
const {translate} = useLocalize();
6969
const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP();
7070
const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook;
@@ -75,18 +75,27 @@ function MoneyRequestReportGroupHeader({
7575

7676
const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout;
7777

78-
const textStyle = useMemo(
79-
() => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}),
80-
[shouldUseNarrowLayout],
81-
);
78+
const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong];
8279

83-
const handleToggleSelection = useCallback(() => {
80+
const handleToggleSelection = () => {
8481
onToggleSelection?.(groupKey);
85-
}, [onToggleSelection, groupKey]);
82+
};
83+
84+
const groupHeaderStyle = !shouldUseNarrowLayout
85+
? [
86+
{minHeight: variables.tableGroupRowHeight},
87+
styles.justifyContentCenter,
88+
styles.highlightBG,
89+
styles.pv2,
90+
styles.ph3,
91+
styles.borderBottom,
92+
isSelected && {borderColor: theme.buttonHoveredBG},
93+
]
94+
: [styles.ph4, styles.pv3, styles.borderBottom];
8695

8796
return (
8897
<OfflineWithFeedback pendingAction={pendingAction}>
89-
<View style={[shouldUseNarrowLayout ? [styles.ph4, styles.pv3, styles.borderBottom] : [styles.reportLayoutGroupHeader, {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}]]}>
98+
<View style={groupHeaderStyle}>
9099
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
91100
{shouldShowCheckbox && (
92101
<Checkbox
@@ -95,11 +104,12 @@ function MoneyRequestReportGroupHeader({
95104
disabled={isDisabled}
96105
onPress={handleToggleSelection}
97106
accessibilityLabel={translate('reportLayout.selectGroup', {groupName: displayName})}
98-
style={styles.mr2}
107+
containerStyle={!shouldUseNarrowLayout && styles.m0}
108+
style={!shouldUseNarrowLayout ? styles.mr3 : styles.mr2}
99109
/>
100110
)}
101111
<Text
102-
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && styles.ml2]}
112+
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && shouldUseNarrowLayout && styles.ml2]}
103113
numberOfLines={1}
104114
>
105115
{displayName}

‎src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,19 @@ type SearchTableHeaderProps = {
1616
taxAmountColumnSize: TableColumnSize;
1717
shouldShowSorting: boolean;
1818
columns: SearchColumnType[];
19+
shouldRemoveTotalColumnFlex?: boolean;
1920
};
20-
function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, columns, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) {
21+
function MoneyRequestReportTableHeader({
22+
sortBy,
23+
sortOrder,
24+
onSortPress,
25+
dateColumnSize,
26+
shouldShowSorting,
27+
columns,
28+
amountColumnSize,
29+
taxAmountColumnSize,
30+
shouldRemoveTotalColumnFlex,
31+
}: SearchTableHeaderProps) {
2132
const styles = useThemeStyles();
2233

2334
const columnConfig = useMemo(
@@ -77,6 +88,7 @@ function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColu
7788
sortBy={sortBy}
7889
sortOrder={sortOrder}
7990
onSortPress={onSortPress}
91+
shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex}
8092
/>
8193
</View>
8294
);

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
1010
import useLocalize from '@hooks/useLocalize';
1111
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1212
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
13+
import useStyleUtils from '@hooks/useStyleUtils';
1314
import useTheme from '@hooks/useTheme';
1415
import useThemeStyles from '@hooks/useThemeStyles';
1516
import useTransactionViolations from '@hooks/useTransactionViolations';
@@ -70,8 +71,11 @@ type MoneyRequestReportTransactionItemProps = {
7071
/** List of cards for the user */
7172
nonPersonalAndWorkspaceCards: CardList;
7273

73-
/** Whether this is the last item in the list (used to skip border-bottom on narrow) */
74+
/** Whether this is the last item in the list */
7475
isLastItem?: boolean;
76+
77+
/** Whether the list is horizontally scrollable */
78+
shouldScrollHorizontally?: boolean;
7579
};
7680

7781
function MoneyRequestReportTransactionItem({
@@ -92,9 +96,11 @@ function MoneyRequestReportTransactionItem({
9296
shouldBeHighlighted,
9397
nonPersonalAndWorkspaceCards,
9498
isLastItem = false,
99+
shouldScrollHorizontally = false,
95100
}: MoneyRequestReportTransactionItemProps) {
96101
const {translate} = useLocalize();
97102
const styles = useThemeStyles();
103+
const StyleUtils = useStyleUtils();
98104
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
99105
const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
100106
const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
@@ -117,15 +123,18 @@ function MoneyRequestReportTransactionItem({
117123
}, [scrollToNewTransaction, shouldBeHighlighted]);
118124

119125
const animatedHighlightStyle = useAnimatedHighlightStyle({
120-
borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius,
126+
borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
121127
shouldHighlight: shouldBeHighlighted,
122128
highlightColor: theme.messageHighlightBG,
123129
backgroundColor: theme.highlightBG,
124130
shouldApplyOtherStyles: !shouldUseNarrowLayout,
125131
});
126132

127133
return (
128-
<OfflineWithFeedback pendingAction={pendingAction}>
134+
<OfflineWithFeedback
135+
pendingAction={pendingAction}
136+
style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
137+
>
129138
<PressableWithFeedback
130139
key={transaction.transactionID}
131140
onPress={() => {
@@ -136,7 +145,7 @@ function MoneyRequestReportTransactionItem({
136145
role={getButtonRole(true)}
137146
isNested
138147
id={transaction.transactionID}
139-
style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]}
148+
style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]}
140149
hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
141150
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
142151
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
@@ -146,7 +155,7 @@ function MoneyRequestReportTransactionItem({
146155
}}
147156
disabled={isTransactionPendingDelete(transaction)}
148157
ref={viewRef}
149-
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]}
158+
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}
150159
>
151160
{({hovered}) => (
152161
<TransactionItemRow
@@ -159,18 +168,19 @@ function MoneyRequestReportTransactionItem({
159168
amountColumnSize={amountColumnSize}
160169
taxAmountColumnSize={taxAmountColumnSize}
161170
shouldShowTooltip
162-
shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
171+
shouldUseNarrowLayout={shouldUseNarrowLayout || (isMediumScreenWidth && !shouldScrollHorizontally)}
163172
shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth}
164173
onCheckboxPress={toggleTransaction}
165174
columns={columns}
166175
isDisabled={isPendingDelete}
167-
style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]}
176+
style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
168177
onButtonPress={() => {
169178
handleOnPress(transaction.transactionID);
170179
}}
171180
onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
172181
isHover={hovered}
173182
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
183+
shouldRemoveTotalColumnFlex
174184
/>
175185
)}
176186
</PressableWithFeedback>

0 commit comments

Comments
 (0)