PLT-7062 Moved emoji picker in RHS to attach to the body of the page (#6923)

4 files changed, 30 insertions, 34 deletions

diff --git a/webapp/components/emoji_picker/emoji_picker_overlay.jsx b/webapp/components/emoji_picker/emoji_picker_overlay.jsx
index 0a289a242..7174e004c 100644
--- a/webapp/components/emoji_picker/emoji_picker_overlay.jsx
+++ b/webapp/components/emoji_picker/emoji_picker_overlay.jsx
@@ -15,7 +15,15 @@ export default class EmojiPickerOverlay extends React.PureComponent {
         onEmojiClick: PropTypes.func.isRequired,
         onHide: PropTypes.func.isRequired,
         rightOffset: PropTypes.number,
-        topOffset: PropTypes.number
+        topOffset: PropTypes.number,
+        spaceRequiredAbove: PropTypes.number,
+        spaceRequiredBelow: PropTypes.number
+    }
+
+    // Reasonable defaults calculated from from the center channel
+    static defaultProps = {
+        spaceRequiredAbove: 422,
+        spaceRequiredBelow: 436
     }
 
     constructor(props) {
@@ -28,15 +36,12 @@ export default class EmojiPickerOverlay extends React.PureComponent {
 
     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) {
+            if (targetBounds.top > nextProps.spaceRequiredAbove) {
                 placement = 'top';
-            } else if (window.innerHeight - targetBounds.bottom > spaceRequiredBelow) {
+            } else if (window.innerHeight - targetBounds.bottom > nextProps.spaceRequiredBelow) {
                 placement = 'bottom';
             } else {
                 placement = 'left';
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 68190da98..568d85304 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -26,6 +26,19 @@ import {Link} from 'react-router/es6';
 import {FormattedMessage} from 'react-intl';
 
 export default class RhsComment extends React.Component {
+    static propTypes = {
+        post: PropTypes.object,
+        lastPostCount: PropTypes.number,
+        user: PropTypes.object.isRequired,
+        currentUser: PropTypes.object.isRequired,
+        compactDisplay: PropTypes.bool,
+        useMilitaryTime: PropTypes.bool.isRequired,
+        isFlagged: PropTypes.bool,
+        status: PropTypes.string,
+        isBusy: PropTypes.bool,
+        removePost: PropTypes.func.isRequired
+    };
+
     constructor(props) {
         super(props);
 
@@ -332,9 +345,10 @@ export default class RhsComment extends React.Component {
                         show={this.state.showEmojiPicker}
                         onHide={this.toggleEmojiPicker}
                         target={() => this.refs.dotMenu}
-                        container={this.props.getPostList}
                         onEmojiClick={this.reactEmojiClick}
                         rightOffset={15}
+                        spaceRequiredAbove={342}
+                        spaceRequiredBelow={342}
                     />
                     <a
                         href='#'
@@ -435,17 +449,3 @@ export default class RhsComment extends React.Component {
         );
     }
 }
-
-RhsComment.propTypes = {
-    post: PropTypes.object,
-    lastPostCount: PropTypes.number,
-    user: PropTypes.object.isRequired,
-    currentUser: PropTypes.object.isRequired,
-    compactDisplay: PropTypes.bool,
-    useMilitaryTime: PropTypes.bool.isRequired,
-    isFlagged: PropTypes.bool,
-    status: PropTypes.string,
-    isBusy: PropTypes.bool,
-    getPostList: PropTypes.func.isRequired,
-    removePost: PropTypes.func.isRequired
-};
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 352de0c67..fa72da167 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -38,8 +38,7 @@ export default class RhsRootPost extends React.Component {
         isFlagged: PropTypes.bool,
         status: PropTypes.string,
         previewCollapsed: PropTypes.string,
-        isBusy: PropTypes.bool,
-        getPostList: PropTypes.func.isRequired
+        isBusy: PropTypes.bool
     }
 
     static defaultProps = {
@@ -226,9 +225,10 @@ export default class RhsRootPost extends React.Component {
                         show={this.state.showEmojiPicker}
                         onHide={this.toggleEmojiPicker}
                         target={() => this.refs.dotMenu}
-                        container={this.props.getPostList}
                         onEmojiClick={this.reactEmojiClick}
                         rightOffset={15}
+                        spaceRequiredAbove={342}
+                        spaceRequiredBelow={342}
                     />
                     <a
                         href='#'
diff --git a/webapp/components/rhs_thread/rhs_thread.jsx b/webapp/components/rhs_thread/rhs_thread.jsx
index 5ce6af018..58325e8cc 100644
--- a/webapp/components/rhs_thread/rhs_thread.jsx
+++ b/webapp/components/rhs_thread/rhs_thread.jsx
@@ -319,10 +319,6 @@ export default class RhsThread extends React.Component {
         });
     }
 
-    getPostListContainer = () => {
-        return this.refs.postListContainer;
-    }
-
     getSidebarBody = () => {
         return this.refs.sidebarbody;
     }
@@ -403,7 +399,6 @@ export default class RhsThread extends React.Component {
                         isFlagged={isFlagged}
                         status={status}
                         isBusy={this.state.isBusy}
-                        getPostList={this.getPostListContainer}
                         removePost={this.props.actions.removePost}
                     />
                 </div>
@@ -439,10 +434,7 @@ export default class RhsThread extends React.Component {
                     renderView={renderView}
                     onScroll={this.handleScroll}
                 >
-                    <div
-                        ref='postListContainer'
-                        className='post-right__scroll'
-                    >
+                    <div className='post-right__scroll'>
                         <DateSeparator
                             date={rootPostDay}
                         />
@@ -458,7 +450,6 @@ export default class RhsThread extends React.Component {
                             status={rootStatus}
                             previewCollapsed={this.state.previewsCollapsed}
                             isBusy={this.state.isBusy}
-                            getPostList={this.getPostListContainer}
                         />
                         <div
                             ref='rhspostlist'