wip: mini menu

src/CONST.js

@@ -914,6 +914,25 @@ const CONST = {
         MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects',
     },
 
+    QUICK_REACTIONS: [
+        {
+            name: '+1',
+            code: '👍',
+        },
+        {
+            name: 'heart',
+            code: '❤️',
+        },
+        {
+            name: 'joy',
+            code: '😂',
+        },
+        {
+            name: 'fire',
+            code: '🔥',
+        },
+    ],
+
     TFA_CODE_LENGTH: 6,
     CHAT_ATTACHMENT_TOKEN_KEY: 'X-Chat-Attachment-Token',
 

src/components/BaseMiniContextMenuItem.js

@@ -0,0 +1,47 @@
+import {Pressable, View} from 'react-native';
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
+import getButtonState from '../libs/getButtonState';
+import variables from '../styles/variables';
+import Tooltip from './Tooltip';
+
+const propTypes = {
+    tooltipText: PropTypes.string.isRequired,
+    onPress: PropTypes.func.isRequired,
+    children: PropTypes.oneOf([PropTypes.func, PropTypes.node]).isRequired,
+    isDelayButtonStateComplete: PropTypes.bool,
+};
+
+const defaultProps = {
+    isDelayButtonStateComplete: true,
+};
+
+const BaseMiniContextMenuItem = props => (
+    <Tooltip text={props.tooltipText}>
+        <Pressable
+            focusable
+            onPress={props.onPress}
+            accessibilityLabel={props.tooltipText}
+            style={
+                ({hovered, pressed}) => [
+                    styles.reportActionContextMenuMiniButton,
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
+                ]
+            }
+        >
+            {pressableState => (
+                <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
+                    {_.isFunction(props.children) ? props.children(pressableState) : props.children}
+                </View>
+            )}
+        </Pressable>
+    </Tooltip>
+);
+
+BaseMiniContextMenuItem.propTypes = propTypes;
+BaseMiniContextMenuItem.defaultProps = defaultProps;
+BaseMiniContextMenuItem.displayName = 'BaseMiniContextMenuItem';
+export default BaseMiniContextMenuItem;

src/components/ContextMenuItem.js

@@ -1,14 +1,12 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Pressable, View} from 'react-native';
 import MenuItem from './MenuItem';
-import Tooltip from './Tooltip';
 import Icon from './Icon';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import getButtonState from '../libs/getButtonState';
 import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState';
