Skip to content

Commit e92ae2e

Browse files
Krishna2323cursoragent
Krishna2323
and
cursoragent
committed
Reapply compact table and row styles for report transaction list
Signed-off-by: krishna2323 <belivethatkg@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 589e414 commit e92ae2e

6 files changed

Lines changed: 111 additions & 83 deletions

File tree

‎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: 11 additions & 5 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,7 +71,7 @@ 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;
7576
};
7677

@@ -95,6 +96,7 @@ function MoneyRequestReportTransactionItem({
9596
}: MoneyRequestReportTransactionItemProps) {
9697
const {translate} = useLocalize();
9798
const styles = useThemeStyles();
99+
const StyleUtils = useStyleUtils();
98100
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
99101
const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
100102
const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
@@ -117,15 +119,18 @@ function MoneyRequestReportTransactionItem({
117119
}, [scrollToNewTransaction, shouldBeHighlighted]);
118120

119121
const animatedHighlightStyle = useAnimatedHighlightStyle({
120-
borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius,
122+
borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
121123
shouldHighlight: shouldBeHighlighted,
122124
highlightColor: theme.messageHighlightBG,
123125
backgroundColor: theme.highlightBG,
124126
shouldApplyOtherStyles: !shouldUseNarrowLayout,
125127
});
126128

127129
return (
128-
<OfflineWithFeedback pendingAction={pendingAction}>
130+
<OfflineWithFeedback
131+
pendingAction={pendingAction}
132+
style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
133+
>
129134
<PressableWithFeedback
130135
key={transaction.transactionID}
131136
onPress={() => {
@@ -136,7 +141,7 @@ function MoneyRequestReportTransactionItem({
136141
role={getButtonRole(true)}
137142
isNested
138143
id={transaction.transactionID}
139-
style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]}
144+
style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]}
140145
hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
141146
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
142147
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
@@ -164,13 +169,14 @@ function MoneyRequestReportTransactionItem({
164169
onCheckboxPress={toggleTransaction}
165170
columns={columns}
166171
isDisabled={isPendingDelete}
167-
style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]}
172+
style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
168173
onButtonPress={() => {
169174
handleOnPress(transaction.transactionID);
170175
}}
171176
onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
172177
isHover={hovered}
173178
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
179+
shouldRemoveTotalColumnFlex
174180
/>
175181
)}
176182
</PressableWithFeedback>

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import useHandleSelectionMode from '@hooks/useHandleSelectionMode';
2828
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
2929
import useLocalize from '@hooks/useLocalize';
3030
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
31+
import useNetwork from '@hooks/useNetwork';
3132
import useOnyx from '@hooks/useOnyx';
3233
import useReportIsArchived from '@hooks/useReportIsArchived';
3334
import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -154,6 +155,7 @@ function MoneyRequestReportTransactionList({
154155
const [isModalVisible, setIsModalVisible] = useState(false);
155156
const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');
156157
const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report);
158+
const {isOffline} = useNetwork();
157159

158160
const isTaxEnabled = isPolicyTaxEnabled(policy);
159161
const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report);
@@ -563,11 +565,36 @@ function MoneyRequestReportTransactionList({
563565
[groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode],
564566
);
565567

568+
const isDesktopTableLayout = !shouldUseNarrowLayout;
569+
566570
const lastTransactionID = useMemo(() => {
567571
const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions;
568-
const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t));
569-
return nonDeletedTransactions.at(-1)?.transactionID;
570-
}, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]);
572+
const visibleTransactions = allTransactions.filter((t) => isOffline || !isTransactionPendingDelete(t));
573+
return visibleTransactions.at(-1)?.transactionID;
574+
}, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions, isOffline]);
575+
576+
const renderTransactionItem = (transaction: TransactionWithOptionalHighlight) => (
577+
<MoneyRequestReportTransactionItem
578+
key={transaction.transactionID}
579+
transaction={transaction}
580+
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
581+
columns={columnsToShow}
582+
report={report}
583+
policy={policy}
584+
isSelectionModeEnabled={isMobileSelectionModeEnabled}
585+
toggleTransaction={toggleTransaction}
586+
isSelected={isTransactionSelected(transaction.transactionID)}
587+
handleOnPress={handleOnPress}
588+
handleLongPress={handleLongPress}
589+
dateColumnSize={dateColumnSize}
590+
amountColumnSize={amountColumnSize}
591+
taxAmountColumnSize={taxAmountColumnSize}
592+
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
593+
onArrowRightPress={handleArrowRightPress}
594+
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
595+
isLastItem={!showPendingExpensePlaceholder && transaction.transactionID === lastTransactionID}
596+
/>
597+
);
571598

