made EmojiBoard reusable

src/app/atoms/context-menu/ContextMenu.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ContextMenu.scss';
 
@@ -10,12 +10,16 @@ import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';
 
 function ContextMenu({
-  content, placement, maxWidth, render,
+  content, placement, maxWidth, render, afterToggle,
 }) {
   const [isVisible, setVisibility] = useState(false);
   const showMenu = () => setVisibility(true);
   const hideMenu = () => setVisibility(false);
 
+  useEffect(() => {
+    if (afterToggle !== null) afterToggle(isVisible);
+  }, [isVisible]);
+
   return (
     <Tippy
       animation="scale-extreme"
@@ -36,6 +40,7 @@ function ContextMenu({
 ContextMenu.defaultProps = {
   maxWidth: 'unset',
   placement: 'right',
+  afterToggle: null,
 };
 
 ContextMenu.propTypes = {
@@ -49,6 +54,7 @@ ContextMenu.propTypes = {
     PropTypes.number,
   ]),
   render: PropTypes.func.isRequired,
+  afterToggle: PropTypes.func,
 };
 
 function MenuHeader({ children }) {

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;

src/app/templates/client/Client.jsx

@@ -6,6 +6,7 @@ import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
 import Channel from '../../organisms/channel/Channel';
 import Windows from '../../organisms/pw/Windows';
+import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 
 import initMatrix from '../../../client/initMatrix';
 
@@ -40,6 +41,7 @@ function Client() {
         <Channel />
       </div>
       <Windows />
+      <EmojiBoardOpener />
     </div>
   );
 }

src/client/action/navigation.js

@@ -54,6 +54,14 @@ function openSettings() {
   });
 }
 
+function openEmojiBoard(cords, requestEmojiCallback) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_EMOJIBOARD,
+    cords,
+    requestEmojiCallback,
+  });
+}
+
 export {
   handleTabChange,
   selectRoom,
@@ -63,4 +71,5 @@ export {
   openCreateChannel,
   openInviteUser,
   openSettings,
+  openEmojiBoard,
 };

src/client/state/cons.js

@@ -16,6 +16,7 @@ const cons = {
       OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL',
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
       OPEN_SETTINGS: 'OPEN_SETTINGS',
+      OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
     },
     room: {
       JOIN: 'JOIN',
@@ -39,6 +40,7 @@ const cons = {
       CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
+      EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',

src/client/state/navigation.js

@@ -48,6 +48,12 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.OPEN_SETTINGS]: () => {
         this.emit(cons.events.navigation.SETTINGS_OPENED);
       },
+      [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
+        this.emit(
+          cons.events.navigation.EMOJIBOARD_OPENED,
+          action.cords, action.requestEmojiCallback,
+        );
+      },
     };
     actions[action.type]?.();
   }