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';
import Constants from 'utils/constants.jsx';
import {FormattedMessage} from 'react-intl';
import {RootCloseWrapper} from 'react-overlays';
import {browserHistory} from 'react-router/es6';
const ActionTypes = Constants.ActionTypes;
......@@ -58,10 +59,7 @@ export default class CreateComment extends React.Component {
this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
this.handlePostError = this.handlePostError.bind(this);
this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.onKeyPress = this.onKeyPress.bind(this);
this.closeEmoji = this.closeEmoji.bind(this);
PostStore.clearCommentDraftUploads();
MessageHistoryStore.resetHistoryIndex('comment');
......@@ -77,38 +75,14 @@ export default class CreateComment extends React.Component {
showPostDeletedModal: false,
enableAddButton,
showEmojiPicker: false,
emojiOffset: 0,
emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
};
this.lastBlurAt = 0;
}
closeEmoji(clickEvent) {
/*
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});
toggleEmojiPicker = () => {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
handleEmojiClick(emoji) {
......@@ -120,34 +94,28 @@ export default class CreateComment extends React.Component {
}
if (this.state.message === '') {
this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false});
this.setState({message: ':' + emojiAlias + ': '});
} else {
//check whether there is already a blank at the end of the current message
const newMessage = (/\s+$/.test(this.state.message)) ?
this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
this.setState({message: newMessage, showEmojiPicker: false});
this.setState({message: newMessage});
}
this.setState({showEmojiPicker: false});
this.focusTextbox();
}
componentDidMount() {
PreferenceStore.addChangeListener(this.onPreferenceChange);
document.addEventListener('keydown', this.onKeyPress);
this.focusTextbox();
}
componentWillUnmount() {
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() {
......@@ -584,12 +552,12 @@ export default class CreateComment extends React.Component {
let emojiPicker = null;
if (this.state.showEmojiPicker) {
emojiPicker = (
<EmojiPicker
onEmojiClick={this.handleEmojiClick}
pickerLocation='bottom'
emojiOffset={this.state.emojiOffset}
outsideClick={this.closeEmoji}
/>
<RootCloseWrapper onRootClose={this.toggleEmojiPicker}>
<EmojiPicker
onEmojiClick={this.handleEmojiClick}
onHide={this.toggleEmojiPicker}
/>
</RootCloseWrapper>
);
}
......@@ -625,7 +593,7 @@ export default class CreateComment extends React.Component {
onUploadError={this.handleUploadError}
postType='comment'
channelId={this.props.channelId}
onEmojiClick={this.handleEmojiPickerClick}
onEmojiClick={this.toggleEmojiPicker}
emojiEnabled={this.state.emojiPickerEnabled}
navBarName='rhs'
/>
......
......@@ -28,6 +28,7 @@ import ConfirmModal from './confirm_modal.jsx';
import Constants from 'utils/constants.jsx';
import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
import {RootCloseWrapper} from 'react-overlays';
import {browserHistory} from 'react-router/es6';
const Preferences = Constants.Preferences;
......@@ -67,9 +68,7 @@ export default class CreatePost extends React.Component {
this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
this.showShortcuts = this.showShortcuts.bind(this);
this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
this.handlePostError = this.handlePostError.bind(this);
this.closeEmoji = this.closeEmoji.bind(this);
this.hideNotifyAllModal = this.hideNotifyAllModal.bind(this);
this.showNotifyAllModal = this.showNotifyAllModal.bind(this);
this.handleNotifyModalCancel = this.handleNotifyModalCancel.bind(this);
......@@ -107,16 +106,8 @@ export default class CreatePost extends React.Component {
this.setState({postError});
}
closeEmoji(clickEvent) {
/*
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});
}
toggleEmojiPicker = () => {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
}
doSubmit(e) {
......@@ -446,10 +437,6 @@ export default class CreatePost extends React.Component {
}
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) {
e.preventDefault();
const args = {};
......@@ -580,20 +567,18 @@ export default class CreatePost extends React.Component {
}
if (this.state.message === '') {
this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false});
this.setState({message: ':' + emojiAlias + ': '});
} else {
//check whether there is already a blank at the end of the current message
const newMessage = (/\s+$/.test(this.state.message)) ?
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.setState({showEmojiPicker: !this.state.showEmojiPicker});
this.focusTextbox();
}
createTutorialTip() {
......@@ -692,15 +677,16 @@ export default class CreatePost extends React.Component {
if (!this.state.enableSendButton) {
sendButtonClass += ' disabled';
}
let emojiPicker = null;
if (this.state.showEmojiPicker) {
emojiPicker = (
<EmojiPicker
onEmojiClick={this.handleEmojiClick}
pickerLocation='top'
outsideClick={this.closeEmoji}
/>
<RootCloseWrapper onRootClose={this.toggleEmojiPicker}>
<EmojiPicker
onHide={this.toggleEmojiPicker}
onEmojiClick={this.handleEmojiClick}
/>
</RootCloseWrapper>
);
}
......@@ -743,7 +729,7 @@ export default class CreatePost extends React.Component {
onUploadError={this.handleUploadError}
postType='post'
channelId=''
onEmojiClick={this.handleEmojiPickerClick}
onEmojiClick={this.toggleEmojiPicker}
emojiEnabled={this.state.emojiPickerEnabled}
navBarName='main'
/>
......
import PropTypes from 'prop-types';
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import PropTypes from 'prop-types';
import * as Emoji from 'utils/emoji.jsx';
import EmojiStore from 'stores/emoji_store.jsx';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import * as Utils from 'utils/utils.jsx';
import ReactOutsideEvent from 'react-outside-event';
import {FormattedMessage} from 'react-intl';
import EmojiPickerCategory from './components/emoji_picker_category.jsx';
......@@ -30,13 +28,12 @@ const CATEGORIES = [
'custom'
];
class EmojiPicker extends React.Component {
export default class EmojiPicker extends React.Component {
static propTypes = {
style: PropTypes.object,
placement: PropTypes.oneOf(['top', 'bottom', 'left']),
customEmojis: PropTypes.object,
onEmojiClick: PropTypes.func.isRequired,
pickerLocation: PropTypes.string.isRequired,
emojiOffset: PropTypes.number,
outsideClick: PropTypes.func
onEmojiClick: PropTypes.func.isRequired
}
constructor(props) {
......@@ -53,7 +50,6 @@ class EmojiPicker extends React.Component {
this.handleScroll = this.handleScroll.bind(this);
this.handleItemUnmount = this.handleItemUnmount.bind(this);
this.renderCategory = this.renderCategory.bind(this);
this.onOutsideEvent = this.onOutsideEvent.bind(this);
this.state = {
category: 'recent',
......@@ -63,14 +59,11 @@ class EmojiPicker extends React.Component {
}
componentDidMount() {
this.searchInput.focus();
}
onOutsideEvent = (event) => {
// Handle the event.
if (this.props.outsideClick) {
this.props.outsideClick(event);
}
// Delay taking focus because this briefly renders offscreen when using an Overlay
// so focusing it immediately on mount can cause weird scrolling
requestAnimationFrame(() => {
this.searchInput.focus();
});
}
handleCategoryClick(category) {
......@@ -99,7 +92,7 @@ class EmojiPicker extends React.Component {
}
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) {
this.setState({selected: null});
}
......@@ -292,22 +285,25 @@ class EmojiPicker extends React.Component {
items.push(this.renderCategory(category, this.state.filter));
}
}
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';
let pickerStyle;
if (this.props.style && !(this.props.style.left === 0 || this.props.style.top === 0)) {
if (this.props.placement === 'top' || this.props.placement === 'bottom') {
// Only take the top/bottom position passed by React Bootstrap since we want to be right-aligned
pickerStyle = {
top: this.props.style.top,
bottom: this.props.style.bottom,
right: 1
};
} else {
pickerStyle = this.props.style;
}
}
const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {};
return (
<div
className='emoji-picker'
style={pickerStyle}
className={cssclass}
>
<div className='emoji-picker__categories'>
<EmojiPickerCategory
......@@ -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 {
isFlagged: PropTypes.bool,
status: PropTypes.string,
isBusy: PropTypes.bool,
childComponentDidUpdateFunction: PropTypes.func
childComponentDidUpdateFunction: PropTypes.func,
getPostList: PropTypes.func.isRequired
};
constructor(props) {
......@@ -308,6 +309,7 @@ export default class Post extends Component {
isFlagged={this.props.isFlagged}
status={this.props.status}
isBusy={this.props.isBusy}
getPostList={this.props.getPostList}
/>
<PostBody
post={post}
......
......@@ -91,6 +91,7 @@ export default class PostHeader extends React.Component {
compactDisplay={this.props.compactDisplay}
useMilitaryTime={this.props.useMilitaryTime}
isFlagged={this.props.isFlagged}
getPostList={this.props.getPostList}
/>
</div>
</div>
......@@ -119,5 +120,6 @@ PostHeader.propTypes = {
useMilitaryTime: PropTypes.bool.isRequired,
isFlagged: PropTypes.bool.isRequired,
status: PropTypes.string,
isBusy: PropTypes.bool
isBusy: PropTypes.bool,
getPostList: PropTypes.func.isRequired
};
......@@ -2,7 +2,6 @@
// See License.txt for license information.
import $ from 'jquery';
import ReactDOM from 'react-dom';
import PostTime from './post_time.jsx';
import PostFlagIcon from 'components/common/post_flag_icon.jsx';
......@@ -15,8 +14,7 @@ import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
import Constants from 'utils/constants.jsx';
import DelayedAction from 'utils/delayed_action.jsx';
import {Overlay} from 'react-bootstrap';
import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
import ChannelStore from 'stores/channel_store.jsx';
import PropTypes from 'prop-types';
......@@ -36,7 +34,6 @@ export default class PostInfo extends React.Component {
this.pinPost = this.pinPost.bind(this);
this.unpinPost = this.unpinPost.bind(this);
this.reactEmojiClick = this.reactEmojiClick.bind(this);
this.emojiPickerClick = this.emojiPickerClick.bind(this);
this.canEdit = false;
this.canDelete = false;
......@@ -280,8 +277,16 @@ export default class PostInfo extends React.Component {
GlobalActions.showGetPostLinkModal(this.props.post);
}
emojiPickerClick() {
this.setState({showEmojiPicker: !this.state.showEmojiPicker});
toggleEmojiPicker = () => {
const showEmojiPicker = !this.state.showEmojiPicker;
this.setState({showEmojiPicker});
this.props.handleDropdownOpened(showEmojiPicker);
}
hideEmojiPicker = () => {
this.setState({showEmojiPicker: false});
this.props.handleDropdownOpened(false);
}
removePost() {
......@@ -328,6 +333,10 @@ export default class PostInfo extends React.Component {
PostActions.addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
}
getDotMenu = () => {
return this.refs.dotMenu;
}
render() {
var post = this.props.post;
......@@ -359,30 +368,21 @@ export default class PostInfo extends React.Component {
if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
react = (
<span>
<Overlay
<EmojiPickerOverlay
show={this.state.showEmojiPicker}
placement='top'
rootClose={true}
container={this}
onHide={() => this.setState({showEmojiPicker: false})}
target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])}
animation={false}
>
<EmojiPicker
onEmojiClick={this.reactEmojiClick}
pickerLocation='top'
/>
</Overlay>
container={this.props.getPostList}
target={this.getDotMenu}
onHide={this.hideEmojiPicker}
onEmojiClick={this.reactEmojiClick}
/>
<a
href='#'
className='reacticon__container'
onClick={this.emojiPickerClick}
ref={'reactIcon_' + post.id}
><i className='fa fa-smile-o'/>
onClick={this.toggleEmojiPicker}
>
<i className='fa fa-smile-o'/>
</a>
</span>
);
}
}
......@@ -399,7 +399,10 @@ export default class PostInfo extends React.Component {
if (dropdown) {
options = (
<div className='col col__reply'>
<div
ref='dotMenu'
className='col col__reply'
>
<div
className='dropdown'
ref='dotMenu'
......@@ -468,5 +471,6 @@ PostInfo.propTypes = {
currentUser: PropTypes.object.isRequired,
compactDisplay: PropTypes.bool,
useMilitaryTime: PropTypes.bool.isRequired,
isFlagged: PropTypes.bool
isFlagged: PropTypes.bool,
getPostList: PropTypes.func.isRequired
};
......@@ -368,6 +368,7 @@ export default class PostList extends React.Component {
status={status}
isBusy={this.props.isBusy}
childComponentDidUpdateFunction={this.childComponentDidUpdate}
getPostList={this.getPostList}
/>
);
......@@ -562,6 +563,10 @@ export default class PostList extends React.Component {
this.checkAndUpdateScrolling();
}
getPostList = () => {
return this.refs.postlist;
}
render() {
// Create intro message or top loadmore link
let moreMessagesTop;
......
......@@ -20,12 +20,10 @@ import * as PostUtils from 'utils/post_utils.jsx';
import Constants from 'utils/constants.jsx';
import DelayedAction from 'utils/delayed_action.jsx';
import {Overlay} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
import ReactDOM from 'react-dom';
import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
import loadingGif from 'images/load.gif';
......@@ -45,7 +43,6 @@ export default class RhsComment extends React.Component {
this.pinPost = this.pinPost.bind(this);
this.unpinPost = this.unpinPost.bind(this);
this.reactEmojiClick = this.reactEmojiClick.bind(this);
this.emojiPickerClick = this.emojiPickerClick.bind(this);
this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
this.canEdit = false;
......@@ -56,8 +53,7 @@ export default class RhsComment extends React.Component {
currentTeamDisplayName: TeamStore.getCurrent().name,
width: '',
height: '',
showReactEmojiPicker: false,
reactPickerOffset: 15,
showEmojiPicker: false,
dropdownOpened: false
};
}
......@@ -129,7 +125,7 @@ export default class RhsComment extends React.Component {
return true;
}
if (this.state.showReactEmojiPicker !== nextState.showReactEmojiPicker) {
if (this.state.showEmojiPicker !== nextState.showEmojiPicker) {
return true;
}
......@@ -356,22 +352,17 @@ export default class RhsComment extends React.Component {
);
}
emojiPickerClick() {
// set default offset
let reactOffset = 15;
const reactSelectorHeight = 360;
const reactionIconY = ReactDOM.findDOMNode(this).getBoundingClientRect().top;
const rhsMinHeight = 700;
toggleEmojiPicker = () => {
const showEmojiPicker = !this.state.showEmojiPicker;
const spaceAvail = rhsMinHeight - reactionIconY;
if (spaceAvail < reactSelectorHeight) {
reactOffset = (spaceAvail - reactSelectorHeight);
}
this.setState({showReactEmojiPicker: !this.state.showReactEmojiPicker, reactPickerOffset: reactOffset});
this.setState({
showEmojiPicker,
dropdownOpened: showEmojiPicker
});
}
reactEmojiClick(emoji) {
this.setState({showReactEmojiPicker: false});
this.setState({showEmojiPicker: false});
const emojiName = emoji.name || emoji.aliases[0];
addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
}
......@@ -554,39 +545,26 @@ export default class RhsComment extends React.Component {
}
let react;
let reactOverlay;
if (!isEphemeral && !isPending && !isSystemMessage && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
react = (
<span>
<EmojiPickerOverlay
show={this.state.showEmojiPicker}
onHide={this.toggleEmojiPicker}
target={() => this.refs.dotMenu}
container={this.props.getPostList}
onEmojiClick={this.reactEmojiClick}
/>
<a
href='#'
className='reacticon__container reaction'
onClick={this.emojiPickerClick}
onClick={this.toggleEmojiPicker}
ref={'rhs_reacticon_' + post.id}
><i className='fa fa-smile-o'/>
</a>
</span>
);
reactOverlay = (
<Overlay
id={'rhs_react_overlay_' + post.id}
show={this.state.showReactEmojiPicker}
placement='top'
rootClose={true}
container={this.refs['post_body_' + post.id]}
onHide={() => this.setState({showReactEmojiPicker: false})}
target={() => ReactDOM.findDOMNode(this.refs['rhs_reacticon_' + post.id])}
animation={false}
>
<EmojiPicker
onEmojiClick={this.reactEmojiClick}
pickerLocation='react-rhs-comment'
emojiOffset={this.state.reactPickerOffset}
/>
</Overlay>
);
}
let options;
......@@ -598,8 +576,10 @@ export default class RhsComment extends React.Component {
);
} else if (!isSystemMessage) {
options = (
<div className='col col__reply'>
{reactOverlay}
<div
ref='dotMenu'
className='col col__reply'
>
{this.createDropdown(isSystemMessage)}
{react}
</div>
......@@ -674,5 +654,6 @@ RhsComment.propTypes = {
useMilitaryTime: PropTypes.bool.isRequired,
isFlagged: PropTypes.bool,
status: PropTypes.string,
isBusy: PropTypes.bool
isBusy: PropTypes.bool,
getPostList: PropTypes.func.isRequired
};
......@@ -20,12 +20,10 @@ import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/pos
import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
import ReactDOM from 'react-dom';