Merge pull request #19428 from dhairyasenjaliya/userDetailOnReaction

Feature : User detail on pressing reaction list
Expensify · May 26, 2023 · 0925c25 · 0925c25
2 parents 21fefdb + cab3b1a
commit 0925c25
Showing 1 changed file with 38 additions and 31 deletions.
diff --git a/src/pages/home/report/ReactionList/BaseReactionList.js b/src/pages/home/report/ReactionList/BaseReactionList.js
@@ -12,6 +12,8 @@ import reactionPropTypes from './reactionPropTypes';
 import OptionRow from '../../../../components/OptionRow';
 import variables from '../../../../styles/variables';
 import withWindowDimensions from '../../../../components/withWindowDimensions';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
 
 const propTypes = {
     /**
@@ -31,37 +33,6 @@ const defaultProps = {
     hasUserReacted: false,
 };
 
-/**
- * Given an emoji item object, render a component based on its type.
- * Items with the code "SPACER" return nothing and are used to fill rows up to 8
- * so that the sticky headers function properly
- *
- * @param {Object} params
- * @param {Object} params.item
- * @return {React.Component}
- */
-const renderItem = ({item}) => (
-    <OptionRow
-        item={item}
-        boldStyle
-        isDisabled
-        style={{maxWidth: variables.mobileResponsiveWidthBreakpoint}}
-        option={{
-            text: Str.removeSMSDomain(item.displayName),
-            alternateText: Str.removeSMSDomain(item.login),
-            participantsList: [item],
-            icons: [
-                {
-                    source: ReportUtils.getAvatar(item.avatar, item.login),
-                    name: item.login,
-                    type: CONST.ICON_TYPE_AVATAR,
-                },
-            ],
-            keyForList: item.login,
-        }}
-    />
-);
-
 /**
  * Create a unique key for each action in the FlatList.
  * @param {Object} item
@@ -90,6 +61,42 @@ const BaseReactionList = (props) => {
     if (!props.isVisible) {
         return null;
     }
+
+    /**
+     * Given an emoji item object, render a component based on its type.
+     * Items with the code "SPACER" return nothing and are used to fill rows up to 8
+     * so that the sticky headers function properly
+     *
+     * @param {Object} params
+     * @param {Object} params.item
+     * @return {React.Component}
+     */
+    const renderItem = ({item}) => (
+        <OptionRow
+            item={item}
+            boldStyle
+            style={{maxWidth: variables.mobileResponsiveWidthBreakpoint}}
+            hoverStyle={styles.hoveredComponentBG}
+            onSelectRow={() => {
+                props.onClose();
+                Navigation.navigate(ROUTES.getDetailsRoute(item.login));
+            }}
+            option={{
+                text: Str.removeSMSDomain(item.displayName),
+                alternateText: Str.removeSMSDomain(item.login),
+                participantsList: [item],
+                icons: [
+                    {
+                        source: ReportUtils.getAvatar(item.avatar, item.login),
+                        name: item.login,
+                        type: CONST.ICON_TYPE_AVATAR,
+                    },
+                ],
+                keyForList: item.login,
+            }}
+        />
+    );
+
     return (
         <>
             <HeaderReactionList