Commit 75984393 authored by Harrison Healey's avatar Harrison Healey Committed by Christopher Speller

PLT-6127/PLT-6135/PLT-6137 Added EmojiPickerOverlay component to better...

PLT-6127/PLT-6135/PLT-6137 Added EmojiPickerOverlay component to better position emoji picker (#6352)

* Cleaned up emoji picker CSS

* Fixed border of emoji picker when reacting to comments in the RHS

* PLT-6135 Made EmojiPicker automatically position itself above/below the [...] menu

* PLT-6135 Changed post textbox emoji picker to use a RootCloseWrapper

* PLT-6135 Changed comment textbox emoji picker to use a RootCloseWrapper

* PLT-6135 Changed RHS post components to use EmojiPickerOverlay

* Removed react-outside-event package

* Fixed merge conflict

* Fixed emoji picker position on posts in RHS

* Removed unused CSS classes

* Fixed not being able to react to posts with emoji picker
parent ea033923
...@@ -24,6 +24,7 @@ import * as PostActions from 'actions/post_actions.jsx'; ...@@ -24,6 +24,7 @@ import * as PostActions from 'actions/post_actions.jsx';
import Constants from 'utils/constants.jsx'; import Constants from 'utils/constants.jsx';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import {RootCloseWrapper} from 'react-overlays';
import {browserHistory} from 'react-router/es6'; import {browserHistory} from 'react-router/es6';
const ActionTypes = Constants.ActionTypes; const ActionTypes = Constants.ActionTypes;
...@@ -58,10 +59,7 @@ export default class CreateComment extends React.Component { ...@@ -58,10 +59,7 @@ export default class CreateComment extends React.Component {
this.showPostDeletedModal = this.showPostDeletedModal.bind(this); this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
this.handlePostError = this.handlePostError.bind(this); this.handlePostError = this.handlePostError.bind(this);
this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
this.handleEmojiClick = this.handleEmojiClick.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.onKeyPress = this.onKeyPress.bind(this);
this.closeEmoji = this.closeEmoji.bind(this);
PostStore.clearCommentDraftUploads(); PostStore.clearCommentDraftUploads();
MessageHistoryStore.resetHistoryIndex('comment'); MessageHistoryStore.resetHistoryIndex('comment');
...@@ -77,38 +75,14 @@ export default class CreateComment extends React.Component { ...@@ -77,38 +75,14 @@ export default class CreateComment extends React.Component {
showPostDeletedModal: false, showPostDeletedModal: false,
enableAddButton, enableAddButton,
showEmojiPicker: false, showEmojiPicker: false,
emojiOffset: 0,
emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW) emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
}; };
this.lastBlurAt = 0; this.lastBlurAt = 0;
} }
closeEmoji(clickEvent) { toggleEmojiPicker = () => {
/* this.setState({showEmojiPicker: !this.state.showEmojiPicker});
if the user clicked something outside the component, except the RHS emojipicker icon
and the picker is open, then close it
*/
if (clickEvent && clickEvent.srcElement &&
clickEvent.srcElement.className !== '' &&
clickEvent.srcElement.className.indexOf('emoji-rhs') === -1 &&
this.state.showEmojiPicker) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
}
handleEmojiPickerClick() {
const threadHeight = document.getElementById('thread--root') ? document.getElementById('thread--root').offsetHeight : 0;
const messagesHeight = document.querySelector('div.post-right-comments-container') ? document.querySelector('div.post-right-comments-container').offsetHeight : 0;
const totalHeight = threadHeight + messagesHeight;
let pickerOffset = 0;
if (totalHeight > 361) {
pickerOffset = -361;
} else {
pickerOffset = -1 * totalHeight;
}
this.setState({showEmojiPicker: !this.state.showEmojiPicker, emojiOffset: pickerOffset});
} }
handleEmojiClick(emoji) { handleEmojiClick(emoji) {
...@@ -120,34 +94,28 @@ export default class CreateComment extends React.Component { ...@@ -120,34 +94,28 @@ export default class CreateComment extends React.Component {
} }
if (this.state.message === '') { if (this.state.message === '') {
this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false}); this.setState({message: ':' + emojiAlias + ': '});
} else { } else {
//check whether there is already a blank at the end of the current message //check whether there is already a blank at the end of the current message
const newMessage = (/\s+$/.test(this.state.message)) ? const newMessage = (/\s+$/.test(this.state.message)) ?
this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': '; this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
this.setState({message: newMessage, showEmojiPicker: false}); this.setState({message: newMessage});
} }
this.setState({showEmojiPicker: false});
this.focusTextbox(); this.focusTextbox();
} }
componentDidMount() { componentDidMount() {
PreferenceStore.addChangeListener(this.onPreferenceChange); PreferenceStore.addChangeListener(this.onPreferenceChange);
document.addEventListener('keydown', this.onKeyPress);
this.focusTextbox(); this.focusTextbox();
} }
componentWillUnmount() { componentWillUnmount() {
PreferenceStore.removeChangeListener(this.onPreferenceChange); PreferenceStore.removeChangeListener(this.onPreferenceChange);
document.removeEventListener('keydown', this.onKeyPress);
}
onKeyPress(e) {
if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
} }
onPreferenceChange() { onPreferenceChange() {
...@@ -584,12 +552,12 @@ export default class CreateComment extends React.Component { ...@@ -584,12 +552,12 @@ export default class CreateComment extends React.Component {
let emojiPicker = null; let emojiPicker = null;
if (this.state.showEmojiPicker) { if (this.state.showEmojiPicker) {
emojiPicker = ( emojiPicker = (
<EmojiPicker <RootCloseWrapper onRootClose={this.toggleEmojiPicker}>
onEmojiClick={this.handleEmojiClick} <EmojiPicker
pickerLocation='bottom' onEmojiClick={this.handleEmojiClick}
emojiOffset={this.state.emojiOffset} onHide={this.toggleEmojiPicker}
outsideClick={this.closeEmoji} />
/> </RootCloseWrapper>
); );
} }
...@@ -625,7 +593,7 @@ export default class CreateComment extends React.Component { ...@@ -625,7 +593,7 @@ export default class CreateComment extends React.Component {
onUploadError={this.handleUploadError} onUploadError={this.handleUploadError}
postType='comment' postType='comment'
channelId={this.props.channelId} channelId={this.props.channelId}
onEmojiClick={this.handleEmojiPickerClick} onEmojiClick={this.toggleEmojiPicker}
emojiEnabled={this.state.emojiPickerEnabled} emojiEnabled={this.state.emojiPickerEnabled}
navBarName='rhs' navBarName='rhs'
/> />
......
...@@ -28,6 +28,7 @@ import ConfirmModal from './confirm_modal.jsx'; ...@@ -28,6 +28,7 @@ import ConfirmModal from './confirm_modal.jsx';
import Constants from 'utils/constants.jsx'; import Constants from 'utils/constants.jsx';
import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
import {RootCloseWrapper} from 'react-overlays';
import {browserHistory} from 'react-router/es6'; import {browserHistory} from 'react-router/es6';
const Preferences = Constants.Preferences; const Preferences = Constants.Preferences;
...@@ -67,9 +68,7 @@ export default class CreatePost extends React.Component { ...@@ -67,9 +68,7 @@ export default class CreatePost extends React.Component {
this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
this.showShortcuts = this.showShortcuts.bind(this); this.showShortcuts = this.showShortcuts.bind(this);
this.handleEmojiClick = this.handleEmojiClick.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
this.handlePostError = this.handlePostError.bind(this); this.handlePostError = this.handlePostError.bind(this);
this.closeEmoji = this.closeEmoji.bind(this);
this.hideNotifyAllModal = this.hideNotifyAllModal.bind(this); this.hideNotifyAllModal = this.hideNotifyAllModal.bind(this);
this.showNotifyAllModal = this.showNotifyAllModal.bind(this); this.showNotifyAllModal = this.showNotifyAllModal.bind(this);
this.handleNotifyModalCancel = this.handleNotifyModalCancel.bind(this); this.handleNotifyModalCancel = this.handleNotifyModalCancel.bind(this);
...@@ -107,16 +106,8 @@ export default class CreatePost extends React.Component { ...@@ -107,16 +106,8 @@ export default class CreatePost extends React.Component {
this.setState({postError}); this.setState({postError});
} }
closeEmoji(clickEvent) { toggleEmojiPicker = () => {
/* this.setState({showEmojiPicker: !this.state.showEmojiPicker});
if the user clicked something outside the component, except the main emojipicker icon
and the picker is open, then close it
*/
if (clickEvent && clickEvent.srcElement &&
clickEvent.srcElement.className.indexOf('emoji-main') === -1 &&
this.state.showEmojiPicker) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
} }
doSubmit(e) { doSubmit(e) {
...@@ -446,10 +437,6 @@ export default class CreatePost extends React.Component { ...@@ -446,10 +437,6 @@ export default class CreatePost extends React.Component {
} }
showShortcuts(e) { showShortcuts(e) {
if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.FORWARD_SLASH) { if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.FORWARD_SLASH) {
e.preventDefault(); e.preventDefault();
const args = {}; const args = {};
...@@ -580,20 +567,18 @@ export default class CreatePost extends React.Component { ...@@ -580,20 +567,18 @@ export default class CreatePost extends React.Component {
} }
if (this.state.message === '') { if (this.state.message === '') {
this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false}); this.setState({message: ':' + emojiAlias + ': '});
} else { } else {
//check whether there is already a blank at the end of the current message //check whether there is already a blank at the end of the current message
const newMessage = (/\s+$/.test(this.state.message)) ? const newMessage = (/\s+$/.test(this.state.message)) ?
this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': '; this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
this.setState({message: newMessage, showEmojiPicker: false}); this.setState({message: newMessage});
} }
this.focusTextbox(); this.setState({showEmojiPicker: false});
}
handleEmojiPickerClick() { this.focusTextbox();
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
} }
createTutorialTip() { createTutorialTip() {
...@@ -692,15 +677,16 @@ export default class CreatePost extends React.Component { ...@@ -692,15 +677,16 @@ export default class CreatePost extends React.Component {
if (!this.state.enableSendButton) { if (!this.state.enableSendButton) {
sendButtonClass += ' disabled'; sendButtonClass += ' disabled';
} }
let emojiPicker = null; let emojiPicker = null;
if (this.state.showEmojiPicker) { if (this.state.showEmojiPicker) {
emojiPicker = ( emojiPicker = (
<EmojiPicker <RootCloseWrapper onRootClose={this.toggleEmojiPicker}>
onEmojiClick={this.handleEmojiClick} <EmojiPicker
pickerLocation='top' onHide={this.toggleEmojiPicker}
outsideClick={this.closeEmoji} onEmojiClick={this.handleEmojiClick}
/>
/> </RootCloseWrapper>
); );
} }
...@@ -743,7 +729,7 @@ export default class CreatePost extends React.Component { ...@@ -743,7 +729,7 @@ export default class CreatePost extends React.Component {
onUploadError={this.handleUploadError} onUploadError={this.handleUploadError}
postType='post' postType='post'
channelId='' channelId=''
onEmojiClick={this.handleEmojiPickerClick} onEmojiClick={this.toggleEmojiPicker}
emojiEnabled={this.state.emojiPickerEnabled} emojiEnabled={this.state.emojiPickerEnabled}
navBarName='main' navBarName='main'
/> />
......
import PropTypes from 'prop-types';
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information. // See License.txt for license information.
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import * as Emoji from 'utils/emoji.jsx'; import * as Emoji from 'utils/emoji.jsx';
import EmojiStore from 'stores/emoji_store.jsx'; import EmojiStore from 'stores/emoji_store.jsx';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import * as Utils from 'utils/utils.jsx'; import * as Utils from 'utils/utils.jsx';
import ReactOutsideEvent from 'react-outside-event';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import EmojiPickerCategory from './components/emoji_picker_category.jsx'; import EmojiPickerCategory from './components/emoji_picker_category.jsx';
...@@ -30,13 +28,12 @@ const CATEGORIES = [ ...@@ -30,13 +28,12 @@ const CATEGORIES = [
'custom' 'custom'
]; ];
class EmojiPicker extends React.Component { export default class EmojiPicker extends React.Component {
static propTypes = { static propTypes = {
style: PropTypes.object,
placement: PropTypes.oneOf(['top', 'bottom', 'left']),
customEmojis: PropTypes.object, customEmojis: PropTypes.object,
onEmojiClick: PropTypes.func.isRequired, onEmojiClick: PropTypes.func.isRequired
pickerLocation: PropTypes.string.isRequired,
emojiOffset: PropTypes.number,
outsideClick: PropTypes.func
} }
constructor(props) { constructor(props) {
...@@ -53,7 +50,6 @@ class EmojiPicker extends React.Component { ...@@ -53,7 +50,6 @@ class EmojiPicker extends React.Component {
this.handleScroll = this.handleScroll.bind(this); this.handleScroll = this.handleScroll.bind(this);
this.handleItemUnmount = this.handleItemUnmount.bind(this); this.handleItemUnmount = this.handleItemUnmount.bind(this);
this.renderCategory = this.renderCategory.bind(this); this.renderCategory = this.renderCategory.bind(this);
this.onOutsideEvent = this.onOutsideEvent.bind(this);
this.state = { this.state = {
category: 'recent', category: 'recent',
...@@ -63,14 +59,11 @@ class EmojiPicker extends React.Component { ...@@ -63,14 +59,11 @@ class EmojiPicker extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.searchInput.focus(); // Delay taking focus because this briefly renders offscreen when using an Overlay
} // so focusing it immediately on mount can cause weird scrolling
requestAnimationFrame(() => {
onOutsideEvent = (event) => { this.searchInput.focus();
// Handle the event. });
if (this.props.outsideClick) {
this.props.outsideClick(event);
}
} }
handleCategoryClick(category) { handleCategoryClick(category) {
...@@ -99,7 +92,7 @@ class EmojiPicker extends React.Component { ...@@ -99,7 +92,7 @@ class EmojiPicker extends React.Component {
} }
handleItemUnmount(emoji) { handleItemUnmount(emoji) {
//Prevent emoji preview from showing emoji which is not present anymore (due to filter) // Prevent emoji preview from showing emoji which is not present anymore (due to filter)
if (this.state.selected === emoji) { if (this.state.selected === emoji) {
this.setState({selected: null}); this.setState({selected: null});
} }
...@@ -292,22 +285,25 @@ class EmojiPicker extends React.Component { ...@@ -292,22 +285,25 @@ class EmojiPicker extends React.Component {
items.push(this.renderCategory(category, this.state.filter)); items.push(this.renderCategory(category, this.state.filter));
} }
} }
let cssclass = 'emoji-picker ';
if (this.props.pickerLocation === 'top') { let pickerStyle;
cssclass += 'emoji-picker-top'; if (this.props.style && !(this.props.style.left === 0 || this.props.style.top === 0)) {
} else if (this.props.pickerLocation === 'bottom') { if (this.props.placement === 'top' || this.props.placement === 'bottom') {
cssclass += 'emoji-picker-bottom'; // Only take the top/bottom position passed by React Bootstrap since we want to be right-aligned
} else if (this.props.pickerLocation === 'react') { pickerStyle = {
cssclass = 'emoji-picker-react'; top: this.props.style.top,
} else if (this.props.pickerLocation === 'react-rhs-comment') { bottom: this.props.style.bottom,
cssclass = 'emoji-picker-react-rhs-comment'; right: 1
};
} else {
pickerStyle = this.props.style;
}
} }
const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {};
return ( return (
<div <div
className='emoji-picker'
style={pickerStyle} style={pickerStyle}
className={cssclass}
> >
<div className='emoji-picker__categories'> <div className='emoji-picker__categories'>
<EmojiPickerCategory <EmojiPickerCategory
...@@ -426,7 +422,3 @@ class EmojiPicker extends React.Component { ...@@ -426,7 +422,3 @@ class EmojiPicker extends React.Component {
); );
} }
} }
// disabling eslint check for outslide click handler
// eslint-disable-next-line new-cap
export default ReactOutsideEvent(EmojiPicker, ['click']);
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import PropTypes from 'prop-types';
import {Overlay} from 'react-bootstrap';
import EmojiPicker from './emoji_picker.jsx';
export default class EmojiPickerOverlay extends React.PureComponent {
static propTypes = {
show: PropTypes.bool.isRequired,
container: PropTypes.func,
target: PropTypes.func.isRequired,
onEmojiClick: PropTypes.func.isRequired,
onHide: PropTypes.func.isRequired
}
constructor(props) {
super(props);
this.state = {
placement: 'top'
};
}
componentWillUpdate(nextProps) {
if (nextProps.show && !this.props.show) {
const spaceRequiredAbove = 422;
const spaceRequiredBelow = 436;
const targetBounds = nextProps.target().getBoundingClientRect();
let placement;
if (targetBounds.top > spaceRequiredAbove) {
placement = 'top';
} else if (window.innerHeight - targetBounds.bottom > spaceRequiredBelow) {
placement = 'bottom';
} else {
placement = 'left';
}
this.setState({placement});
}
}
render() {
return (
<Overlay
show={this.props.show}
placement={this.state.placement}
rootClose={true}
container={this.props.container}
onHide={this.props.onHide}
target={this.props.target}
animation={false}
>
<EmojiPicker onEmojiClick={this.props.onEmojiClick}/>
</Overlay>
);
}
}
...@@ -38,7 +38,8 @@ export default class Post extends Component { ...@@ -38,7 +38,8 @@ export default class Post extends Component {
isFlagged: PropTypes.bool, isFlagged: PropTypes.bool,
status: PropTypes.string, status: PropTypes.string,
isBusy: PropTypes.bool, isBusy: PropTypes.bool,
childComponentDidUpdateFunction: PropTypes.func childComponentDidUpdateFunction: PropTypes.func,
getPostList: PropTypes.func.isRequired
}; };
constructor(props) { constructor(props) {
...@@ -308,6 +309,7 @@ export default class Post extends Component { ...@@ -308,6 +309,7 @@ export default class Post extends Component {
isFlagged={this.props.isFlagged} isFlagged={this.props.isFlagged}
status={this.props.status} status={this.props.status}
isBusy={this.props.isBusy} isBusy={this.props.isBusy}
getPostList={this.props.getPostList}
/> />
<PostBody <PostBody
post={post} post={post}
......
...@@ -91,6 +91,7 @@ export default class PostHeader extends React.Component { ...@@ -91,6 +91,7 @@ export default class PostHeader extends React.Component {
compactDisplay={this.props.compactDisplay} compactDisplay={this.props.compactDisplay}
useMilitaryTime={this.props.useMilitaryTime} useMilitaryTime={this.props.useMilitaryTime}
isFlagged={this.props.isFlagged} isFlagged={this.props.isFlagged}
getPostList={this.props.getPostList}
/> />
</div> </div>
</div> </div>
...@@ -119,5 +120,6 @@ PostHeader.propTypes = { ...@@ -119,5 +120,6 @@ PostHeader.propTypes = {
useMilitaryTime: PropTypes.bool.isRequired, useMilitaryTime: PropTypes.bool.isRequired,
isFlagged: PropTypes.bool.isRequired, isFlagged: PropTypes.bool.isRequired,
status: PropTypes.string, status: PropTypes.string,
isBusy: PropTypes.bool isBusy: PropTypes.bool,
getPostList: PropTypes.func.isRequired
}; };
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
// See License.txt for license information. // See License.txt for license information.
import $ from 'jquery'; import $ from 'jquery';
import ReactDOM from 'react-dom';
import PostTime from './post_time.jsx'; import PostTime from './post_time.jsx';
import PostFlagIcon from 'components/common/post_flag_icon.jsx'; import PostFlagIcon from 'components/common/post_flag_icon.jsx';
...@@ -15,8 +14,7 @@ import * as Utils from 'utils/utils.jsx'; ...@@ -15,8 +14,7 @@ import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx';
import Constants from 'utils/constants.jsx'; import Constants from 'utils/constants.jsx';
import DelayedAction from 'utils/delayed_action.jsx'; import DelayedAction from 'utils/delayed_action.jsx';
import {Overlay} from 'react-bootstrap'; import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
import ChannelStore from 'stores/channel_store.jsx'; import ChannelStore from 'stores/channel_store.jsx';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
...@@ -36,7 +34,6 @@ export default class PostInfo extends React.Component { ...@@ -36,7 +34,6 @@ export default class PostInfo extends React.Component {
this.pinPost = this.pinPost.bind(this); this.pinPost = this.pinPost.bind(this);
this.unpinPost = this.unpinPost.bind(this); this.unpinPost = this.unpinPost.bind(this);
this.reactEmojiClick = this.reactEmojiClick.bind(this); this.reactEmojiClick = this.reactEmojiClick.bind(this);
this.emojiPickerClick = this.emojiPickerClick.bind(this);
this.canEdit = false; this.canEdit = false;
this.canDelete = false; this.canDelete = false;
...@@ -280,8 +277,16 @@ export default class PostInfo extends React.Component { ...@@ -280,8 +277,16 @@ export default class PostInfo extends React.Component {
GlobalActions.showGetPostLinkModal(this.props.post); GlobalActions.showGetPostLinkModal(this.props.post);
} }
emojiPickerClick() { toggleEmojiPicker = () => {
this.setState({showEmojiPicker: !this.state.showEmojiPicker}); const showEmojiPicker = !this.state.showEmojiPicker;
this.setState({showEmojiPicker});
this.props.handleDropdownOpened(showEmojiPicker);
}
hideEmojiPicker = () => {
this.setState({showEmojiPicker: false});
this.props.handleDropdownOpened(false);
} }
removePost() { removePost() {
...@@ -328,6 +333,10 @@ export default class PostInfo extends React.Component { ...@@ -328,6 +333,10 @@ export default class PostInfo extends React.Component {
PostActions.addReaction(this.props.post.channel_id, this.props.post.id, emojiName); PostActions.addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
} }
getDotMenu = () => {
return this.refs.dotMenu;
}
render() { render() {
var post = this.props.post; var post = this.props.post;