Merge pull request Expensify#67468 from bernhardoj/fix/67341-selected-bg-isnt-applied-correctly

Fix selected unreported expense item background isn't full

Author: chiragsalian

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -140,6 +140,7 @@ function MoneyRequestReportTransactionItem({
                     onCheckboxPress={toggleTransaction}
                     columns={allReportColumns}
                     isDisabled={isPendingDelete}
+                    style={[styles.p3]}
                 />
             </PressableWithFeedback>
         </OfflineWithFeedback>

src/components/SelectionList/Search/TransactionGroupListItem.tsx

@@ -53,7 +53,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
     const {translate} = useLocalize();
     const isEmpty = groupItem.transactions.length === 0;
     const isDisabledOrEmpty = isEmpty || isDisabled;
-    const {isLargeScreenWidth} = useResponsiveLayout();
+    const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
 
     const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {
         const isAmountColumnWide = groupItem.transactions.some((transaction) => transaction.isAmountColumnWide);
@@ -206,7 +206,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
                                 onButtonPress={() => {
                                     openReportInRHP(transaction);
                                 }}
-                                columnWrapperStyles={[styles.ph3, styles.pv1Half]}
+                                style={[styles.noBorderRadius, shouldUseNarrowLayout ? [styles.p3, styles.pt2] : [styles.ph3, styles.pv1Half]]}
                                 isReportItemChild
                                 isInSingleTransactionReport={groupItem.transactions.length === 1}
                             />

src/components/SelectionList/Search/TransactionListItem.tsx

@@ -163,6 +163,7 @@ function TransactionListItem<TItem extends ListItem>({
                     amountColumnSize={amountColumnSize}
                     taxAmountColumnSize={taxAmountColumnSize}
                     shouldShowCheckbox={!!canSelectMultiple}
+                    style={[styles.p3, shouldUseNarrowLayout ? styles.pt2 : {}]}
                 />
             </PressableWithFeedback>
         </OfflineWithFeedback>

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?:
         >
             <ItemListSkeletonView
                 itemViewHeight={64}
-                itemViewStyle={[styles.highlightBG, styles.mb2, styles.br2, styles.ml3, styles.mr3]}
+                itemViewStyle={[styles.highlightBG, styles.mb2, styles.br2, styles.ml5, styles.mr5]}
                 shouldAnimate
                 fixedNumItems={fixedNumberOfItems}
                 renderSkeletonItem={skeletonItem}

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';
@@ -88,7 +88,7 @@ type TransactionItemRowProps = {
     shouldShowCheckbox: boolean;
     columns?: Array<ValueOf<typeof CONST.REPORT.TRANSACTION_LIST.COLUMNS>>;
     onButtonPress?: () => void;
-    columnWrapperStyles?: ViewStyle[];
+    style?: StyleProp<ViewStyle>;
     isReportItemChild?: boolean;
     isActionLoading?: boolean;
     isInSingleTransactionReport?: boolean;
@@ -128,7 +128,7 @@ function TransactionItemRow({
     shouldShowCheckbox = false,
     columns,
     onButtonPress = () => {},
-    columnWrapperStyles,
+    style,
     isReportItemChild = false,
     isActionLoading,
     isInSingleTransactionReport = false,
@@ -347,14 +347,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 (
-            <View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.p3, styles.pt2, bgActiveStyles]}>
+            <View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, bgActiveStyles, style, styles.overflowHidden]}>
                 <View style={[styles.flexRow]}>
                     {shouldShowCheckbox && (
                         <Checkbox
@@ -448,7 +447,7 @@ function TransactionItemRow({
     }
 
     return (
-        <View style={[...safeColumnWrapperStyle, styles.flex1, styles.gap2, bgActiveStyles, styles.mw100]}>
+        <View style={[styles.expenseWidgetRadius, styles.flex1, styles.gap2, bgActiveStyles, styles.mw100, style]}>
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                 <Checkbox
                     disabled={isDisabled}

src/pages/UnreportedExpenseListItem.tsx

@@ -19,7 +19,7 @@ function UnreportedExpenseListItem<TItem extends ListItem>({item, isFocused, sho
     const [isSelected, setIsSelected] = useState<boolean>(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,18 +40,15 @@ function UnreportedExpenseListItem<TItem extends ListItem>({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),
-                ]}
+                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]}
             >
@@ -68,6 +65,7 @@ function UnreportedExpenseListItem<TItem extends ListItem>({item, isFocused, sho
                         setIsSelected((val) => !val);
                     }}
                     shouldShowCheckbox
+                    style={styles.p3}
                 />
             </PressableWithFeedback>
         </OfflineWithFeedback>