572599
const transactionItems = shouldShowGroupedTransactions
573600
? groupedTransactions.map((group) => {
@@ -577,12 +604,8 @@ function MoneyRequestReportTransactionList({
577604
isDisabled: false,
578605
pendingAction: undefined,
579606
};
580-
581607
return (
582-
<View
583-
key={group.groupKey}
584-
style={!shouldUseNarrowLayout && styles.gap2}
585-
>
608+
<View key={group.groupKey}>
586609
<MoneyRequestReportGroupHeader
587610
group={group}
588611
groupKey={group.groupKey}
@@ -596,65 +619,17 @@ function MoneyRequestReportTransactionList({
596619
pendingAction={selectionState.pendingAction}
597620
shouldUseNarrowLayout={shouldUseNarrowLayout}
598621
/>
599-
{group.transactions.map((transaction) => {
600-
const isLastItem = transaction.transactionID === lastTransactionID;
601-
return (
602-
<MoneyRequestReportTransactionItem
603-
key={transaction.transactionID}
604-
transaction={transaction}
605-
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
606-
columns={columnsToShow}
607-
report={report}
608-
policy={policy}
609-
isSelectionModeEnabled={isMobileSelectionModeEnabled}
610-
toggleTransaction={toggleTransaction}
611-
isSelected={isTransactionSelected(transaction.transactionID)}
612-
handleOnPress={handleOnPress}
613-
handleLongPress={handleLongPress}
614-
dateColumnSize={dateColumnSize}
615-
amountColumnSize={amountColumnSize}
616-
taxAmountColumnSize={taxAmountColumnSize}
617-
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
618-
onArrowRightPress={handleArrowRightPress}
619-
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
620-
isLastItem={isLastItem}
621-
/>
622-
);
623-
})}
622+
{group.transactions.map((transaction) => renderTransactionItem(transaction))}
624623
</View>
625624
);
626625
})
627-
: resolvedTransactions.map((transaction) => {
628-
const isLastItem = transaction.transactionID === lastTransactionID;
629-
return (
630-
<MoneyRequestReportTransactionItem
631-
key={transaction.transactionID}
632-
transaction={transaction}
633-
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
634-
columns={columnsToShow}
635-
report={report}
636-
policy={policy}
637-
isSelectionModeEnabled={isMobileSelectionModeEnabled}
638-
toggleTransaction={toggleTransaction}
639-
isSelected={isTransactionSelected(transaction.transactionID)}
640-
handleOnPress={handleOnPress}
641-
handleLongPress={handleLongPress}
642-
dateColumnSize={dateColumnSize}
643-
amountColumnSize={amountColumnSize}
644-
taxAmountColumnSize={taxAmountColumnSize}
645-
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
646-
onArrowRightPress={handleArrowRightPress}
647-
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
648-
isLastItem={isLastItem}
649-
/>
650-
);
651-
});
626+
: resolvedTransactions.map((transaction) => renderTransactionItem(transaction));
652627

653628
const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined;
654629

655630
const transactionListContent = (
656631
<View
657-
style={[listHorizontalPadding, !shouldUseNarrowLayout && styles.gap2, shouldUseNarrowLayout ? styles.pb2 : styles.pb4, !shouldUseNarrowLayout && styles.mb2]}
632+
style={[listHorizontalPadding, shouldUseNarrowLayout ? styles.pb2 : styles.pb4]}
658633
onLayout={onLayout}
659634
>
660635
{narrowListWrapper ? <View style={narrowListWrapper}>{transactionItems}</View> : transactionItems}
@@ -673,8 +648,27 @@ function MoneyRequestReportTransactionList({
673648

674649
const tableHeaderContent = (
675650
<OfflineWithFeedback pendingAction={reportPendingAction}>
676-
<View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr16, styles.alignItemsCenter]}>
677-
<View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
651+
<View
652+
style={[
653+
styles.dFlex,
654+
styles.flexRow,
655+
!isDesktopTableLayout && styles.pl5,
656+
isDesktopTableLayout ? styles.pr11 : styles.pr16,
657+
styles.alignItemsCenter,
658+
isDesktopTableLayout && [styles.highlightBG, styles.searchTableTopRadius, styles.mh5, styles.borderBottom],
659+
]}
660+
>
661+
<View
662+
style={[
663+
styles.dFlex,
664+
styles.flexRow,
665+
styles.alignItemsCenter,
666+
styles.pv2,
667+
!isDesktopTableLayout && styles.pr4,
668+
StyleUtils.getPaddingLeft(variables.w12),
669+
isDesktopTableLayout && {minHeight: variables.tableGroupRowHeight},
670+
]}
671+
>
678672
<Checkbox
679673
onPress={() => {
680674
if (selectedTransactionIDs.length !== 0) {
@@ -686,14 +680,17 @@ function MoneyRequestReportTransactionList({
686680
accessibilityLabel={translate('accessibilityHints.selectAllTransactions')}
687681
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}
688682
isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length}
683+
containerStyle={isDesktopTableLayout && styles.m0}
684+
style={isDesktopTableLayout && styles.mr3}
689685
/>
690-
{isMediumScreenWidth && !shouldScrollHorizontally && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
686+
{isMediumScreenWidth && !shouldScrollHorizontally && <Text style={[styles.labelStrong]}>{translate('workspace.people.selectAll')}</Text>}
691687
</View>
692688
{(!isMediumScreenWidth || shouldScrollHorizontally) && (
693689
<MoneyRequestReportTableHeader
694690
shouldShowSorting
695691
sortBy={sortBy}
696692
sortOrder={sortOrder}
693+
shouldRemoveTotalColumnFlex
697694
columns={columnsToShow}
698695
dateColumnSize={dateColumnSize}
699696
amountColumnSize={amountColumnSize}

0 commit comments

Comments
 (0)