Detailed list of reaction senders when long-/right-pressing a reaction

src/CONST.js

@@ -604,6 +604,7 @@ const CONST = {
     },
     NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 256,
     EMOJI_PICKER_ITEM_HEIGHT: 32,
+    REACTION_LIST_ITEM_HEIGHT: 64,
     EMOJI_PICKER_HEADER_HEIGHT: 32,
     RECIPIENT_LOCAL_TIME_HEIGHT: 25,
     EMOJI_SUGGESTER: {

src/components/PressableWithSecondaryInteraction/index.js

@@ -57,7 +57,7 @@ class PressableWithSecondaryInteraction extends Component {
                 style={this.props.inline && styles.dInline}
                 onPressIn={this.props.onPressIn}
                 onLongPress={(e) => {
-                    if (DeviceCapabilities.hasHoverSupport()) {
+                    if (DeviceCapabilities.hasHoverSupport() && !this.props.isLongPressEnabledWithHover) {
                         return;
                     }
                     if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -43,6 +43,7 @@ const defaultProps = {
     preventDefaultContentMenu: true,
     inline: false,
     withoutFocusOnSecondaryInteraction: false,
+    isLongPressEnabledWithHover: false,
 };
 
 export {propTypes, defaultProps};

src/components/Reactions/EmojiReactionBubble.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Pressable} from 'react-native';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import * as StyleUtils from '../../styles/StyleUtils';
-import withCurrentUserPersonalDetails, {
-    withCurrentUserPersonalDetailsDefaultProps,
-    withCurrentUserPersonalDetailsPropTypes,
-} from '../withCurrentUserPersonalDetails';
-import * as Report from '../../libs/actions/Report';
+
+import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
+import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
     /**
@@ -32,63 +30,68 @@ const propTypes = {
      */
     count: PropTypes.number,
 
-    /**
-     * The account ids of the users who reacted.
-     */
-    reactionUsers: PropTypes.arrayOf(PropTypes.string),
-
     /**
      * The default size of the reaction bubble is defined
      * by the styles in styles.js. This scale factor can be used
      * to make the bubble bigger or smaller.
      */
     sizeScale: PropTypes.number,
 
+    /**
+     * Returns true if the current account has reacted to the report action (with the given skin tone).
+     */
+    hasUserReacted: PropTypes.bool,
+
     ...withCurrentUserPersonalDetailsPropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     count: 0,
     onReactionListOpen: () => {},
-    reactionUsers: [],
     sizeScale: 1,
+    hasUserReacted: false,
 
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const EmojiReactionBubble = (props) => {
-    const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, props.reactionUsers);
-    return (
-        <Pressable
-            style={({hovered, pressed}) => [
-                styles.emojiReactionBubble,
-                StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, hasUserReacted, props.sizeScale),
-            ]}
-            onPress={props.onPress}
-            onLongPress={props.onReactionListOpen}
+const EmojiReactionBubble = props => (
+    <PressableWithSecondaryInteraction
+        style={({hovered, pressed}) => [
+            styles.emojiReactionBubble,
+            StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.sizeScale),
+        ]}
+        onPress={props.onPress}
+        onLongPress={props.onReactionListOpen}
+        onSecondaryInteraction={props.onReactionListOpen}
+        ref={props.forwardRef}
+        isLongPressEnabledWithHover={props.isSmallScreenWidth}
+    >
+        <Text style={[
+            styles.emojiReactionText,
+            StyleUtils.getEmojiReactionTextStyle(props.sizeScale),
+        ]}
         >
-            <Text style={[
-                styles.emojiReactionText,
-                StyleUtils.getEmojiReactionTextStyle(props.sizeScale),
-            ]}
-            >
-                {props.emojiCodes.join('')}
-            </Text>
-            {props.count > 0 && (
+            {props.emojiCodes.join('')}
+        </Text>
+        {props.count > 0 && (
+
             <Text style={[
                 styles.reactionCounterText,
-                StyleUtils.getEmojiReactionCounterTextStyle(hasUserReacted, props.sizeScale),
+                StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted, props.sizeScale),
             ]}
             >
                 {props.count}
             </Text>
-            )}
-        </Pressable>
-    );
-};
+        )}
+    </PressableWithSecondaryInteraction>
+);
 
 EmojiReactionBubble.propTypes = propTypes;
 EmojiReactionBubble.defaultProps = defaultProps;
 EmojiReactionBubble.displayName = 'EmojiReactionBubble';
 
