Skip to content

Commit 177109b

Browse files
blimpichblimpich
authored
Merge pull request #89550 from Expensify/jsenyitko-revert-conflicts
2 parents f0397ce + 68ab49b commit 177109b

6 files changed

Lines changed: 83 additions & 111 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import React from 'react';
1+
import React, {useCallback, useMemo} 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';
109
import useThemeStyles from '@hooks/useThemeStyles';
1110
import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils';
1211
import variables from '@styles/variables';
1312
import CONST from '@src/CONST';
1413
import type {GroupedTransactions} from '@src/types/onyx';
1514
import type {PendingAction} from '@src/types/onyx/OnyxCommon';
1615

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

7676
const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout;
7777

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

80-
const handleToggleSelection = () => {
83+
const handleToggleSelection = useCallback(() => {
8184
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];
85+
}, [onToggleSelection, groupKey]);
9586

9687
return (
9788
<OfflineWithFeedback pendingAction={pendingAction}>
98-
<View style={groupHeaderStyle}>
89+
<View style={[shouldUseNarrowLayout ? [styles.ph4, styles.pv3, styles.borderBottom] : [styles.reportLayoutGroupHeader, {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}]]}>
9990
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
10091
{shouldShowCheckbox && (
10192
<Checkbox
@@ -104,12 +95,11 @@ function MoneyRequestReportGroupHeader({
10495
disabled={isDisabled}
10596
onPress={handleToggleSelection}
10697
accessibilityLabel={translate('reportLayout.selectGroup', {groupName: displayName})}
107-
containerStyle={!shouldUseNarrowLayout && styles.m0}
108-
style={!shouldUseNarrowLayout ? styles.mr3 : styles.mr2}
98+
style={styles.mr2}
10999
/>
110100
)}
111101
<Text
112-
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && shouldUseNarrowLayout && styles.ml2]}
102+
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && styles.ml2]}
113103
numberOfLines={1}
114104
>
115105
{displayName}

‎src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx‎

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

3423
const columnConfig = useMemo(
@@ -88,7 +77,6 @@ function MoneyRequestReportTableHeader({
8877
sortBy={sortBy}
8978
sortOrder={sortOrder}
9079
onSortPress={onSortPress}
91-
shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex}
9280
/>
9381
</View>
9482
);

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ 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';
1413
import useTheme from '@hooks/useTheme';
1514
import useThemeStyles from '@hooks/useThemeStyles';
1615
import useTransactionViolations from '@hooks/useTransactionViolations';
@@ -71,7 +70,7 @@ type MoneyRequestReportTransactionItemProps = {
7170
/** List of cards for the user */
7271
nonPersonalAndWorkspaceCards: CardList;
7372

74-
/** Whether this is the last item in the list */
73+
/** Whether this is the last item in the list (used to skip border-bottom on narrow) */
7574
isLastItem?: boolean;
7675
};
7776

@@ -96,7 +95,6 @@ function MoneyRequestReportTransactionItem({
9695
}: MoneyRequestReportTransactionItemProps) {
9796
const {translate} = useLocalize();
9897
const styles = useThemeStyles();
99-
const StyleUtils = useStyleUtils();
10098
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
10199
const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
102100
const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
@@ -119,18 +117,15 @@ function MoneyRequestReportTransactionItem({
119117
}, [scrollToNewTransaction, shouldBeHighlighted]);
120118

121119
const animatedHighlightStyle = useAnimatedHighlightStyle({
122-
borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
120+
borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius,
123121
shouldHighlight: shouldBeHighlighted,
124122
highlightColor: theme.messageHighlightBG,
125123
backgroundColor: theme.highlightBG,
126124
shouldApplyOtherStyles: !shouldUseNarrowLayout,
127125
});
128126

129127
return (
130-
<OfflineWithFeedback
131-
pendingAction={pendingAction}
132-
style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
133-
>
128+
<OfflineWithFeedback pendingAction={pendingAction}>
134129
<PressableWithFeedback
135130
key={transaction.transactionID}
136131
onPress={() => {
@@ -141,7 +136,7 @@ function MoneyRequestReportTransactionItem({
141136
role={getButtonRole(true)}
142137
isNested
143138
id={transaction.transactionID}
144-
style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]}
139+
style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]}
145140
hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
146141
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
147142
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
@@ -169,14 +164,13 @@ function MoneyRequestReportTransactionItem({
169164
onCheckboxPress={toggleTransaction}
170165
columns={columns}
171166
isDisabled={isPendingDelete}
172-
style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
167+
style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]}
173168
onButtonPress={() => {
174169
handleOnPress(transaction.transactionID);
175170
}}
176171
onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
177172
isHover={hovered}
178173
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
179-
shouldRemoveTotalColumnFlex
180174
/>
181175
)}
182176
</PressableWithFeedback>

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 62 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ 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';
3231
import useOnyx from '@hooks/useOnyx';
3332
import useReportIsArchived from '@hooks/useReportIsArchived';
3433
import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -155,7 +154,6 @@ function MoneyRequestReportTransactionList({
155154
const [isModalVisible, setIsModalVisible] = useState(false);
156155
const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');
157156
const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report);
158-
const {isOffline} = useNetwork();
159157

160158
const isTaxEnabled = isPolicyTaxEnabled(policy);
161159
const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report);
@@ -565,36 +563,11 @@ function MoneyRequestReportTransactionList({
565563
[groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode],
566564
);
567565

568-
const isDesktopTableLayout = !shouldUseNarrowLayout;
569-
570566
const lastTransactionID = useMemo(() => {
571567
const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : 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-
);
568+
const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t));
569+
return nonDeletedTransactions.at(-1)?.transactionID;
570+
}, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]);
598571

