Create now emoji-selector functional component (wip)

app/soapbox/components/emoji_selector.tsx

@@ -1,11 +1,11 @@
-import classNames from 'classnames';
+// import classNames from 'classnames';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { Emoji } from 'soapbox/components/ui';
+import { EmojiSelector as RealEmojiSelector } from 'soapbox/components/ui';
 
 import type { List as ImmutableList } from 'immutable';
 import type { RootState } from 'soapbox/store';
@@ -106,11 +106,11 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
   }
 
   render() {
-    const { visible, focused, allowedEmoji } = this.props;
+    const { visible, focused, allowedEmoji, onReact } = this.props;
 
     return (
       <HotKeys handlers={this.handlers}>
-        <div
+        {/*<div
           className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
           onBlur={this.handleBlur}
           ref={this.setRef}
@@ -126,7 +126,13 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
               <Emoji emoji={emoji} />
             </button>
           ))}
-        </div>
+        </div>*/}
+        <RealEmojiSelector
+          emojis={allowedEmoji.toArray()}
+          onReact={onReact}
+          visible={visible}
+          focused={focused}
+        />
       </HotKeys>
     );
   }

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { Emoji } from 'soapbox/components/ui';
+
+interface IEmojiButton {
+  emoji: string,
+  onClick: React.EventHandler<React.MouseEvent>,
+  className?: string,
+  tabIndex?: number,
+}
+
+const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
+  return (
+    <button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
+      <Emoji className='w-8 h-8' emoji={emoji} />
+    </button>
+  );
+};
+
+interface IEmojiSelector {
+  emojis: string[],
+  onReact: (emoji: string) => void,
+  visible?: boolean,
+  focused?: boolean,
+}
+
+const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = false, focused = false }): JSX.Element => {
+
+  const handleReact = (emoji: string): React.EventHandler<React.MouseEvent> => {
+    return (e) => {
+      onReact(emoji);
+      e.preventDefault();
+      e.stopPropagation();
+    };
+  };
+
+  return (
+    <div
+      className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', {
+        'opacity-100 pointer-events-auto z-[999]': visible || focused,
+      })}
+    >
+      {emojis.map((emoji, i) => (
+        <EmojiButton
+          key={i}
+          emoji={emoji}
+          onClick={handleReact(emoji)}
+          tabIndex={(visible || focused) ? 0 : -1}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default EmojiSelector;

app/soapbox/components/ui/index.ts

@@ -3,6 +3,7 @@ export { default as Button } from './button/button';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Column } from './column/column';
 export { default as Emoji } from './emoji/emoji';
+export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';