refactor: emoji面板调整

并增加点击后的回调事件

web/src/components/ChatBox/ChatMessageList/Item.tsx

@@ -15,13 +15,14 @@ import { Avatar } from '@/components/Avatar';
 import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter';
 import { getMessageRender } from '@/plugin/common';
 import { Icon } from '@iconify/react';
-import { Divider, Dropdown } from 'antd';
+import { Divider, Dropdown, Popover } from 'antd';
 import { UserName } from '@/components/UserName';
 import './item.less';
 import clsx from 'clsx';
 import { useChatMessageItemAction } from './useChatMessageItemAction';
 import { useChatMessageReaction } from './useChatMessageReaction';
 import { DevContainer } from '@/components/DevContainer';
+import { TcPopover } from '@/components/TcPopover';
 
 /**
  * 消息引用
@@ -115,8 +116,9 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
         )}
       >
         <DevContainer>
-          <Dropdown
-            overlay={emojiAction}
+          <TcPopover
+            overlayClassName="chat-message-item_action-popover"
+            content={emojiAction}
             placement="bottomLeft"
             trigger={['click']}
             onVisibleChange={setIsActionBtnActive}
@@ -124,7 +126,7 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
             <div>
               <MessageActionIcon icon="mdi:emoticon-happy-outline" />
             </div>
-          </Dropdown>
+          </TcPopover>
         </DevContainer>
 
         <Dropdown

web/src/components/ChatBox/ChatMessageList/item.less

@@ -5,3 +5,17 @@
     }
   }
 }
+
+.chat-message-item_action-popover {
+  .ant-popover-arrow {
+    display: none;
+  }
+
+  .ant-popover-inner {
+    background-color: transparent;
+
+    .ant-popover-inner-content {
+      padding: 0;
+    }
+  }
+}

web/src/components/ChatBox/ChatMessageList/useChatMessageReaction.tsx

@@ -1,16 +1,28 @@
 import { EmojiPanel } from '@/components/EmojiPanel';
-import React, { useCallback } from 'react';
-import type { ChatMessage } from 'tailchat-shared';
+import { useTcPopoverContext } from '@/components/TcPopover';
+import type { RenderFunction } from 'antd/lib/_util/getRenderPropValue';
+import React, { useCallback, useMemo } from 'react';
+import { ChatMessage, useUpdateRef } from 'tailchat-shared';
 
 /**
  * 消息的反应信息操作
  */
