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

webapp/components/post_view/components/post.jsx

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

webapp/components/post_view/components/post_header.jsx

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

webapp/components/post_view/components/post_info.jsx

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

webapp/components/post_view/components/post_list.jsx

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