Add hover on workspace row (161)

software-mansion-labs · Jan 25, 2024 · a0aa9bf · a0aa9bf
1 parent 3c35774
commit a0aa9bf
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
@@ -171,19 +171,22 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
                         disabled={item.disabled}
                         onPress={() => item.action()}
                     >
-                        <WorkspacesListRow
-                            title={item.title}
-                            menuItems={threeDotsMenuItems}
-                            workspaceIcon={item.icon}
-                            ownerAccountID={item.ownerAccountID}
-                            workspaceType={item.type}
-                            layoutWidth={isSmallScreenWidth ? CONST.LAYOUT_WIDTH.NARROW : CONST.LAYOUT_WIDTH.WIDE}
-                        />
+                        {({hovered}) => (
+                            <WorkspacesListRow
+                                title={item.title}
+                                menuItems={threeDotsMenuItems}
+                                workspaceIcon={item.icon}
+                                ownerAccountID={item.ownerAccountID}
+                                workspaceType={item.type}
+                                rowStyles={hovered && styles.hoveredComponentBG}
+                                layoutWidth={isSmallScreenWidth ? CONST.LAYOUT_WIDTH.NARROW : CONST.LAYOUT_WIDTH.WIDE}
+                            />
+                        )}
                     </PressableWithoutFeedback>
                 </OfflineWithFeedback>
             );
         },
-        [isSmallScreenWidth, styles.mb3, styles.mh5, styles.ph5, translate],
+        [isSmallScreenWidth, styles.mb3, styles.mh5, styles.ph5, styles.hoveredComponentBG, translate],
     );
 
     const listHeaderComponent = useCallback(() => {

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,5 +1,6 @@
 import React, {useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
@@ -40,6 +41,9 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Renders the component using big screen layout or small screen layout. When layoutWidth === WorkspaceListRowLayout.NONE,
      * component will return null to prevent layout from jumping on initial render and when parent width changes. */
     layoutWidth?: ValueOf<typeof CONST.LAYOUT_WIDTH>;
+
+    /** Additional styles applied to the row */
+    rowStyles?: StyleProp<ViewStyle>;
 };
 
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): IconAsset => {
@@ -64,6 +68,7 @@ function WorkspacesListRow({
     workspaceType,
     currentUserPersonalDetails,
     layoutWidth = CONST.LAYOUT_WIDTH.NONE,
+    rowStyles,
 }: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -95,7 +100,7 @@ function WorkspacesListRow({
     const isNarrow = layoutWidth === CONST.LAYOUT_WIDTH.NARROW;
 
     return (
-        <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5]}>
+        <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5, rowStyles]}>
             <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}