599572
const transactionItems = shouldShowGroupedTransactions
600573
? groupedTransactions.map((group) => {
@@ -604,8 +577,12 @@ function MoneyRequestReportTransactionList({
604577
isDisabled: false,
605578
pendingAction: undefined,
606579
};
580+
607581
return (
608-
<View key={group.groupKey}>
582+
<View
583+
key={group.groupKey}
584+
style={!shouldUseNarrowLayout && styles.gap2}
585+
>
609586
<MoneyRequestReportGroupHeader
610587
group={group}
611588
groupKey={group.groupKey}
@@ -619,17 +596,65 @@ function MoneyRequestReportTransactionList({
619596
pendingAction={selectionState.pendingAction}
620597
shouldUseNarrowLayout={shouldUseNarrowLayout}
621598
/>
622-
{group.transactions.map((transaction) => renderTransactionItem(transaction))}
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+
})}
623624
</View>
624625
);
625626
})
626-
: resolvedTransactions.map((transaction) => renderTransactionItem(transaction));
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+
});
627652

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

630655
const transactionListContent = (
631656
<View
632-
style={[listHorizontalPadding, shouldUseNarrowLayout ? styles.pb2 : styles.pb4]}
657+
style={[listHorizontalPadding, !shouldUseNarrowLayout && styles.gap2, shouldUseNarrowLayout ? styles.pb2 : styles.pb4, !shouldUseNarrowLayout && styles.mb2]}
633658
onLayout={onLayout}
634659
>
635660
{narrowListWrapper ? <View style={narrowListWrapper}>{transactionItems}</View> : transactionItems}
@@ -648,27 +673,8 @@ function MoneyRequestReportTransactionList({
648673

649674
const tableHeaderContent = (
650675
<OfflineWithFeedback pendingAction={reportPendingAction}>
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-
>
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)]}>
672678
<Checkbox
673679
onPress={() => {
674680
if (selectedTransactionIDs.length !== 0) {
@@ -680,10 +686,8 @@ function MoneyRequestReportTransactionList({
680686
accessibilityLabel={translate('accessibilityHints.selectAllTransactions')}
681687
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}
682688
isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length}
683-
containerStyle={isDesktopTableLayout && styles.m0}
684-
style={isDesktopTableLayout && styles.mr3}
685689
/>
686-
{isMediumScreenWidth && !shouldScrollHorizontally && <Text style={[styles.labelStrong]}>{translate('workspace.people.selectAll')}</Text>}
690+
{isMediumScreenWidth && !shouldScrollHorizontally && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
687691
</View>
688692
{(!isMediumScreenWidth || shouldScrollHorizontally) && (
689693
<MoneyRequestReportTableHeader
@@ -694,7 +698,6 @@ function MoneyRequestReportTransactionList({
694698
dateColumnSize={dateColumnSize}
695699
amountColumnSize={amountColumnSize}
696700
taxAmountColumnSize={taxAmountColumnSize}
697-
shouldRemoveTotalColumnFlex
698701
onSortPress={(selectedSortBy, selectedSortOrder) => {
699702
if (!isSortableColumnName(selectedSortBy)) {
700703
return;

0 commit comments

Comments
 (0)