From 1fff7555865bcf357e9048f372005c62e1e915c5 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 2 Sep 2021 16:50:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=96=B5=E8=AF=AD?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SendMiaoModal.tsx                     | 47 +++++++++++++++++++
 web/plugins/com.msgbyte.miaolang/src/index.ts | 15 +++++-
 .../components/ChatBox/ChatInputBox/Addon.tsx | 32 ++++++++-----
 .../ChatBox/ChatInputBox/context.ts           | 12 +++++
 .../components/ChatBox/ChatInputBox/index.tsx | 29 +++++++-----
 web/src/plugin/common/index.ts                |  1 +
 web/src/plugin/common/reg.ts                  |  4 +-
 web/src/plugin/component/index.tsx            |  4 ++
 web/src/plugin/loader.ts                      |  1 +
 9 files changed, 118 insertions(+), 27 deletions(-)
 create mode 100644 web/plugins/com.msgbyte.miaolang/src/SendMiaoModal.tsx
 create mode 100644 web/src/components/ChatBox/ChatInputBox/context.ts
 create mode 100644 web/src/plugin/component/index.tsx

diff --git a/web/plugins/com.msgbyte.miaolang/src/SendMiaoModal.tsx b/web/plugins/com.msgbyte.miaolang/src/SendMiaoModal.tsx
new file mode 100644
index 00000000..6b7a8b3f
--- /dev/null
+++ b/web/plugins/com.msgbyte.miaolang/src/SendMiaoModal.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useCallback } from 'react';
+import { useState } from 'react';
+import {
+  ModalWrapper,
+  useModalContext,
+  ChatInputActionContextProps,
+} from '@capital/common';
+import { Button, TextArea } from '@capital/component';
+import { encode } from './trans';
+
+interface SendMiaoModalProps {
+  actions: ChatInputActionContextProps;
+}
+export const SendMiaoModal: React.FC<SendMiaoModalProps> = React.memo(
+  (props) => {
+    const [text, setText] = useState('');
+    const modalContext = useModalContext();
+
+    const handleSendMiao = useCallback(() => {
+      const miao = encode(text);
+
+      props.actions.sendMsg(miao);
+      modalContext?.closeModal();
+    }, [text, modalContext, props.actions]);
+
+    return (
+      <ModalWrapper title="喵言喵语">
+        <TextArea
+          placeholder="输入人话"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+
+        <Button
+          style={{ marginTop: 8 }}
+          type="primary"
+          block={true}
+          onClick={handleSendMiao}
+        >
+          发送喵语
+        </Button>
+      </ModalWrapper>
+    );
+  }
+);
+SendMiaoModal.displayName = 'SendMiaoModal';
diff --git a/web/plugins/com.msgbyte.miaolang/src/index.ts b/web/plugins/com.msgbyte.miaolang/src/index.ts
index fe724b07..b42291fd 100644
--- a/web/plugins/com.msgbyte.miaolang/src/index.ts
+++ b/web/plugins/com.msgbyte.miaolang/src/index.ts
@@ -1,5 +1,11 @@
 import { decode, encode, isMiao } from './trans';
-import { regMessageInterpreter } from '@capital/common';
+import {
+  regMessageInterpreter,
+  regChatInputAction,
+  openModal,
+} from '@capital/common';
+import { createElement } from 'react';
+import { SendMiaoModal } from './SendMiaoModal';
 
 const miao = encode('喵语翻译已加载');
 const human = decode(miao);
@@ -17,3 +23,10 @@ regMessageInterpreter({
     return decode(message);
   },
 });
+
+regChatInputAction({
+  label: '喵言喵语',
+  onClick: (actions) => {
+    openModal(createElement(SendMiaoModal, { actions }));
+  },
+});
diff --git a/web/src/components/ChatBox/ChatInputBox/Addon.tsx b/web/src/components/ChatBox/ChatInputBox/Addon.tsx
index 30756653..3b6e14c3 100644
--- a/web/src/components/ChatBox/ChatInputBox/Addon.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/Addon.tsx
@@ -1,25 +1,33 @@
 import { chatInputActions } from '@/plugin/common';
 import { Icon } from '@iconify/react';
 import { Dropdown, Menu } from 'antd';
