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

feat: enhance emoji-picker

This commit is contained in:
fantasticit 2022-04-25 14:38:34 +08:00
parent 2affaa5987
commit 902608d496
2 changed files with 341 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

292
packages/client/src/components/emoji-picker/constants.ts
View File

@ -171,12 +171,19 @@ export const GESTURES = [
]; ];
export const SYMBOLS = [ export const SYMBOLS = [
'⭕',
'✅', '✅',
'❎', '❎',
'✳️', '✳️',
'✴️', '♻️',
'❇️', '❇️',
'✴️',
'❓',
'❗',
'❌',
'⭕',
'❔',
'❕',
'☑️',
'#️⃣', '#️⃣',
'*️⃣', '*️⃣',
'0️⃣', '0️⃣',
@ -190,6 +197,23 @@ export const SYMBOLS = [
'8️⃣', '8️⃣',
'9️⃣', '9️⃣',
'🔟', '🔟',
'🆗',
'🔠',
'🔡',
'🔢',
'🔣',
'🔤',
'🆕',
'🆖',
'🆒',
'🆓',
'ℹ️',
'🆎',
'🆑',
'🆘',
'🆙',
'🆚',
'🈁',
'⛔', '⛔',
'🚫', '🚫',
'🚳', '🚳',
@ -261,7 +285,6 @@ export const SYMBOLS = [
'📴', '📴',
'🏧', '🏧',
'🚮', '🚮',
'🚰',
'♿', '♿',
'🚹', '🚹',
'🚺', '🚺',
@ -274,3 +297,266 @@ export const SYMBOLS = [
'🛅', '🛅',
'🚸', '🚸',
]; ];
export const OBJECTS = [
'🔒',
'🔓',
'🔏',
'🔐',
'🔑',
'💼',
'📁',
'📂',
'🗂️',
'🗂',
'📅',
'📆',
'🗒️',
'🗒',
'🗓️',
'🗓',
'📇',
'📈',
'📉',
'📊',
'📋',
'📌',
'📍',
'✏️',
'✏',
'✒️',
'✒',
'🖋️',
'🖋',
'🖊️',
'🖊',
'🖌️',
'🖌',
'🖍️',
'🖍',
'📝',
'✉️',
'📧',
'📨',
'📩',
'📤',
'📥',
'📦',
'📫',
'📪',
'📬',
'📭',
'📮',
'🗳️',
'🗳',
'💰',
'🪙',
'💴',
'💵',
'💶',
'💷',
'💸',
'💳',
'🧾',
'💹',
'📔',
'📕',
'📖',
'📗',
'📘',
'📙',
'📚',
'📓',
'📒',
'📃',
'📜',
'📄',
'📰',
'🗞️',
'🗞',
'📑',
'🔖',
'🏷️',
'🏷',
'👓',
'🕶️',
'🕶',
'🥽',
'🥼',
'🦺',
'👔',
'👕',
'👖',
'🧣',
'🧤',
'🧥',
'🧦',
'👗',
'👘',
'🥻',
'🩱',
'🩲',
'🩳',
'👙',
'👚',
'👛',
'👜',
'👝',
'🛍️',
'🛍',
'🎒',
'🩴',
'👞',
'👟',
'🥾',
'🥿',
'👠',
'👡',
'🩰',
'👢',
'👑',
'👒',
'🎩',
'🎓',
'🧢',
'🪖',
'⛑️',
'⛑',
'📿',
'💄',
'💍',
'💎',
];
export const ACTIVITIES = [
'⚽',
'⚾',
'🥎',
'🏀',
'🏐',
'🏈',
'🏉',
'🎾',
'🥏',
'🎳',
'🏏',
'🏑',
'🏒',
'🥍',
'🏓',
'🏸',
'🥊',
'🥋',
'🥅',
'⛳',
'⛸️',
'⛸',
'🎣',
'🤿',
'🎽',
'🎿',
'🛷',
'🥌',
'🎯',
'🪀',
'🪁',
'🎱',
'🔮',
'🪄',
'🧿',
'🎮',
'🕹️',
'🕹',
'🎰',
'🎲',
'🧩',
'🧸',
'🪅',
'🪆',
'♠️',
'♠',
'♥️',
'♥',
'♦️',
'♦',
'♣️',
'♣',
'🃏',
'🀄',
'🎴',
'🎖️',
'🎖',
'🏆',
'🏅',
'🥇',
'🥈',
'🥉',
];
export const SKY_WEATHER = [
'🌑',
'🌒',
'🌓',
'🌔',
'🌕',
'🌖',
'🌗',
'🌘',
'🌙',
'🌚',
'🌛',
'🌜',
'🌡️',
'🌡',
'☀️',
'☀',
'🌝',
'🌞',
'🪐',
'⭐',
'🌟',
'🌠',
'🌌',
'☁️',
'☁',
'⛅',
'⛈️',
'⛈',
'🌤️',
'🌤',
'🌥️',
'🌥',
'🌦️',
'🌦',
'🌧️',
'🌧',
'🌨️',
'🌨',
'🌩️',
'🌩',
'🌪️',
'🌪',
'🌫️',
'🌫',
'🌬️',
'🌬',
'🌀',
'🌈',
'🌂',
'☂️',
'☂',
'☔',
'⛱️',
'⛱',
'⚡',
'❄️',
'❄',
'☃️',
'☃',
'⛄',
'☄️',
'☄',
'🔥',
'💧',
'🌊',
];

60
packages/client/src/components/emoji-picker/index.tsx
View File

@ -1,23 +1,38 @@
import React from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Popover, Typography } from '@douyinfe/semi-ui'; import { Popover, Typography } from '@douyinfe/semi-ui';
import { EXPRESSIONES, GESTURES, SYMBOLS } from './constants'; import { EXPRESSIONES, GESTURES, SYMBOLS, OBJECTS, ACTIVITIES, SKY_WEATHER } from './constants';
import { setStorage, getStorage } from 'helpers/storage';
import { useToggle } from 'hooks/use-toggle';
import styles from './index.module.scss'; import styles from './index.module.scss';
const { Title } = Typography; const { Title } = Typography;
const RECENT_USED_EMOJI_KEY = 'RECENT_USED_EMOJI_KEY';
const LIST = [ const LIST = [
{
title: '符号',
data: SYMBOLS,
},
{ {
title: '表情', title: '表情',
data: EXPRESSIONES, data: EXPRESSIONES,
}, },
{
title: '天气',
data: SKY_WEATHER,
},
{ {
title: '手势', title: '手势',
data: GESTURES, data: GESTURES,
}, },
{
title: '符号',
data: SYMBOLS,
},
{
title: '物体',
data: OBJECTS,
},
{
title: '运动',
data: ACTIVITIES,
},
]; ];
interface IProps { interface IProps {
@ -25,15 +40,44 @@ interface IProps {
} }
export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => { export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
const [recentUsed, setRecentUsed] = useState([]);
const [visible, toggleVisible] = useToggle(false);
const renderedList = useMemo(
() => (recentUsed.length ? [{ title: '最近使用', data: recentUsed }, ...LIST] : LIST),
[recentUsed]
);
const selectEmoji = useCallback(
(emoji) => {
setStorage(RECENT_USED_EMOJI_KEY, [...recentUsed, emoji].join('-'));
setRecentUsed((arr) => [...arr, emoji]);
onSelectEmoji && onSelectEmoji(emoji);
},
[onSelectEmoji, recentUsed]
);
useEffect(() => {
if (!visible) return;
try {
const recentUsed = getStorage(RECENT_USED_EMOJI_KEY);
const toArr = recentUsed.split('-');
setRecentUsed(toArr);
} catch (e) {
//
}
}, [visible]);
return ( return (
<Popover <Popover
showArrow showArrow
zIndex={10000} zIndex={10000}
trigger="click" trigger="click"
position="bottomLeft" position="bottomLeft"
visible={visible}
onVisibleChange={toggleVisible}
content={ content={
<div className={styles.wrap}> <div className={styles.wrap}>
{LIST.map((item, index) => { {renderedList.map((item, index) => {
return ( return (
<div key={item.title} className={styles.sectionWrap}> <div key={item.title} className={styles.sectionWrap}>
<Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}> <Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}>
@ -41,7 +85,7 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
</Title> </Title>
<ul className={styles.listWrap}> <ul className={styles.listWrap}>
{(item.data || []).map((ex) => ( {(item.data || []).map((ex) => (
<li key={ex} onClick={() => onSelectEmoji(ex)}> <li key={ex} onClick={() => selectEmoji(ex)}>
{ex} {ex}
</li> </li>
))} ))}