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, 7 insertions, 1 deletions

diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index bcb8a715f..a532119b8 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -338,6 +338,10 @@ export default class RhsThread extends React.Component {
         });
     }
 
+    getPostListContainer = () => {
+        return this.refs.postListContainer;
+    }
+
     render() {
         if (this.state.postsArray == null || this.state.selected == null) {
             return (
@@ -414,6 +418,7 @@ export default class RhsThread extends React.Component {
                         isFlagged={isFlagged}
                         status={status}
                         isBusy={this.state.isBusy}
+                        getPostList={this.getPostListContainer}
                     />
                 </div>
             );
@@ -446,7 +451,7 @@ export default class RhsThread extends React.Component {
                     onScroll={this.handleScroll}
                 >
                     <div
-                        ref='post-right__scroll'
+                        ref='postListContainer'
                         className='post-right__scroll'
                     >
                         <DateSeparator
@@ -464,6 +469,7 @@ export default class RhsThread extends React.Component {
                             status={rootStatus}
                             previewCollapsed={this.state.previewsCollapsed}
                             isBusy={this.state.isBusy}
+                            getPostList={this.getPostListContainer}
                         />
                         <div
                             ref='rhspostlist'