-export default withCurrentUserPersonalDetails(EmojiReactionBubble);
+export default withWindowDimensions(React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <EmojiReactionBubble {...props} forwardRef={ref} />
+)));

src/components/Reactions/ReportActionItemReactions.js

@@ -6,7 +6,11 @@ import styles from '../../styles/styles';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import emojis from '../../../assets/emojis';
 import AddReactionBubble from './AddReactionBubble';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import getPreferredEmojiCode from './getPreferredEmojiCode';
+
+import * as Report from '../../libs/actions/Report';
+
 import Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
 
@@ -52,6 +56,21 @@ const propTypes = {
      * hence this function asks to toggle the reaction by emoji.
      */
     toggleReaction: PropTypes.func.isRequired,
+
+    /** A ref to PressableWithSecondaryInteraction */
+    forwardedRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+    ]).isRequired,
+
+    /** Function which opens Reaction List popup */
+    onReactionListOpen: PropTypes.func.isRequired,
+
+    ...withCurrentUserPersonalDetailsPropTypes,
+};
+
+const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
 const ReportActionItemReactions = (props) => {
@@ -64,10 +83,14 @@ const ReportActionItemReactions = (props) => {
                 const reactionUsers = _.map(reaction.users, sender => sender.accountID.toString());
                 const emoji = _.find(emojis, e => e.name === reaction.emoji);
                 const emojiCodes = getUniqueEmojiCodes(emoji, reaction.users);
+                const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, reactionUsers);
 
                 const onPress = () => {
                     props.toggleReaction(emoji);
                 };
+                const onReactionListOpen = (event) => {
+                    props.onReactionListOpen(event, reactionUsers, reaction.emoji, emojiCodes, reactionCount, hasUserReacted);
+                };
 
                 return (
                     <Tooltip
@@ -80,13 +103,17 @@ const ReportActionItemReactions = (props) => {
                         )}
                     >
                         <EmojiReactionBubble
+                            ref={props.forwardedRef}
                             key={reaction.emoji}
                             count={reactionCount}
                             emojiCodes={emojiCodes}
                             onPress={onPress}
                             reactionUsers={reactionUsers}
+                            hasUserReacted={hasUserReacted}
+                            onReactionListOpen={onReactionListOpen}
                         />
                     </Tooltip>
+
                 );
             })}
             {reactionsWithCount.length > 0 && <AddReactionBubble onSelectEmoji={props.toggleReaction} />}
@@ -96,4 +123,9 @@ const ReportActionItemReactions = (props) => {
 
 ReportActionItemReactions.displayName = 'ReportActionItemReactions';
 ReportActionItemReactions.propTypes = propTypes;
-export default ReportActionItemReactions;
+ReportActionItemReactions.defaultProps = defaultProps;
+export default withCurrentUserPersonalDetails(React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <ReportActionItemReactions {...props} forwardedRef={ref} />
+)));
+

src/pages/home/report/ReactionList/BaseReactionList.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {View, FlatList} from 'react-native';
+import PropTypes from 'prop-types';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import ReactionListItem from './ReactionListItem';
+import styles from '../../../../styles/styles';
+import HeaderReactionList from './HeaderReactionList';
+import CONST from '../../../../CONST';
+import participantPropTypes from '../../../../components/participantPropTypes';
+import {
+    propTypes as reactionPropTypes,
+    defaultProps as reactionDefaultProps,
+} from './HeaderReactionList/reactionPropTypes';
+
+const propTypes = {
+
+    /**
+    *  Array of personal detail objects
+    */
+    users: PropTypes.arrayOf(participantPropTypes),
+
+    /**
+     * Returns true if the current account has reacted to the report action (with the given skin tone).
+     */
+    hasUserReacted: PropTypes.bool,
+
+    ...reactionPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    ...reactionDefaultProps,
+};
+
+const renderItem = ({item}) => <ReactionListItem item={item} />;
+const keyExtractor = item => `${item.accountID}`;
+const getItemLayout = (_, index) => ({
+    index,
+    length: CONST.REACTION_LIST_ITEM_HEIGHT,
+    offset: CONST.REACTION_LIST_ITEM_HEIGHT * index,
+});
+
+// const BaseReactionList = props => (props.isVisible) && (
+const BaseReactionList = (props) => {
+    if (!props.isVisible) {
+        return null;
+    }
+    return (
+        <View style={styles.reactionListContainer}>
+            <HeaderReactionList
+                onClose={props.onClose}
+                emojiName={props.emojiName}
+                emojiCodes={props.emojiCodes}
+                emojiCount={props.emojiCount}
+                hasUserReacted={props.hasUserReacted}
+                sizeScale={props.sizeScale}
+            />
+            <FlatList
+                data={props.users}
+                renderItem={renderItem}
+                keyExtractor={keyExtractor}
+                getItemLayout={getItemLayout}
+                style={[styles.pb3, styles.pt2]}
+            />
+        </View>
+    );
+};
+
+BaseReactionList.propTypes = propTypes;
+BaseReactionList.defaultProps = defaultProps;
+BaseReactionList.displayName = 'BaseReactionList';
+
+export default withLocalize(BaseReactionList);

