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

client: improve emoji-picker layout

This commit is contained in:
fantasticit 2022-06-02 14:03:05 +08:00
parent 051f8ec3f0
commit 9c2acfb6fc
2 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/emoji-picker/index.module.scss
View File

@ -5,8 +5,10 @@
.listWrap { .listWrap {
display: flex; display: flex;
height: 250px;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: auto;
list-style: none; list-style: none;
flex-wrap: wrap; flex-wrap: wrap;

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

@ -1,4 +1,4 @@
import { Button, Popover, SideSheet, Typography } from '@douyinfe/semi-ui'; import { Button, Popover, SideSheet, TabPane, Tabs } from '@douyinfe/semi-ui';
import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache'; import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
@ -7,8 +7,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { ACTIVITIES, EXPRESSIONES, GESTURES, OBJECTS, SKY_WEATHER, SYMBOLS } from './constants'; import { ACTIVITIES, EXPRESSIONES, GESTURES, OBJECTS, SKY_WEATHER, SYMBOLS } from './constants';
import styles from './index.module.scss'; import styles from './index.module.scss';
const { Title } = Typography;
const emojiLocalStorageLRUCache = createKeysLocalStorageLRUCache('EMOJI_PICKER', 20); const emojiLocalStorageLRUCache = createKeysLocalStorageLRUCache('EMOJI_PICKER', 20);
const LIST = [ const LIST = [
@ -39,10 +37,11 @@ const LIST = [
]; ];
interface IProps { interface IProps {
showClear?: boolean;
onSelectEmoji: (arg: string) => void; onSelectEmoji: (arg: string) => void;
} }
export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => { export const EmojiPicker: React.FC<IProps> = ({ showClear = false, onSelectEmoji, children }) => {
const { isMobile } = IsOnMobile.useHook(); const { isMobile } = IsOnMobile.useHook();
const [recentUsed, setRecentUsed] = useState([]); const [recentUsed, setRecentUsed] = useState([]);
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
@ -67,26 +66,36 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
const content = useMemo( const content = useMemo(
() => ( () => (
<div className={styles.wrap} style={{ padding: isMobile ? '24px 0' : 0 }}> <div className={styles.wrap} style={{ padding: isMobile ? '24px 0' : 0 }}>
<Button onClick={clear}>清除</Button> <Tabs
{renderedList.map((item, index) => { size="small"
return ( lazyRender
<div key={item.title}> keepDOM
<Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}> tabBarExtraContent={
{item.title} showClear ? (
</Title> <Button size="small" onClick={clear}>
<ul className={styles.listWrap}> 清除
{(item.data || []).map((ex) => ( </Button>
<li key={ex} onClick={() => selectEmoji(ex)}> ) : null
{ex} }
</li> collapsible
))} >
</ul> {renderedList.map((list) => {
</div> return (
); <TabPane key={list.title} tab={list.title} itemKey={list.title} style={{ height: 250, overflow: 'auto' }}>
})} <ul className={styles.listWrap}>
{(list.data || []).map((ex) => (
<li key={ex} onClick={() => selectEmoji(ex)}>
{ex}
</li>
))}
</ul>
</TabPane>
);
})}
</Tabs>
</div> </div>
), ),
[isMobile, renderedList, selectEmoji, clear] [isMobile, showClear, renderedList, selectEmoji, clear]
); );
useEffect(() => { useEffect(() => {
@ -120,7 +129,7 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
position="bottomLeft" position="bottomLeft"
visible={visible} visible={visible}
onVisibleChange={toggleVisible} onVisibleChange={toggleVisible}
content={<div style={{ width: 320 }}>{content}</div>} content={<div style={{ width: 320, maxWidth: '96vw' }}>{content}</div>}
> >
{children} {children}
</Popover> </Popover>