-import variables from '../styles/variables';
+import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 
 const propTypes = {
     /** Icon Component */
@@ -75,29 +73,15 @@ class ContextMenuItem extends Component {
         return (
             this.props.isMini
                 ? (
-                    <Tooltip text={text}>
-                        <Pressable
-                            focusable
-                            accessibilityLabel={text}
-                            onPress={this.triggerPressAndUpdateSuccess}
-                            style={
-                                ({hovered, pressed}) => [
-                                    styles.reportActionContextMenuMiniButton,
-                                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete)),
-                                ]
-                            }
-                        >
-                            {({hovered, pressed}) => (
-                                <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
-                                    <Icon
-                                        small
-                                        src={icon}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete))}
-                                    />
-                                </View>
-                            )}
-                        </Pressable>
-                    </Tooltip>
+                    <BaseMiniContextMenuItem tooltipText={text} onPress={this.triggerPressAndUpdateSuccess}>
+                        {({hovered, pressed}) => (
+                            <Icon
+                                small
+                                src={icon}
+                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete))}
+                            />
+                        )}
+                    </BaseMiniContextMenuItem>
                 ) : (
                     <MenuItem
                         title={text}

src/components/Reactions/MiniQuickEmojiReactions.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import CONST from '../../CONST';
+import styles from '../../styles/styles';
+import Text from '../Text';
+import * as StyleUtils from '../../styles/StyleUtils';
+import BaseMiniContextMenuItem from '../BaseMiniContextMenuItem';
+
+const propTypes = {
+    onEmojiSelected: PropTypes.func.isRequired,
+    onPressOpenPicker: PropTypes.func,
+};
+
+const defaultProps = {
+    onPressOpenPicker: () => {},
+};
+
+const MiniQuickEmojiReactions = props => (
+    <View style={{
+        flexDirection: 'row',
+    }}
+    >
+        {_.map(CONST.QUICK_REACTIONS, reaction => (
+            <BaseMiniContextMenuItem
+                key={reaction.name}
+                isDelayButtonStateComplete={false}
+                tooltipText={`:${reaction.name}:`}
+                onPress={() => props.onEmojiSelected(reaction)}
+            >
+                <Text style={[
+                    styles.emojiReactionText,
+                    StyleUtils.getEmojiReactionTextStyle(1.3),
+                ]}
+                >
+                    {reaction.code}
+                </Text>
+            </BaseMiniContextMenuItem>
+        ))}
+        {/* <AddReactionBubble */}
+        {/*    iconSizeScale={1.2} */}
+        {/*    sizeScale={EMOJI_BUBBLE_SCALE} */}
+        {/*    onSelectEmoji={props.onEmojiSelected} */}
+        {/*    onPressOpenPicker={props.onPressOpenPicker} */}
+        {/* /> */}
+    </View>
+);
+
+MiniQuickEmojiReactions.displayName = 'MiniQuickEmojiReactions';
+MiniQuickEmojiReactions.propTypes = propTypes;
+MiniQuickEmojiReactions.defaultProps = defaultProps;
+export default MiniQuickEmojiReactions;

src/components/Reactions/QuickEmojiReactions.js

@@ -4,36 +4,16 @@ import _ from 'underscore';
 import PropTypes from 'prop-types';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import AddReactionBubble from './AddReactionBubble';
-
-const QUICK_REACTIONS = [
-    {
-        name: '+1',
-        code: '👍',
-    },
-    {
-        name: 'heart',
-        code: '❤️',
-    },
-    {
-        name: 'joy',
-        code: '😂',
-    },
-    {
-        name: 'fire',
-        code: '🔥',
-    },
-];
+import CONST from '../../CONST';
 
 const EMOJI_BUBBLE_SCALE = 1.5;
 
 const propTypes = {
-    emojiIconRef: PropTypes.func,
     onEmojiSelected: PropTypes.func.isRequired,
     onPressOpenPicker: PropTypes.func,
 };
 
 const defaultProps = {
-    emojiIconRef: () => {},
     onPressOpenPicker: () => {},
 };
 
@@ -46,7 +26,7 @@ const QuickEmojiReactions = props => (
         justifyContent: 'space-between',
     }}
     >
-        {_.map(QUICK_REACTIONS, reaction => (
+        {_.map(CONST.QUICK_REACTIONS, reaction => (
             <EmojiReactionBubble
                 key={reaction.name}
                 emojiName={reaction.name}

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -18,6 +18,7 @@ import * as ContextMenuUtils from './ContextMenuUtils';
 import * as Environment from '../../../../libs/Environment/Environment';
 import Permissions from '../../../../libs/Permissions';
 import QuickEmojiReactions from '../../../../components/Reactions/QuickEmojiReactions';
+import MiniQuickEmojiReactions from '../../../../components/Reactions/MiniQuickEmojiReactions';
 
 /**
  * Gets the HTML version of the message in an action.
@@ -47,15 +48,29 @@ export default [
                 hideContextMenu(false);
             };
 
+            const onEmojiSelected = (emoji) => {
+                // TODO: we need to add the preferred skin tone here as well somehow
+                Report.toggleReaction(reportID, reportAction, emoji);
+                close();
+            };
+
+            const isMini = !closePopover;
+
+            if (isMini) {
+                return (
+                    <MiniQuickEmojiReactions
+                        key="MiniQuickEmojiReactions"
+                        onPressOpenPicker={close}
+                        onEmojiSelected={onEmojiSelected}
+                    />
+                );
+            }
+
             return (
                 <QuickEmojiReactions
                     key="QuickEmojiReactions"
-                    onEmojiSelected={(emoji) => {
-                        // TODO: we need to add the preferred skin tone here as well somehow
-                        Report.toggleReaction(reportID, reportAction, emoji);
-                        close();
-                    }}
                     onPressOpenPicker={close}
+                    onEmojiSelected={onEmojiSelected}
                 />
             );
         },