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

1 files changed, 11 insertions, 6 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';