Merge pull request #44893 from narefyev91/fix-tab-highlight-for-card-…

…list-item Fix tab highlight for Expensify card list
Expensify · Jul 8, 2024 · 8f9bea9 · 8f9bea9
2 parents 53d08c1 + 3b67c64
commit 8f9bea9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
 import Avatar from '@components/Avatar';
 import Badge from '@components/Badge';
 import Text from '@components/Text';
@@ -13,9 +12,6 @@ import CONST from '@src/CONST';
 import type {PersonalDetails} from '@src/types/onyx';
 
 type WorkspacesListRowProps = {
-    /** Additional styles applied to the row */
-    style: StyleProp<ViewStyle>;
-
     /** The last four digits of the card */
     lastFourPAN: string;
 
@@ -32,14 +28,14 @@ type WorkspacesListRowProps = {
     currency: string;
 };
 
-function WorkspaceCardListRow({style, limit, cardholder, lastFourPAN, name, currency}: WorkspacesListRowProps) {
+function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency}: WorkspacesListRowProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
 
     const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]);
 
     return (
-        <View style={[styles.flexRow, styles.highlightBG, styles.mh5, styles.mb3, styles.gap5, styles.br3, styles.p4, style]}>
+        <View style={[styles.flexRow, styles.gap5, styles.br3, styles.p4]}>
             <View style={[styles.flexRow, styles.flex5, styles.gap3, styles.alignItemsCenter]}>
                 <Avatar
                     source={getDefaultAvatarURL(cardholder.accountID)}

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -10,7 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {PressableWithoutFeedback} from '@components/Pressable';
+import {PressableWithFeedback} from '@components/Pressable';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -121,24 +121,23 @@ function WorkspaceExpensifyCardListPage({route}: WorkspaceExpensifyCardListPageP
             errorRowStyles={styles.ph5}
             errors={item.errors}
         >
-            <PressableWithoutFeedback
+            <PressableWithFeedback
                 role={CONST.ROLE.BUTTON}
+                style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
                 accessibilityLabel="row"
+                hoverStyle={[styles.hoveredComponentBG]}
                 onPress={() => {}} // TODO: add navigation action when card details screen is implemented (https://github.com/Expensify/App/issues/44325)
             >
-                {({hovered}) => (
-                    <WorkspaceCardListRow
-                        style={hovered && styles.hoveredComponentBG}
-                        lastFourPAN={item.lastFourPAN ?? ''}
-                        // @ts-expect-error TODO: change cardholder to accountID and get personal details with it
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                        cardholder={item.cardholder}
-                        limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
-                        name={item.nameValuePairs?.cardTitle ?? ''}
-                        currency={policyCurrency}
-                    />
-                )}
-            </PressableWithoutFeedback>
+                <WorkspaceCardListRow
+                    lastFourPAN={item.lastFourPAN ?? ''}
+                    // @ts-expect-error TODO: change cardholder to accountID and get personal details with it
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    cardholder={item.cardholder}
+                    limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
+                    name={item.nameValuePairs?.cardTitle ?? ''}
+                    currency={policyCurrency}
+                />
+            </PressableWithFeedback>
         </OfflineWithFeedback>
     );