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, 62 insertions, 0 deletions

diff --git a/webapp/components/emoji_picker/emoji_picker_overlay.jsx b/webapp/components/emoji_picker/emoji_picker_overlay.jsx
new file mode 100644
index 000000000..09cc0a36c
--- /dev/null
+++ b/webapp/components/emoji_picker/emoji_picker_overlay.jsx
@@ -0,0 +1,62 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Overlay} from 'react-bootstrap';
+
+import EmojiPicker from './emoji_picker.jsx';
+
+export default class EmojiPickerOverlay extends React.PureComponent {
+    static propTypes = {
+        show: PropTypes.bool.isRequired,
+        container: PropTypes.func,
+        target: PropTypes.func.isRequired,
+        onEmojiClick: PropTypes.func.isRequired,
+        onHide: PropTypes.func.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            placement: 'top'
+        };
+    }
+
+    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) {
+                placement = 'top';
+            } else if (window.innerHeight - targetBounds.bottom > spaceRequiredBelow) {
+                placement = 'bottom';
+            } else {
+                placement = 'left';
+            }
+
+            this.setState({placement});
+        }
+    }
+
+    render() {
+        return (
+            <Overlay
+                show={this.props.show}
+                placement={this.state.placement}
+                rootClose={true}
+                container={this.props.container}
+                onHide={this.props.onHide}
+                target={this.props.target}
+                animation={false}
+            >
+                <EmojiPicker onEmojiClick={this.props.onEmojiClick}/>
+            </Overlay>
+        );
+    }
+}