From 0ef131a2a67b1909045e4338192b540847838939 Mon Sep 17 00:00:00 2001 From: slatejack Date: Thu, 10 Sep 2026 14:42:29 +0800 Subject: [PATCH 01/27] feat(comment): import comment type & desc --- src/comment/comment.en-US.md | 20 ++++++++++ src/comment/comment.md | 20 ++++++++++ src/comment/type.ts | 75 ++++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 src/comment/comment.en-US.md create mode 100644 src/comment/comment.md create mode 100644 src/comment/type.ts diff --git a/src/comment/comment.en-US.md b/src/comment/comment.en-US.md new file mode 100644 index 000000000..a2b54c3cd --- /dev/null +++ b/src/comment/comment.en-US.md @@ -0,0 +1,20 @@ +:: BASE_DOC :: + +## API + +### Comment Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N +actions | TNode | - | Typescript: `Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}` `type CommentAction = TNode \| CommentActionItem;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +author | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +avatar | TNode | - | Typescript: `string \| AvatarProps \| TNode`，[Avatar API Documents](./avatar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +children | TNode | - | children, same as `reply`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +datetime | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +folds | Object | - | Typescript: `CommentFold ` `type CommentFoldState = 'collapsed' \| 'partial' \| 'expanded'` `interface CommentFold { state: CommentFoldState; total?: number; step?: number; content?: Partial>}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +reply | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onActions | Function | | Typescript: `(context: { action: CommentActionItem \| TNode; e: Event }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onFolds | Function | | Typescript: `(context: { fold: CommentFold; e: Event }) => void`
| N diff --git a/src/comment/comment.md b/src/comment/comment.md new file mode 100644 index 000000000..de48e558d --- /dev/null +++ b/src/comment/comment.md @@ -0,0 +1,20 @@ +:: BASE_DOC :: + +## API + +### Comment Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +actions | TNode | - | 操作。TS 类型：`Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}` `type CommentAction = TNode \| CommentActionItem;`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +author | TNode | - | 作者。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +avatar | TNode | - | 头像。TS 类型：`string \| AvatarProps \| TNode`，[Avatar API Documents](./avatar?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +children | TNode | - | 子元素内容，同 reply。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +datetime | TNode | - | 时间。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +folds | Object | - | 折叠/展开配置项。TS 类型：`CommentFold ` `type CommentFoldState = 'collapsed' \| 'partial' \| 'expanded'` `interface CommentFold { state: CommentFoldState; total?: number; step?: number; content?: Partial>}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +reply | TNode | - | 回复。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onActions | Function | | TS 类型：`(context: { action: CommentActionItem \| TNode; e: Event }) => void`
点击任一操作项（如回复/点赞/不喜欢）时触发并返回当前操作项。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onFolds | Function | | TS 类型：`(context: { fold: CommentFold; e: Event }) => void`
用户点击“展开回复/收起”时触发，并返回点击后的 fold 配置 | N diff --git a/src/comment/type.ts b/src/comment/type.ts new file mode 100644 index 000000000..ff1317fc0 --- /dev/null +++ b/src/comment/type.ts @@ -0,0 +1,75 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { AvatarProps } from '../avatar'; +import type { TNode } from '../common'; + +export interface TdCommentProps { + /** + * 操作 + */ + actions?: Array | TNode; + /** + * 作者 + */ + author?: TNode; + /** + * 头像 + */ + avatar?: AvatarProps | TNode; + /** + * 子元素内容，同 reply + */ + children?: TNode; + /** + * 内容 + */ + content?: TNode; + /** + * 时间 + */ + datetime?: TNode; + /** + * 折叠/展开配置项 + */ + folds?: CommentFold; + /** + * 折叠/展开配置项，非受控属性 + */ + defaultFolds?: CommentFold; + /** + * 回复 + */ + reply?: TNode; + /** + * 点击任一操作项（如回复/点赞/不喜欢）时触发并返回当前操作项 + */ + onActions?: (context: { action: CommentActionItem | TNode; e: Event }) => void; + /** + * 用户点击“展开回复/收起”时触发，并返回点击后的 fold 配置 + */ + onFolds?: (context: { fold: CommentFold; e: Event }) => void; +} + +export type ActionPlacement = 'start' | 'end'; + +export interface CommentActionItem { + key: string; + content?: string | TNode; + placement?: ActionPlacement; + disabled?: boolean; +} + +export type CommentAction = TNode | CommentActionItem; + +export type CommentFoldState = 'collapsed' | 'partial' | 'expanded'; + +export interface CommentFold { + state: CommentFoldState; + total?: number; + step?: number; + content?: Partial>; +} From 6a28681d37d87d35a8e710f2cf53783ec3b1c1be Mon Sep 17 00:00:00 2001 From: slatejack Date: Wed, 23 Sep 2026 10:22:20 +0800 Subject: [PATCH 02/27] feat(comment): update comment type, create comment component, import comment style --- src/comment/Comment.tsx | 146 +++++++++++++++++++++++++++++++++++ src/comment/comment.en-US.md | 2 +- src/comment/comment.md | 2 +- src/comment/index.tsx | 8 ++ src/comment/style/css.js | 1 + src/comment/style/index.js | 1 + src/comment/type.ts | 4 +- src/index.ts | 1 + 8 files changed, 160 insertions(+), 5 deletions(-) create mode 100644 src/comment/Comment.tsx create mode 100644 src/comment/index.tsx create mode 100644 src/comment/style/css.js create mode 100644 src/comment/style/index.js diff --git a/src/comment/Comment.tsx b/src/comment/Comment.tsx new file mode 100644 index 000000000..b697add86 --- /dev/null +++ b/src/comment/Comment.tsx @@ -0,0 +1,146 @@ +import React, { ReactNode, useRef, useState } from 'react'; +import { isObject } from 'lodash-es'; +import { ChevronDownSIcon, ChevronUpSIcon } from 'tdesign-icons-react'; +import { CommentFold, CommentFoldState, TdCommentProps } from './type'; +import { usePrefixClass } from '../hooks/useClass'; +import Avatar, { AvatarProps } from '../avatar'; +import parseTNode, { parseContentTNode } from '../_util/parseTNode'; +import { StyledProps } from '../common'; + +export interface CommentProps extends TdCommentProps, StyledProps {} + +const DEFAULT_COMMENT_FOLDS: CommentFold = { + state: 'collapsed', + total: 0, + step: 3, + content: { + collapsed: '展开回复', + partial: ['展开更多回复', '收起'], // [主文案, 副文案] + expanded: '收起', + }, +}; +const Comment: React.FC = (props) => { + const { actions, author, avatar, content, datetime, folds, reply, children } = props; + const commentFolds = folds || DEFAULT_COMMENT_FOLDS; + const [curFoldsState, setCurFoldsState] = useState('collapsed'); + const foldSteps = useRef(0); + const rootClassName = usePrefixClass('comment'); + + const handleClickFold = (isExpand: boolean) => { + if (isExpand) { + foldSteps.current += 1; + } else { + foldSteps.current -= 1; + } + if (foldSteps.current === 0) { + setCurFoldsState('collapsed'); + } else if (foldSteps.current === commentFolds.step - 1) { + setCurFoldsState('expanded'); + } else { + setCurFoldsState('partial'); + } + }; + + const renderAvatar = () => { + if (isObject(avatar) && !React.isValidElement(avatar) && typeof avatar !== 'function') { + return ; + } + return parseTNode(avatar); + }; + + const renderAuthor = () =>
{parseTNode(author)}
; + const renderContent = () =>
{parseTNode(content)}
; + const renderFooter = () => { + const renderActions = () => { + if (!actions) { + return null; + } + if (!Array.isArray(actions)) { + return parseTNode(actions); + } + const renderLeftPlacement = () => + actions + .filter((item) => item.placement === 'start') + .map((item) => parseContentTNode(item.content, { disabled: item.disabled })); + const renderRightPlacement = () => + actions + .filter((item) => item.placement === 'end') + .map((item) => parseContentTNode(item.content, { disabled: item.disabled })); + return ( +
+ {renderLeftPlacement()} + {renderRightPlacement()} +
+ ); + }; + return ( +
+
{parseTNode(datetime)}
+
{renderActions()}
+
+ ); + }; + + const renderReply = () => { + const replyContent = reply || children; + return
{parseTNode(replyContent)}
; + }; + + const renderFolds = () => { + const renderFoldsContent = () => { + if (curFoldsState === 'collapsed') { + // 全收起 + return ( +
handleClickFold(true)}> + {commentFolds.content.collapsed as ReactNode} + +
+ ); + } + if (curFoldsState === 'partial') { + // 半展开 + return ( + <> +
handleClickFold(true)}> + {commentFolds.content.partial[0] as ReactNode} + +
+
handleClickFold(false)}> + {commentFolds.content.partial[1] as ReactNode} + +
+ + ); + } + // 全展开 + return ( +
handleClickFold(false)}> + {commentFolds.content.expanded as ReactNode} + +
+ ); + }; + if (!commentFolds.step) { + return null; + } + return
{renderFoldsContent()}
; + }; + + return ( +
+
+ {renderAvatar()} +
+ {renderAuthor()} + {renderContent()} + {renderFooter()} +
+
+ {renderReply()} + {renderFolds()} + {renderFolds()} +
+ ); +}; + +export default Comment; diff --git a/src/comment/comment.en-US.md b/src/comment/comment.en-US.md index a2b54c3cd..5e299f6e9 100644 --- a/src/comment/comment.en-US.md +++ b/src/comment/comment.en-US.md @@ -8,7 +8,7 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N -actions | TNode | - | Typescript: `Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}` `type CommentAction = TNode \| CommentActionItem;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +actions | TNode | - | Typescript: `Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N author | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N avatar | TNode | - | Typescript: `string \| AvatarProps \| TNode`，[Avatar API Documents](./avatar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N children | TNode | - | children, same as `reply`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/comment/comment.md b/src/comment/comment.md index de48e558d..663e0e164 100644 --- a/src/comment/comment.md +++ b/src/comment/comment.md @@ -8,7 +8,7 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -actions | TNode | - | 操作。TS 类型：`Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}` `type CommentAction = TNode \| CommentActionItem;`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N +actions | TNode | - | 操作。TS 类型：`Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N author | TNode | - | 作者。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N avatar | TNode | - | 头像。TS 类型：`string \| AvatarProps \| TNode`，[Avatar API Documents](./avatar?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N children | TNode | - | 子元素内容，同 reply。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/comment/index.tsx b/src/comment/index.tsx new file mode 100644 index 000000000..a7914d9ba --- /dev/null +++ b/src/comment/index.tsx @@ -0,0 +1,8 @@ +import _Comment from './Comment'; +import './style'; + +export type { CommentProps } from './Comment'; +export * from './type'; + +export const Comment = _Comment; +export default Comment; diff --git a/src/comment/style/css.js b/src/comment/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/comment/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/comment/style/index.js b/src/comment/style/index.js new file mode 100644 index 000000000..34fb7863e --- /dev/null +++ b/src/comment/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/comment/_index.less'; diff --git a/src/comment/type.ts b/src/comment/type.ts index ff1317fc0..409c9bba1 100644 --- a/src/comment/type.ts +++ b/src/comment/type.ts @@ -11,7 +11,7 @@ export interface TdCommentProps { /** * 操作 */ - actions?: Array | TNode; + actions?: Array | TNode; /** * 作者 */ @@ -63,8 +63,6 @@ export interface CommentActionItem { disabled?: boolean; } -export type CommentAction = TNode | CommentActionItem; - export type CommentFoldState = 'collapsed' | 'partial' | 'expanded'; export interface CommentFold { diff --git a/src/index.ts b/src/index.ts index db18e1de3..b2cbda90f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,6 +49,7 @@ export * from './badge'; export * from './cell'; export * from './collapse'; export * from './count-down'; +export * from './comment'; export * from './empty'; export * from './footer'; export * from './grid'; From 5f78e8ecb85f6bd4f14696fe68f93a514e33dae5 Mon Sep 17 00:00:00 2001 From: slatejack Date: Wed, 23 Sep 2026 18:19:29 +0800 Subject: [PATCH 03/27] feat(comment): add onActions and onFolds operations --- src/comment/Comment.tsx | 95 ++++++++++++++++++++++++++++++----------- 1 file changed, 70 insertions(+), 25 deletions(-) diff --git a/src/comment/Comment.tsx b/src/comment/Comment.tsx index b697add86..729df2804 100644 --- a/src/comment/Comment.tsx +++ b/src/comment/Comment.tsx @@ -1,11 +1,11 @@ import React, { ReactNode, useRef, useState } from 'react'; import { isObject } from 'lodash-es'; import { ChevronDownSIcon, ChevronUpSIcon } from 'tdesign-icons-react'; -import { CommentFold, CommentFoldState, TdCommentProps } from './type'; +import { CommentActionItem, CommentFold, CommentFoldState, TdCommentProps } from './type'; import { usePrefixClass } from '../hooks/useClass'; import Avatar, { AvatarProps } from '../avatar'; import parseTNode, { parseContentTNode } from '../_util/parseTNode'; -import { StyledProps } from '../common'; +import { StyledProps, TNode } from '../common'; export interface CommentProps extends TdCommentProps, StyledProps {} @@ -20,24 +20,48 @@ const DEFAULT_COMMENT_FOLDS: CommentFold = { }, }; const Comment: React.FC = (props) => { - const { actions, author, avatar, content, datetime, folds, reply, children } = props; + const { actions, author, avatar, content, datetime, folds, reply, children, onActions, onFolds } = props; const commentFolds = folds || DEFAULT_COMMENT_FOLDS; const [curFoldsState, setCurFoldsState] = useState('collapsed'); const foldSteps = useRef(0); const rootClassName = usePrefixClass('comment'); - const handleClickFold = (isExpand: boolean) => { - if (isExpand) { - foldSteps.current += 1; - } else { - foldSteps.current -= 1; - } - if (foldSteps.current === 0) { + const handleClickActions = (event: MouseEvent, action: CommentActionItem | TNode) => { + onActions?.({ action, e: event }); + }; + const handleClickFold = (event: MouseEvent, isExpand: boolean) => { + if (!isExpand) { + // 收起点击后收起全部仅展示 1 条回复 setCurFoldsState('collapsed'); - } else if (foldSteps.current === commentFolds.step - 1) { + foldSteps.current = 0; + onFolds?.({ + fold: { + ...commentFolds, + state: 'collapsed', + }, + e: event, + }); + return; + } + foldSteps.current += 1; + if (foldSteps.current === commentFolds.step - 1) { setCurFoldsState('expanded'); + onFolds?.({ + fold: { + ...commentFolds, + state: 'expanded', + }, + e: event, + }); } else { setCurFoldsState('partial'); + onFolds?.({ + fold: { + ...commentFolds, + state: 'partial', + }, + e: event, + }); } }; @@ -56,26 +80,36 @@ const Comment: React.FC = (props) => { return null; } if (!Array.isArray(actions)) { - return parseTNode(actions); + return ( +
handleClickActions(e as unknown as MouseEvent, actions)}>{parseTNode(actions)}
+ ); } const renderLeftPlacement = () => actions .filter((item) => item.placement === 'start') - .map((item) => parseContentTNode(item.content, { disabled: item.disabled })); + .map((item) => ( +
handleClickActions(e as unknown as MouseEvent, item)}> + {parseContentTNode(item.content, { disabled: item.disabled })} +
+ )); const renderRightPlacement = () => actions .filter((item) => item.placement === 'end') - .map((item) => parseContentTNode(item.content, { disabled: item.disabled })); + .map((item) => ( +
handleClickActions(e as unknown as MouseEvent, item)}> + {parseContentTNode(item.content, { disabled: item.disabled })} +
+ )); return ( -
- {renderLeftPlacement()} - {renderRightPlacement()} -
+ <> +
{renderLeftPlacement()}
+
{renderRightPlacement()}
+ ); }; return (
-
{parseTNode(datetime)}
+
{parseTNode(datetime)}
{renderActions()}
); @@ -91,7 +125,10 @@ const Comment: React.FC = (props) => { if (curFoldsState === 'collapsed') { // 全收起 return ( -
handleClickFold(true)}> +
handleClickFold(e as unknown as MouseEvent, true)} + > {commentFolds.content.collapsed as ReactNode}
@@ -101,11 +138,17 @@ const Comment: React.FC = (props) => { // 半展开 return ( <> -
handleClickFold(true)}> +
handleClickFold(e as unknown as MouseEvent, true)} + > {commentFolds.content.partial[0] as ReactNode}
-
handleClickFold(false)}> +
handleClickFold(e as unknown as MouseEvent, false)} + > {commentFolds.content.partial[1] as ReactNode}
@@ -114,13 +157,16 @@ const Comment: React.FC = (props) => { } // 全展开 return ( -
handleClickFold(false)}> +
handleClickFold(e as unknown as MouseEvent, false)} + > {commentFolds.content.expanded as ReactNode}
); }; - if (!commentFolds.step) { + if (!commentFolds.total || commentFolds.total <= 1) { return null; } return
{renderFoldsContent()}
; @@ -138,7 +184,6 @@ const Comment: React.FC = (props) => {
{renderReply()} {renderFolds()} - {renderFolds()}
); }; From d21bfbd24c50b60a3d6b00426f9cad4318c40317 Mon Sep 17 00:00:00 2001 From: slatejack Date: Wed, 23 Sep 2026 18:21:26 +0800 Subject: [PATCH 04/27] feat(comment): add comment demo page --- site/mobile/mobile.config.js | 6 ++ site/web/site.config.js | 8 ++ src/comment/_example/base.tsx | 42 +++++++++ src/comment/_example/image.tsx | 88 +++++++++++++++++++ src/comment/_example/index.tsx | 31 +++++++ src/comment/_example/long-press.tsx | 71 ++++++++++++++++ src/comment/_example/reply.tsx | 117 ++++++++++++++++++++++++++ src/comment/_example/style/index.less | 68 +++++++++++++++ 8 files changed, 431 insertions(+) create mode 100644 src/comment/_example/base.tsx create mode 100644 src/comment/_example/image.tsx create mode 100644 src/comment/_example/index.tsx create mode 100644 src/comment/_example/long-press.tsx create mode 100644 src/comment/_example/reply.tsx create mode 100644 src/comment/_example/style/index.less diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index b945c198d..4b3e6bf28 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -428,5 +428,11 @@ export default { name: 'typography', component: () => import('tdesign-mobile-react/typography/_example/index.tsx'), }, + { + title: 'Comment 评论', + titleEn: 'Comment', + name: 'comment', + component: () => import('tdesign-mobile-react/comment/_example/index.tsx'), + }, ], }; diff --git a/site/web/site.config.js b/site/web/site.config.js index 884b5a43e..0816b1390 100644 --- a/site/web/site.config.js +++ b/site/web/site.config.js @@ -375,6 +375,14 @@ export const docs = [ component: () => import('tdesign-mobile-react/count-down/count-down.md'), componentEn: () => import('tdesign-mobile-react/count-down/count-down.en-US.md'), }, + { + title: 'Comment 评论', + titleEn: 'Comment', + name: 'comment', + path: '/mobile-react/components/comment', + component: () => import('tdesign-mobile-react/comment/comment.md'), + componentEn: () => import('tdesign-mobile-react/comment/comment.en-US.md'), + }, { title: 'Empty 空状态', titleEn: 'Empty', diff --git a/src/comment/_example/base.tsx b/src/comment/_example/base.tsx new file mode 100644 index 000000000..47a2188ec --- /dev/null +++ b/src/comment/_example/base.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Button, Comment, Tag } from 'tdesign-mobile-react'; +import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react'; + +export default function () { + return ( +
+ +
Name1 名称
+ + 作者 + +
+ } + actions={[ + { placement: 'start', content:
回复
, key: 'reply' }, + { + placement: 'end', + content: ( +
+ +
+ ), + key: 'actions', + }, + ]} + content="这是一段很长很长很长很长很长很长的评论内容。" + datetime="今天16:38·广东" + /> +
+ ); +} diff --git a/src/comment/_example/image.tsx b/src/comment/_example/image.tsx new file mode 100644 index 000000000..c7c74f71b --- /dev/null +++ b/src/comment/_example/image.tsx @@ -0,0 +1,88 @@ +import React, { useState } from 'react'; +import { Button, Comment, Image, ImageViewer, Tag } from 'tdesign-mobile-react'; +import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react'; + +const images = [ + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', + 'https://tdesign.gtimg.com/mobile/demos/swiper1.png', +]; + +const MAX_SHOW = 3; + +export default function ImageDemo() { + const [visible, setVisible] = useState(false); + const [viewerIndex, setViewerIndex] = useState(0); + + const showImages = images.slice(0, MAX_SHOW); + + const handleImageClick = (index: number) => { + setViewerIndex(index); + setVisible(true); + }; + + const handleClose = () => { + setVisible(false); + }; + + return ( +
+ +
Name1 名称
+ + 作者 + +
+ } + content={ +
+ {showImages.map((src, index) => ( +
handleImageClick(index)}> + + {index === MAX_SHOW - 1 && images.length > MAX_SHOW && ( +
共{images.length}张
+ )} +
+ ))} +
+ } + actions={[ + { placement: 'start', content:
回复
, key: 'reply' }, + { + placement: 'end', + content: ( +
+ +
+ ), + key: 'actions', + }, + ]} + datetime="今天16:38·广东" + /> + setViewerIndex(index)} + /> +
+ ); +} diff --git a/src/comment/_example/index.tsx b/src/comment/_example/index.tsx new file mode 100644 index 000000000..6b0a81de3 --- /dev/null +++ b/src/comment/_example/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import Base from './base'; +import Image from './image'; +import Reply from './reply'; +import './style/index.less'; +import LongPress from './long-press'; + +export default function CommentDemo() { + return ( +
+ + + + + + + + + + + + + +
+ ); +} diff --git a/src/comment/_example/long-press.tsx b/src/comment/_example/long-press.tsx new file mode 100644 index 000000000..8a02f2072 --- /dev/null +++ b/src/comment/_example/long-press.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { ActionSheet, Button, Comment, Tag } from 'tdesign-mobile-react'; +import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react'; + +export default function () { + const [showActionSheet, setShowActionSheet] = React.useState(false); + const timerRef = React.useRef | null>(null); + + const handleTouchStart = () => { + timerRef.current = setTimeout(() => { + setShowActionSheet(true); + }, 800); + }; + + const handleTouchEnd = () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + timerRef.current = null; + } + }; + + return ( +
+
+ +
Name1 名称
+ + 作者 + +
+ } + actions={[ + { placement: 'start', content:
回复
, key: 'reply' }, + { + placement: 'end', + content: ( +
+ +
+ ), + key: 'actions', + }, + ]} + content="这是一段很长很长很长很长很长很长的评论内容。" + datetime="今天16:38·广东" + /> +
+ { + setShowActionSheet(false); + }} + onCancel={() => { + setShowActionSheet(false); + }} + /> + + ); +} diff --git a/src/comment/_example/reply.tsx b/src/comment/_example/reply.tsx new file mode 100644 index 000000000..863611805 --- /dev/null +++ b/src/comment/_example/reply.tsx @@ -0,0 +1,117 @@ +import React, { useEffect, useState } from 'react'; +import { Button, Comment, CommentFold, Tag } from 'tdesign-mobile-react'; +import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react'; + +const REPLY_COUNT = 6; // 回复评论总数 +export default function () { + const [commentFold, setCommentFold] = React.useState({ + state: 'collapsed', + total: REPLY_COUNT, + step: 3, + content: { + collapsed: `展开${REPLY_COUNT - 1}条回复`, + partial: ['展开更多回复', '收起'], + expanded: '收起', + }, + }); + const [replyInfo, setReplyInfo] = useState([]); + + useEffect(() => { + setReplyInfo( + new Array(REPLY_COUNT).fill({}).map((__, index) => ({ + author: `Name${index + 1} 名称`, + avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png', + content: '这是一段很长很长很长很长很长很长的评论内容。', + datetime: '今天16:38·广东', + likeNum: 6, + })), + ); + }, []); + + const handleUpdateFold = (context: { e: Event; fold: CommentFold }) => { + setCommentFold(context.fold); + }; + + const renderReply = () => { + const getRenderReplyItem = () => { + if (commentFold.state === 'collapsed') { + return replyInfo.slice(0, 1); + } + if (commentFold.state === 'partial') { + return replyInfo.slice(0, 3); + } + return replyInfo; + }; + return getRenderReplyItem().map((item) => ( + +
{item.author}
+ + } + actions={[ + { placement: 'start', content:
回复
, key: 'reply' }, + { + placement: 'end', + content: ( +
+ +
+ ), + key: 'actions', + }, + ]} + content={item.content} + datetime={item.datetime} + /> + )); + }; + return ( +
+ +
Name1 名称
+ + 作者 + +
+ } + actions={[ + { placement: 'start', content:
回复
, key: 'reply' }, + { + placement: 'end', + content: ( +
+ +
+ ), + key: 'actions', + }, + ]} + content="这是一段很长很长很长很长很长很长的评论内容。" + datetime="今天16:38·广东" + folds={commentFold} + reply={renderReply()} + onFolds={handleUpdateFold} + /> + + ); +} diff --git a/src/comment/_example/style/index.less b/src/comment/_example/style/index.less new file mode 100644 index 000000000..e9250c60b --- /dev/null +++ b/src/comment/_example/style/index.less @@ -0,0 +1,68 @@ +.tdesign-mobile-demo { + --bg-color-demo: var(--td-bg-color-container); +} + +.mobile-comment { + padding: 12px 16px 4px 16px; + box-sizing: border-box; + + &__author { + display: flex; + align-items: center; + font-size: 12px; + + &-tag { + background-color: transparent !important; + border: none; + font-size: 12px; + } + } + + &__reply { + &-button { + color: rgba(0, 0, 0, .6); + font-size: 12px; + } + } + + &__actions { + display: flex; + align-items: center; + gap: 16px; + + &-button { + padding: 2px; + color: rgba(0, 0, 0, .4); + font-size: 12px; + box-sizing: border-box; + } + } + + &__images { + display: flex; + gap: 8px; + + &-item { + position: relative; + width: 78px; + height: 78px; + border-radius: 8px; + overflow: hidden; + flex-shrink: 0; + cursor: pointer; + } + + &-badge { + position: absolute; + right: 4px; + bottom: 4px; + padding: 2px 8px; + background: rgba(0, 0, 0, 0.6); + color: #fff; + font-size: 12px; + line-height: 18px; + border-radius: 12px; + white-space: nowrap; + } + } +} From d4245823b7156798402ce710e411fb7e75449c7d Mon Sep 17 00:00:00 2001 From: slatejack Date: Wed, 23 Sep 2026 21:24:38 +0800 Subject: [PATCH 05/27] style(comment): update submodule branch --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index f31cf502d..98332fa5c 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit f31cf502d637a118664de0843c96b14ccef2f08a +Subproject commit 98332fa5c50ed03c481b720b48423eb42a886b75 From 5e2789f5b8c470b3ab271369246b2ece8db691c3 Mon Sep 17 00:00:00 2001 From: slatejack Date: Wed, 23 Sep 2026 21:25:36 +0800 Subject: [PATCH 06/27] test(comment): update test snapshots --- test/snap/__snapshots__/csr.test.jsx.snap | 20198 +++++--------------- test/snap/__snapshots__/ssr.test.jsx.snap | 174 +- 2 files changed, 4648 insertions(+), 15724 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index cfca4e7f8..95a986d55 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -111,33 +111,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -145,7 +118,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_12g_-overlap-fill1)" /> csr test src/action-sheet/_example/align.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -221,7 +166,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_12h_-overlap-fill1)" /> csr test src/action-sheet/_example/align.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -426,7 +343,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_12k_-overlap-fill1)" /> csr test src/action-sheet/_example/align.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -502,7 +391,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_12l_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -1025,7 +858,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = ` d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_11u_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -1170,13 +952,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = ` d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_120_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -1624,7 +1349,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = ` d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_122_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -1769,13 +1443,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = ` d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_124_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -2285,7 +1902,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = ` d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_126_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -2430,13 +1996,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = ` d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_128_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/grid-multiple.ts viewBox="0 0 24 24" width="1em" > - - - - - - @@ -2904,7 +2413,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_12a_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -3049,13 +2507,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_12c_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -3167,14 +2571,12 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts d="M3 21H20L9 10L3 16V21Z" fill="transparent" id="fill1" - mask="url(#t-icon-image-instance-_r_12d_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -3281,14 +2631,12 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts d="M3 21H20L9 10L3 16V21Z" fill="transparent" id="fill1" - mask="url(#t-icon-image-instance-_r_12e_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -3790,7 +3111,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_10s_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -3866,7 +3159,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_10t_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -4582,7 +3819,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_110_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -4727,13 +3913,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_112_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -5181,7 +4310,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_114_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -5326,13 +4404,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_116_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -5842,7 +4863,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_118_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -5987,13 +4957,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_11a_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -6456,7 +5369,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z" fill="transparent" id="fill1" - mask="url(#t-icon-star-instance-_r_11c_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -6601,13 +5463,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z" fill="transparent" id="fill1" - mask="url(#t-icon-edit-1-instance-_r_11e_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -6719,14 +5527,12 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M3 21H20L9 10L3 16V21Z" fill="transparent" id="fill1" - mask="url(#t-icon-image-instance-_r_11f_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - - - @@ -6833,14 +5587,12 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M3 21H20L9 10L3 16V21Z" fill="transparent" id="fill1" - mask="url(#t-icon-image-instance-_r_11g_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -7065,7 +5790,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_11i_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -7142,7 +5839,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_11j_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -7400,7 +6069,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_11m_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -7476,7 +6117,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_11n_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -7681,7 +6294,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_11q_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -7757,7 +6342,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_11r_-overlap-fill1)" /> csr test src/action-sheet/_example/list.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -8247,7 +6804,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = ` d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_10o_-overlap-fill1)" /> csr test src/action-sheet/_example/list.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -8323,7 +6852,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = ` d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_10p_-overlap-fill1)" /> csr test src/action-sheet/_example/status.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -8734,7 +7235,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/status.tsx 1`] = d="M5 4H19V21L12 16L5 21V4Z" fill="transparent" id="fill1" - mask="url(#t-icon-bookmark-instance-_r_10k_-overlap-fill1)" /> csr test src/action-sheet/_example/status.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - @@ -8811,7 +7284,6 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/status.tsx 1`] = d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z" fill="transparent" id="fill1" - mask="url(#t-icon-pin-instance-_r_10l_-overlap-fill1)" /> csr test src/avatar/_example/action.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -9250,7 +7695,6 @@ exports[`csr snapshot test > csr test src/avatar/_example/action.tsx 1`] = ` d="M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z" fill="transparent" id="fill1" - mask="url(#t-icon-user-add-instance-_r_10i_-overlap-fill1)" /> csr test src/avatar/_example/badge-avatar.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/badge-avatar.tsx 1`] = id="stroke1" > + csr test src/avatar/_example/icon-avatar.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/icon-avatar.tsx 1`] = id="stroke1" > + csr test src/avatar/_example/icon-avatar.tsx 1`] = viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/icon-avatar.tsx 1`] = id="stroke1" > + csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -11468,7 +9741,6 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = ` d="M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z" fill="transparent" id="fill1" - mask="url(#t-icon-user-add-instance-_r_10b_-overlap-fill1)" /> csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/size.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/size.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/size.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/size.tsx 1`] = ` id="stroke1" > + csr test src/avatar/_example/size.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/avatar/_example/size.tsx 1`] = ` id="stroke1" > + csr test src/badge/_example/base.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -12951,19 +11023,23 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_102_-overlap-fill1)" /> + csr test src/badge/_example/base.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -13117,19 +11137,23 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_103_-overlap-fill1)" /> + csr test src/badge/_example/base.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -13268,19 +11236,23 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_104_-overlap-fill1)" /> + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -13444,19 +11360,23 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vq_-overlap-fill1)" /> + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -13610,19 +11474,23 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vr_-overlap-fill1)" /> + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -13761,19 +11573,23 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vs_-overlap-fill1)" /> + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -13897,19 +11657,23 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vt_-overlap-fill1)" /> + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -14015,19 +11723,23 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vu_-overlap-fill1)" /> + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -14108,7 +11793,6 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = ` d="M4 8H20V22H4V8Z" fill="transparent" id="fill1" - mask="url(#t-icon-shop-instance-_r_vv_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/badge/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/badge/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/badge/_example/index.tsx 1`] = ` id="stroke1" > + csr test src/badge/_example/size.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/badge/_example/size.tsx 1`] = ` id="stroke1" > + csr test src/badge/_example/size.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - csr test src/badge/_example/size.tsx 1`] = ` id="stroke1" > + csr test src/badge/_example/theme.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -14835,19 +12367,23 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vl_-overlap-fill1)" /> + csr test src/badge/_example/theme.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - @@ -14953,19 +12433,23 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = ` d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z" fill="transparent" id="fill1" - mask="url(#t-icon-notification-instance-_r_vm_-overlap-fill1)" /> + csr test src/badge/_example/theme.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - @@ -15046,7 +12503,6 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = ` d="M4 8H20V22H4V8Z" fill="transparent" id="fill1" - mask="url(#t-icon-shop-instance-_r_vn_-overlap-fill1)" /> csr test src/button/_example/icon.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/icon.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vj_-overlap-fill2)" /> + + @@ -15521,64 +12933,11 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/icon.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vk_-overlap-fill2)" /> + + @@ -15792,64 +13160,11 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vf_-overlap-fill2)" /> + + @@ -15906,64 +13230,11 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vg_-overlap-fill2)" /> + + @@ -16372,64 +13652,11 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vh_-overlap-fill2)" /> + + @@ -16491,64 +13727,11 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vi_-overlap-fill2)" /> + + @@ -16802,64 +13994,11 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/shape.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_vd_-overlap-fill2)" /> + + @@ -16921,64 +14069,11 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/button/_example/shape.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_ve_-overlap-fill2)" /> + + @@ -32372,64 +29476,11 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/cell/_example/group.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_sf_-overlap-fill2)" /> + + @@ -32524,62 +29584,11 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - csr test src/cell/_example/group.tsx 1`] = ` d="M10.25 21.5C10.25 21.0858 10.5858 20.75 11 20.75H13C13.4142 20.75 13.75 21.0858 13.75 21.5C13.75 21.9142 13.4142 22.25 13 22.25H11C10.5858 22.25 10.25 21.9142 10.25 21.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-service-instance-_r_sh_-overlap-fill2)" /> csr test src/cell/_example/group.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - - - - - - @@ -32764,18 +29676,15 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5228 22 22 17.5229 22 12C22 6.47715 17.5228 2 12 2Z" fill="transparent" id="fill1" - mask="url(#t-icon-internet-instance-_r_sj_-overlap-fill1)" /> csr test src/cell/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/cell/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_s0_-overlap-fill2)" /> + + @@ -33577,64 +30442,11 @@ exports[`csr snapshot test > csr test src/cell/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/cell/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_s6_-overlap-fill2)" /> + + @@ -33939,64 +30760,11 @@ exports[`csr snapshot test > csr test src/cell/_example/index.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/cell/_example/index.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_s9_-overlap-fill2)" /> - - - - - - -
-
- 单行标题 -
-
-
-
- - - - - -
-
- -
-
-
- - - - - - - - - - - - - - - - -
-
-
-
- 单行标题 -
-
-
-
- - - - - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - + + +
+
+
+
+ 单行标题 +
+
+
+
+ + + + + +
+
+
+
+
+
+ + + + + + + + + + +
+
+
+
+ 单行标题 +
+
+
+
+ + + + + +
+
+
+
+
+
+ + + + + + @@ -34689,64 +31315,11 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/cell/_example/multiple.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_rp_-overlap-fill2)" /> + + @@ -35274,64 +31856,11 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` viewBox="0 0 24 24" width="1em" > - - - - - - - - - - - - csr test src/cell/_example/single.tsx 1`] = ` d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z" fill="transparent" id="fill2" - mask="url(#t-icon-app-instance-_r_rj_-overlap-fill2)" /> + + @@ -40589,8 +37127,2376 @@ exports[`csr snapshot test > csr test src/color-picker/_example/index.tsx 1`] = style="background-color: rgb(0, 31, 151);" />
-
-
+ + + + + + + + + + +`; + +exports[`csr snapshot test > csr test src/color-picker/_example/multiple.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RGB +
+
+
+
+ 0 +
+
+ 31 +
+
+ 151 +
+
+ 100% +
+
+
+
+
+
+
+ 系统预设色彩 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/color-picker/_example/usePopup.tsx 1`] = ` +
+