-import React, { useMemo } from 'react';
+import React from 'react';
+import { useChatInputActionContext } from './context';
 
 export const ChatInputAddon: React.FC = React.memo(() => {
-  const menu = useMemo(() => {
-    return (
-      <Menu>
-        {chatInputActions.map((item, i) => (
-          <Menu.Item key={item.label + i} onClick={item.onClick}>
-            {item.label}
-          </Menu.Item>
-        ))}
-      </Menu>
-    );
-  }, []);
+  const actionContext = useChatInputActionContext();
 
   if (chatInputActions.length === 0) {
     return null;
   }
 
+  if (actionContext === null) {
+    return null;
+  }
+
+  const menu = (
+    <Menu>
+      {chatInputActions.map((item, i) => (
+        <Menu.Item
+          key={item.label + i}
+          onClick={() => item.onClick(actionContext)}
+        >
+          {item.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
   return (
     <Dropdown overlay={menu} placement="topRight" trigger={['click']}>
       <Icon
diff --git a/web/src/components/ChatBox/ChatInputBox/context.ts b/web/src/components/ChatBox/ChatInputBox/context.ts
new file mode 100644
index 00000000..36877128
--- /dev/null
+++ b/web/src/components/ChatBox/ChatInputBox/context.ts
@@ -0,0 +1,12 @@
+import React, { useContext } from 'react';
+
+export interface ChatInputActionContextProps {
+  sendMsg: (message: string) => void;
+}
+export const ChatInputActionContext =
+  React.createContext<ChatInputActionContextProps | null>(null);
+ChatInputActionContext.displayName = 'ChatInputContext';
+
+export function useChatInputActionContext() {
+  return useContext(ChatInputActionContext);
+}
diff --git a/web/src/components/ChatBox/ChatInputBox/index.tsx b/web/src/components/ChatBox/ChatInputBox/index.tsx
index a832d1cf..bf4f957c 100644
--- a/web/src/components/ChatBox/ChatInputBox/index.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/index.tsx
@@ -3,6 +3,7 @@ import { Input } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import { t } from 'tailchat-shared';
 import { ChatInputAddon } from './Addon';
+import { ChatInputActionContext } from './context';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string) => void;
@@ -27,22 +28,24 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   );
 
   return (
-    <div className="px-4 py-2">
-      <div className="bg-gray-600 flex rounded-md items-center">
-        <Input
-          ref={inputRef}
-          className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
-          placeholder={t('输入一些什么')}
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          onKeyDown={handleKeyDown}
-        />
+    <ChatInputActionContext.Provider value={{ sendMsg: props.onSendMsg }}>
+      <div className="px-4 py-2">
+        <div className="bg-gray-600 flex rounded-md items-center">
+          <Input
+            ref={inputRef}
+            className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
+            placeholder={t('输入一些什么')}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
 
-        <div className="px-2">
-          <ChatInputAddon />
+          <div className="px-2">
+            <ChatInputAddon />
+          </div>
         </div>
       </div>
-    </div>
+    </ChatInputActionContext.Provider>
   );
 });
 ChatInputBox.displayName = 'ChatInputBox';
diff --git a/web/src/plugin/common/index.ts b/web/src/plugin/common/index.ts
index cc7ae078..d97c8485 100644
--- a/web/src/plugin/common/index.ts
+++ b/web/src/plugin/common/index.ts
@@ -8,3 +8,4 @@ export {
   useGroupPanelParams,
   useCurrentGroupPanelInfo,
 } from '@/routes/Main/Content/Group/utils';
+export { openModal, ModalWrapper, useModalContext } from '@/components/Modal';
diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts
index 0e45f890..ea096984 100644
--- a/web/src/plugin/common/reg.ts
+++ b/web/src/plugin/common/reg.ts
@@ -1,3 +1,4 @@
+import type { ChatInputActionContextProps } from '@/components/ChatBox/ChatInputBox/context';
 import { buildRegFn, buildRegList, FastFormFieldMeta } from 'tailchat-shared';
 
 /**
@@ -55,7 +56,8 @@ export const [getMessageRender, regMessageRender] = buildRegFn<
 
 interface ChatInputAction {
   label: string;
-  onClick: () => void;
+  onClick: (actions: ChatInputActionContextProps) => void;
 }
+export type { ChatInputActionContextProps };
 export const [chatInputActions, regChatInputAction] =
   buildRegList<ChatInputAction>();
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
new file mode 100644
index 00000000..cf911aa8
--- /dev/null
+++ b/web/src/plugin/component/index.tsx
@@ -0,0 +1,4 @@
+import Button from 'antd/lib/button';
+import TextArea from 'antd/lib/input/TextArea';
+
+export { Button, TextArea };
diff --git a/web/src/plugin/loader.ts b/web/src/plugin/loader.ts
index 8706189b..662916ad 100644
--- a/web/src/plugin/loader.ts
+++ b/web/src/plugin/loader.ts
@@ -17,4 +17,5 @@ function registerDependencies() {
 
 function registerModules() {
   regSharedModule('@capital/common', () => import('./common/index'));
+  regSharedModule('@capital/component', () => import('./component/index'));
 }