-
## 预览
+
+
{diffVersion ? (
) : (
diff --git a/packages/client/src/components/emoji-picker/index.tsx b/packages/client/src/components/emoji-picker/index.tsx
index bbf91d89..473be36b 100644
--- a/packages/client/src/components/emoji-picker/index.tsx
+++ b/packages/client/src/components/emoji-picker/index.tsx
@@ -1,10 +1,13 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
import { Button, Popover, SideSheet, TabPane, Tabs } from '@douyinfe/semi-ui';
+
import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { ACTIVITIES, EXPRESSIONES, GESTURES, OBJECTS, SKY_WEATHER, SYMBOLS } from './constants';
+
import styles from './index.module.scss';
const emojiLocalStorageLRUCache = createKeysLocalStorageLRUCache('EMOJI_PICKER', 20);
@@ -64,38 +67,44 @@ export const EmojiPicker: React.FC = ({ showClear = false, onSelectEmoji
}, [onSelectEmoji]);
const content = useMemo(
- () => (
- ;
+ onMouseDown: MouseEventHandler;
onMouseEnter: MouseEventHandler;
styles: Record;
id: string;
@@ -38,7 +37,7 @@ const getMergedStyle = (baseStyles, styles, styleClass) => ({
...(styles && styles[styleClass] ? styles[styleClass] : {}),
});
-export const GridCell = ({ active, hover, disabled, onClick, onMouseEnter, cellSize, styles, id }: CellProperties) => {
+export const GridCell = ({ hover, disabled, onMouseDown, onMouseEnter, cellSize, styles, id }: CellProperties) => {
const baseStyles = getBaseStyles(cellSize);
const cellStyles = {
cell: getMergedStyle(baseStyles, styles, 'cell'),
@@ -52,11 +51,10 @@ export const GridCell = ({ active, hover, disabled, onClick, onMouseEnter, cellS
id={id}
style={{
...cellStyles.cell,
- ...(active && cellStyles.active),
...(hover && cellStyles.hover),
- ...(!active && disabled && cellStyles.disabled),
+ ...(disabled && cellStyles.disabled),
}}
- onClick={onClick}
+ onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
/>
);
diff --git a/packages/client/src/components/grid-select/grid-select.tsx b/packages/client/src/components/grid-select/grid-select.tsx
index b262745d..52105c22 100644
--- a/packages/client/src/components/grid-select/grid-select.tsx
+++ b/packages/client/src/components/grid-select/grid-select.tsx
@@ -1,6 +1,7 @@
-import { Typography } from '@douyinfe/semi-ui';
import React, { useCallback, useMemo, useState } from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+
import { GridCell } from './grid-cell';
const { Text } = Typography;
@@ -44,10 +45,6 @@ export const GridSelect = ({
cellSize = 16,
styles,
}: RegionSelectionProps) => {
- const [activeCell, setActiveCell] = useState({
- x: -1,
- y: -1,
- });
const [hoverCell, setHoverCell] = useState(null);
const onClick = useCallback(
@@ -60,6 +57,15 @@ export const GridSelect = ({
[onSelect]
);
+ const onClickPanel = useCallback(() => {
+ if (hoverCell.x + 1 > 0 && hoverCell.y + 1 > 0) {
+ onSelect({
+ rows: hoverCell.y + 1,
+ cols: hoverCell.x + 1,
+ });
+ }
+ }, [hoverCell, onSelect]);
+
const onHover = useCallback(({ x, y, isCellDisabled }) => {
if (isCellDisabled) {
return setHoverCell(null);
@@ -71,16 +77,17 @@ export const GridSelect = ({
const cells = [];
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
- const isActive = x <= activeCell.x && y <= activeCell.y;
const isHover = hoverCell && x <= hoverCell.x && y <= hoverCell.y;
const isCellDisabled = disabled;
cells.push(
onClick({ x, y, isCellDisabled })}
+ onMouseDown={(e) => {
+ e.stopPropagation();
+ onClick({ x, y, isCellDisabled });
+ }}
onMouseEnter={onHover.bind(null, { x, y, isCellDisabled })}
- active={isActive}
hover={isHover}
disabled={isCellDisabled}
styles={styles}
@@ -90,12 +97,12 @@ export const GridSelect = ({
}
}
return cells;
- }, [rows, cols, disabled, activeCell.x, activeCell.y, cellSize, hoverCell, styles, onClick, onHover]);
+ }, [rows, cols, disabled, cellSize, hoverCell, styles, onClick, onHover]);
const baseStyles = useMemo(() => getBaseStyles(cols, cellSize), [cols, cellSize]);
return (
-
-
- 清除
-
- ) : null
- }
- collapsible
- >
- {renderedList.map((list) => {
- return (
-
-
- );
- })}
-
-
- ),
- [showClear, renderedList, selectEmoji, clear]
+ () =>
+ !visible ? null : (
+
- {(list.data || []).map((ex) => (
-
- selectEmoji(ex)}>
- {ex}
-
- ))}
-
+
+ 清除
+
+ ) : null
+ }
+ collapsible
+ >
+ {renderedList.map((list) => {
+ return (
+
+
+ );
+ })}
+
+
+ ),
+ [visible, showClear, renderedList, selectEmoji, clear]
);
useEffect(() => {
diff --git a/packages/client/src/components/empty.tsx b/packages/client/src/components/empty.tsx
index 9cb26a6d..de3f0df1 100644
--- a/packages/client/src/components/empty.tsx
+++ b/packages/client/src/components/empty.tsx
@@ -1,6 +1,7 @@
-import { Typography } from '@douyinfe/semi-ui';
import React from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+
interface IProps {
illustration?: React.ReactNode;
message: React.ReactNode;
diff --git a/packages/client/src/components/grid-select/grid-cell.tsx b/packages/client/src/components/grid-select/grid-cell.tsx
index c4d30b56..a472e2cb 100644
--- a/packages/client/src/components/grid-select/grid-cell.tsx
+++ b/packages/client/src/components/grid-select/grid-cell.tsx
@@ -1,11 +1,10 @@
import React, { MouseEventHandler } from 'react';
type CellProperties = {
- active: boolean;
hover: boolean;
disabled: boolean;
cellSize: number;
- onClick: MouseEventHandler
+ {(list.data || []).map((ex) => (
+
+ selectEmoji(ex)}>
+ {ex}
+
+ ))}
+
+
= ({ width, maxWidth, height, onOk, children }) => {
const $form = useRef();
@@ -27,7 +31,7 @@ export const SizeSetter: React.FC = ({ width, maxWidth, height, onOk, ch
position={'bottomLeft'}
spacing={10}
render={
-
= ({ style = {} }) => {
+ return (
+
+
+
+ = ({ style = {} }) => {
return (
= ({ style = {} }) => {
+ return (
+
+ = ({ style = {} }) => {
return (
= ({ style = {}
/>
);
};
+
+export const IconFilePDF: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+ return (
+
+
+ = ({ style = {} }) => {
return (
= ({ style = {} }) => {
return (
= ({ style = {} }) => {
+ return (
+
+
+ 0 ? (
-
- 全部已读
-
- ) : null
- }
- >
-
-
-
-
-
-
-
+ const content = useMemo(
+ () =>
+ visible ? (
+ 0 ? (
+
+ 全部已读
+
+ ) : null
+ }
+ >
+
+
+
+
+
+
+
+ ) : null,
+ [
+ allError,
+ allLoading,
+ allMsgs,
+ allPage,
+ allSetPage,
+ clearAll,
+ readError,
+ readLoading,
+ readMessage,
+ readMsgs,
+ readPage,
+ readSetPage,
+ unreadError,
+ unreadLoading,
+ unreadMsgs,
+ unreadPage,
+ unreadSetPage,
+ visible,
+ ]
);
const btn = (
@@ -197,6 +225,8 @@ const MessageBox = () => {
) : (
{content}
}
@@ -210,5 +240,8 @@ const MessageBox = () => {
export const Message = () => {
const { loading, error } = useUser();
- return {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >
+ {messages.length ? (
+ <>
+ {messages.map((msg) => {
+ return (
+
+ );
+ }, [handleRead, messages, onPageChange, page, total]);
return (
- handleRead(msg.id)}>
+
+
+
+ );
+ })}
+ {total > PAGE_SIZE && (
+
+
+ {msg.title}
+
+
+
+
+
+
+ )}
+
+ ) : (
+ {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- {messages.length ? (
- <>
- {messages.map((msg) => {
- return (
-
- );
- }}
- />
+ handleRead(msg.id)}>
-
-
-
- );
- })}
- {total > PAGE_SIZE && (
-
-
- {msg.title}
-
-
-
-
-
-
- )}
-
- ) : (
-
+
}
>
- {children}
+ {children}
);
};
diff --git a/packages/client/src/components/template/card/index.tsx b/packages/client/src/components/template/card/index.tsx
index 86b365ef..e194aac4 100644
--- a/packages/client/src/components/template/card/index.tsx
+++ b/packages/client/src/components/template/card/index.tsx
@@ -1,13 +1,16 @@
+import { useCallback } from 'react';
+
import { IconEdit, IconPlus, IconUser } from '@douyinfe/semi-icons';
import { Avatar, Button, Modal, Skeleton, Space, Tooltip, Typography } from '@douyinfe/semi-ui';
+
import type { ITemplate } from '@think/domains';
+
import cls from 'classnames';
import { IconDocument } from 'components/icons/IconDocument';
import { TemplateReader } from 'components/template/reader';
import { useUser } from 'data/user';
import { useToggle } from 'hooks/use-toggle';
import Router from 'next/router';
-import { useCallback } from 'react';
import styles from './index.module.scss';
@@ -21,6 +24,17 @@ export interface IProps {
onClosePreview?: () => void;
}
+const bodyStyle = {
+ overflow: 'auto',
+};
+const titleContainerStyle = {
+ marginBottom: 12,
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+} as React.CSSProperties;
+const flexStyle = { display: 'flex' };
+
export const TemplateCard: React.FC = ({
template,
onClick,
@@ -35,26 +49,35 @@ export const TemplateCard: React.FC = ({
Router.push(`/template/${template.id}/`);
}, [template]);
+ const cancel = useCallback(() => {
+ toggleVisible(false);
+ onClosePreview && onClosePreview();
+ }, [toggleVisible, onClosePreview]);
+
+ const preview = useCallback(() => {
+ toggleVisible(true);
+ onOpenPreview && onOpenPreview();
+ }, [toggleVisible, onOpenPreview]);
+
+ const useTemplate = useCallback(() => {
+ onClick && onClick(template.id);
+ }, [onClick, template.id]);
+
return (
<>
{
- toggleVisible(false);
- onClosePreview && onClosePreview();
- }}
+ onCancel={cancel}
footer={null}
fullScreen
>
-
+
-
@@ -68,14 +91,7 @@ export const TemplateCard: React.FC = ({
+
{template.title}
@@ -92,28 +108,16 @@ export const TemplateCard: React.FC = ({