src/pages/home/report/ReactionList/HeaderReactionList/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../../../../styles/styles';
+import Text from '../../../../../components/Text';
+import * as StyleUtils from '../../../../../styles/StyleUtils';
+import {
+    propTypes as reactionPropTypes,
+    defaultProps as reactionDefaultProps,
+} from './reactionPropTypes';
+
+const propTypes = {
+    ...reactionPropTypes,
+};
+
+const defaultProps = {
+    ...reactionDefaultProps,
+};
+
+const HeaderReactionList = props => (
+    <View style={[styles.pt4, styles.mh5, styles.emojiReactionListHeader, styles.flexRow]}>
+        <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionListHeaderBubbleStyle(props.hasUserReacted)]}>
+            <Text style={[styles.emojiReactionText, StyleUtils.getEmojiReactionTextStyle(props.sizeScale)]}>
+                {props.emojiCodes.join('')}
+            </Text>
+            <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted, props.sizeScale)]}>
+                {props.emojiCount}
+            </Text>
+        </View>
+        <Text style={styles.reactionListHeaderText}>{`:${props.emojiName}:`}</Text>
+    </View>
+);
+
+HeaderReactionList.propTypes = propTypes;
+HeaderReactionList.defaultProps = defaultProps;
+HeaderReactionList.displayName = 'HeaderReactionList';
+
+export default HeaderReactionList;
+

src/pages/home/report/ReactionList/HeaderReactionList/index.native.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import {View, TouchableOpacity} from 'react-native';
+import styles from '../../../../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import Text from '../../../../../components/Text';
+import Icon from '../../../../../components/Icon';
+import * as Expensicons from '../../../../../components/Icon/Expensicons';
+import * as StyleUtils from '../../../../../styles/StyleUtils';
+import {
+    propTypes as reactionPropTypes,
+    defaultProps as reactionDefaultProps,
+} from './reactionPropTypes';
+
+const propTypes = {
+    ...reactionPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    ...reactionDefaultProps,
+};
+
+const HeaderReactionList = props => (
+    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader]}>
+        <View style={styles.flexRow}>
+            <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionListHeaderBubbleStyle(props.hasUserReacted)]}>
+                <Text style={[styles.emojiReactionText, StyleUtils.getEmojiReactionTextStyle(props.sizeScale)]}>
+                    {props.emojiCodes.join('')}
+                </Text>
+                <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted, props.sizeScale)]}>
+                    {props.emojiCount}
+                </Text>
+            </View>
+            <Text style={styles.reactionListHeaderText}>{`:${props.emojiName}:`}</Text>
+        </View>
+
+        <TouchableOpacity
+            onPress={props.onClose}
+            accessibilityRole="button"
+            accessibilityLabel={props.translate('common.close')}
+        >
+            <Icon src={Expensicons.Close} />
+        </TouchableOpacity>
+    </View>
+);
+
+HeaderReactionList.propTypes = propTypes;
+HeaderReactionList.defaultProps = defaultProps;
+HeaderReactionList.displayName = 'HeaderReactionList';
+
+export default withLocalize(HeaderReactionList);
+