made EmojiBoard reusable

src/app/organisms/channel/ChannelViewInput.jsx

@@ -8,6 +8,7 @@ import TextareaAutosize from 'react-autosize-textarea';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
+import { openEmojiBoard } from '../../../client/action/navigation';
 import { bytesToSize } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
@@ -299,12 +300,17 @@ function ChannelViewInput({
           {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
         </div>
         <div ref={rightOptionsRef} className="channel-input__option-container">
-          <ContextMenu
-            placement="top"
-            content={(
-              <EmojiBoard onSelect={addEmoji} />
-            )}
-            render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Emoji" src={EmojiIC} />}
+          <IconButton
+            onClick={(e) => {
+              openEmojiBoard({
+                x: e.detail ? e.clientX + 40 : '10%',
+                y: e.detail ? e.clientY - 240 : 300,
+                isReverse: !e.detail,
+                detail: e.detail,
+              }, addEmoji);
+            }}
+            tooltip="Emoji"
+            src={EmojiIC}
           />
           <IconButton onClick={sendMessage} tooltip="Send" src={SendIC} />
         </div>

src/app/organisms/emoji-board/EmojiBoardOpener.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import ContextMenu from '../../atoms/context-menu/ContextMenu';
+import EmojiBoard from './EmojiBoard';
+
+let requestCallback = null;
+function EmojiBoardOpener() {
+  const openerRef = useRef(null);
+
+  function openEmojiBoard(cords, requestEmojiCallback) {
+    console.log(requestCallback);
+    if (requestCallback !== null) {
+      requestCallback = null;
+      if (cords.detail === 0) openerRef.current.click();
+      return;
+    }
+
+    const x = typeof cords.x === 'string' ? cords.x : `${cords.x}px`;
+    const y = typeof cords.y === 'string' ? cords.y : `${cords.y}px`;
+
+    openerRef.current.style.left = cords.isReverse ? 'unset' : x;
+    openerRef.current.style.top = cords.isReverse ? 'unset' : y;
+    openerRef.current.style.right = cords.isReverse ? x : 'unset';
+    openerRef.current.style.bottom = cords.isReverse ? y : 'unset';
+    requestCallback = requestEmojiCallback;
+    openerRef.current.click();
+  }
+
+  function afterEmojiBoardToggle(isVisible) {
+    console.log(isVisible);
+    if (!isVisible) {
+      setTimeout(() => {
+        requestCallback = null;
+      }, 500);
+    }
+  }
+
+  function addEmoji(emoji) {
+    requestCallback(emoji);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    return () => {
+      navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, openEmojiBoard);
+    };
+  }, []);
+
+  return (
+    <ContextMenu
+      content={(
+        <EmojiBoard onSelect={addEmoji} />
+      )}
+      afterToggle={afterEmojiBoardToggle}
+      render={(toggleMenu, isVisible) => (
+        <input
+          ref={openerRef}
+          onClick={toggleMenu}
+          type="button"
+          style={{
+            width: '0',
+            height: '0',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            padding: 0,
+            border: 'none',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default EmojiBoardOpener;