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

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
 };