diff options
Diffstat (limited to 'webapp/components/rhs_root_post.jsx')
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 57 |
1 files changed, 25 insertions, 32 deletions
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index c00022e9e..e77fb7992 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -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'; +import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx'; import Constants from 'utils/constants.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; -import {Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; @@ -44,7 +42,6 @@ export default class RhsRootPost 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; @@ -55,7 +52,7 @@ export default class RhsRootPost extends React.Component { currentTeamDisplayName: TeamStore.getCurrent().name, width: '', height: '', - showRHSEmojiPicker: false, + showEmojiPicker: false, testStateObj: true, dropdownOpened: false }; @@ -119,7 +116,7 @@ export default class RhsRootPost extends React.Component { return true; } - if (this.state.showRHSEmojiPicker !== nextState.showRHSEmojiPicker) { + if (this.state.showEmojiPicker !== nextState.showEmojiPicker) { return true; } @@ -175,12 +172,17 @@ export default class RhsRootPost extends React.Component { unpinPost(this.props.post.channel_id, this.props.post.id); } - emojiPickerClick() { - this.setState({showRHSEmojiPicker: !this.state.showRHSEmojiPicker}); + toggleEmojiPicker = () => { + const showEmojiPicker = !this.state.showEmojiPicker; + + this.setState({ + showEmojiPicker, + dropdownOpened: showEmojiPicker + }); } reactEmojiClick(emoji) { - this.setState({showRHSEmojiPicker: false}); + this.setState({showEmojiPicker: false}); const emojiName = emoji.name || emoji.aliases[0]; addReaction(this.props.post.channel_id, this.props.post.id, emojiName); } @@ -250,38 +252,26 @@ export default class RhsRootPost 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_root_reacticon' ><i className='fa fa-smile-o'/> </a> </span> ); - reactOverlay = ( - <Overlay - id='rhs_react_overlay' - show={this.state.showRHSEmojiPicker} - placement='bottom' - rootClose={true} - container={this} - onHide={() => this.setState({showRHSEmojiPicker: false})} - target={() => ReactDOM.findDOMNode(this.refs.rhs_root_reacticon)} - animation={false} - > - <EmojiPicker - onEmojiClick={this.reactEmojiClick} - pickerLocation='react' - /> - </Overlay> - ); } var dropdownContents = []; @@ -590,8 +580,10 @@ export default class RhsRootPost extends React.Component { isFlagged={this.props.isFlagged} /> </div> - <div className='col col__reply'> - {reactOverlay} + <div + ref='dotMenu' + className='col col__reply' + > {rootOptions} {react} </div> @@ -628,5 +620,6 @@ RhsRootPost.propTypes = { isFlagged: PropTypes.bool, status: PropTypes.string, previewCollapsed: PropTypes.string, - isBusy: PropTypes.bool + isBusy: PropTypes.bool, + getPostList: PropTypes.func.isRequired }; |