abstracted dropdown so it can be reused

app/soapbox/features/emoji/components/emoji_picker.tsx

@@ -1,7 +1,7 @@
 import { Picker as EmojiPicker, PickerProps } from 'emoji-mart';
 import React, { useRef, useEffect } from 'react';
 
-import data from './data';
+import data from '../data';
 
 const getSpritesheetURL = (set: string) => {
   return '/packs/images/32.png';

app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx

@@ -67,6 +67,7 @@ interface IEmojiPickerDropdown {
   onPickEmoji: (emoji: Emoji) => void,
   onSkinTone: () => void,
   condensed: boolean,
+  render: any,
 }
 
 // Fixes render bug where popover has a delayed position update
@@ -90,7 +91,7 @@ const RenderAfter = ({ children, update }: any) => {
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, frequentlyUsedEmojis, onPickEmoji, onSkinTone, condensed }) => {
+const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, frequentlyUsedEmojis, onPickEmoji, onSkinTone, condensed, render: Render }) => {
   const intl = useIntl();
   const settings = useSettings();
   const title = intl.formatMessage(messages.emoji);
@@ -204,27 +205,17 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
 
   return (
     <div className='relative' ref={setContainerElement}>
-      <IconButton
+      <Render
-        className={classNames({
+        handleToggle={handleToggle}
-          'text-gray-400 hover:text-gray-600': true,
+        visible={visible}
-          'pulse-loading': visible && loading,
+        loading={loading}
-        })}
-        ref={setPopperReference}
-        src={require('@tabler/icons/mood-happy.svg')}
         title={title}
-        aria-label={title}
+        setPopperReference={setPopperReference}
-        aria-expanded={visible}
-        role='button'
-        onClick={handleToggle}
-        onKeyDown={handleToggle}
-        tabIndex={0}
       />
 
       {createPortal(
         <div
-          className={classNames({
+          className={classNames({ 'z-1000': true })}
-            'z-1000': true,
-          })}
           ref={setPopperElement}
           style={style}
           {...attributes.popper}

app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.jsx

@@ -1,7 +1,10 @@
+import React from 'react';
 import { Map as ImmutableMap } from 'immutable';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import classNames from 'classnames';
 
+import { IconButton } from 'soapbox/components/ui';
 import { useEmoji } from '../../../actions/emojis';
 import { getSettings, changeSetting } from '../../../actions/settings';
 import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
@@ -81,4 +84,35 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
   },
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
+const Container = connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
+
+const EmojiPickerDropdownWrapper = (props) => {
+  return (
+    <Container
+      render={
+        ({ setPopperReference, title, visible, loading, handleToggle }) => (
+          <IconButton
+            className={classNames({
+              'text-gray-400 hover:text-gray-600': true,
+              'pulse-loading': visible && loading,
+            })}
+            ref={setPopperReference}
+            src={require('@tabler/icons/mood-happy.svg')}
+            title={title}
+            aria-label={title}
+            aria-expanded={visible}
+            role='button'
+            onClick={handleToggle}
+            onKeyDown={handleToggle}
+            tabIndex={0}
+          />
+        )
+      }
+
+      {...props}
+    />
+  );
+};
+
+
+export default EmojiPickerDropdownWrapper;

app/soapbox/features/ui/util/async-components.ts

@@ -1,5 +1,5 @@
 export function EmojiPicker() {
-  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
+  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/components/emoji_picker');
 }
 
 export function Notifications() {