Skip to content

[NO QA] Cleanup getReportTableColumnStyles method #87077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
srikarparsi merged 6 commits into from
Apr 8, 2026
Merged

[NO QA] Cleanup getReportTableColumnStyles method #87077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8a14e76
create the method
JS00001 Apr 3, 2026
3b38068
transaction item row
JS00001 Apr 3, 2026
ec5109e
update more files
JS00001 Apr 3, 2026
def3cf6
update rest of coponents
JS00001 Apr 3, 2026
045b9a3
Merge branch 'main' of github.com:Expensify/App into jsenyitko-clean-…
JS00001 Apr 3, 2026
8457da1
fix types
JS00001 Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Search/SearchList/ListItem/BaseListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ function BaseListItemHeader<TItem extends ListItem>({
[CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, false, false, false, false, false, false, false, true)}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, {shouldRemoveTotalColumnFlex: true})}
>
<TotalCell
total={item.total}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/SearchList/ListItem/CardListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function CardListItemHeader<TItem extends ListItem>({
[CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, false, false, false, false, false, false, false, true)}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, {shouldRemoveTotalColumnFlex: true})}
>
<TotalCell
total={cardItem.total}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function ExpenseReportListItemRow({

const columnComponents = {
[CONST.SEARCH.TABLE_COLUMNS.DATE]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide: item.shouldShowYear})]}>
<DateCell
date={item.created ?? ''}
showTooltip
Expand All @@ -91,7 +91,7 @@ function ExpenseReportListItemRow({
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.SUBMITTED]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.SUBMITTED, false, false, false, item.shouldShowYearSubmitted)]}>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.SUBMITTED, {isSubmittedColumnWide: item.shouldShowYearSubmitted})]}>
<DateCell
date={item.submitted ?? ''}
showTooltip
Expand All @@ -100,7 +100,7 @@ function ExpenseReportListItemRow({
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.APPROVED]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.APPROVED, false, false, false, false, item.shouldShowYearApproved)]}>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.APPROVED, {isApprovedColumnWide: item.shouldShowYearApproved})]}>
<DateCell
date={item.approved ?? ''}
showTooltip
Expand All @@ -109,7 +109,7 @@ function ExpenseReportListItemRow({
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.EXPORTED]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED, false, false, false, false, false, false, item.shouldShowYearExported)]}>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED, {isExportedColumnWide: item.shouldShowYearExported})]}>
<DateCell
date={item.exported ?? ''}
showTooltip
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/SearchList/ListItem/MemberListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function MemberListItemHeader<TItem extends ListItem>({
[CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, false, false, false, false, false, false, false, true)}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, {shouldRemoveTotalColumnFlex: true})}
>
<TotalCell
total={memberItem.total}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ function TaskListItemRow({item, containerStyle, showTooltip}: TaskListItemRowPro
return (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, containerStyle]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide: item.shouldShowYear})]}>
<DateCell
date={item.created}
showTooltip={showTooltip}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/SearchList/ListItem/WithdrawalIDListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({
[CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.TOTAL}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, false, false, false, false, false, false, false, true)}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, {shouldRemoveTotalColumnFlex: true})}
>
<TotalCell
total={withdrawalIDItem.total}
Expand Down
19 changes: 9 additions & 10 deletions src/components/Search/SortableTableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,17 +79,16 @@ function SortableTableHeader({
isActive={isActive}
sentryLabel={CONST.SENTRY_LABEL.SEARCH.SORTABLE_HEADER}
containerStyle={[
StyleUtils.getReportTableColumnStyles(
columnName,
dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
amountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
taxAmountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
submittedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
approvedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
postedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
exportedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
StyleUtils.getReportTableColumnStyles(columnName, {
isDateColumnWide: dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
isSubmittedColumnWide: submittedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
isApprovedColumnWide: approvedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
isPostedColumnWide: postedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
isExportedColumnWide: exportedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
isTaxAmountColumnWide: taxAmountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
isAmountColumnWide: amountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
shouldRemoveTotalColumnFlex,
),
}),
]}
isSortable={isSortable}
onPress={(order: SortOrder) => onSortPress(columnName, order)}
Expand Down
18 changes: 9 additions & 9 deletions src/components/TransactionItemRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, isDateColumnWide, false, false)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide})]}
>
<DateCell
date={createdAt}
Expand All @@ -346,7 +346,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.SUBMITTED, isDateColumnWide, false, false, isSubmittedColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.SUBMITTED, {isDateColumnWide, isSubmittedColumnWide})]}
>
<DateCell
date={report?.submitted ?? ''}
Expand All @@ -359,7 +359,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.APPROVED, false, false, false, false, isApprovedColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.APPROVED, {isApprovedColumnWide})]}
>
<DateCell
date={report?.approved ?? ''}
Expand All @@ -372,7 +372,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.POSTED, false, false, false, false, false, isPostedColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.POSTED, {isPostedColumnWide})]}
>
<DateCell
date={transactionItem.posted ?? ''}
Expand All @@ -385,7 +385,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED, false, false, false, false, false, false, isExportedColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED, {isExportedColumnWide})]}
>
<DateCell
date={transactionItem.exported ?? ''}
Expand Down Expand Up @@ -557,7 +557,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT, undefined, isAmountColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT, {isAmountColumnWide})]}
>
<TotalCell
transactionItem={transactionItem}
Expand All @@ -570,7 +570,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, undefined, isAmountColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, {isAmountColumnWide})]}
>
{shouldShowAttendees && (
<AmountCell
Expand All @@ -585,7 +585,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, undefined, isAmountColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, {isAmountColumnWide})]}
>
<AmountCell
total={getOriginalAmountForDisplay(transactionItem, isExpenseReport(transactionItem.report))}
Expand Down Expand Up @@ -624,7 +624,7 @@ function TransactionItemRow({
return (
<View
key={column}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT, undefined, undefined, isTaxAmountColumnWide)]}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT, {isTaxAmountColumnWide})]}
>
{isTimeRequest(transactionItem) ? null : (
<TaxCell
Expand Down
34 changes: 23 additions & 11 deletions src/styles/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,17 @@ import type {
TextColorStyle,
} from './types';

type GetReportTableColumnStylesParams = {
isDateColumnWide?: boolean;
isAmountColumnWide?: boolean;
isTaxAmountColumnWide?: boolean;
isSubmittedColumnWide?: boolean;
isApprovedColumnWide?: boolean;
isPostedColumnWide?: boolean;
isExportedColumnWide?: boolean;
shouldRemoveTotalColumnFlex?: boolean;
};

const workspaceColorOptions: SVGAvatarColorStyle[] = LETTER_AVATAR_COLOR_OPTIONS.map(({backgroundColor, fillColor}) => ({backgroundColor, fill: fillColor}));

const DEFAULT_WORKSPACE_COLOR = {backgroundColor: colors.blue400, fill: colors.blue700};
Expand Down Expand Up @@ -1791,17 +1802,18 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
return isDragging ? styles.cursorGrabbing : styles.cursorZoomOut;
},

getReportTableColumnStyles: (
columnName: string,
isDateColumnWide = false,
isAmountColumnWide = false,
isTaxAmountColumnWide = false,
isSubmittedColumnWide = false,
isApprovedColumnWide = false,
isPostedColumnWide = false,
isExportedColumnWide = false,
shouldRemoveTotalColumnFlex = false,
): ViewStyle => {
getReportTableColumnStyles: (columnName: string, options: GetReportTableColumnStylesParams = {}): ViewStyle => {
const {
isSubmittedColumnWide,
isApprovedColumnWide,
isPostedColumnWide,
isExportedColumnWide,
isDateColumnWide,
isTaxAmountColumnWide,
isAmountColumnWide,
shouldRemoveTotalColumnFlex,
} = options;

let columnWidth;
switch (columnName) {
case CONST.SEARCH.TABLE_COLUMNS.COMMENTS:
Expand Down
Loading