feat: add emoji picker

bbb169 · Oct 22, 2023 · 87b0cc1 · 87b0cc1
1 parent 9639a0c
commit 87b0cc1
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -15,9 +15,12 @@
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@emotion/styled": "^11.11.0",
     "antd": "^5.9.2",
     "crypto-js": "^4.1.1",
+    "emoji-mart": "^5.5.2",
     "intro.js": "^7.2.0",
     "rc-virtual-list": "^3.11.2",
     "react": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/component/chatRoom/index.tsx b/src/component/chatRoom/index.tsx
@@ -2,11 +2,13 @@ import { useChatMessageStore } from '@/pages/playRoom/store/chatMessage.js';
 import { customScrollBar } from '@/styles/scrollbar.js';
 import { emitSocket } from '@/utils/api.js';
 import { infoContext } from '@/utils/infoContext.js';
-import { SendOutlined } from '@ant-design/icons';
+import { SendOutlined, SmileOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
-import { Button, Input, Tooltip } from 'antd';
+import { Button, Input, Popconfirm, Tooltip } from 'antd';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import PlayerAvatar from '../playerAvatar/index.js';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
 
 const chatContainerStyle = css`
   width: 50vw;
@@ -47,7 +49,7 @@ const chatBubbleStyle = (isUser = false) => css`
 
 export default function ChatRoom (): React.JSX.Element {
     const listRef = useRef<HTMLDivElement>(null);
-    const [message, setMessage] = useState('');
+    const [message, setMessage] = useState<string>('');
     const { chatMessage: { info: messages } } = useChatMessageStore();
     const { player } = useContext(infoContext);
 
@@ -56,7 +58,7 @@ export default function ChatRoom (): React.JSX.Element {
     }, [messages]);
 
     const handleSendMessage = () => {
-        if (message.trim() === '') return;
+        if (message?.toString().trim() === '') return;
         emitSocket('sendMessage', { player, msg: message });
         setMessage('');
     };
@@ -73,8 +75,9 @@ export default function ChatRoom (): React.JSX.Element {
 
                         return <div css={chatBubbleBoxStyle(isMe)} key={key}>
                             {!isMe && <Tooltip title={curPlayer.name}><PlayerAvatar player={curPlayer}/></Tooltip>}
-                            <span css={chatBubbleStyle(isMe)}>
-                                {msg}
+                            <span 
+                                css={chatBubbleStyle(isMe)}
+                                dangerouslySetInnerHTML={{ __html: msg.replace(/<[^>]+>(.*?)<\/[^>]+>/g, '').replace(/\[([a-zA-Z0-9_\-]+)\]/g, '<em-emoji id="$1"></em-emoji>') }}>
                             </span>
                             {isMe && <Tooltip title={curPlayer.name}><PlayerAvatar player={curPlayer}/></Tooltip>}
                         </div>;  
@@ -83,13 +86,45 @@ export default function ChatRoom (): React.JSX.Element {
             </div>
             <Input
                 css={css`
-                    width: 100%
+                    width: 100%;
+                    position: relative;
                 `}
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 onPressEnter={handleSendMessage}
                 suffix={
-                    <Button type="primary" shape='circle' onClick={handleSendMessage} icon={<SendOutlined />} />
+                    <>
+                        <Popconfirm
+                            title='表情包'
+                            icon={<></>}
+                            description={
+                                <div
+                                    css={css`
+                                        > div > em-emoji-picker {
+                                            max-height: 200px;
+                                        }
+                                    `}>
+                                    <Picker 
+                                        className='asda'
+                                        locale='zh'
+                                        categories='people' 
+                                        data={data} onEmojiSelect={(icon: any) => {
+                                            setMessage(`${message}[${icon.id}]`);
+                                        }} 
+                                        previewPosition='none'
+                                        perLine={5}
+                                        searchPosition='none'
+                                    />
+                                </div>    
+                            }
+                            placement='bottomRight'
+                            showCancel={false}
+                        >
+                            <Button type='primary' shape='circle' icon={
+                                <SmileOutlined/>} />
+                        </Popconfirm>
+                        <Button type="primary" shape='circle' onClick={handleSendMessage} icon={<SendOutlined />} />
+                    </>
                 }
             />
         </div>