-export function useChatMessageReaction(
-  payload: ChatMessage
-): React.ReactElement {
-  const handleSelect = useCallback((code: string) => {
-    console.log('code', code);
-  }, []);
+export function useChatMessageReaction(payload: ChatMessage): RenderFunction {
+  const payloadRef = useUpdateRef(payload);
+  const Component = useMemo(
+    () =>
+      (() => {
+        const { closePopover } = useTcPopoverContext();
 
-  return <EmojiPanel onSelect={handleSelect} />;
+        const handleSelect = useCallback((code: string) => {
+          console.log('code', code, payloadRef.current);
+          closePopover();
+        }, []);
+
+        return <EmojiPanel onSelect={handleSelect} />;
+      }) as RenderFunction,
+    []
+  );
+
+  return Component;
 }

web/src/components/EmojiPanel/Picker.less

@@ -0,0 +1,10 @@
+.emoji-picker {
+  .emoji-mart-anchors {
+    justify-content: flex-start;
+    gap: 6px;
+
+    .emoji-mart-anchor {
+      flex: initial;
+    }
+  }
+}

web/src/components/EmojiPanel/Picker.tsx

@@ -1,57 +1,10 @@
 import React, { useCallback } from 'react';
-import { NimblePicker, Data, EmojiData } from 'emoji-mart';
-import data from 'emoji-mart/data/twitter.json';
+import { NimblePicker, EmojiData } from 'emoji-mart';
+import { isValidStr, useColorScheme } from 'tailchat-shared';
+import { emojiData } from './const';
 
 import 'emoji-mart/css/emoji-mart.css';
-import { isValidStr } from 'tailchat-shared';
-
-const emojiData: Data = {
-  compressed: true,
-  categories: [
-    {
-      id: 'people',
-      name: 'Smileys & People',
-      emojis: data.categories[0].emojis,
-    },
-    {
-      id: 'nature',
-      name: 'Animals & Nature',
-      emojis: data.categories[1].emojis,
-    },
-    {
-      id: 'foods',
-      name: 'Food & Drink',
-      emojis: data.categories[2].emojis,
-    },
-    {
-      id: 'activity',
-      name: 'Activities',
-      emojis: data.categories[3].emojis,
-    },
-    {
-      id: 'places',
-      name: 'Travel & Places',
-      emojis: data.categories[4].emojis,
-    },
-    {
-      id: 'objects',
-      name: 'Objects',
-      emojis: data.categories[5].emojis,
-    },
-    {
-      id: 'symbols',
-      name: 'Symbols',
-      emojis: data.categories[6].emojis,
-    },
-    {
-      id: 'flags',
-      name: 'Flags',
-      emojis: data.categories[7].emojis,
-    },
-  ],
-  emojis: data.emojis,
-  aliases: data.aliases,
-};
+import './Picker.less';
 
 interface EmojiPickerProps {
   onSelect: (code: string) => void;
@@ -61,6 +14,7 @@ interface EmojiPickerProps {
  * emoji表情面板
  */
 const EmojiPicker: React.FC<EmojiPickerProps> = React.memo((props) => {
+  const { isDarkMode } = useColorScheme();
   const handleSelect = useCallback(
     (emoji: EmojiData) => {
       const code = emoji.colons;
@@ -72,7 +26,17 @@ const EmojiPicker: React.FC<EmojiPickerProps> = React.memo((props) => {
   );
 
   return (
-    <NimblePicker set="twitter" data={emojiData} onSelect={handleSelect} />
+    <div className="emoji-picker">
+      <NimblePicker
+        set="twitter"
+        data={emojiData}
+        theme={isDarkMode ? 'dark' : 'light'}
+        showPreview={false}
+        showSkinTones={false}
+        emojiTooltip={false}
+        onSelect={handleSelect}
+      />
+    </div>
   );
 });
 EmojiPicker.displayName = 'EmojiPicker';

web/src/components/EmojiPanel/const.ts

@@ -0,0 +1,50 @@
+import type { Data } from 'emoji-mart';
+import data from 'emoji-mart/data/twitter.json';
+
+export const emojiData: Data = {
+  compressed: true,
+  categories: [
+    {
+      id: 'people',
+      name: 'Smileys & People',
+      emojis: data.categories[0].emojis,
+    },
+    {
+      id: 'nature',
+      name: 'Animals & Nature',
+      emojis: data.categories[1].emojis,
+    },
+    // {
+    //   id: 'foods',
+    //   name: 'Food & Drink',
+    //   emojis: data.categories[2].emojis,
+    // },
+    // {
+    //   id: 'activity',
+    //   name: 'Activities',
+    //   emojis: data.categories[3].emojis,
+    // },
+    // {
+    //   id: 'places',
+    //   name: 'Travel & Places',
+    //   emojis: data.categories[4].emojis,
+    // },
+    // {
+    //   id: 'objects',
+    //   name: 'Objects',
+    //   emojis: data.categories[5].emojis,
+    // },
+    // {
+    //   id: 'symbols',
+    //   name: 'Symbols',
+    //   emojis: data.categories[6].emojis,
+    // },
+    // {
+    //   id: 'flags',
+    //   name: 'Flags',
+    //   emojis: data.categories[7].emojis,
+    // },
+  ],
+  emojis: data.emojis,
+  aliases: data.aliases,
+};