Skip to content

Reapply compact table and row styles for report transaction list #89575

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

Open
Krishna2323 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Reapply compact table and row styles for report transaction list #89575

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
e92ae2e
Reapply compact table and row styles for report transaction list
Krishna2323 May 5, 2026
dd2a2ee
Fix column misalignment by passing shouldRemoveTotalColumnFlex to TOT…
Krishna2323 May 5, 2026
4073e9d
Fix narrow layout on medium screens when horizontal scroll is active
Krishna2323 May 5, 2026
dcad897
Reapply selected row border color for search and report table rows
Krishna2323 May 5, 2026
ec8ffdc
Fix blank expense/row by moving border style from pressableStyle to w…
Krishna2323 May 5, 2026
51de5fc
Fix selected row background mismatch between wrapper and pressable on…
Krishna2323 May 5, 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
34 changes: 22 additions & 12 deletions src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import React, {useCallback, useMemo} from 'react';
import React from 'react';
import {View} from 'react-native';
import Checkbox from '@components/Checkbox';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import Text from '@components/Text';
import {useCurrencyListActions} from '@hooks/useCurrencyList';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type {GroupedTransactions} from '@src/types/onyx';
import type {PendingAction} from '@src/types/onyx/OnyxCommon';

const DESKTOP_HEIGHT = 28;

type MoneyRequestReportGroupHeaderProps = {
/** The grouped transaction data */
group: GroupedTransactions;
Expand Down Expand Up @@ -65,6 +64,7 @@ function MoneyRequestReportGroupHeader({
}: MoneyRequestReportGroupHeaderProps) {
const {convertToDisplayString} = useCurrencyListActions();
const styles = useThemeStyles();
const theme = useTheme();
const {translate} = useLocalize();
const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP();
const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook;
Expand All @@ -75,18 +75,27 @@ function MoneyRequestReportGroupHeader({

const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout;

const textStyle = useMemo(
() => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}),
[shouldUseNarrowLayout],
);
const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong];
Comment thread
Krishna2323 marked this conversation as resolved.

const handleToggleSelection = useCallback(() => {
const handleToggleSelection = () => {
onToggleSelection?.(groupKey);
}, [onToggleSelection, groupKey]);
};

const groupHeaderStyle = !shouldUseNarrowLayout
? [
{minHeight: variables.tableGroupRowHeight},
styles.justifyContentCenter,
styles.highlightBG,
styles.pv2,
styles.ph3,
styles.borderBottom,
isSelected && {borderColor: theme.buttonHoveredBG},
]
: [styles.ph4, styles.pv3, styles.borderBottom];

return (
<OfflineWithFeedback pendingAction={pendingAction}>
<View style={[shouldUseNarrowLayout ? [styles.ph4, styles.pv3, styles.borderBottom] : [styles.reportLayoutGroupHeader, {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}]]}>
<View style={groupHeaderStyle}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
{shouldShowCheckbox && (
<Checkbox
Expand All @@ -95,11 +104,12 @@ function MoneyRequestReportGroupHeader({
disabled={isDisabled}
onPress={handleToggleSelection}
accessibilityLabel={translate('reportLayout.selectGroup', {groupName: displayName})}
style={styles.mr2}
containerStyle={!shouldUseNarrowLayout && styles.m0}
style={!shouldUseNarrowLayout ? styles.mr3 : styles.mr2}
/>
)}
<Text
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && styles.ml2]}
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && shouldUseNarrowLayout && styles.ml2]}
numberOfLines={1}
>
{displayName}
Expand Down
14 changes: 13 additions & 1 deletion src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,19 @@ type SearchTableHeaderProps = {
taxAmountColumnSize: TableColumnSize;
shouldShowSorting: boolean;
columns: SearchColumnType[];
shouldRemoveTotalColumnFlex?: boolean;
};
function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, columns, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) {
function MoneyRequestReportTableHeader({
sortBy,
sortOrder,
onSortPress,
dateColumnSize,
shouldShowSorting,
columns,
amountColumnSize,
taxAmountColumnSize,
shouldRemoveTotalColumnFlex,
}: SearchTableHeaderProps) {
const styles = useThemeStyles();

const columnConfig = useMemo(
Expand Down Expand Up @@ -77,6 +88,7 @@ function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColu
sortBy={sortBy}
sortOrder={sortOrder}
onSortPress={onSortPress}
shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex}
/>
</View>
);
Expand Down
24 changes: 17 additions & 7 deletions src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useTransactionViolations from '@hooks/useTransactionViolations';
Expand Down Expand Up @@ -70,8 +71,11 @@ type MoneyRequestReportTransactionItemProps = {
/** List of cards for the user */
nonPersonalAndWorkspaceCards: CardList;

/** Whether this is the last item in the list (used to skip border-bottom on narrow) */
/** Whether this is the last item in the list */
isLastItem?: boolean;

/** Whether the list is horizontally scrollable */
shouldScrollHorizontally?: boolean;
};

function MoneyRequestReportTransactionItem({
Expand All @@ -92,9 +96,11 @@ function MoneyRequestReportTransactionItem({
shouldBeHighlighted,
nonPersonalAndWorkspaceCards,
isLastItem = false,
shouldScrollHorizontally = false,
}: MoneyRequestReportTransactionItemProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
Expand All @@ -117,15 +123,18 @@ function MoneyRequestReportTransactionItem({
}, [scrollToNewTransaction, shouldBeHighlighted]);

const animatedHighlightStyle = useAnimatedHighlightStyle({
borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius,
borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
shouldHighlight: shouldBeHighlighted,
highlightColor: theme.messageHighlightBG,
backgroundColor: theme.highlightBG,
shouldApplyOtherStyles: !shouldUseNarrowLayout,
});

return (
<OfflineWithFeedback pendingAction={pendingAction}>
<OfflineWithFeedback
pendingAction={pendingAction}
style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
>
<PressableWithFeedback
key={transaction.transactionID}
onPress={() => {
Expand All @@ -136,7 +145,7 @@ function MoneyRequestReportTransactionItem({
role={getButtonRole(true)}
isNested
id={transaction.transactionID}
style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]}
style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]}
hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
Expand All @@ -146,7 +155,7 @@ function MoneyRequestReportTransactionItem({
}}
disabled={isTransactionPendingDelete(transaction)}
ref={viewRef}
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]}
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}
>
{({hovered}) => (
<TransactionItemRow
Expand All @@ -159,18 +168,19 @@ function MoneyRequestReportTransactionItem({
amountColumnSize={amountColumnSize}
taxAmountColumnSize={taxAmountColumnSize}
shouldShowTooltip
shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
shouldUseNarrowLayout={shouldUseNarrowLayout || (isMediumScreenWidth && !shouldScrollHorizontally)}
shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth}
onCheckboxPress={toggleTransaction}
columns={columns}
isDisabled={isPendingDelete}
style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]}
style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
onButtonPress={() => {
handleOnPress(transaction.transactionID);
}}
onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
isHover={hovered}
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
shouldRemoveTotalColumnFlex
/>
)}
</PressableWithFeedback>
Expand Down
Loading
Loading