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

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,16 +1,13 @@
 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 Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
+import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
+import withWindowDimensions from '../withWindowDimensions';
 
 const propTypes = {
     emojiName: PropTypes.string.isRequired,
@@ -60,49 +57,52 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const EmojiReactionBubble = (props) => {
-    const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, props.reactionUsers);
-    return (
-        <Tooltip
-            renderTooltipContent={() => (
-                <ReactionTooltipContent
-                    emojiName={props.emojiName}
-                    emojiCodes={props.emojiCodes}
-                    accountIDs={props.reactionUsers}
-                />
-            )}
+const EmojiReactionBubble = props => (
+    <Tooltip
+        renderTooltipContent={() => (
+            <ReactionTooltipContent
+                emojiName={props.emojiName}
+                emojiCodes={props.emojiCodes}
+                accountIDs={props.reactionUsers}
+            />
+        )}
+    >
+        <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.forwardedRef}
+            isLongPressEnabledWithHover={props.isSmallScreenWidth}
         >
-            <Pressable
-                style={({hovered, pressed}) => [
-                    styles.emojiReactionBubble,
-                    StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, hasUserReacted, props.sizeScale),
-                ]}
-                onPress={props.onPress}
-                onLongPress={props.onReactionListOpen}
+            <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>
-        </Tooltip>
-    );
-};
-
+            )}
+        </PressableWithSecondaryInteraction>
+    </Tooltip>
+);
 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,9 @@ 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';
 
 /**
  * Given an emoji object and a list of senders it will return an
@@ -28,6 +30,10 @@ const getUniqueEmojiCodes = (emoji, users) => {
     return emojiCodes;
 };
 
+const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
+};
+
 const propTypes = {
     /**
      * An array of objects containing the reaction data.
@@ -50,6 +56,18 @@ 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 ReportActionItemReactions = (props) => {
@@ -62,19 +80,26 @@ 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 (
                     <EmojiReactionBubble
+                        ref={props.forwardedRef}
                         key={reaction.emoji}
                         count={reactionCount}
                         emojiName={reaction.emoji}
                         emojiCodes={emojiCodes}
                         onPress={onPress}
                         reactionUsers={reactionUsers}
+                        hasUserReacted={hasUserReacted}
+                        onReactionListOpen={onReactionListOpen}
                     />
                 );
             })}
@@ -85,4 +110,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,42 @@
+import React from 'react';
+import {View, FlatList} from 'react-native';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import ReactionListItem from './ReactionListItem';
+import styles from '../../../../styles/styles';
+import HeaderReactionList from './HeaderReactionList';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    contentRef: null,
+};
+
+const renderItem = ({item}) => <ReactionListItem item={item} />;
+const keyExtractor = item => `${item.accountID}`;
+
+const BaseReactionList = props => (props.isVisible) && (
+    <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}
+            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,53 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../../../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
+import Text from '../../../../../components/Text';
+import * as StyleUtils from '../../../../../styles/StyleUtils';
+
+const propTypes = {
+    /** Selected emoji */
+    /** The emoji codes */
+    emojiCodes: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    /** The name of the emoji */
+    emojiName: PropTypes.string.isRequired,
+
+    /** Count of the emoji */
+    emojiCount: PropTypes.number.isRequired,
+
+    /**
+     * 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,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    sizeScale: 1,
+};
+
+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 withLocalize(HeaderReactionList);
+

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import {View, TouchableOpacity} from 'react-native';
+import PropTypes from 'prop-types';
+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';
+
+const propTypes = {
+    /** Children view component for this action item */
+    onClose: PropTypes.func.isRequired,
+
+    /** The emoji codes */
+    emojiCodes: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    /** The name of the emoji */
+    emojiName: PropTypes.string.isRequired,
+
+    /** Count of the emoji */
+    emojiCount: PropTypes.number.isRequired,
+
+    /**
+     * 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,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    sizeScale: 1,
+};
+
+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);
+