diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 2f721723fbba..4e655cfca9bd 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -1,4 +1,5 @@
import React from 'react';
+import _ from 'underscore';
import {Pressable, View} from 'react-native';
import PropTypes from 'prop-types';
import Tooltip from '../Tooltip';
@@ -9,6 +10,7 @@ import * as Expensicons from '../Icon/Expensicons';
import Text from '../Text';
import getButtonState from '../../libs/getButtonState';
import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
+import emojis from '../../../assets/emojis';
const propTypes = {
sizeScale: PropTypes.number,
@@ -25,7 +27,12 @@ const AddReactionBubble = (props) => {
const ref = React.createRef();
const onPress = () => {
- EmojiPickerAction.showEmojiPicker(() => {}, props.onSelectEmoji, ref.current);
+ EmojiPickerAction.showEmojiPicker(() => {}, (emojiCode) => {
+ const emoji = _.find(emojis, e => e.code === emojiCode);
+ if (emoji != null) {
+ props.onSelectEmoji(emoji);
+ }
+ }, ref.current);
};
return (
diff --git a/src/components/Reactions/QuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions.js
index c9a78c51522c..0a34013e00f3 100644
--- a/src/components/Reactions/QuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions.js
@@ -1,31 +1,41 @@
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
+import PropTypes from 'prop-types';
import EmojiReactionBubble from './EmojiReactionBubble';
import AddReactionBubble from './AddReactionBubble';
const QUICK_REACTIONS = [
{
name: '+1',
- codes: ['👍'],
+ code: '👍',
},
{
name: 'heart',
- codes: ['❤️'],
+ code: '❤️',
},
{
name: 'joy',
- codes: ['😂'],
+ code: '😂',
},
{
name: 'fire',
- codes: ['🔥'],
+ code: '🔥',
},
];
const EMOJI_BUBBLE_SCALE = 1.5;
-const QuickEmojiReactions = () => (
+const propTypes = {
+ onEmojiSelected: PropTypes.func.isRequired,
+ emojiIconRef: PropTypes.func,
+};
+
+const defaultProps = {
+ emojiIconRef: () => {},
+};
+
+const QuickEmojiReactions = props => (
(
{_.map(QUICK_REACTIONS, reaction => (
{
+ props.onEmojiSelected(reaction);
+ }}
/>
))}
);
QuickEmojiReactions.displayName = 'QuickEmojiReactions';
+QuickEmojiReactions.propTypes = propTypes;
+QuickEmojiReactions.defaultProps = defaultProps;
export default QuickEmojiReactions;
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index 7c46d7a15343..ceb92226ee9d 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -39,8 +39,14 @@ const CONTEXT_MENU_TYPES = {
export default [
{
shouldShow: () => true,
- renderContent: (closePopup, {reportAction}) => (
-
+ renderContent: (closePopup, {reportID, reportAction}) => (
+ {
+ console.log('emoji selected', emoji);
+ Report.addReaction(reportID, reportAction, emoji);
+ }}
+ />
),
},
{