gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: use common emoji-picker

This commit is contained in:
fantasticit 2022-04-25 14:05:53 +08:00
parent a9ec9acb0b
commit 2affaa5987
3 changed files with 10 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
packages/client/src/tiptap/menus/emoji/constants.ts
View File

@ -1,171 +0,0 @@
export const EXPRESSIONES = [
'😀',
'😃',
'😄',
'😁',
'😆',
'😅',
'😂',
'🤣',
'🥲',
'😊',
'😇',
'🙂',
'🙃',
'😉',
'😌',
'😍',
'🥰',
'😘',
'😗',
'😙',
'😚',
'😋',
'😛',
'😝',
'😜',
'🤪',
'🤨',
'🧐',
'🤓',
'😎',
'🥸',
'🤩',
'🥳',
'😏',
'😒',
'😞',
'😔',
'😟',
'😕',
'🙁',
'😣',
'😖',
'😫',
'😩',
'🥺',
'😢',
'😭',
'😤',
'😠',
'😡',
'🤬',
'🤯',
'😳',
'🥵',
'🥶',
'😱',
'😨',
'😰',
'😥',
'😓',
'🤗',
'🤔',
'🤭',
'🤫',
'🤥',
'😶',
'😐',
'😑',
'😬',
'🙄',
'😯',
'😦',
'😧',
'😮',
'😲',
'🥱',
'😴',
'🤤',
'😪',
'😵',
'🤐',
'🥴',
'🤢',
'🤮',
'🤧',
'😷',
'🤒',
'🤕',
'🤑',
'🤠',
'😈',
'👿',
'👹',
'👺',
'🤡',
'💩',
'👻',
'💀',
'☠️',
'👽',
'👾',
'🤖',
'🎃',
'😺',
'😸',
'😹',
'😻',
'😼',
'😽',
'🙀',
'😿',
'😾',
];
export const GESTURES = [
'👋',
'🤚',
'🖐',
'✋',
'🖖',
'👌',
'🤌',
'🤏',
'✌️',
'🤞',
'🤟',
'🤘',
'🤙',
'👈',
'👉',
'👆',
'🖕',
'👇',
'☝️',
'👍',
'👎',
'✊',
'👊',
'🤛',
'🤜',
'👏',
'🙌',
'👐',
'🤲',
'🤝',
'🙏',
'✍️',
'💅',
'🤳',
'💪',
'🦾',
'🦵',
'🦿',
'🦶',
'👣',
'👂',
'🦻',
'👃',
'🫀',
'🫁',
'🧠',
'🦷',
'🦴',
'👀',
'👁',
'👅',
'👄',
'💋',
'🩸',
];

24
packages/client/src/tiptap/menus/emoji/index.module.scss
View File

@ -1,24 +0,0 @@
.wrap {
height: 300px;
overflow: auto;
}
.listWrap {
display: flex;
width: 320px;
padding: 0;
margin: 0;
list-style: none;
flex-wrap: wrap;
> li {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
padding: 4px;
font-size: 24px;
cursor: pointer;
}
}

55
packages/client/src/tiptap/menus/emoji/index.tsx
View File

@ -1,63 +1,22 @@
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from '@tiptap/core'; import { Editor } from '@tiptap/core';
import { Popover, Button, Typography } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { IconEmoji } from 'components/icons'; import { IconEmoji } from 'components/icons';
import { EXPRESSIONES, GESTURES } from './constants'; import { EmojiPicker } from 'components/emoji-picker';
import styles from './index.module.scss';
const { Title } = Typography;
const LIST = [
{
title: '表情',
data: EXPRESSIONES,
},
{
title: '手势',
data: GESTURES,
},
];
export const Emoji: React.FC<{ editor: Editor }> = ({ editor }) => { export const Emoji: React.FC<{ editor: Editor }> = ({ editor }) => {
const setEmoji = useCallback((emoji) => { const setEmoji = useCallback((emoji) => {
return () => { const { selection } = editor.state;
const transaction = editor.state.tr.insertText(emoji); const { $anchor } = selection;
editor.view.dispatch(transaction); return editor.chain().insertContentAt($anchor.pos, emoji).run();
};
}, []); }, []);
return ( return (
<Popover <EmojiPicker onSelectEmoji={setEmoji}>
showArrow
zIndex={10000}
trigger="click"
content={
<div className={styles.wrap}>
{LIST.map((item, index) => {
return (
<div key={item.title} className={styles.sectionWrap}>
<Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}>
{item.title}
</Title>
<ul className={styles.listWrap}>
{(item.data || []).map((ex) => (
<li key={ex} onClick={setEmoji(ex)}>
{ex}
</li>
))}
</ul>
</div>
);
})}
</div>
}
>
<span>
<Tooltip content="插入表情"> <Tooltip content="插入表情">
<Button theme={'borderless'} type="tertiary" icon={<IconEmoji />} /> <Button theme={'borderless'} type="tertiary" icon={<IconEmoji />} />
</Tooltip> </Tooltip>
</span> </EmojiPicker>
</Popover>
); );
}; };