From 260e31df7bf679835580f7daed63bba445751140 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 31 Jul 2025 11:02:11 +0800 Subject: [PATCH 1/6] fix wrong selected state being used --- src/pages/UnreportedExpenseListItem.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/UnreportedExpenseListItem.tsx b/src/pages/UnreportedExpenseListItem.tsx index e83e9cd0b118..09e8bd6ec53e 100644 --- a/src/pages/UnreportedExpenseListItem.tsx +++ b/src/pages/UnreportedExpenseListItem.tsx @@ -19,7 +19,7 @@ function UnreportedExpenseListItem({item, isFocused, sho const [isSelected, setIsSelected] = useState(false); const theme = useTheme(); - const pressableStyle = [styles.transactionListItemStyle, item.isSelected && styles.activeComponentBG]; + const pressableStyle = [styles.transactionListItemStyle, isSelected && styles.activeComponentBG]; const animatedHighlightStyle = useAnimatedHighlightStyle({ borderRadius: variables.componentBorderRadius, @@ -40,17 +40,17 @@ function UnreportedExpenseListItem({item, isFocused, sho onSelectRow(item); setIsSelected((val) => !val); }} - disabled={isDisabled && !item.isSelected} + disabled={isDisabled && !isSelected} accessibilityLabel={item.text ?? ''} role={getButtonRole(true)} isNested onMouseDown={(e) => e.preventDefault()} - hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, item.isSelected && styles.activeComponentBG]} + hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}} id={item.keyForList ?? ''} style={[ pressableStyle, - isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), + isFocused && StyleUtils.getItemBackgroundColorStyle(!!isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), ]} onFocus={onFocus} wrapperStyle={[styles.mb2, styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone]} From af27c499240376441725c81b583bf6bb128545b6 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 31 Jul 2025 11:11:55 +0800 Subject: [PATCH 2/6] prettier --- src/pages/UnreportedExpenseListItem.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/UnreportedExpenseListItem.tsx b/src/pages/UnreportedExpenseListItem.tsx index 09e8bd6ec53e..41bda09a3c5c 100644 --- a/src/pages/UnreportedExpenseListItem.tsx +++ b/src/pages/UnreportedExpenseListItem.tsx @@ -48,10 +48,7 @@ function UnreportedExpenseListItem({item, isFocused, sho hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}} id={item.keyForList ?? ''} - style={[ - pressableStyle, - isFocused && StyleUtils.getItemBackgroundColorStyle(!!isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), - ]} + style={[pressableStyle, isFocused && StyleUtils.getItemBackgroundColorStyle(!!isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)]} onFocus={onFocus} wrapperStyle={[styles.mb2, styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone]} > From e2b58b00100d8cedc92a9a82a95ff3431e9fe0ee Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 1 Aug 2025 08:29:51 +0800 Subject: [PATCH 3/6] fix spacing --- .../MoneyRequestReportTransactionItem.tsx | 1 + .../SelectionList/Search/TransactionGroupListItem.tsx | 4 ++-- .../SelectionList/Search/TransactionListItem.tsx | 1 + src/components/TransactionItemRow/index.tsx | 11 +++++------ src/pages/UnreportedExpenseListItem.tsx | 1 + 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 0528b7d7deed..4394183363d3 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -129,6 +129,7 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns as Array>} isDisabled={isPendingDelete} + style={[styles.p3, shouldUseNarrowLayout ? styles.pt2 : {}]} /> diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index d0e452bf33c9..8f59607ccece 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -60,7 +60,7 @@ function TransactionGroupListItem({ const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${groupItem?.policyID}`]; const isEmpty = groupItem.transactions.length === 0; const isDisabledOrEmpty = isEmpty || isDisabled; - const {isLargeScreenWidth} = useResponsiveLayout(); + const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {currentSearchHash} = useSearchContext(); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { @@ -208,7 +208,7 @@ function TransactionGroupListItem({ onButtonPress={() => { openReportInRHP(transaction); }} - columnWrapperStyles={[styles.ph3, styles.pv1Half]} + style={shouldUseNarrowLayout ? [styles.p3, styles.pt2] : [styles.ph3, styles.pv1Half, styles.noBorderRadius]} isReportItemChild isInSingleTransactionReport={groupItem.transactions.length === 1} /> diff --git a/src/components/SelectionList/Search/TransactionListItem.tsx b/src/components/SelectionList/Search/TransactionListItem.tsx index fb2380a1f64a..682b901355e1 100644 --- a/src/components/SelectionList/Search/TransactionListItem.tsx +++ b/src/components/SelectionList/Search/TransactionListItem.tsx @@ -123,6 +123,7 @@ function TransactionListItem({ amountColumnSize={amountColumnSize} taxAmountColumnSize={taxAmountColumnSize} shouldShowCheckbox={!!canSelectMultiple} + style={[styles.p3, shouldUseNarrowLayout ? styles.pt2 : {}]} /> diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index b7e8ac8dad01..0155c35a86f5 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -1,6 +1,6 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; -import type {ViewStyle} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import type {ValueOf} from 'type-fest'; import Checkbox from '@components/Checkbox'; import type {TransactionWithOptionalHighlight} from '@components/MoneyRequestReportView/MoneyRequestReportTransactionList'; @@ -89,7 +89,7 @@ type TransactionItemRowProps = { shouldShowCheckbox: boolean; columns?: Array>; onButtonPress?: () => void; - columnWrapperStyles?: ViewStyle[]; + style?: StyleProp; isReportItemChild?: boolean; isActionLoading?: boolean; isInSingleTransactionReport?: boolean; @@ -121,7 +121,7 @@ function TransactionItemRow({ shouldShowCheckbox = false, columns, onButtonPress = () => {}, - columnWrapperStyles, + style, isReportItemChild = false, isActionLoading, isInSingleTransactionReport = false, @@ -360,14 +360,13 @@ function TransactionItemRow({ transactionItem, ], ); - const safeColumnWrapperStyle = columnWrapperStyles ?? [styles.p3, styles.expenseWidgetRadius]; const shouldRenderChatBubbleCell = useMemo(() => { return columns?.includes(CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS) ?? false; }, [columns]); if (shouldUseNarrowLayout) { return ( - + {shouldShowCheckbox && ( + ({item, isFocused, sho setIsSelected((val) => !val); }} shouldShowCheckbox + style={styles.p3} /> From 6e9822f5b2c6dd22248ebbf67af1676eaf5f230f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 2 Aug 2025 23:08:28 +0800 Subject: [PATCH 4/6] fix skeleton spacing --- src/components/Skeletons/UnreportedExpensesSkeleton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Skeletons/UnreportedExpensesSkeleton.tsx b/src/components/Skeletons/UnreportedExpensesSkeleton.tsx index cc5f9ebc2659..6ff7b5c72ac6 100644 --- a/src/components/Skeletons/UnreportedExpensesSkeleton.tsx +++ b/src/components/Skeletons/UnreportedExpensesSkeleton.tsx @@ -36,7 +36,7 @@ function UnreportedExpensesSkeleton({fixedNumberOfItems}: {fixedNumberOfItems?: const [pageWidth, setPageWidth] = React.useState(0); useLayoutEffect(() => { containerRef.current?.measure((x, y, width) => { - setPageWidth(width - 24); + setPageWidth(width - 40); }); }, []); @@ -85,7 +85,7 @@ function UnreportedExpensesSkeleton({fixedNumberOfItems}: {fixedNumberOfItems?: > Date: Sat, 2 Aug 2025 23:08:38 +0800 Subject: [PATCH 5/6] fix selected item lost border radius --- .../SelectionList/Search/TransactionGroupListItem.tsx | 2 +- src/components/TransactionItemRow/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 7306c1431a31..95d379439962 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -192,7 +192,7 @@ function TransactionGroupListItem({ onButtonPress={() => { openReportInRHP(transaction); }} - style={shouldUseNarrowLayout ? [styles.p3, styles.pt2] : [styles.ph3, styles.pv1Half, styles.noBorderRadius]} + style={[styles.noBorderRadius, shouldUseNarrowLayout ? [styles.p3, styles.pt2] : [styles.ph3, styles.pv1Half]]} isReportItemChild isInSingleTransactionReport={groupItem.transactions.length === 1} /> diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 0155c35a86f5..34ebd86a88f2 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -366,7 +366,7 @@ function TransactionItemRow({ if (shouldUseNarrowLayout) { return ( - + {shouldShowCheckbox && ( Date: Mon, 4 Aug 2025 22:33:25 +0800 Subject: [PATCH 6/6] fix padding --- .../MoneyRequestReportTransactionItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 4394183363d3..09b91d5575ec 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -129,7 +129,7 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns as Array>} isDisabled={isPendingDelete} - style={[styles.p3, shouldUseNarrowLayout ? styles.pt2 : {}]} + style={[styles.p3]} />