Merge pull request #1463 from parasharrajat/parasharrajat/row-feedback

Added Hover effect on Sidebar rows
Expensify · Feb 12, 2021 · 58bfd3d · 58bfd3d
2 parents bf4e479 + 334de8d
commit 58bfd3d
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 60 deletions.
diff --git a/src/components/Hoverable/HoverablePropTypes.js b/src/components/Hoverable/HoverablePropTypes.js
@@ -2,7 +2,10 @@ import PropTypes from 'prop-types';
 
 const propTypes = {
     // Children to wrap with Hoverable.
-    children: PropTypes.node.isRequired,
+    children: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.func,
+    ]).isRequired,
 
     // Function that executes when the mouse moves over the children.
     onHoverIn: PropTypes.func,

diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
@@ -7,6 +7,10 @@ import OptionRow from '../pages/home/sidebar/OptionRow';
 import optionPropTypes from './optionPropTypes';
 
 const propTypes = {
+    // Style for hovered state
+    // eslint-disable-next-line react/forbid-prop-types
+    optionHoveredStyle: PropTypes.object,
+
     // Extra styles for the section list container
     contentContainerStyles: PropTypes.arrayOf(PropTypes.object),
 
@@ -63,6 +67,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    optionHoveredStyle: undefined,
     contentContainerStyles: [],
     sections: [],
     focusedIndex: 0,
@@ -145,6 +150,7 @@ class OptionsList extends Component {
         return (
             <OptionRow
                 option={item}
+                hoverStyle={this.props.optionHoveredStyle}
                 optionIsFocused={!this.props.disableFocusOptions
                         && this.props.focusedIndex === (index + section.indexOffset)}
                 onSelectRow={this.props.onSelectRow}

diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
@@ -184,6 +184,7 @@ class OptionsSelector extends Component {
                 </View>
                 <OptionsList
                     ref={el => this.list = el}
+                    optionHoveredStyle={styles.hoveredComponentBG}
                     onSelectRow={this.props.onSelectRow}
                     sections={this.props.sections}
                     focusedIndex={this.state.focusedIndex}

diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
@@ -13,8 +13,13 @@ import Icon from '../../../components/Icon';
 import {Pencil, PinCircle, Checkmark} from '../../../components/Icon/Expensicons';
 import MultipleAvatars from '../../../components/MultipleAvatars';
 import themeColors from '../../../styles/themes/default';
+import Hoverable from '../../../components/Hoverable';
 
 const propTypes = {
+    // Style for hovered state
+    // eslint-disable-next-line react/forbid-prop-types
+    hoverStyle: PropTypes.object,
+
     // Option to allow the user to choose from can be type 'report' or 'user'
     option: optionPropTypes.isRequired,
 
@@ -38,13 +43,15 @@ const propTypes = {
 };
 
 const defaultProps = {
+    hoverStyle: styles.sidebarLinkHover,
     hideAdditionalOptionStates: false,
     showSelectedState: false,
     isSelected: false,
     forceTextUnreadStyle: false,
 };
 
 const OptionRow = ({
+    hoverStyle,
     option,
     optionIsFocused,
     onSelectRow,
@@ -59,77 +66,82 @@ const OptionRow = ({
     const textUnreadStyle = (option.isUnread || forceTextUnreadStyle)
         ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle];
     return (
-        <View
-            style={[
-                styles.flexRow,
-                styles.alignItemsCenter,
-                styles.justifyContentBetween,
-                styles.sidebarLink,
-                styles.sidebarLinkInner,
-                optionIsFocused ? styles.sidebarLinkActive : null,
-            ]}
-        >
-            <TouchableOpacity
-                onPress={() => onSelectRow(option)}
-                activeOpacity={0.8}
-                style={StyleSheet.flatten([
-                    styles.chatLinkRowPressable,
-                    styles.flexGrow1,
-                    styles.optionItemAvatarNameWrapper,
-                ])}
-            >
+        <Hoverable>
+            {hovered => (
                 <View
                     style={[
                         styles.flexRow,
                         styles.alignItemsCenter,
+                        styles.justifyContentBetween,
+                        styles.sidebarLink,
+                        styles.sidebarLinkInner,
+                        optionIsFocused ? styles.sidebarLinkActive : null,
+                        hovered && !optionIsFocused ? hoverStyle : null,
                     ]}
                 >
-                    {
-                        !_.isEmpty(option.icons)
-                        && (
-                            <MultipleAvatars
-                                avatarImageURLs={option.icons}
-                                optionIsFocused={optionIsFocused}
-                            />
-                        )
-                    }
-                    <View style={[styles.flex1]}>
-                        <Text style={[styles.optionDisplayName, textUnreadStyle]} numberOfLines={1}>
-                            {option.text}
-                        </Text>
-                        {option.alternateText ? (
-                            <Text
-                                style={[textStyle, styles.optionAlternateText, styles.mt1]}
-                                numberOfLines={1}
-                            >
-                                {option.alternateText}
-                            </Text>
-                        ) : null}
-                    </View>
-                    {showSelectedState && (
-                        <View style={[styles.selectCircle]}>
-                            {isSelected && (
-                                <Icon src={Checkmark} fill={themeColors.iconSuccessFill} />
+                    <TouchableOpacity
+                        onPress={() => onSelectRow(option)}
+                        activeOpacity={0.8}
+                        style={StyleSheet.flatten([
+                            styles.chatLinkRowPressable,
+                            styles.flexGrow1,
+                            styles.optionItemAvatarNameWrapper,
+                        ])}
+                    >
+                        <View
+                            style={[
+                                styles.flexRow,
+                                styles.alignItemsCenter,
+                            ]}
+                        >
+                            {
+                                !_.isEmpty(option.icons)
+                                && (
+                                    <MultipleAvatars
+                                        avatarImageURLs={option.icons}
+                                        optionIsFocused={optionIsFocused}
+                                    />
+                                )
+                            }
+                            <View style={[styles.flex1]}>
+                                <Text style={[styles.optionDisplayName, textUnreadStyle]} numberOfLines={1}>
+                                    {option.text}
+                                </Text>
+                                {option.alternateText ? (
+                                    <Text
+                                        style={[textStyle, styles.optionAlternateText, styles.mt1]}
+                                        numberOfLines={1}
+                                    >
+                                        {option.alternateText}
+                                    </Text>
+                                ) : null}
+                            </View>
+                            {showSelectedState && (
+                                <View style={[styles.selectCircle]}>
+                                    {isSelected && (
+                                        <Icon src={Checkmark} fill={themeColors.iconSuccessFill} />
+                                    )}
+                                </View>
                             )}
                         </View>
-                    )}
-                </View>
-            </TouchableOpacity>
-            {!hideAdditionalOptionStates && (
-                <View style={styles.flexRow}>
-                    {option.hasDraftComment && (
-                        <View style={styles.ml2}>
-                            <Icon src={Pencil} />
-                        </View>
-                    )}
-                    {option.isPinned && (
-                        <View style={styles.ml2}>
-                            <Icon src={PinCircle} />
+                    </TouchableOpacity>
+                    {!hideAdditionalOptionStates && (
+                        <View style={styles.flexRow}>
+                            {option.hasDraftComment && (
+                                <View style={styles.ml2}>
+                                    <Icon src={Pencil} />
+                                </View>
+                            )}
+                            {option.isPinned && (
+                                <View style={styles.ml2}>
+                                    <Icon src={PinCircle} />
+                                </View>
+                            )}
                         </View>
                     )}
                 </View>
             )}
-        </View>
+        </Hoverable>
     );
 };
 

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -157,6 +157,10 @@ const styles = {
         color: themeColors.textReversed,
     },
 
+    hoveredComponentBG: {
+        backgroundColor: themeColors.componentBGHover,
+    },
+
     touchableButtonImage: {
         alignItems: 'center',
         height: variables.componentSizeNormal,
@@ -457,6 +461,10 @@ const styles = {
         overflow: 'hidden',
     },
 
+    sidebarLinkHover: {
+        backgroundColor: themeColors.sidebarHover,
+    },
+
     sidebarLinkActive: {
         backgroundColor: themeColors.border,
         textDecorationLine: 'none',

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
@@ -4,9 +4,11 @@ export default {
     shadow: colors.black,
     link: colors.blue,
     componentBG: colors.white,
+    componentBGHover: colors.gray1,
     appBG: colors.white,
     heading: colors.charcoal,
     sidebar: colors.gray1,
+    sidebarHover: colors.white,
     border: colors.gray2,
     borderFocus: colors.blue,
     icon: colors.gray3,