fix UnreportedExpenseListItem style

Author: SzymczakJ

src/pages/UnreportedExpenseListItem.tsx

@@ -1,53 +1,65 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-import BaseListItem from '@components/SelectionList/BaseListItem';
+import React, {useRef, useState} from 'react';
+import type {View} from 'react-native';
+import {getButtonRole} from '@components/Button/utils';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {PressableWithFeedback} from '@components/Pressable';
 import type {ListItem, ListItemProps, TransactionListItemType} from '@components/SelectionList/types';
 import TransactionItemRow from '@components/TransactionItemRow';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useSyncFocus from '@hooks/useSyncFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
-function UnreportedExpenseListItem<TItem extends ListItem>({item, isFocused, showTooltip, isDisabled, canSelectMultiple, onFocus, shouldSyncFocus, onSelectRow}: ListItemProps<TItem>) {
+function UnreportedExpenseListItem<TItem extends ListItem>({item, isFocused, showTooltip, isDisabled, onFocus, shouldSyncFocus, onSelectRow}: ListItemProps<TItem>) {
     const styles = useThemeStyles();
     const transactionItem = item as unknown as TransactionListItemType;
     const [isSelected, setIsSelected] = useState<boolean>(false);
     const theme = useTheme();
-    const backgroundColor = isSelected ? styles.buttonDefaultBG : styles.highlightBG;
 
-    const hoveredTransactionStyles = useAnimatedHighlightStyle({
+    const pressableStyle = [styles.transactionListItemStyle, item.isSelected && styles.activeComponentBG];
+
+    const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
     });
+    const StyleUtils = useStyleUtils();
+    const pressableRef = useRef<View>(null);
+
+    useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
 
     return (
-        <BaseListItem
-            item={item}
-            isFocused={isFocused}
-            isDisabled={isDisabled}
-            showTooltip={showTooltip}
-            canSelectMultiple={canSelectMultiple}
-            pendingAction={item.pendingAction}
-            keyForList={item.keyForList}
-            onFocus={onFocus}
-            shouldSyncFocus={shouldSyncFocus}
-            pressableWrapperStyle={[hoveredTransactionStyles, backgroundColor]}
-            onSelectRow={() => {
-                onSelectRow(item);
-                setIsSelected((val) => !val);
-            }}
-            containerStyle={[styles.p3, styles.mbn4, styles.expenseWidgetRadius]}
-            hoverStyle={[styles.borderRadiusComponentNormal]}
-        >
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+        <OfflineWithFeedback pendingAction={item.pendingAction}>
+            <PressableWithFeedback
+                ref={pressableRef}
+                onPress={() => {
+                    onSelectRow(item);
+                    setIsSelected((val) => !val);
+                }}
+                disabled={isDisabled && !item.isSelected}
+                accessibilityLabel={item.text ?? ''}
+                role={getButtonRole(true)}
+                isNested
+                onMouseDown={(e) => e.preventDefault()}
+                hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, item.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),
+                ]}
+                onFocus={onFocus}
+                wrapperStyle={[styles.mb2, styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone]}
+            >
                 <TransactionItemRow
                     transactionItem={transactionItem}
                     shouldUseNarrowLayout
                     isSelected={isSelected}
-                    shouldShowTooltip={false}
+                    shouldShowTooltip={showTooltip}
                     dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
                     amountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
                     taxAmountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
@@ -57,8 +69,8 @@ function UnreportedExpenseListItem<TItem extends ListItem>({item, isFocused, sho
                     }}
                     shouldShowCheckbox
                 />
-            </View>
-        </BaseListItem>
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
     );
 }