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); + }} + /> ), }, {