Skip to content

Commit f17b80d

Browse files
luacmartinsluacmartins
authored
Merge pull request Expensify#89924 from Expensify/jsenyitko-table-exploration
Update table component to have default styling
2 parents f9bcf40 + 0838b79 commit f17b80d

30 files changed

Lines changed: 593 additions & 331 deletions

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function MoneyRequestReportTransactionItem({
134134
return (
135135
<OfflineWithFeedback
136136
pendingAction={pendingAction}
137-
style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
137+
style={!shouldUseNarrowLayout && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]}
138138
>
139139
<PressableWithFeedback
140140
key={transaction.transactionID}

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -648,7 +648,7 @@ function MoneyRequestReportTransactionList({
648648
})
649649
: resolvedTransactions.map((transaction) => renderTransactionItem(transaction));
650650

651-
const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined;
651+
const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.tableTopRadius, styles.tableBottomRadius, styles.overflowHidden] : undefined;
652652

653653
const transactionListContent = (
654654
<View
@@ -678,7 +678,7 @@ function MoneyRequestReportTransactionList({
678678
!isDesktopTableLayout && styles.pl5,
679679
isDesktopTableLayout ? styles.pr11 : styles.pr16,
680680
styles.alignItemsCenter,
681-
isDesktopTableLayout && [styles.highlightBG, styles.searchTableTopRadius, styles.mh5],
681+
isDesktopTableLayout && [styles.highlightBG, styles.tableTopRadius, styles.mh5],
682682
StyleUtils.getSelectedBorderBottomStyle(selectedTransactionIDs.length > 0),
683683
]}
684684
>

‎src/components/ReportActionAvatars/ReportActionAvatar.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,10 @@ function ReportActionAvatarSubscript({
173173
fallbackDisplayName,
174174
useProfileNavigationWrapper,
175175
reportID,
176+
subscriptCardFeedIconSize = {
177+
width: variables.cardAvatarWidth,
178+
height: variables.cardAvatarHeight,
179+
},
176180
}: {
177181
primaryAvatar: IconType;
178182
secondaryAvatar: IconType;
@@ -181,6 +185,7 @@ function ReportActionAvatarSubscript({
181185
noRightMarginOnContainer?: boolean;
182186
subscriptAvatarBorderColor?: ColorValue;
183187
subscriptCardFeed?: CardFeed;
188+
subscriptCardFeedIconSize?: {width: number; height: number};
184189
fallbackDisplayName?: string;
185190
useProfileNavigationWrapper?: boolean;
186191
reportID?: string;
@@ -274,15 +279,15 @@ function ReportActionAvatarSubscript({
274279
// Nullish coalescing thinks that empty strings are truthy, thus I'm using OR operator
275280
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
276281
StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor || theme.sidebar),
277-
StyleUtils.getAvatarSubscriptIconContainerStyle(variables.cardAvatarWidth, variables.cardAvatarHeight),
282+
StyleUtils.getAvatarSubscriptIconContainerStyle(subscriptCardFeedIconSize.width, subscriptCardFeedIconSize.height),
278283
styles.dFlex,
279284
styles.justifyContentCenter,
280285
]}
281286
>
282287
<Icon
283288
src={getCardFeedIcon(subscriptCardFeed, illustrations, companyCardFeedIcons)}
284-
width={variables.cardAvatarWidth}
285-
height={variables.cardAvatarHeight}
289+
width={subscriptCardFeedIconSize.width}
290+
height={subscriptCardFeedIconSize.height}
286291
additionalStyles={styles.alignSelfCenter}
287292
testID="ReportActionAvatars-Subscript-CardIcon"
288293
/>

‎src/components/ReportActionAvatars/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ type ReportActionAvatarsProps = {
5959
/** Subscript card feed to display instead of the second avatar */
6060
subscriptCardFeed?: CardFeed;
6161

62+
/** Size of the subscript card feed icon */
63+
subscriptCardFeedIconSize?: {width: number; height: number};
64+
6265
/** Whether we want to be redirected to profile on avatars click */
6366
useProfileNavigationWrapper?: boolean;
6467

@@ -98,6 +101,7 @@ function ReportActionAvatars({
98101
subscriptAvatarBorderColor,
99102
noRightMarginOnSubscriptContainer = false,
100103
subscriptCardFeed,
104+
subscriptCardFeedIconSize,
101105
secondaryAvatarContainerStyle,
102106
useMidSubscriptSizeForMultipleAvatars = false,
103107
isInReportAction = false,
@@ -165,6 +169,7 @@ function ReportActionAvatars({
165169
noRightMarginOnContainer={noRightMarginOnSubscriptContainer}
166170
subscriptAvatarBorderColor={subscriptAvatarBorderColor}
167171
subscriptCardFeed={subscriptCardFeed}
172+
subscriptCardFeedIconSize={subscriptCardFeedIconSize}
168173
useProfileNavigationWrapper={useProfileNavigationWrapper}
169174
fallbackDisplayName={fallbackDisplayName}
170175
reportID={reportID}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,8 @@ function ExpenseReportListItem<TItem extends ListItem>({
188188
styles.mh0,
189189
isPendingDelete && styles.cursorDisabled,
190190
isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius,
191-
!isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
192-
!isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
191+
!isLargeScreenWidth && isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
192+
!isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
193193
],
194194
[styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils],
195195
);
@@ -288,9 +288,9 @@ function ExpenseReportListItem<TItem extends ListItem>({
288288
styles.mh5,
289289
animatedHighlightStyle,
290290
isPendingDelete && styles.cursorDisabled,
291-
isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
292-
!isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
293-
!isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
291+
isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
292+
!isLargeScreenWidth && isFirstItem && styles.tableTopRadius,
293+
!isLargeScreenWidth && isLastItem && styles.tableBottomRadius,
294294
!isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
295295
]}
296296
accessible={false}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function TaskListItem<TItem extends ListItem>({
8181
onLongPressRow={onLongPressRow}
8282
shouldSyncFocus={shouldSyncFocus}
8383
hoverStyle={item.isSelected && styles.activeComponentBG}
84-
pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]]}
84+
pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
8585
forwardedFSClass={fsClass}
8686
>
8787
<TaskListItemRow

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
311311
onCheckboxPress={() => onSelectionButtonPress?.(transaction as unknown as TItem)}
312312
columns={currentColumns}
313313
onButtonPress={() => handleButtonPress(transaction)}
314-
style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.searchTableRowHeight] : styles.p4, styles.flex1]}
314+
style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.tableRowHeight] : styles.p4, styles.flex1]}
315315
isReportItemChild
316316
isInSingleTransactionReport={isInSingleTransactionReport}
317317
shouldShowBottomBorder={shouldShowBottomBorder}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -210,10 +210,10 @@ function TransactionGroupListItem<TItem extends ListItem>({
210210
const pressableStyle = [
211211
styles.transactionGroupListItemStyle,
212212
isLargeScreenWidth && {
213-
...styles.searchTableRowHeight,
213+
...styles.tableRowHeight,
214214
borderRadius: 0,
215215
paddingVertical: variables.tableGroupRowPaddingVertical,
216-
...(isLastItem ? styles.searchTableBottomRadius : {}),
216+
...(isLastItem ? styles.tableBottomRadius : {}),
217217
},
218218
isItemSelected && styles.activeComponentBG,
219219
];
@@ -543,8 +543,8 @@ function TransactionGroupListItem<TItem extends ListItem>({
543543
isLargeScreenWidth
544544
? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden]
545545
: [
546-
isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
547-
isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
546+
isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
547+
isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
548548
!isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected),
549549
],
550550
]}

‎src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ function TransactionListItemNarrow<TItem extends ListItem>({
8787
styles.flex1,
8888
animatedHighlightStyle,
8989
styles.userSelectNone,
90-
isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
91-
isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
90+
isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
91+
isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
9292
!isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
9393
]}
9494
>
@@ -119,7 +119,7 @@ function TransactionListItemNarrow<TItem extends ListItem>({
119119
taxAmountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
120120
shouldShowCheckbox={!!canSelectMultiple}
121121
checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
122-
style={[styles.p3, styles.pv2, styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius]}
122+
style={[styles.p3, styles.pv2, styles.p0, styles.pt3, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius]}
123123
violations={transactionViolations}
124124
onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
125125
isHover={false}

‎src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ function TransactionListItemWide<TItem extends ListItem>({
9191
isDeletedTransaction && styles.cursorDefault,
9292
]}
9393
onFocus={onFocus}
94-
wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]]}
94+
wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
9595
>
9696
{({hovered}) => (
9797
<TransactionItemRow
@@ -117,7 +117,7 @@ function TransactionListItemWide<TItem extends ListItem>({
117117
isActionColumnWide={transactionItem.isActionColumnWide}
118118
shouldShowCheckbox={!!canSelectMultiple}
119119
checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
120-
style={[styles.p3, styles.pv2, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius]}
120+
style={[styles.p3, styles.pv2, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius]}
121121
violations={transactionViolations}
122122
onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
123123
isHover={hovered}

0 commit comments

Comments
 (0)