From c3d095b465ed87c086409992ef78b62a06c09909 Mon Sep 17 00:00:00 2001 From: bonespiked Date: Sat, 1 Apr 2017 17:00:30 -0400 Subject: Add reaction picker (#5904) --- webapp/components/emoji_picker/emoji_picker.jsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) (limited to 'webapp/components/emoji_picker/emoji_picker.jsx') diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index e12974054..0f45b7297 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -34,7 +34,7 @@ class EmojiPicker extends React.Component { static propTypes = { customEmojis: React.PropTypes.object, onEmojiClick: React.PropTypes.func.isRequired, - topOrBottom: React.PropTypes.string.isRequired, + pickerLocation: React.PropTypes.string.isRequired, emojiOffset: React.PropTypes.number, outsideClick: React.PropTypes.func } @@ -68,7 +68,9 @@ class EmojiPicker extends React.Component { onOutsideEvent = (event) => { // Handle the event. - this.props.outsideClick(event); + if (this.props.outsideClick) { + this.props.outsideClick(event); + } } handleCategoryClick(category) { @@ -287,7 +289,17 @@ class EmojiPicker extends React.Component { items.push(this.renderCategory(category, this.state.filter)); } } - const cssclass = this.props.topOrBottom === 'top' ? 'emoji-picker' : 'emoji-picker-bottom'; + let cssclass = 'emoji-picker '; + if (this.props.pickerLocation === 'top') { + cssclass += 'emoji-picker-top'; + } else if (this.props.pickerLocation === 'bottom') { + cssclass += 'emoji-picker-bottom'; + } else if (this.props.pickerLocation === 'react') { + cssclass = 'emoji-picker-react'; + } else if (this.props.pickerLocation === 'react-rhs-comment') { + cssclass = 'emoji-picker-react-rhs-comment'; + } + const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {}; return (