Skip to content

Commit b94739a

Browse files
luacmartinsluacmartins
authored
Merge pull request Expensify#87742 from Krishna2323/krishna2323/issue/87460
Update table and row styles for mobile search pages
2 parents 9c594fd + 39dc75a commit b94739a

30 files changed

Lines changed: 435 additions & 467 deletions

‎src/CONST/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2590,7 +2590,6 @@ const CONST = {
25902590
LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
25912591
LHN_VIEWPORT_ITEM_COUNT: 20,
25922592
SEARCH_SKELETON_VIEW_ITEM_HEIGHT: 108,
2593-
SEARCH_SKELETON_VIEW_ITEM_HEIGHT_SMALL: 96,
25942593
EXPENSIFY_PARTNER_NAME: 'expensify.com',
25952594
EXPENSIFY_MERCHANT: 'Expensify, Inc.',
25962595
EMAIL,

‎src/components/AnimatedCollapsible/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Icon from '@components/Icon';
88
import {easing} from '@components/Modal/ReanimatedModal/utils';
99
import {PressableWithFeedback} from '@components/Pressable';
1010
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
11+
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1112
import useTheme from '@hooks/useTheme';
1213
import useThemeStyles from '@hooks/useThemeStyles';
1314
import CONST from '@src/CONST';
@@ -72,6 +73,7 @@ function AnimatedCollapsible({
7273
}: AnimatedCollapsibleProps) {
7374
const theme = useTheme();
7475
const styles = useThemeStyles();
76+
const {isLargeScreenWidth} = useResponsiveLayout();
7577
const expensifyIcons = useMemoizedLazyExpensifyIcons(['UpArrow', 'DownArrow']);
7678
const contentHeight = useSharedValue(0);
7779
const descriptionHeight = useSharedValue(0);
@@ -182,7 +184,7 @@ function AnimatedCollapsible({
182184
}
183185
}}
184186
>
185-
<View style={[styles.pv2, styles.ph3, styles.pb1]}>
187+
<View style={isLargeScreenWidth ? [styles.pv2, styles.ph3, styles.pb1] : styles.ph3}>
186188
<View style={[styles.borderBottom, borderBottomStyle]} />
187189
</View>
188190
{children}

‎src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ import CONST from '@src/CONST';
1313
import type {GroupedTransactions} from '@src/types/onyx';
1414
import type {PendingAction} from '@src/types/onyx/OnyxCommon';
1515

16-
// Height constants
1716
const DESKTOP_HEIGHT = 28;
18-
const MOBILE_HEIGHT_WITH_CHECKBOX = 20;
19-
const MOBILE_HEIGHT_WITHOUT_CHECKBOX = 16;
2017

2118
type MoneyRequestReportGroupHeaderProps = {
2219
/** The grouped transaction data */
@@ -48,6 +45,9 @@ type MoneyRequestReportGroupHeaderProps = {
4845

4946
/** Pending action for offline feedback styling (Pattern B - Optimistic WITH Feedback) */
5047
pendingAction?: PendingAction;
48+
49+
/** Whether to use narrow layout */
50+
shouldUseNarrowLayout?: boolean;
5151
};
5252

5353
function MoneyRequestReportGroupHeader({
@@ -61,29 +61,23 @@ function MoneyRequestReportGroupHeader({
6161
isDisabled = false,
6262
onToggleSelection,
6363
pendingAction,
64+
shouldUseNarrowLayout: shouldUseNarrowLayoutProp,
6465
}: MoneyRequestReportGroupHeaderProps) {
6566
const {convertToDisplayString} = useCurrencyListActions();
6667
const styles = useThemeStyles();
6768
const {translate} = useLocalize();
68-
const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
69+
const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP();
70+
const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook;
6971

7072
const cleanedGroupName = isGroupedByTag && group.groupName ? getCommaSeparatedTagNameWithSanitizedColons(group.groupName) : group.groupName;
7173
const displayName = cleanedGroupName || translate(isGroupedByTag ? 'reportLayout.noTag' : 'reportLayout.uncategorized');
7274
const formattedAmount = convertToDisplayString(group.subTotalAmount, currency);
7375

7476
const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout;
7577

76-
const conditionalHeight = useMemo(
77-
() => (shouldUseNarrowLayout ? {height: shouldShowCheckbox ? MOBILE_HEIGHT_WITH_CHECKBOX : MOBILE_HEIGHT_WITHOUT_CHECKBOX} : {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}),
78-
[shouldUseNarrowLayout, shouldShowCheckbox],
79-
);
80-
8178
const textStyle = useMemo(
82-
() =>
83-
shouldUseNarrowLayout
84-
? {fontSize: variables.fontSizeLabel, lineHeight: shouldShowCheckbox ? MOBILE_HEIGHT_WITH_CHECKBOX : MOBILE_HEIGHT_WITHOUT_CHECKBOX}
85-
: {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT},
86-
[shouldUseNarrowLayout, shouldShowCheckbox],
79+
() => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}),
80+
[shouldUseNarrowLayout],
8781
);
8882

8983
const handleToggleSelection = useCallback(() => {
@@ -92,7 +86,7 @@ function MoneyRequestReportGroupHeader({
9286

9387
return (
9488
<OfflineWithFeedback pendingAction={pendingAction}>
95-
<View style={[styles.reportLayoutGroupHeader, conditionalHeight]}>
89+
<View style={[shouldUseNarrowLayout ? [styles.ph4, styles.pv3, styles.borderBottom] : [styles.reportLayoutGroupHeader, {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}]]}>
9690
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
9791
{shouldShowCheckbox && (
9892
<Checkbox

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@ type MoneyRequestReportTransactionItemProps = {
6969

7070
/** List of cards for the user */
7171
nonPersonalAndWorkspaceCards: CardList;
72+
73+
/** Whether this is the last item in the list (used to skip border-bottom on narrow) */
74+
isLastItem?: boolean;
7275
};
7376

7477
function MoneyRequestReportTransactionItem({
@@ -88,6 +91,7 @@ function MoneyRequestReportTransactionItem({
8891
onArrowRightPress,
8992
shouldBeHighlighted,
9093
nonPersonalAndWorkspaceCards,
94+
isLastItem = false,
9195
}: MoneyRequestReportTransactionItemProps) {
9296
const {translate} = useLocalize();
9397
const styles = useThemeStyles();
@@ -113,10 +117,11 @@ function MoneyRequestReportTransactionItem({
113117
}, [scrollToNewTransaction, shouldBeHighlighted]);
114118

115119
const animatedHighlightStyle = useAnimatedHighlightStyle({
116-
borderRadius: variables.componentBorderRadius,
120+
borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius,
117121
shouldHighlight: shouldBeHighlighted,
118122
highlightColor: theme.messageHighlightBG,
119123
backgroundColor: theme.highlightBG,
124+
shouldApplyOtherStyles: !shouldUseNarrowLayout,
120125
});
121126

122127
return (
@@ -131,7 +136,7 @@ function MoneyRequestReportTransactionItem({
131136
role={getButtonRole(true)}
132137
isNested
133138
id={transaction.transactionID}
134-
style={[styles.transactionListItemStyle]}
139+
style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]}
135140
hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
136141
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
137142
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
@@ -141,7 +146,7 @@ function MoneyRequestReportTransactionItem({
141146
}}
142147
disabled={isTransactionPendingDelete(transaction)}
143148
ref={viewRef}
144-
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]}
149+
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]}
145150
>
146151
{({hovered}) => (
147152
<TransactionItemRow
@@ -159,7 +164,7 @@ function MoneyRequestReportTransactionItem({
159164
onCheckboxPress={toggleTransaction}
160165
columns={columns}
161166
isDisabled={isPendingDelete}
162-
style={[styles.p3]}
167+
style={shouldUseNarrowLayout ? [styles.p4] : [styles.p3]}
163168
onButtonPress={() => {
164169
handleOnPress(transaction.transactionID);
165170
}}

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 92 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -554,84 +554,101 @@ function MoneyRequestReportTransactionList({
554554
[groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode],
555555
);
556556

557+
const lastTransactionID = useMemo(() => {
558+
const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions;
559+
const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t));
560+
return nonDeletedTransactions.at(-1)?.transactionID;
561+
}, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]);
562+
563+
const transactionItems = shouldShowGroupedTransactions
564+
? groupedTransactions.map((group) => {
565+
const selectionState = groupSelectionState.get(group.groupKey) ?? {
566+
isSelected: false,
567+
isIndeterminate: false,
568+
isDisabled: false,
569+
pendingAction: undefined,
570+
};
571+
572+
return (
573+
<View
574+
key={group.groupKey}
575+
style={!shouldUseNarrowLayout && styles.gap2}
576+
>
577+
<MoneyRequestReportGroupHeader
578+
group={group}
579+
groupKey={group.groupKey}
580+
currency={report?.currency ?? ''}
581+
isGroupedByTag={currentGroupBy === CONST.REPORT_LAYOUT.GROUP_BY.TAG}
582+
isSelectionModeEnabled={isMobileSelectionModeEnabled}
583+
isSelected={selectionState.isSelected}
584+
isIndeterminate={selectionState.isIndeterminate}
585+
isDisabled={selectionState.isDisabled}
586+
onToggleSelection={toggleGroupSelection}
587+
pendingAction={selectionState.pendingAction}
588+
shouldUseNarrowLayout={shouldUseNarrowLayout}
589+
/>
590+
{group.transactions.map((transaction) => {
591+
const isLastItem = transaction.transactionID === lastTransactionID;
592+
return (
593+
<MoneyRequestReportTransactionItem
594+
key={transaction.transactionID}
595+
transaction={transaction}
596+
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
597+
columns={columnsToShow}
598+
report={report}
599+
policy={policy}
600+
isSelectionModeEnabled={isMobileSelectionModeEnabled}
601+
toggleTransaction={toggleTransaction}
602+
isSelected={isTransactionSelected(transaction.transactionID)}
603+
handleOnPress={handleOnPress}
604+
handleLongPress={handleLongPress}
605+
dateColumnSize={dateColumnSize}
606+
amountColumnSize={amountColumnSize}
607+
taxAmountColumnSize={taxAmountColumnSize}
608+
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
609+
onArrowRightPress={handleArrowRightPress}
610+
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
611+
isLastItem={isLastItem}
612+
/>
613+
);
614+
})}
615+
</View>
616+
);
617+
})
618+
: resolvedTransactions.map((transaction) => {
619+
const isLastItem = transaction.transactionID === lastTransactionID;
620+
return (
621+
<MoneyRequestReportTransactionItem
622+
key={transaction.transactionID}
623+
transaction={transaction}
624+
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
625+
columns={columnsToShow}
626+
report={report}
627+
policy={policy}
628+
isSelectionModeEnabled={isMobileSelectionModeEnabled}
629+
toggleTransaction={toggleTransaction}
630+
isSelected={isTransactionSelected(transaction.transactionID)}
631+
handleOnPress={handleOnPress}
632+
handleLongPress={handleLongPress}
633+
dateColumnSize={dateColumnSize}
634+
amountColumnSize={amountColumnSize}
635+
taxAmountColumnSize={taxAmountColumnSize}
636+
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
637+
onArrowRightPress={handleArrowRightPress}
638+
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
639+
isLastItem={isLastItem}
640+
/>
641+
);
642+
});
643+
644+
const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined;
645+
557646
const transactionListContent = (
558647
<View
559-
style={[listHorizontalPadding, styles.gap2, styles.pb4, styles.mb2]}
648+
style={[listHorizontalPadding, !shouldUseNarrowLayout && styles.gap2, shouldUseNarrowLayout ? styles.pb2 : styles.pb4, !shouldUseNarrowLayout && styles.mb2]}
560649
onLayout={onLayout}
561650
>
562-
{shouldShowGroupedTransactions
563-
? groupedTransactions.map((group) => {
564-
const selectionState = groupSelectionState.get(group.groupKey) ?? {
565-
isSelected: false,
566-
isIndeterminate: false,
567-
isDisabled: false,
568-
pendingAction: undefined,
569-
};
570-
571-
return (
572-
<View
573-
key={group.groupKey}
574-
style={styles.gap2}
575-
>
576-
<MoneyRequestReportGroupHeader
577-
group={group}
578-
groupKey={group.groupKey}
579-
currency={report?.currency ?? ''}
580-
isGroupedByTag={currentGroupBy === CONST.REPORT_LAYOUT.GROUP_BY.TAG}
581-
isSelectionModeEnabled={isMobileSelectionModeEnabled}
582-
isSelected={selectionState.isSelected}
583-
isIndeterminate={selectionState.isIndeterminate}
584-
isDisabled={selectionState.isDisabled}
585-
onToggleSelection={toggleGroupSelection}
586-
pendingAction={selectionState.pendingAction}
587-
/>
588-
{group.transactions.map((transaction) => {
589-
return (
590-
<MoneyRequestReportTransactionItem
591-
key={transaction.transactionID}
592-
transaction={transaction}
593-
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
594-
columns={columnsToShow}
595-
report={report}
596-
policy={policy}
597-
isSelectionModeEnabled={isMobileSelectionModeEnabled}
598-
toggleTransaction={toggleTransaction}
599-
isSelected={isTransactionSelected(transaction.transactionID)}
600-
handleOnPress={handleOnPress}
601-
handleLongPress={handleLongPress}
602-
dateColumnSize={dateColumnSize}
603-
amountColumnSize={amountColumnSize}
604-
taxAmountColumnSize={taxAmountColumnSize}
605-
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
606-
onArrowRightPress={handleArrowRightPress}
607-
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
608-
/>
609-
);
610-
})}
611-
</View>
612-
);
613-
})
614-
: resolvedTransactions.map((transaction) => (
615-
<MoneyRequestReportTransactionItem
616-
key={transaction.transactionID}
617-
transaction={transaction}
618-
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
619-
columns={columnsToShow}
620-
report={report}
621-
policy={policy}
622-
isSelectionModeEnabled={isMobileSelectionModeEnabled}
623-
toggleTransaction={toggleTransaction}
624-
isSelected={isTransactionSelected(transaction.transactionID)}
625-
handleOnPress={handleOnPress}
626-
handleLongPress={handleLongPress}
627-
dateColumnSize={dateColumnSize}
628-
amountColumnSize={amountColumnSize}
629-
taxAmountColumnSize={taxAmountColumnSize}
630-
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
631-
onArrowRightPress={handleArrowRightPress}
632-
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
633-
/>
634-
))}
651+
{narrowListWrapper ? <View style={narrowListWrapper}>{transactionItems}</View> : transactionItems}
635652
{showPendingExpensePlaceholder && (
636653
<SearchRowSkeleton
637654
shouldAnimate
@@ -706,7 +723,7 @@ function MoneyRequestReportTransactionList({
706723

707724
return (
708725
<>
709-
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.ph5, styles.pb2]}>
726+
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.ph5, shouldUseNarrowLayout ? styles.pb3 : styles.pb2]}>
710727
{shouldShowGroupedTransactions && (
711728
<DropdownButton
712729
label={translate('search.display.groupBy')}

‎src/components/Search/SearchList/ListItem/BaseListItemHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ function BaseListItemHeader<TItem extends ListItem>({
140140

141141
return (
142142
<View>
143-
<View style={[styles.pl3, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? [styles.pv1, styles.gap3] : [styles.pv1Half, styles.justifyContentStart]]}>
143+
<View style={[styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? [styles.pl3, styles.pv1, styles.gap3] : [styles.p4, styles.gap3]]}>
144144
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
145145
{!!canSelectMultiple && (
146146
<Checkbox
@@ -166,7 +166,7 @@ function BaseListItemHeader<TItem extends ListItem>({
166166
{isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
167167
</View>
168168
{!isLargeScreenWidth && (
169-
<View style={[styles.flexShrink0, styles.ml2, styles.mr3, styles.gap1]}>
169+
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>
170170
<TotalCell
171171
total={item.total}
172172
currency={item.currency}

0 commit comments

Comments
 (0)