From 226aae73e9c922be46119650ddaf23f6ad3ce9e4 Mon Sep 17 00:00:00 2001 From: "Y." Date: Tue, 29 Sep 2026 19:33:14 +0800 Subject: [PATCH 01/24] refactor: update z-index (#980) * refactor: update z-index * docs: update css vars * fix(Overlay): fix test unit * feat(Dialog): popup and overlay remain at the same DOM level --- src/dialog/dialog.md | 2 +- src/dialog/type.ts | 2 +- src/dropdown-menu/defaultProps.ts | 1 - src/dropdown-menu/dropdown-menu.en-US.md | 2 +- src/dropdown-menu/dropdown-menu.md | 2 +- src/dropdown-menu/type.ts | 3 +-- src/loading/loading.en-US.md | 2 +- src/loading/loading.md | 2 +- src/overlay/__tests__/overlay.test.tsx | 13 +++++-------- src/overlay/defaultProps.ts | 7 +------ src/overlay/overlay.en-US.md | 4 ++-- src/overlay/overlay.md | 4 ++-- src/overlay/type.ts | 3 +-- src/popup/Popup.tsx | 11 ++++++++++- src/popup/popup.md | 2 +- src/popup/type.ts | 2 +- 16 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md index 6aef30a0e..0671cd1ea 100644 --- a/src/dialog/dialog.md +++ b/src/dialog/dialog.md @@ -24,7 +24,7 @@ title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义 top | TElement | - | 顶部自定义内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N visible | Boolean | - | 控制对话框是否显示 | N width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N -zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N +zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端样式默认 1500，小程序样式默认为 11500 | N onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`
关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`
| N onClosed | Function | | TS 类型：`() => void`
对话框消失动画效果结束后触发 | N diff --git a/src/dialog/type.ts b/src/dialog/type.ts index 669fd9a93..1be2b91a9 100644 --- a/src/dialog/type.ts +++ b/src/dialog/type.ts @@ -82,7 +82,7 @@ export interface TdDialogProps { */ width?: string | number; /** - * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 + * 对话框层级，Web 侧样式默认为 2500，移动端样式默认 1500，小程序样式默认为 11500 */ zIndex?: number; /** diff --git a/src/dropdown-menu/defaultProps.ts b/src/dropdown-menu/defaultProps.ts index 9a38702f7..d3bfc03f8 100644 --- a/src/dropdown-menu/defaultProps.ts +++ b/src/dropdown-menu/defaultProps.ts @@ -9,7 +9,6 @@ export const dropdownMenuDefaultProps: TdDropdownMenuProps = { direction: 'down', duration: 200, showOverlay: true, - zIndex: 11600, }; export const dropdownItemDefaultProps: TdDropdownItemProps = { diff --git a/src/dropdown-menu/dropdown-menu.en-US.md b/src/dropdown-menu/dropdown-menu.en-US.md index 92ec3c20f..4676b54d3 100644 --- a/src/dropdown-menu/dropdown-menu.en-US.md +++ b/src/dropdown-menu/dropdown-menu.en-US.md @@ -12,7 +12,7 @@ closeOnClickOverlay | Boolean | true | \- | N direction | String | down | options: down/up | N duration | String / Number | 200 | \- | N showOverlay | Boolean | true | \- | N -zIndex | Number | 11600 | \- | N +zIndex | Number | - | \- | N ### DropdownItem Props diff --git a/src/dropdown-menu/dropdown-menu.md b/src/dropdown-menu/dropdown-menu.md index 9c15e15aa..ee7ce99a2 100644 --- a/src/dropdown-menu/dropdown-menu.md +++ b/src/dropdown-menu/dropdown-menu.md @@ -12,7 +12,7 @@ closeOnClickOverlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | direction | String | down | 菜单展开方向。可选项：down/up | N duration | String / Number | 200 | 动画时长 | N showOverlay | Boolean | true | 是否显示遮罩层 | N -zIndex | Number | 11600 | 菜单栏 z-index 层级 | N +zIndex | Number | - | 菜单栏 z-index 层级，默认为 1600 | N ### DropdownItem Props diff --git a/src/dropdown-menu/type.ts b/src/dropdown-menu/type.ts index 96dd4b4c4..3cfe7660a 100644 --- a/src/dropdown-menu/type.ts +++ b/src/dropdown-menu/type.ts @@ -28,8 +28,7 @@ export interface TdDropdownMenuProps { */ showOverlay?: boolean; /** - * 菜单栏 z-index 层级 - * @default 11600 + * 菜单栏 z-index 层级，默认为 1600 */ zIndex?: number; } diff --git a/src/loading/loading.en-US.md b/src/loading/loading.en-US.md index aed9a1a86..0faae4596 100644 --- a/src/loading/loading.en-US.md +++ b/src/loading/loading.en-US.md @@ -41,4 +41,4 @@ Name | Default Value | Description --td-loading-line-bg-color | @text-color-primary | - --td-loading-text-color | @text-color-primary | - --td-loading-text-font | @font-body-small | - ---td-loading-z-index | 3500 | - +--td-loading-z-index | @z-index-loading | - diff --git a/src/loading/loading.md b/src/loading/loading.md index 933030014..8f08c4279 100644 --- a/src/loading/loading.md +++ b/src/loading/loading.md @@ -41,4 +41,4 @@ options | Function | - | 必需。TS 类型：`boolean \| TdLoadingProps` --td-loading-line-bg-color | @text-color-primary | - --td-loading-text-color | @text-color-primary | - --td-loading-text-font | @font-body-small | - ---td-loading-z-index | 3500 | - +--td-loading-z-index | @z-index-loading | - diff --git a/src/overlay/__tests__/overlay.test.tsx b/src/overlay/__tests__/overlay.test.tsx index 273bbd80c..89ae3a27c 100644 --- a/src/overlay/__tests__/overlay.test.tsx +++ b/src/overlay/__tests__/overlay.test.tsx @@ -106,6 +106,11 @@ describe('Overlay', () => { ); const overlay = container.querySelector('.t-overlay'); expect(overlay).toHaveStyle('z-index: 9999'); + + // zIndex 无默认值，不传时不应设置 z-index 样式 + const { container: defaultContainer } = render(测试内容); + const defaultOverlay = defaultContainer.querySelector('.t-overlay'); + expect((defaultOverlay as HTMLElement).style.zIndex).toBe(''); }); }); @@ -190,13 +195,6 @@ describe('Overlay', () => { expect(overlay).toHaveStyle(`animation-duration: ${overlayDefaultProps.duration}ms`); }); - it('uses default zIndex when not provided', () => { - const { container } = render(测试内容); - const overlay = container.querySelector('.t-overlay'); - expect(overlay).toBeInTheDocument(); - expect(overlay).toHaveStyle(`z-index: ${overlayDefaultProps.zIndex}`); - }); - it('uses default preventScrollThrough when not provided', () => { // 保存原始的 document.addEventListener 方法 const originalAddEventListener = document.addEventListener; @@ -261,7 +259,6 @@ describe('Overlay', () => { // 验证所有默认属性都被正确应用 expect(overlay).toBeInTheDocument(); - expect(overlay).toHaveStyle(`z-index: ${overlayDefaultProps.zIndex}`); expect(overlay).toHaveStyle(`animation-duration: ${overlayDefaultProps.duration}ms`); // 由于默认 preventScrollThrough 为 true，验证 document.addEventListener 被调用 diff --git a/src/overlay/defaultProps.ts b/src/overlay/defaultProps.ts index a09e398c6..bb89c0a73 100644 --- a/src/overlay/defaultProps.ts +++ b/src/overlay/defaultProps.ts @@ -4,9 +4,4 @@ import { TdOverlayProps } from './type'; -export const overlayDefaultProps: TdOverlayProps = { - duration: 300, - preventScrollThrough: true, - visible: false, - zIndex: 1000, -}; +export const overlayDefaultProps: TdOverlayProps = { duration: 300, preventScrollThrough: true, visible: false }; diff --git a/src/overlay/overlay.en-US.md b/src/overlay/overlay.en-US.md index 9c469f4a2..af6286723 100644 --- a/src/overlay/overlay.en-US.md +++ b/src/overlay/overlay.en-US.md @@ -13,7 +13,7 @@ children | TNode | - | Typescript: `string \| TNode`。[see more ts definition]( duration | Number | 300 | \- | N preventScrollThrough | Boolean | true | \- | N visible | Boolean | false | \- | N -zIndex | Number | 1000 | \- | N +zIndex | Number | - | \- | N onClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript: `() => void`
| N onClosed | Function | | Typescript: `() => void`
| N @@ -26,4 +26,4 @@ The component provides the following CSS variables, which can be used to customi Name | Default Value | Description -- | -- | -- --td-overlay-bg-color | @mask-active | - ---td-overlay-zindex | 1000 | - +--td-overlay-zindex | @z-index-overlay | - diff --git a/src/overlay/overlay.md b/src/overlay/overlay.md index f84aaf88d..38dc6d4c6 100644 --- a/src/overlay/overlay.md +++ b/src/overlay/overlay.md @@ -13,7 +13,7 @@ children | TNode | - | 遮罩内容。TS 类型：`string \| TNode`。[通用类 duration | Number | 300 | 背景色过渡时间，单位毫秒 | N preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N visible | Boolean | false | 是否展示 | N -zIndex | Number | 1000 | 遮罩的层级 | N +zIndex | Number | - | 遮罩的层级，默认为 1000 | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
遮罩层的点击事件 | N onClose | Function | | TS 类型：`() => void`
遮罩执行消失动画效果前触发 | N onClosed | Function | | TS 类型：`() => void`
遮罩消失动画效果结束后触发 | N @@ -26,4 +26,4 @@ onOpened | Function | | TS 类型：`() => void`
遮罩弹出动画效果 名称 | 默认值 | 描述 -- | -- | -- --td-overlay-bg-color | @mask-active | - ---td-overlay-zindex | 1000 | - +--td-overlay-zindex | @z-index-overlay | - diff --git a/src/overlay/type.ts b/src/overlay/type.ts index 64216b4e9..84e9dc7d5 100644 --- a/src/overlay/type.ts +++ b/src/overlay/type.ts @@ -33,8 +33,7 @@ export interface TdOverlayProps { */ visible?: boolean; /** - * 遮罩的层级 - * @default 1000 + * 遮罩的层级，默认为 1000 */ zIndex?: number; /** diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx index 058abb30e..952e8db0a 100644 --- a/src/popup/Popup.tsx +++ b/src/popup/Popup.tsx @@ -73,6 +73,14 @@ const Popup: React.FC = (props) => { [zIndex, active], ); + const overlayPropsWithZIndex = useMemo( + () => ({ + ...overlayProps, + zIndex: overlayProps?.zIndex ?? zIndex, + }), + [overlayProps, zIndex], + ); + const classNames = useMemo( () => ({ enterActive: placement === 'center' ? 'fade-zoom-enter-active' : `slide-${placement}-enter-active`, @@ -90,11 +98,12 @@ const Popup: React.FC = (props) => { const node = ( <> void`
组件准备关闭时触发 | N onClosed | Function | | TS 类型：`() => void`
组件关闭且动画结束后执行 | N onOpen | Function | | TS 类型：`() => void`
组件准备展示时触发 | N diff --git a/src/popup/type.ts b/src/popup/type.ts index a09a550cf..de2ae7e43 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -66,7 +66,7 @@ export interface TdPopupProps { */ defaultVisible?: boolean; /** - * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 + * 组件层级，Web 侧样式默认为 5500，移动端默认为 1500，小程序端默认 11500 */ zIndex?: number; /** From 865a0447f24f097edd90c9f2196d5bca1d3179e7 Mon Sep 17 00:00:00 2001 From: TDesign bot <93915689+tdesign-bot@users.noreply.github.com> Date: Tue, 29 Sep 2026 19:35:52 +0800 Subject: [PATCH 02/24] chore(submodule): update common (#982) * chore(submodule): update common * docs: update css vars --- src/_common | 2 +- src/overlay/overlay.en-US.md | 2 +- src/overlay/overlay.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_common b/src/_common index 3877b3252..22faf9e2f 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 3877b3252de69cdef86172f14e35d63bad3a0960 +Subproject commit 22faf9e2fa4fddf3322486bb416d99f85b20818c diff --git a/src/overlay/overlay.en-US.md b/src/overlay/overlay.en-US.md index af6286723..8291b2fe0 100644 --- a/src/overlay/overlay.en-US.md +++ b/src/overlay/overlay.en-US.md @@ -26,4 +26,4 @@ The component provides the following CSS variables, which can be used to customi Name | Default Value | Description -- | -- | -- --td-overlay-bg-color | @mask-active | - ---td-overlay-zindex | @z-index-overlay | - +--td-overlay-zIndex | @z-index-overlay | - diff --git a/src/overlay/overlay.md b/src/overlay/overlay.md index 38dc6d4c6..154af16d6 100644 --- a/src/overlay/overlay.md +++ b/src/overlay/overlay.md @@ -26,4 +26,4 @@ onOpened | Function | | TS 类型：`() => void`
遮罩弹出动画效果 名称 | 默认值 | 描述 -- | -- | -- --td-overlay-bg-color | @mask-active | - ---td-overlay-zindex | @z-index-overlay | - +--td-overlay-zIndex | @z-index-overlay | - From d5a30dfc270d61e8b26dc6c8fdf2f56bc96474b7 Mon Sep 17 00:00:00 2001 From: TDesign bot <93915689+tdesign-bot@users.noreply.github.com> Date: Tue, 29 Sep 2026 19:36:22 +0800 Subject: [PATCH 03/24] chore(submodule): update common (#983) * chore(submodule): update common * docs: update css vars From 55ba9bbfd727ad124cb8e485f0b9487f6bc89819 Mon Sep 17 00:00:00 2001 From: TDesign bot <93915689+tdesign-bot@users.noreply.github.com> Date: Tue, 29 Sep 2026 20:12:58 +0800 Subject: [PATCH 04/24] chore(submodule): update common (#984) * chore(submodule): update common * docs: update css vars --- src/_common | 2 +- src/tag/tag.en-US.md | 6 +++--- src/tag/tag.md | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/_common b/src/_common index 22faf9e2f..0fb44462e 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 22faf9e2fa4fddf3322486bb416d99f85b20818c +Subproject commit 0fb44462ef32c09296ffb95422e90233bb86f85f diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md index c3802e4c6..ddf7f4293 100644 --- a/src/tag/tag.en-US.md +++ b/src/tag/tag.en-US.md @@ -67,18 +67,18 @@ Name | Default Value | Description --td-tag-large-font | @font-body-medium | - --td-tag-large-icon-size | 16px | - --td-tag-large-padding | 2px 7px | - ---td-tag-mark-border-radius | @tag-round-border-radius | - +--td-tag-mark-border-radius | @radius-round | - --td-tag-medium-font | @font-body-small | - --td-tag-medium-icon-size | 14px | - --td-tag-medium-padding | 1px 7px | - --td-tag-outline-bg-color | @bg-color-container | - --td-tag-primary-color | @brand-color | - --td-tag-primary-light-color | @brand-color-light | - ---td-tag-round-border-radius | 999px | - +--td-tag-round-border-radius | @radius-round | - --td-tag-small-font | @font-body-extraSmall | - --td-tag-small-icon-size | 12px | - --td-tag-small-padding | 1px 5px | - ---td-tag-square-border-radius | 4px | - +--td-tag-square-border-radius | @radius-small | - --td-tag-success-color | @success-color | - --td-tag-success-light-color | @success-color-1 | - --td-tag-warning-color | @warning-color | - diff --git a/src/tag/tag.md b/src/tag/tag.md index fc0c5da3e..fa3473083 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -67,18 +67,18 @@ onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
--td-tag-large-font | @font-body-medium | - --td-tag-large-icon-size | 16px | - --td-tag-large-padding | 2px 7px | - ---td-tag-mark-border-radius | @tag-round-border-radius | - +--td-tag-mark-border-radius | @radius-round | - --td-tag-medium-font | @font-body-small | - --td-tag-medium-icon-size | 14px | - --td-tag-medium-padding | 1px 7px | - --td-tag-outline-bg-color | @bg-color-container | - --td-tag-primary-color | @brand-color | - --td-tag-primary-light-color | @brand-color-light | - ---td-tag-round-border-radius | 999px | - +--td-tag-round-border-radius | @radius-round | - --td-tag-small-font | @font-body-extraSmall | - --td-tag-small-icon-size | 12px | - --td-tag-small-padding | 1px 5px | - ---td-tag-square-border-radius | 4px | - +--td-tag-square-border-radius | @radius-small | - --td-tag-success-color | @success-color | - --td-tag-success-light-color | @success-color-1 | - --td-tag-warning-color | @warning-color | - From ed15bc5fdca056102d8fd1a71eea80f4d03cbb32 Mon Sep 17 00:00:00 2001 From: TDesign bot <93915689+tdesign-bot@users.noreply.github.com> Date: Wed, 30 Sep 2026 10:48:08 +0800 Subject: [PATCH 05/24] chore(submodule): update common (#986) --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 0fb44462e..98d355261 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 0fb44462ef32c09296ffb95422e90233bb86f85f +Subproject commit 98d355261a524cb0d66cba59a4b109482a4eb101 From ccf5fbf2f9a8b1a4a5b3d96da03b2fc949348c24 Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 30 Sep 2026 11:21:12 +0800 Subject: [PATCH 06/24] feat(DropdownItem): mark disabled as optional in DropdownOption (#987) --- src/dropdown-menu/dropdown-menu.en-US.md | 2 +- src/dropdown-menu/dropdown-menu.md | 2 +- src/dropdown-menu/type.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/dropdown-menu/dropdown-menu.en-US.md b/src/dropdown-menu/dropdown-menu.en-US.md index 4676b54d3..e8ad2bbf8 100644 --- a/src/dropdown-menu/dropdown-menu.en-US.md +++ b/src/dropdown-menu/dropdown-menu.en-US.md @@ -27,7 +27,7 @@ icon | TNode | undefined | Typescript: `TNode \| TNode[] \| undefined`。[see mo keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N label | String | - | \- | N multiple | Boolean | false | \- | N -options | Array | [] | Typescript: `Array` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N +options | Array | [] | Typescript: `Array` `interface DropdownOption { label: string; disabled?: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N optionsColumns | String / Number | 1 | \- | N placement | String | left | options: left/right | N value | String / Number / Array | undefined | Typescript: `DropdownValue ` `type DropdownValue = string \| number \| Array;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N diff --git a/src/dropdown-menu/dropdown-menu.md b/src/dropdown-menu/dropdown-menu.md index ee7ce99a2..2b8f4035c 100644 --- a/src/dropdown-menu/dropdown-menu.md +++ b/src/dropdown-menu/dropdown-menu.md @@ -27,7 +27,7 @@ icon | TNode | undefined | 自定义菜单子项图标，值为 `undefined` 表 keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N label | String | - | 标题 | N multiple | Boolean | false | 是否多选 | N -options | Array | [] | 选项数据。TS 类型：`Array` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N +options | Array | [] | 选项数据。TS 类型：`Array` `interface DropdownOption { label: string; disabled?: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N optionsColumns | String / Number | 1 | 选项分栏（1-3） | N placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N diff --git a/src/dropdown-menu/type.ts b/src/dropdown-menu/type.ts index 3cfe7660a..015b25398 100644 --- a/src/dropdown-menu/type.ts +++ b/src/dropdown-menu/type.ts @@ -116,7 +116,7 @@ export interface TdDropdownItemProps { export interface DropdownOption { label: string; - disabled: boolean; + disabled?: boolean; value: DropdownValue; } From 5caa9cbc7f2173fea59d182121edbcfce95e2673 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Wed, 30 Sep 2026 17:07:49 +0800 Subject: [PATCH 07/24] chore(demos): unified file name style (#975) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: unified file name style * chore: update snapshot * chore: 统一示例文件使用 TDemoHeader 组件 * chore: 更新子模块至最新版本 * chore: update snapshot * chore: update common --------- Co-authored-by: github-actions[bot] --- src/_common | 2 +- ...ltExpandAll.tsx => default-expand-all.tsx} | 0 src/color-picker/_example/index.tsx | 2 +- .../_example/{usePopup.tsx => use-popup.tsx} | 0 .../{buttonEmpty.tsx => button-empty.tsx} | 0 .../{imageEmpty.tsx => image-empty.tsx} | 0 src/empty/_example/index.tsx | 4 +- src/input/_example/index.tsx | 2 +- .../_example/{maxLength.tsx => maxlength.tsx} | 0 src/link/_example/index.tsx | 2 +- .../_example/{linkSize.tsx => link-size.tsx} | 0 src/list/_example/index.tsx | 6 +- src/navbar/_example/index.tsx | 2 +- .../_example/{iconDemo.tsx => icon-demo.tsx} | 0 src/notice-bar/_example/index.tsx | 4 +- .../{suffixIcon.tsx => suffix-icon.tsx} | 0 src/picker/_example/index.tsx | 4 +- src/tag/_example/index.tsx | 4 +- src/watermark/_example/index.tsx | 12 +-- .../{movingImage.tsx => moving-image.tsx} | 0 .../{movingText.tsx => moving-text.tsx} | 0 ...{multiLineGray.tsx => multi-line-gray.tsx} | 0 .../{multiLine.tsx => multi-line.tsx} | 0 test/snap/__snapshots__/csr.test.jsx.snap | 84 ++++++++++--------- test/snap/__snapshots__/ssr.test.jsx.snap | 22 ++--- 25 files changed, 79 insertions(+), 71 deletions(-) rename src/collapse/_example/{defaultExpandAll.tsx => default-expand-all.tsx} (100%) rename src/color-picker/_example/{usePopup.tsx => use-popup.tsx} (100%) rename src/empty/_example/{buttonEmpty.tsx => button-empty.tsx} (100%) rename src/empty/_example/{imageEmpty.tsx => image-empty.tsx} (100%) rename src/input/_example/{maxLength.tsx => maxlength.tsx} (100%) rename src/link/_example/{linkSize.tsx => link-size.tsx} (100%) rename src/notice-bar/_example/{iconDemo.tsx => icon-demo.tsx} (100%) rename src/notice-bar/_example/{suffixIcon.tsx => suffix-icon.tsx} (100%) rename src/watermark/_example/{movingImage.tsx => moving-image.tsx} (100%) rename src/watermark/_example/{movingText.tsx => moving-text.tsx} (100%) rename src/watermark/_example/{multiLineGray.tsx => multi-line-gray.tsx} (100%) rename src/watermark/_example/{multiLine.tsx => multi-line.tsx} (100%) diff --git a/src/_common b/src/_common index 98d355261..0c9b38898 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 98d355261a524cb0d66cba59a4b109482a4eb101 +Subproject commit 0c9b38898608d9f558d4e85a38843bd85db241e8 diff --git a/src/collapse/_example/defaultExpandAll.tsx b/src/collapse/_example/default-expand-all.tsx similarity index 100% rename from src/collapse/_example/defaultExpandAll.tsx rename to src/collapse/_example/default-expand-all.tsx diff --git a/src/color-picker/_example/index.tsx b/src/color-picker/_example/index.tsx index 288ee149f..f3c7f5058 100644 --- a/src/color-picker/_example/index.tsx +++ b/src/color-picker/_example/index.tsx @@ -3,7 +3,7 @@ import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import Base from './base'; import Multiple from './multiple'; -import UsePopup from './usePopup'; +import UsePopup from './use-popup'; import Format from './format'; import './style/index.less'; diff --git a/src/color-picker/_example/usePopup.tsx b/src/color-picker/_example/use-popup.tsx similarity index 100% rename from src/color-picker/_example/usePopup.tsx rename to src/color-picker/_example/use-popup.tsx diff --git a/src/empty/_example/buttonEmpty.tsx b/src/empty/_example/button-empty.tsx similarity index 100% rename from src/empty/_example/buttonEmpty.tsx rename to src/empty/_example/button-empty.tsx diff --git a/src/empty/_example/imageEmpty.tsx b/src/empty/_example/image-empty.tsx similarity index 100% rename from src/empty/_example/imageEmpty.tsx rename to src/empty/_example/image-empty.tsx diff --git a/src/empty/_example/index.tsx b/src/empty/_example/index.tsx index 62b9014c7..5fdaecee8 100644 --- a/src/empty/_example/index.tsx +++ b/src/empty/_example/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import BaseDemo from './base'; -import ImageEmptyDemo from './imageEmpty'; -import ButtonEmptyDemo from './buttonEmpty'; +import ImageEmptyDemo from './image-empty'; +import ButtonEmptyDemo from './button-empty'; import './style/index.less'; diff --git a/src/input/_example/index.tsx b/src/input/_example/index.tsx index 6fb4a7d14..f8e293b63 100644 --- a/src/input/_example/index.tsx +++ b/src/input/_example/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import BaseDemo from './base'; -import MaxLength from './maxLength'; +import MaxLength from './maxlength'; import Suffix from './suffix'; import Prefix from './prefix'; import Special from './special'; diff --git a/src/input/_example/maxLength.tsx b/src/input/_example/maxlength.tsx similarity index 100% rename from src/input/_example/maxLength.tsx rename to src/input/_example/maxlength.tsx diff --git a/src/link/_example/index.tsx b/src/link/_example/index.tsx index 0a2a594c0..c83ee7559 100644 --- a/src/link/_example/index.tsx +++ b/src/link/_example/index.tsx @@ -3,7 +3,7 @@ import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import BaseDemo from './base'; import ThemeDemo from './theme'; -import SizeDemo from './linkSize'; +import SizeDemo from './link-size'; import UnderlineDemo from './underline'; import PrefixDemo from './prefix'; import SuffixDemo from './suffix'; diff --git a/src/link/_example/linkSize.tsx b/src/link/_example/link-size.tsx similarity index 100% rename from src/link/_example/linkSize.tsx rename to src/link/_example/link-size.tsx diff --git a/src/list/_example/index.tsx b/src/list/_example/index.tsx index 939f650cb..2a441dc99 100644 --- a/src/list/_example/index.tsx +++ b/src/list/_example/index.tsx @@ -4,9 +4,9 @@ import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import './style/index.less'; -import BaseList from './base.jsx'; -import ErrTipDemo from './err-tip.jsx'; -import PullRefreshDemo from './pull-refresh.jsx'; +import BaseList from './base'; +import ErrTipDemo from './err-tip'; +import PullRefreshDemo from './pull-refresh'; export default function ListDemo() { const [currentTab, setCurrentTab] = useState('info'); diff --git a/src/navbar/_example/index.tsx b/src/navbar/_example/index.tsx index b8e8c1a4b..466a791f3 100644 --- a/src/navbar/_example/index.tsx +++ b/src/navbar/_example/index.tsx @@ -15,7 +15,7 @@ export default function Base() {
- +
diff --git a/src/notice-bar/_example/iconDemo.tsx b/src/notice-bar/_example/icon-demo.tsx similarity index 100% rename from src/notice-bar/_example/iconDemo.tsx rename to src/notice-bar/_example/icon-demo.tsx diff --git a/src/notice-bar/_example/index.tsx b/src/notice-bar/_example/index.tsx index 015439b14..341c04e8a 100644 --- a/src/notice-bar/_example/index.tsx +++ b/src/notice-bar/_example/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import BaseDemo from './base'; -import IconDemo from './iconDemo'; -import SuffixIcon from './suffixIcon'; +import IconDemo from './icon-demo'; +import SuffixIcon from './suffix-icon'; import Event from './event'; import CustomDemo from './custom'; import Customization from './customization'; diff --git a/src/notice-bar/_example/suffixIcon.tsx b/src/notice-bar/_example/suffix-icon.tsx similarity index 100% rename from src/notice-bar/_example/suffixIcon.tsx rename to src/notice-bar/_example/suffix-icon.tsx diff --git a/src/picker/_example/index.tsx b/src/picker/_example/index.tsx index b465429fd..1bc1e7ae0 100644 --- a/src/picker/_example/index.tsx +++ b/src/picker/_example/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import BaseDemo from './base'; import AreaDemo from './area'; import TitleDemo from './with-title'; @@ -11,8 +12,7 @@ import './style/custom-height.less'; export default function Base() { return (
-

Picker 选择器

-

用于一组预设数据中的选择。

+ diff --git a/src/tag/_example/index.tsx b/src/tag/_example/index.tsx index 3516b28b3..a78032ad9 100644 --- a/src/tag/_example/index.tsx +++ b/src/tag/_example/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import CheckeableDemo from './checkable'; import ClosableDemo from './closable'; import SizeDemo from './size'; @@ -10,8 +11,7 @@ import TypeDemo from './type'; export default function Base() { return (
-

Tag 标签

-

用于表明主体的类目，属性或状态。

+ diff --git a/src/watermark/_example/index.tsx b/src/watermark/_example/index.tsx index 6471e54f3..4b6d1b94b 100644 --- a/src/watermark/_example/index.tsx +++ b/src/watermark/_example/index.tsx @@ -1,20 +1,20 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import BaseDemo from './base'; import ImageDemo from './image'; import GaryDemo from './gray'; -import MultiLineDemo from './multiLine'; -import MultiLineGaryDemo from './multiLineGray'; -import MovingTextDemo from './movingText'; -import MovingImageDemo from './movingImage'; +import MultiLineDemo from './multi-line'; +import MultiLineGaryDemo from './multi-line-gray'; +import MovingTextDemo from './moving-text'; +import MovingImageDemo from './moving-image'; import LayoutDemo from './layout'; import './style/index.less'; export default function Base() { return (
-

Watermark 水印

-

给页面的某个区域加上水印。

+ diff --git a/src/watermark/_example/movingImage.tsx b/src/watermark/_example/moving-image.tsx similarity index 100% rename from src/watermark/_example/movingImage.tsx rename to src/watermark/_example/moving-image.tsx diff --git a/src/watermark/_example/movingText.tsx b/src/watermark/_example/moving-text.tsx similarity index 100% rename from src/watermark/_example/movingText.tsx rename to src/watermark/_example/moving-text.tsx diff --git a/src/watermark/_example/multiLineGray.tsx b/src/watermark/_example/multi-line-gray.tsx similarity index 100% rename from src/watermark/_example/multiLineGray.tsx rename to src/watermark/_example/multi-line-gray.tsx diff --git a/src/watermark/_example/multiLine.tsx b/src/watermark/_example/multi-line.tsx similarity index 100% rename from src/watermark/_example/multiLine.tsx rename to src/watermark/_example/multi-line.tsx diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 3ddca6eba..e4d0c5767 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -39835,7 +39835,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/card.tsx 1`] = `
`; -exports[`csr snapshot test > csr test src/collapse/_example/defaultExpandAll.tsx 1`] = ` +exports[`csr snapshot test > csr test src/collapse/_example/default-expand-all.tsx 1`] = `
csr test src/color-picker/_example/multiple.tsx 1`]
`; -exports[`csr snapshot test > csr test src/color-picker/_example/usePopup.tsx 1`] = ` +exports[`csr snapshot test > csr test src/color-picker/_example/use-popup.tsx 1`] = `
csr test src/empty/_example/base.tsx 1`] = `
`; -exports[`csr snapshot test > csr test src/empty/_example/buttonEmpty.tsx 1`] = ` +exports[`csr snapshot test > csr test src/empty/_example/button-empty.tsx 1`] = `
csr test src/empty/_example/buttonEmpty.tsx 1`] = `
`; -exports[`csr snapshot test > csr test src/empty/_example/imageEmpty.tsx 1`] = ` +exports[`csr snapshot test > csr test src/empty/_example/image-empty.tsx 1`] = `
csr test src/input/_example/layout.tsx 1`] = `
`; -exports[`csr snapshot test > csr test src/input/_example/maxLength.tsx 1`] = ` +exports[`csr snapshot test > csr test src/input/_example/maxlength.tsx 1`] = `
csr test src/link/_example/index.tsx 1`] = `
`; -exports[`csr snapshot test > csr test src/link/_example/linkSize.tsx 1`] = ` +exports[`csr snapshot test > csr test src/link/_example/link-size.tsx 1`] = `
csr test src/navbar/_example/index.tsx 1`] = `

- NavBar 导航栏 + Navbar 导航栏

csr test src/notice-bar/_example/event.tsx 1`] = `

`; -exports[`csr snapshot test > csr test src/notice-bar/_example/iconDemo.tsx 1`] = ` +exports[`csr snapshot test > csr test src/notice-bar/_example/icon-demo.tsx 1`] = `
csr test src/notice-bar/_example/scrolling.tsx 1`]
`; -exports[`csr snapshot test > csr test src/notice-bar/_example/suffixIcon.tsx 1`] = ` +exports[`csr snapshot test > csr test src/notice-bar/_example/suffix-icon.tsx 1`] = `
csr test src/picker/_example/index.tsx 1`] = `
-

- Picker 选择器 -

-

- 用于一组预设数据中的选择。 -

+

+ Picker 选择器 +

+

+ 用于一组预设数据中的选择。 +

+
@@ -152891,16 +152895,20 @@ exports[`csr snapshot test > csr test src/tag/_example/index.tsx 1`] = `
-

- Tag 标签 -

-

- 用于表明主体的类目，属性或状态。 -

+

+ Tag 标签 +

+

+ 用于表明主体的类目，属性或状态。 +

+
@@ -165793,7 +165801,7 @@ exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `" ssr test src/collapse/_example/card.tsx 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
"`; -exports[`ssr snapshot test > ssr test src/collapse/_example/defaultExpandAll.tsx 1`] = `"
面板1
内容1
面板2
内容2
面板2
内容2
"`; +exports[`ssr snapshot test > ssr test src/collapse/_example/default-expand-all.tsx 1`] = `"
面板1
内容1
面板2
内容2
面板2
内容2
"`; exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `"

Collapse 折叠面板

可以折叠/展开的内容区域。

01 组件类型

基础折叠面板

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容

向上展开

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容

带操作说明

折叠面板标题
收起
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容

手风琴式

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容

02 组件样式

卡片折叠面板

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
"`; @@ -165807,7 +165815,7 @@ exports[`ssr snapshot test > ssr test src/color-picker/_example/index.tsx 1`] = exports[`ssr snapshot test > ssr test src/color-picker/_example/multiple.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/color-picker/_example/usePopup.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/color-picker/_example/use-popup.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/config-provider/_example/index.tsx 1`] = `"

ConfigProvider 全局特性配置

全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。

01 配置示例

Upload

Table

Type
Platform
Property
暂无数据

其他组件

Rating
3 score
Single select date
"`; @@ -165889,9 +165897,9 @@ exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/single.tsx 1`] exports[`ssr snapshot test > ssr test src/empty/_example/base.tsx 1`] = `"
描述文字
"`; -exports[`ssr snapshot test > ssr test src/empty/_example/buttonEmpty.tsx 1`] = `"
描述文字
"`; +exports[`ssr snapshot test > ssr test src/empty/_example/button-empty.tsx 1`] = `"
描述文字
"`; -exports[`ssr snapshot test > ssr test src/empty/_example/imageEmpty.tsx 1`] = `"
描述文字
"`; +exports[`ssr snapshot test > ssr test src/empty/_example/image-empty.tsx 1`] = `"
描述文字
"`; exports[`ssr snapshot test > ssr test src/empty/_example/index.tsx 1`] = `"

Empty 空状态

用于空状态时的占位提示。

组件类型

图标空状态

描述文字

自定义图片空状态

描述文字

带操作空状态

描述文字
"`; @@ -166003,7 +166011,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `"
ssr test src/input/_example/layout.tsx 1`] = `"
标签文字
"`; -exports[`ssr snapshot test > ssr test src/input/_example/maxLength.tsx 1`] = `"
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
"`; +exports[`ssr snapshot test > ssr test src/input/_example/maxlength.tsx 1`] = `"
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
"`; exports[`ssr snapshot test > ssr test src/input/_example/prefix.tsx 1`] = `"
标签文字
"`; @@ -166023,7 +166031,7 @@ exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

跳转链接跳转链接跳转链接
跳转链接跳转链接

禁用状态

跳转链接跳转链接跳转链接
跳转链接跳转链接

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/link-size.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; @@ -166079,7 +166087,7 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

NavBar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; @@ -166095,13 +166103,13 @@ exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/iconDemo.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon-demo.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/index.tsx 1`] = `"

NoticeBar 公告栏

在导航栏下方，用于给用户显示提示消息。

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

可滚动的公告栏

提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
这是一条带图标的水平滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏

带图标的公告栏

提示文字描述提示文字描述提示文字描述

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定义样式的公告栏

提示文字描述提示文字描述提示文字描述

自定义内容的公告栏

提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情

02 组件状态

普通通知
这是一条普通的通知信息
成功通知
这是一条成功的通知信息
警示通知
这是一条警示的通知信息
错误通知
这是一条错误的通知信息
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
这是一条带图标的水平滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffixIcon.tsx 1`] = `"
这是一条普通的通知信息
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffix-icon.tsx 1`] = `"
这是一条普通的通知信息
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `"
普通通知
这是一条普通的通知信息
成功通知
这是一条成功的通知信息
警示通知
这是一条警示的通知信息
错误通知
这是一条错误的通知信息
"`; @@ -166115,7 +166123,7 @@ exports[`ssr snapshot test > ssr test src/picker/_example/base.tsx 1`] = `"
ssr test src/picker/_example/custom-height.tsx 1`] = `"
自定义高度选择器
"`; -exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `"

Picker 选择器

用于一组预设数据中的选择。

01 组件类型

基础选择器

选择地区
选择季节
选择地区

02 组件样式

是否带标题

带标题选择器
无标题选择器
自定义高度选择器
"`; +exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `"

Picker 选择器

用于一组预设数据中的选择。

01 组件类型

基础选择器

选择地区
选择季节
选择地区

02 组件样式

是否带标题

带标题选择器
无标题选择器
自定义高度选择器
"`; exports[`ssr snapshot test > ssr test src/picker/_example/with-title.tsx 1`] = `"
带标题选择器
无标题选择器
"`; @@ -166411,7 +166419,7 @@ exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `" ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; -exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"

Tag 标签

用于表明主体的类目，属性或状态。

01 组件类型

基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态

02 组件状态

展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功

03 组件尺寸

加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
"`; +exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"

Tag 标签

用于表明主体的类目，属性或状态。

01 组件类型

基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态

02 组件状态

展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功

03 组件尺寸

加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
"`; exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `"
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 06b96a04c..5abc52d68 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -134,7 +134,7 @@ exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `" ssr test src/collapse/_example/card.tsx 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
"`; -exports[`ssr snapshot test > ssr test src/collapse/_example/defaultExpandAll.tsx 1`] = `"
面板1
内容1
面板2
内容2
面板2
内容2
"`; +exports[`ssr snapshot test > ssr test src/collapse/_example/default-expand-all.tsx 1`] = `"
面板1
内容1
面板2
内容2
面板2
内容2
"`; exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `"

Collapse 折叠面板

可以折叠/展开的内容区域。

01 组件类型

基础折叠面板

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容

向上展开

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容

带操作说明

折叠面板标题
收起
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容

手风琴式

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容

02 组件样式

卡片折叠面板

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
"`; @@ -148,7 +148,7 @@ exports[`ssr snapshot test > ssr test src/color-picker/_example/index.tsx 1`] = exports[`ssr snapshot test > ssr test src/color-picker/_example/multiple.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/color-picker/_example/usePopup.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/color-picker/_example/use-popup.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/config-provider/_example/index.tsx 1`] = `"

ConfigProvider 全局特性配置

全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。

01 配置示例

Upload

Table

Type
Platform
Property
暂无数据

其他组件

Rating
3 score
Single select date
"`; @@ -230,9 +230,9 @@ exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/single.tsx 1`] exports[`ssr snapshot test > ssr test src/empty/_example/base.tsx 1`] = `"
描述文字
"`; -exports[`ssr snapshot test > ssr test src/empty/_example/buttonEmpty.tsx 1`] = `"
描述文字
"`; +exports[`ssr snapshot test > ssr test src/empty/_example/button-empty.tsx 1`] = `"
描述文字
"`; -exports[`ssr snapshot test > ssr test src/empty/_example/imageEmpty.tsx 1`] = `"
描述文字
"`; +exports[`ssr snapshot test > ssr test src/empty/_example/image-empty.tsx 1`] = `"
描述文字
"`; exports[`ssr snapshot test > ssr test src/empty/_example/index.tsx 1`] = `"

Empty 空状态

用于空状态时的占位提示。

组件类型

图标空状态

描述文字

自定义图片空状态

描述文字

带操作空状态

描述文字
"`; @@ -344,7 +344,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `"
ssr test src/input/_example/layout.tsx 1`] = `"
标签文字
"`; -exports[`ssr snapshot test > ssr test src/input/_example/maxLength.tsx 1`] = `"
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
"`; +exports[`ssr snapshot test > ssr test src/input/_example/maxlength.tsx 1`] = `"
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
"`; exports[`ssr snapshot test > ssr test src/input/_example/prefix.tsx 1`] = `"
标签文字
"`; @@ -364,7 +364,7 @@ exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

跳转链接跳转链接跳转链接
跳转链接跳转链接

禁用状态

跳转链接跳转链接跳转链接
跳转链接跳转链接

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/link-size.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; @@ -420,7 +420,7 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

NavBar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; @@ -436,13 +436,13 @@ exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/iconDemo.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon-demo.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/index.tsx 1`] = `"

NoticeBar 公告栏

在导航栏下方，用于给用户显示提示消息。

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

可滚动的公告栏

提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
这是一条带图标的水平滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏

带图标的公告栏

提示文字描述提示文字描述提示文字描述

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定义样式的公告栏

提示文字描述提示文字描述提示文字描述

自定义内容的公告栏

提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情

02 组件状态

普通通知
这是一条普通的通知信息
成功通知
这是一条成功的通知信息
警示通知
这是一条警示的通知信息
错误通知
这是一条错误的通知信息
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
这是一条带图标的水平滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏
这是一条带图标的纵向滚动公告栏
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffixIcon.tsx 1`] = `"
这是一条普通的通知信息
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffix-icon.tsx 1`] = `"
这是一条普通的通知信息
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `"
普通通知
这是一条普通的通知信息
成功通知
这是一条成功的通知信息
警示通知
这是一条警示的通知信息
错误通知
这是一条错误的通知信息
"`; @@ -456,7 +456,7 @@ exports[`ssr snapshot test > ssr test src/picker/_example/base.tsx 1`] = `"
ssr test src/picker/_example/custom-height.tsx 1`] = `"
自定义高度选择器
"`; -exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `"

Picker 选择器

用于一组预设数据中的选择。

01 组件类型

基础选择器

选择地区
选择季节
选择地区

02 组件样式

是否带标题

带标题选择器
无标题选择器
自定义高度选择器
"`; +exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `"

Picker 选择器

用于一组预设数据中的选择。

01 组件类型

基础选择器

选择地区
选择季节
选择地区

02 组件样式

是否带标题

带标题选择器
无标题选择器
自定义高度选择器
"`; exports[`ssr snapshot test > ssr test src/picker/_example/with-title.tsx 1`] = `"
带标题选择器
无标题选择器
"`; @@ -752,7 +752,7 @@ exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `" ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; -exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"

Tag 标签

用于表明主体的类目，属性或状态。

01 组件类型

基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态

02 组件状态

展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功

03 组件尺寸

加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
"`; +exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"

Tag 标签

用于表明主体的类目，属性或状态。

01 组件类型

基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态

02 组件状态

展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功

03 组件尺寸

加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
"`; exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `"
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
"`; From b300eb98117f46b97b4e6bb07a2cdcf369c66740 Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 30 Sep 2026 17:15:45 +0800 Subject: [PATCH 08/24] feat(radio&checkbox): support direction prop to the radio-group and checkbox-group components (#974) * docs(Radio): update api docs * docs(Checkbox): update api docs * feat(radio&checkbox): support direction prop to the radio-group and checkbox-group components * feat: update demo * test: add test unit * chore: update _common * chore: update common --------- Co-authored-by: github-actions[bot] --- src/checkbox/Checkbox.tsx | 54 +- src/checkbox/CheckboxGroup.tsx | 13 +- src/checkbox/__tests__/checkbox.test.tsx | 33 ++ src/checkbox/_example/horizontal.tsx | 7 +- src/checkbox/_example/style/index.less | 2 - src/checkbox/checkbox.en-US.md | 1 + src/checkbox/checkbox.md | 1 + src/checkbox/defaultProps.ts | 1 + src/checkbox/style/index.js | 1 + src/checkbox/type.ts | 5 + src/radio/Radio.tsx | 10 +- src/radio/RadioGroup.tsx | 22 +- src/radio/__tests__/radio.test.tsx | 35 ++ src/radio/_example/horizontal.tsx | 13 +- src/radio/_example/style/index.less | 2 - src/radio/defaultProps.ts | 1 + src/radio/radio.en-US.md | 1 + src/radio/radio.md | 1 + src/radio/style/index.js | 1 + src/radio/type.ts | 5 + test/snap/__snapshots__/csr.test.jsx.snap | 676 +++++++++++----------- test/snap/__snapshots__/ssr.test.jsx.snap | 46 +- 22 files changed, 526 insertions(+), 405 deletions(-) diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx index 5802e1b42..3642388ad 100644 --- a/src/checkbox/Checkbox.tsx +++ b/src/checkbox/Checkbox.tsx @@ -9,7 +9,7 @@ import { MinusIcon, MinusRectangleFilledIcon, } from 'tdesign-icons-react'; -import { TdCheckboxProps } from './type'; +import { TdCheckboxProps, TdCheckboxGroupProps } from './type'; import forwardRefWithStatics from '../_util/forwardRefWithStatics'; import CheckboxGroup from './CheckboxGroup'; import { StyledProps } from '../common'; @@ -22,17 +22,19 @@ import { checkboxDefaultProps } from './defaultProps'; export interface CheckboxProps extends TdCheckboxProps, StyledProps {} +export type CheckboxInjectedProps = CheckboxProps & { direction?: TdCheckboxGroupProps['direction'] }; + export interface CheckContextValue { - inject: (props: CheckboxProps) => CheckboxProps; + inject: (props: CheckboxProps) => CheckboxInjectedProps; } export const CheckContext = React.createContext(null); const Checkbox = forwardRef((_props, ref) => { const context = useContext(CheckContext); - const props = useDefaultProps(context ? context.inject(_props) : _props, checkboxDefaultProps); + const props = useDefaultProps(context ? context.inject(_props) : _props, checkboxDefaultProps); const { classPrefix } = useConfig(); - const classPrefixCheckBox = usePrefixClass('checkbox'); + const checkboxClass = usePrefixClass('checkbox'); const { className, placement, @@ -51,13 +53,15 @@ const Checkbox = forwardRef((_props, ref) => { checkAll, disabled, readonly, + direction, } = props; const [internalChecked, setInternalChecked] = useDefault(checked, defaultChecked, onChange); const checkboxClassName = classNames(`${classPrefix}-checkbox`, { - [`${classPrefixCheckBox}--${placement}`]: true, - [`${classPrefixCheckBox}--checked`]: checked, - [`${classPrefixCheckBox}--block`]: block, + [`${checkboxClass}--${placement}`]: true, + [`${checkboxClass}--checked`]: checked, + [`${checkboxClass}--block`]: block, + [`${checkboxClass}--${direction}`]: !!direction, }); const isChecked = useMemo(() => (checkAll ? checked : internalChecked), [internalChecked, checkAll, checked]); @@ -65,11 +69,11 @@ const Checkbox = forwardRef((_props, ref) => { const checkIcons = useMemo(() => { if (Array.isArray(icon) && icon.length > 1) { return icon.map((i) => - typeof i === 'string' ? : i, + typeof i === 'string' ? : i, ); } return [, ]; - }, [classPrefixCheckBox, icon]); + }, [checkboxClass, icon]); const checkIcon = useMemo(() => { if (icon === 'circle' || icon === true) { @@ -85,7 +89,7 @@ const Checkbox = forwardRef((_props, ref) => { }, [icon, indeterminate]); const renderIconArray = () => { - const className = `${classPrefixCheckBox}__icon-wrapper`; + const className = `${checkboxClass}__icon-wrapper`; if (Array.isArray(icon)) { return parseContentTNode(isChecked ? checkIcons[0] : checkIcons[1], { className, @@ -101,9 +105,9 @@ const Checkbox = forwardRef((_props, ref) => { {(icon === 'circle' || icon === true || icon === 'rectangle') && (
)} @@ -115,10 +119,10 @@ const Checkbox = forwardRef((_props, ref) => { const renderIconNode = () => (
{renderIconArray()} @@ -137,7 +141,7 @@ const Checkbox = forwardRef((_props, ref) => { const renderCheckBoxContent = () => (
{ event.stopPropagation(); @@ -146,9 +150,9 @@ const Checkbox = forwardRef((_props, ref) => { >
@@ -156,8 +160,8 @@ const Checkbox = forwardRef((_props, ref) => {
@@ -171,9 +175,7 @@ const Checkbox = forwardRef((_props, ref) => { {icon && renderIconNode()} {renderCheckBoxContent()} {/* 下边框 */} - {!borderless && ( -
- )} + {!borderless &&
}
); }); diff --git a/src/checkbox/CheckboxGroup.tsx b/src/checkbox/CheckboxGroup.tsx index 97c9830ac..9af48b0ce 100644 --- a/src/checkbox/CheckboxGroup.tsx +++ b/src/checkbox/CheckboxGroup.tsx @@ -43,6 +43,7 @@ const CheckboxGroup: FC = (props) => { children, borderless, readonly = false, + direction, keys, onChange, } = useDefaultProps(props, checkboxGroupDefaultProps); @@ -88,15 +89,15 @@ const CheckboxGroup: FC = (props) => { const context: CheckContextValue = { inject: (checkProps) => { - // 如果已经受控，则不注入 - if (typeof checkProps.checked !== 'undefined') { - return checkProps; + const injectProps = { ...checkProps, direction } as typeof checkProps; + if (typeof injectProps.checked !== 'undefined') { + return injectProps; } - const { value: checkValue } = checkProps; + const { value: checkValue } = injectProps; return { - ...checkProps, + ...injectProps, name, checked: checkProps.checkAll ? checkAllChecked || checkedSet.size !== 0 : checkedSet.has(checkValue), indeterminate: checkProps.checkAll ? indeterminate : checkProps.indeterminate, @@ -171,7 +172,7 @@ const CheckboxGroup: FC = (props) => { }); return ( -
+
{isOptions ? ( {checkboxNode()} diff --git a/src/checkbox/__tests__/checkbox.test.tsx b/src/checkbox/__tests__/checkbox.test.tsx index 33a6c7060..d5826592c 100644 --- a/src/checkbox/__tests__/checkbox.test.tsx +++ b/src/checkbox/__tests__/checkbox.test.tsx @@ -324,6 +324,39 @@ describe(': CheckboxGroup', () => { expect(container.querySelector(`${name}-group`)).toBeTruthy(); }); + it(': direction', () => { + // 默认 vertical，group 与子组件均带 vertical 修饰类 + const { container, rerender } = render(); + expect(container.querySelector(`${name}-group--vertical`)).toBeTruthy(); + expect(container.querySelector(`${name}-group--horizontal`)).toBeFalsy(); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(options.length); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(0); + + // vertical -> horizontal + rerender(); + expect(container.querySelector(`${name}-group--horizontal`)).toBeTruthy(); + expect(container.querySelector(`${name}-group--vertical`)).toBeFalsy(); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(options.length); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(0); + + // horizontal -> vertical + rerender(); + expect(container.querySelector(`${name}-group--vertical`)).toBeTruthy(); + expect(container.querySelector(`${name}-group--horizontal`)).toBeFalsy(); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(options.length); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(0); + + // 受控子项（自身传入 checked）也应从 group 继承 direction 修饰类 + rerender( + + + + , + ); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(2); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(0); + }); + it(': max', () => { const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {}); render(); diff --git a/src/checkbox/_example/horizontal.tsx b/src/checkbox/_example/horizontal.tsx index c3c7f04cc..6951499d7 100644 --- a/src/checkbox/_example/horizontal.tsx +++ b/src/checkbox/_example/horizontal.tsx @@ -12,11 +12,12 @@ export default function () { className="box horizontal" defaultValue={['checkbox1', 'checkbox2']} borderless + direction="horizontal" onChange={checkboxGroupChange} > - - - + + + ); } diff --git a/src/checkbox/_example/style/index.less b/src/checkbox/_example/style/index.less index 671ccb7ba..2b363b83b 100644 --- a/src/checkbox/_example/style/index.less +++ b/src/checkbox/_example/style/index.less @@ -12,8 +12,6 @@ .horizontal { padding: 16px; - display: flex; - justify-content: space-between; } .card { diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md index 30723571a..5fd225f77 100644 --- a/src/checkbox/checkbox.en-US.md +++ b/src/checkbox/checkbox.en-US.md @@ -36,6 +36,7 @@ name | type | default | description | required className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N borderless | Boolean | false | \- | N +direction | String | vertical | `1.0.0`。Radio option arrangement。options: vertical/horizontal | N disabled | Boolean | undefined | \- | N keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N max | Number | undefined | \- | N diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md index 5d20d8edc..8f4c680bb 100644 --- a/src/checkbox/checkbox.md +++ b/src/checkbox/checkbox.md @@ -36,6 +36,7 @@ onChange | Function | | TS 类型：`(checked: boolean, context: { e: ChangeEve className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N +direction | String | vertical | `1.0.0`。复选框按钮排列方式。可选项：vertical/horizontal | N disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N max | Number | undefined | 支持最多选中的数量 | N diff --git a/src/checkbox/defaultProps.ts b/src/checkbox/defaultProps.ts index c13e93ea9..27b341ce0 100644 --- a/src/checkbox/defaultProps.ts +++ b/src/checkbox/defaultProps.ts @@ -20,6 +20,7 @@ export const checkboxDefaultProps: TdCheckboxProps = { export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { borderless: false, + direction: 'vertical', disabled: undefined, max: undefined, readonly: undefined, diff --git a/src/checkbox/style/index.js b/src/checkbox/style/index.js index 3f5383520..2282d0245 100644 --- a/src/checkbox/style/index.js +++ b/src/checkbox/style/index.js @@ -1,3 +1,4 @@ import '../../_common/style/mobile/components/checkbox/_index.less'; +import '../../_common/style/mobile/components/checkbox-group/_index.less'; import './index.less'; diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts index 5538528b4..68bca5f3f 100644 --- a/src/checkbox/type.ts +++ b/src/checkbox/type.ts @@ -102,6 +102,11 @@ export interface TdCheckboxGroupProps { * @default false */ borderless?: boolean; + /** + * 复选框按钮排列方式 + * @default vertical + */ + direction?: 'vertical' | 'horizontal'; /** * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */ diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx index 62e6758b8..1816a4ca6 100644 --- a/src/radio/Radio.tsx +++ b/src/radio/Radio.tsx @@ -6,7 +6,7 @@ import parseTNode from '../_util/parseTNode'; import { usePrefixClass } from '../hooks/useClass'; import forwardRefWithStatics from '../_util/forwardRefWithStatics'; import useDefault from '../_util/useDefault'; -import type { TdRadioProps } from './type'; +import type { TdRadioProps, TdRadioGroupProps } from './type'; import type { StyledProps } from '../common'; import RadioGroup from './RadioGroup'; import useDefaultProps from '../hooks/useDefaultProps'; @@ -16,8 +16,10 @@ export interface RadioProps extends TdRadioProps, StyledProps { ref?: Ref; } +export type RadioInjectedProps = RadioProps & { direction?: TdRadioGroupProps['direction'] }; + export interface RadioContextValue { - inject: (props: RadioProps) => RadioProps; + inject: (props: RadioProps) => RadioInjectedProps; } export const RadioContext = createContext(null); @@ -55,7 +57,8 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref) => { onChange, readonly, children, - } = useDefaultProps(props, radioDefaultProps); + direction, + } = useDefaultProps(props, radioDefaultProps); const [radioChecked, setRadioChecked] = useDefault(checked, defaultChecked, onChange); @@ -109,6 +112,7 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref) => { `${radioClass}--${placement}`, { [`${radioClass}--block`]: block, + [`${radioClass}--${direction}`]: !!direction, }, className, ); diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx index e65f47bb8..80cd58938 100644 --- a/src/radio/RadioGroup.tsx +++ b/src/radio/RadioGroup.tsx @@ -2,9 +2,11 @@ import React, { useRef } from 'react'; import classNames from 'classnames'; import { get as lodashGet } from 'lodash-es'; import { StyledProps } from '../common'; -import useConfig from '../hooks/useConfig'; import Radio, { RadioContext, RadioContextValue, RadioProps } from './Radio'; import useDefault from '../_util/useDefault'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; +import { radioGroupDefaultProps } from './defaultProps'; import type { TdRadioGroupProps } from './type'; export interface RadioGroupProps extends TdRadioGroupProps, StyledProps { @@ -12,7 +14,7 @@ export interface RadioGroupProps extends TdRadioGroupProps, StyledProps { } const RadioGroup: React.FC = (props) => { - const { classPrefix } = useConfig(); + const radioGroupClass = usePrefixClass('radio-group'); const { disabled, icon, @@ -27,18 +29,20 @@ const RadioGroup: React.FC = (props) => { className, style, placement, + direction, keys, - } = props; + } = useDefaultProps(props, radioGroupDefaultProps); const groupRef = useRef(null); const [internalValue, setInternalValue] = useDefault(value, defaultValue, onChange); const context: RadioContextValue = { inject: (radioProps: RadioProps) => { - if (typeof radioProps.checked !== 'undefined') { - return radioProps; + const injectProps = { ...radioProps, direction } as RadioProps; + if (typeof injectProps.checked !== 'undefined') { + return injectProps; } return { - ...radioProps, + ...injectProps, checked: typeof internalValue !== 'undefined' && typeof radioProps.value !== 'undefined' && @@ -78,7 +82,11 @@ const RadioGroup: React.FC = (props) => { ); }); return ( -
+
{options?.length ? renderOptions() : children}
); diff --git a/src/radio/__tests__/radio.test.tsx b/src/radio/__tests__/radio.test.tsx index 89fcaf091..d4da9bdfb 100644 --- a/src/radio/__tests__/radio.test.tsx +++ b/src/radio/__tests__/radio.test.tsx @@ -247,6 +247,41 @@ describe('RadioGroup', () => { expect(targetElTitle.textContent.trim()).toBe('radio'); }); + it('direction', () => { + const options = [1, 2]; + + // 默认 vertical，group 与子组件均带 vertical 修饰类 + const { container, rerender } = render(); + expect(container.querySelector(`${name}-group--vertical`)).toBeTruthy(); + expect(container.querySelector(`${name}-group--horizontal`)).toBeFalsy(); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(2); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(0); + + // vertical -> horizontal + rerender(); + expect(container.querySelector(`${name}-group--horizontal`)).toBeTruthy(); + expect(container.querySelector(`${name}-group--vertical`)).toBeFalsy(); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(2); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(0); + + // horizontal -> vertical + rerender(); + expect(container.querySelector(`${name}-group--vertical`)).toBeTruthy(); + expect(container.querySelector(`${name}-group--horizontal`)).toBeFalsy(); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(2); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(0); + + // 受控子项（自身传入 checked）也应从 group 继承 direction 修饰类 + rerender( + + + + , + ); + expect(container.querySelectorAll(`${name}--horizontal`)).toHaveLength(2); + expect(container.querySelectorAll(`${name}--vertical`)).toHaveLength(0); + }); + it('inject', () => { const { container } = render( diff --git a/src/radio/_example/horizontal.tsx b/src/radio/_example/horizontal.tsx index e67c4ba97..236b69aaa 100644 --- a/src/radio/_example/horizontal.tsx +++ b/src/radio/_example/horizontal.tsx @@ -4,10 +4,15 @@ import { Radio, RadioGroup } from 'tdesign-mobile-react'; export default function Base() { const [defaultValue, setDefaultValue] = useState('idx0'); return ( - setDefaultValue(value)}> - - - + setDefaultValue(value)} + > + + + ); } diff --git a/src/radio/_example/style/index.less b/src/radio/_example/style/index.less index ecfa21db4..d2e632245 100644 --- a/src/radio/_example/style/index.less +++ b/src/radio/_example/style/index.less @@ -4,8 +4,6 @@ .horizontal { padding: 16px; - display: flex; - justify-content: space-between; } .theme-card { diff --git a/src/radio/defaultProps.ts b/src/radio/defaultProps.ts index 6b54fd849..39123ed75 100644 --- a/src/radio/defaultProps.ts +++ b/src/radio/defaultProps.ts @@ -20,6 +20,7 @@ export const radioDefaultProps: TdRadioProps = { export const radioGroupDefaultProps: TdRadioGroupProps = { allowUncheck: false, borderless: false, + direction: 'vertical', disabled: undefined, icon: 'circle', placement: 'left', diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index b99acc627..a45a63e4e 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -36,6 +36,7 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N allowUncheck | Boolean | false | \- | N borderless | Boolean | false | \- | N +direction | String | vertical | `1.0.0`。Radio option arrangement。options: vertical/horizontal | N disabled | Boolean | undefined | \- | N icon | String / Array | 'circle' | Typescript: `'circle' \| 'line' \| 'dot' \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/radio/radio.md b/src/radio/radio.md index de46c8039..afd7257f0 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -36,6 +36,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowUncheck | Boolean | false | 是否允许取消选中 | N borderless | Boolean | false | 是否开启无边框模式；优先级低于 Radio | N +direction | String | vertical | `1.0.0`。单选框按钮排列方式。可选项：vertical/horizontal | N disabled | Boolean | undefined | 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled | N icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标。TS 类型：`'circle' \| 'line' \| 'dot' \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/radio/style/index.js b/src/radio/style/index.js index e42f514af..bad86cf8e 100644 --- a/src/radio/style/index.js +++ b/src/radio/style/index.js @@ -1 +1,2 @@ import '../../_common/style/mobile/components/radio/_index.less'; +import '../../_common/style/mobile/components/radio-group/_index.less'; diff --git a/src/radio/type.ts b/src/radio/type.ts index 5e2092786..9dff0f602 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -101,6 +101,11 @@ export interface TdRadioGroupProps { * @default false */ borderless?: boolean; + /** + * 单选框按钮排列方式 + * @default vertical + */ + direction?: 'vertical' | 'horizontal'; /** * 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled */ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index e4d0c5767..f71262e34 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -28880,10 +28880,10 @@ exports[`csr snapshot test > csr test src/cascader/_example/base.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/base.tsx 1`] = `
csr test src/cascader/_example/check-strictly.tsx 1 class="t-cascader-radio-group-0" >
csr test src/cascader/_example/check-strictly.tsx 1
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-1" >
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-2" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-1" >
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-2" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/index.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = ` class="t-cascader-radio-group-1" >
csr test src/cascader/_example/keys.tsx 1`] = ` class="t-cascader-radio-group-2" >
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/keys.tsx 1`] = `
csr test src/cascader/_example/lazy.tsx 1`] = ` class="t-cascader-radio-group-0" >
csr test src/cascader/_example/theme-tab.tsx 1`] = class="t-cascader-radio-group-0" >
csr test src/cascader/_example/theme-tab.tsx 1`] =
csr test src/cascader/_example/with-title.tsx 1`] = class="t-cascader-radio-group-0" >
csr test src/cascader/_example/with-title.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] = class="t-cascader-radio-group-0" >
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] = class="t-cascader-radio-group-1" >
csr test src/cascader/_example/with-value.tsx 1`] = class="t-cascader-radio-group-2" >
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cascader/_example/with-value.tsx 1`] =
csr test src/cell/_example/single.tsx 1`] = ` exports[`csr snapshot test > csr test src/checkbox/_example/all.tsx 1`] = `
csr test src/checkbox/_example/all.tsx 1`] = ` />
csr test src/checkbox/_example/all.tsx 1`] = ` />
csr test src/checkbox/_example/all.tsx 1`] = ` />
csr test src/checkbox/_example/all.tsx 1`] = ` exports[`csr snapshot test > csr test src/checkbox/_example/base.tsx 1`] = `
csr test src/checkbox/_example/base.tsx 1`] = ` />
csr test src/checkbox/_example/base.tsx 1`] = ` />
csr test src/checkbox/_example/base.tsx 1`] = ` />
csr test src/checkbox/_example/base.tsx 1`] = ` exports[`csr snapshot test > csr test src/checkbox/_example/card.tsx 1`] = `
csr test src/checkbox/_example/card.tsx 1`] = ` />
csr test src/checkbox/_example/card.tsx 1`] = ` />
csr test src/checkbox/_example/card.tsx 1`] = ` exports[`csr snapshot test > csr test src/checkbox/_example/horizontal.tsx 1`] = `
csr test src/checkbox/_example/horizontal.tsx 1`] =
csr test src/checkbox/_example/horizontal.tsx 1`] =
csr test src/checkbox/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/checkbox/_example/index.tsx 1`] = `
csr test src/checkbox/_example/index.tsx 1`] = `
csr test src/checkbox/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` />
csr test src/checkbox/_example/index.tsx 1`] = ` >
csr test src/checkbox/_example/index.tsx 1`] = `
csr test src/checkbox/_example/index.tsx 1`] = `
csr test src/checkbox/_example/index.tsx 1`] = ` class="card " >
csr test src/checkbox/_example/index.tsx 1`] = ` 横向卡片多选框
csr test src/checkbox/_example/index.tsx 1`] = `
csr test src/checkbox/_example/index.tsx 1`] = `
csr test src/checkbox/_example/index.tsx 1`] = ` class="card " >
csr test src/checkbox/_example/special.tsx 1`] = `
csr test src/checkbox/_example/special.tsx 1`] = `
csr test src/checkbox/_example/special.tsx 1`] = `
csr test src/checkbox/_example/special.tsx 1`] = ` class="card " >
csr test src/checkbox/_example/special.tsx 1`] = ` 横向卡片多选框
csr test src/checkbox/_example/special.tsx 1`] = `
csr test src/checkbox/_example/special.tsx 1`] = `
csr test src/checkbox/_example/special.tsx 1`] = ` class="card " >
csr test src/checkbox/_example/special.tsx 1`] = ` exports[`csr snapshot test > csr test src/checkbox/_example/status.tsx 1`] = `
csr test src/checkbox/_example/status.tsx 1`] = ` />
csr test src/form/_example/horizontal.tsx 1`] = ` class="t-form__controls-content t-form__controls--undefined" >
csr test src/form/_example/horizontal.tsx 1`] = `
csr test src/form/_example/horizontal.tsx 1`] = `
csr test src/form/_example/index.tsx 1`] = ` class="t-form__controls-content t-form__controls--undefined" >
csr test src/form/_example/index.tsx 1`] = `
csr test src/form/_example/index.tsx 1`] = `
csr test src/form/_example/vertical.tsx 1`] = ` class="t-form__controls-content t-form__controls--undefined" >
csr test src/form/_example/vertical.tsx 1`] = `
csr test src/form/_example/vertical.tsx 1`] = `
csr test src/qrcode/_example/status.tsx 1`] = ` exports[`csr snapshot test > csr test src/radio/_example/base.tsx 1`] = `
csr test src/radio/_example/base.tsx 1`] = ` />
csr test src/radio/_example/base.tsx 1`] = ` />
csr test src/radio/_example/base.tsx 1`] = ` />
csr test src/radio/_example/base.tsx 1`] = ` exports[`csr snapshot test > csr test src/radio/_example/card.tsx 1`] = `
csr test src/radio/_example/card.tsx 1`] = ` />
csr test src/radio/_example/card.tsx 1`] = ` />
csr test src/radio/_example/custom.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/radio/_example/custom.tsx 1`] = `
csr test src/radio/_example/custom.tsx 1`] = ` class="card " >
csr test src/radio/_example/custom.tsx 1`] = ` class="card " >
csr test src/radio/_example/custom.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/radio/_example/custom.tsx 1`] = `
csr test src/radio/_example/custom.tsx 1`] = ` class="card " >
csr test src/radio/_example/custom.tsx 1`] = ` class="card " >
csr test src/radio/_example/custom.tsx 1`] = ` exports[`csr snapshot test > csr test src/radio/_example/horizontal.tsx 1`] = `
csr test src/radio/_example/horizontal.tsx 1`] = ` 单选标题
+
csr test src/radio/_example/horizontal.tsx 1`] = ` 单选标题
+
csr test src/radio/_example/horizontal.tsx 1`] = ` 上限四字
+
@@ -97658,10 +97667,10 @@ exports[`csr snapshot test > csr test src/radio/_example/index.tsx 1`] = ` class="radio-demo" >
csr test src/radio/_example/index.tsx 1`] = ` />
csr test src/radio/_example/index.tsx 1`] = ` />
csr test src/radio/_example/index.tsx 1`] = ` />
csr test src/radio/_example/index.tsx 1`] = ` class="radio-demo" >
csr test src/radio/_example/index.tsx 1`] = ` 单选标题
+
csr test src/radio/_example/index.tsx 1`] = ` 单选标题
+
csr test src/radio/_example/index.tsx 1`] = ` 上限四字
+
@@ -98237,10 +98255,10 @@ exports[`csr snapshot test > csr test src/radio/_example/index.tsx 1`] = ` class="radio-demo" >
csr test src/radio/_example/index.tsx 1`] = ` />
csr test src/radio/_example/index.tsx 1`] = ` />
csr test src/radio/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/radio/_example/index.tsx 1`] = `
csr test src/radio/_example/index.tsx 1`] = ` class="card " >
csr test src/radio/_example/index.tsx 1`] = ` class="card " >
csr test src/radio/_example/index.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/radio/_example/index.tsx 1`] = `
csr test src/radio/_example/index.tsx 1`] = ` class="card " >
csr test src/radio/_example/index.tsx 1`] = ` class="card " >
csr test src/tree-select/_example/base.tsx 1`] = ` class="t-tree-select__column t-tree-select__column--right" >
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/base.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = ` class="t-tree-select__column t-tree-select__column--right" >
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = ` class="t-tree-select__column t-tree-select__column--right" >
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = ` class="t-tree-select__column t-tree-select__column--right" >
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/index.tsx 1`] = `
csr test src/tree-select/_example/multiple.tsx 1`] class="t-tree-select__column t-tree-select__column--right" >
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/multiple.tsx 1`]
csr test src/tree-select/_example/normal.tsx 1`] = class="t-tree-select__column t-tree-select__column--right" >
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
csr test src/tree-select/_example/normal.tsx 1`] =
ssr test src/calendar/_example/switch-mode.tsx 1`] exports[`ssr snapshot test > ssr test src/calendar/_example/without-popup.tsx 1`] = `"
请选择日期
日
一
二
三
四
五
六
2020 年 12 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2021 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2021 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2021 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2021 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2021 年 5 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2021 年 6 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"
地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `"
地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"

Cascader 级联选择器

用于多层级数据的逐级选择。

01 组件类型

垂直级联选择器

地址
请选择地址

水平级联选择器

地址
请选择地址

02 进阶

带初始值

地址
请选择地址

自定义 keys

地址
请选择地址

使用次级标题

地址
请选择地址

异步加载

地址
请选择地址

选择任意一项

地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"

Cascader 级联选择器

用于多层级数据的逐级选择。

01 组件类型

垂直级联选择器

地址
请选择地址

水平级联选择器

地址
请选择地址

02 进阶

带初始值

地址
请选择地址

自定义 keys

地址
请选择地址

使用次级标题

地址
请选择地址

异步加载

地址
请选择地址

选择任意一项

地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"
地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/lazy.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/lazy.tsx 1`] = `"
地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `"
地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `"
地址
请选择地址
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `"
地址
请选择地址
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `"
地址
请选择地址
"`; exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; @@ -165775,21 +165793,21 @@ exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
  • ssr test src/cell/_example/single.tsx 1`] = `"
    单行标题
    单行标题 *
    单行标题
    16
    单行标题
    单行标题
    辅助信息
    单行标题
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `"
    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `"
    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `"
    多选标题
    多选标题
    上限四字
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `"
    多选标题
    多选标题
    上限四字
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `"

    Checkbox 多选框

    用于预设的一组选项中执行多项选择，并呈现选择结果。

    01 组件类型

    纵向多选框

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向多选框

    多选标题
    多选标题
    上限四字

    带全选多选框

    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息

    02 组件状态

    多选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    多选
    多选
    图片图标

    勾选显示位置

    多选
    多选

    非通栏多选样式

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题

    04 组件规格

    多选框尺寸规格

    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `"

    Checkbox 多选框

    用于预设的一组选项中执行多项选择，并呈现选择结果。

    01 组件类型

    纵向多选框

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向多选框

    多选标题
    多选标题
    上限四字

    带全选多选框

    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息

    02 组件状态

    多选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    多选
    多选
    图片图标

    勾选显示位置

    多选
    多选

    非通栏多选样式

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题

    04 组件规格

    多选框尺寸规格

    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; exports[`ssr snapshot test > ssr test src/checkbox/_example/right.tsx 1`] = `"
    多选
    多选
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `"
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `"
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `"
    选项禁用-已选
    选项禁用-默认
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `"
    选项禁用-已选
    选项禁用-默认
    "`; exports[`ssr snapshot test > ssr test src/checkbox/_example/type.tsx 1`] = `"
    多选
    多选
    图片图标
    "`; @@ -165921,11 +165939,11 @@ exports[`ssr snapshot test > ssr test src/footer/_example/links.tsx 1`] = `"
    ssr test src/footer/_example/logo.tsx 1`] = `"
    Copyright © 2019-2023 TDesign.All Rights Reserved.
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
    标题文字
    8
    标题文字
    13
    标题五字内
    NEW
    标题五字内
    "`; @@ -166181,17 +166199,17 @@ exports[`ssr snapshot test > ssr test src/qrcode/_example/size.tsx 1`] = `"
    ssr test src/qrcode/_example/status.tsx 1`] = `"

    expired

    二维码过期

    点击刷新

    loading

    scanned

    已扫描

    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `"

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `"

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `"
    单选标题
    单选标题
    上限四字
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `"
    单选标题
    单选标题
    上限四字
    "`; exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `"
    单选
    单选
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `"

    Radio 单选框

    用于在预设的一组选项中执行单项选择，并呈现选择结果。

    01 组件类型

    纵向单选框

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向单选框

    单选标题
    单选标题
    上限四字

    02 组件状态

    单选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    单选
    单选

    勾选显示位置

    单选
    单选

    非通栏单选样式

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行

    04 特殊样式

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `"

    Radio 单选框

    用于在预设的一组选项中执行单项选择，并呈现选择结果。

    01 组件类型

    纵向单选框

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向单选框

    单选标题
    单选标题
    上限四字

    02 组件状态

    单选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    单选
    单选

    勾选显示位置

    单选
    单选

    非通栏单选样式

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行

    04 特殊样式

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `"
    单选
    单选
    "`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 5abc52d68..810d9229f 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -84,21 +84,21 @@ exports[`ssr snapshot test > ssr test src/calendar/_example/switch-mode.tsx 1`] exports[`ssr snapshot test > ssr test src/calendar/_example/without-popup.tsx 1`] = `"
    请选择日期
    日
    一
    二
    三
    四
    五
    六
    2020 年 12 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    2021 年 1 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    2021 年 2 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    2021 年 3 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    2021 年 4 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    2021 年 5 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    2021 年 6 月
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"
    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `"
    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"

    Cascader 级联选择器

    用于多层级数据的逐级选择。

    01 组件类型

    垂直级联选择器

    地址
    请选择地址

    水平级联选择器

    地址
    请选择地址

    02 进阶

    带初始值

    地址
    请选择地址

    自定义 keys

    地址
    请选择地址

    使用次级标题

    地址
    请选择地址

    异步加载

    地址
    请选择地址

    选择任意一项

    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"

    Cascader 级联选择器

    用于多层级数据的逐级选择。

    01 组件类型

    垂直级联选择器

    地址
    请选择地址

    水平级联选择器

    地址
    请选择地址

    02 进阶

    带初始值

    地址
    请选择地址

    自定义 keys

    地址
    请选择地址

    使用次级标题

    地址
    请选择地址

    异步加载

    地址
    请选择地址

    选择任意一项

    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"
    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/lazy.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/lazy.tsx 1`] = `"
    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `"
    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `"
    地址
    请选择地址
    "`; -exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `"
    地址
    请选择地址
    "`; +exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `"
    地址
    请选择地址
    "`; exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
    单行标题
    单行标题
    单行标题
    "`; @@ -108,21 +108,21 @@ exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
  • ssr test src/cell/_example/single.tsx 1`] = `"
    单行标题
    单行标题 *
    单行标题
    16
    单行标题
    单行标题
    辅助信息
    单行标题
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `"
    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `"
    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `"
    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `"
    多选标题
    多选标题
    上限四字
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `"
    多选标题
    多选标题
    上限四字
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `"

    Checkbox 多选框

    用于预设的一组选项中执行多项选择，并呈现选择结果。

    01 组件类型

    纵向多选框

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向多选框

    多选标题
    多选标题
    上限四字

    带全选多选框

    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息

    02 组件状态

    多选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    多选
    多选
    图片图标

    勾选显示位置

    多选
    多选

    非通栏多选样式

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题

    04 组件规格

    多选框尺寸规格

    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `"

    Checkbox 多选框

    用于预设的一组选项中执行多项选择，并呈现选择结果。

    01 组件类型

    纵向多选框

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
    多选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向多选框

    多选标题
    多选标题
    上限四字

    带全选多选框

    全选
    多选
    多选
    多选
    单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息

    02 组件状态

    多选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    多选
    多选
    图片图标

    勾选显示位置

    多选
    多选

    非通栏多选样式

    多选
    多选
    多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题

    04 组件规格

    多选框尺寸规格

    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; exports[`ssr snapshot test > ssr test src/checkbox/_example/right.tsx 1`] = `"
    多选
    多选
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `"
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `"
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    多选
    描述信息描述信息描述信息描述信息描述信息
    横向卡片多选框
    多选
    多选
    多选
    "`; -exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `"
    选项禁用-已选
    选项禁用-默认
    "`; +exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `"
    选项禁用-已选
    选项禁用-默认
    "`; exports[`ssr snapshot test > ssr test src/checkbox/_example/type.tsx 1`] = `"
    多选
    多选
    图片图标
    "`; @@ -254,11 +254,11 @@ exports[`ssr snapshot test > ssr test src/footer/_example/links.tsx 1`] = `"
    ssr test src/footer/_example/logo.tsx 1`] = `"
    Copyright © 2019-2023 TDesign.All Rights Reserved.
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
    标题文字
    8
    标题文字
    13
    标题五字内
    NEW
    标题五字内
    "`; @@ -514,17 +514,17 @@ exports[`ssr snapshot test > ssr test src/qrcode/_example/size.tsx 1`] = `"
    ssr test src/qrcode/_example/status.tsx 1`] = `"

    expired

    二维码过期

    点击刷新

    loading

    scanned

    已扫描

    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `"
    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `"

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `"

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `"
    单选标题
    单选标题
    上限四字
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `"
    单选标题
    单选标题
    上限四字
    "`; exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `"
    单选
    单选
    "`; -exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `"

    Radio 单选框

    用于在预设的一组选项中执行单项选择，并呈现选择结果。

    01 组件类型

    纵向单选框

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向单选框

    单选标题
    单选标题
    上限四字

    02 组件状态

    单选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    单选
    单选

    勾选显示位置

    单选
    单选

    非通栏单选样式

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行

    04 特殊样式

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; +exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `"

    Radio 单选框

    用于在预设的一组选项中执行单项选择，并呈现选择结果。

    01 组件类型

    纵向单选框

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
    单选
    描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

    横向单选框

    单选标题
    单选标题
    上限四字

    02 组件状态

    单选框状态

    选项禁用-已选
    选项禁用-默认

    03 组件样式

    勾选样式

    单选
    单选

    勾选显示位置

    单选
    单选

    非通栏单选样式

    单选
    单选
    单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行

    04 特殊样式

    纵向卡片单选框

    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息
    单选
    描述信息描述信息描述信息描述信息描述信息

    横向卡片单选框

    单选
    单选
    单选
    "`; exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `"
    单选
    单选
    "`; From 159358521bc06f6f21d03fe25c1840c2a83cb167 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Wed, 30 Sep 2026 17:19:55 +0800 Subject: [PATCH 09/24] test: fix React act(...) warnings in unit tests (#985) --- .../__tests__/ActionSheetMethod.test.tsx | 90 +++++++++++-------- src/collapse/__tests__/collapse.test.tsx | 10 ++- src/dialog/__tests__/dialog.test.tsx | 22 ++--- src/form/__tests__/form.test.tsx | 10 ++- src/guide/__tests__/guide.test.tsx | 42 ++++++--- src/message/__tests__/message.test.tsx | 8 +- .../__tests__/pull-down-refresh.test.tsx | 6 +- src/qrcode/__tests__/qrcode.test.tsx | 6 +- 8 files changed, 124 insertions(+), 70 deletions(-) diff --git a/src/action-sheet/__tests__/ActionSheetMethod.test.tsx b/src/action-sheet/__tests__/ActionSheetMethod.test.tsx index ac8804cea..bd5440ac3 100644 --- a/src/action-sheet/__tests__/ActionSheetMethod.test.tsx +++ b/src/action-sheet/__tests__/ActionSheetMethod.test.tsx @@ -1,10 +1,12 @@ -import { describe, it, expect, afterEach } from '@test/utils'; +import { describe, it, expect, afterEach, act } from '@test/utils'; import { show, close } from '../ActionSheetMethod'; describe('ActionSheetMethod', () => { - afterEach(() => { + afterEach(async () => { // 清理每次测试后可能残留的 ActionSheet - close(); + await act(async () => { + close(); + }); }); describe('module exports', () => { @@ -13,51 +15,63 @@ describe('ActionSheetMethod', () => { expect(typeof close).toBe('function'); }); - it('should be able to call show function', () => { - expect(() => { - show({ - items: ['Item 1', 'Item 2'], - }); - }).not.toThrow(); + it('should be able to call show function', async () => { + await act(async () => { + expect(() => { + show({ + items: ['Item 1', 'Item 2'], + }); + }).not.toThrow(); + }); }); - it('should be able to call close function', () => { - expect(() => { - close(); - }).not.toThrow(); + it('should be able to call close function', async () => { + await act(async () => { + expect(() => { + close(); + }).not.toThrow(); + }); }); - it('should handle show with empty config', () => { - expect(() => { - show({}); - }).not.toThrow(); + it('should handle show with empty config', async () => { + await act(async () => { + expect(() => { + show({}); + }).not.toThrow(); + }); }); - it('should handle show with various config options', () => { - expect(() => { - show({ - items: ['Test Item'], - theme: 'grid', - description: 'Test Description', - visible: true, - }); - }).not.toThrow(); + it('should handle show with various config options', async () => { + await act(async () => { + expect(() => { + show({ + items: ['Test Item'], + theme: 'grid', + description: 'Test Description', + visible: true, + }); + }).not.toThrow(); + }); }); - it('should handle multiple show calls', () => { - expect(() => { - show({ items: ['Item 1'] }); - show({ items: ['Item 2'] }); - }).not.toThrow(); + it('should handle multiple show calls', async () => { + await act(async () => { + expect(() => { + show({ items: ['Item 1'] }); + show({ items: ['Item 2'] }); + }).not.toThrow(); + }); }); - it('should handle show and close sequence', () => { - expect(() => { - show({ items: ['Item 1'] }); - close(); - show({ items: ['Item 2'] }); - close(); - }).not.toThrow(); + it('should handle show and close sequence', async () => { + await act(async () => { + expect(() => { + show({ items: ['Item 1'] }); + close(); + show({ items: ['Item 2'] }); + close(); + }).not.toThrow(); + }); }); }); }); diff --git a/src/collapse/__tests__/collapse.test.tsx b/src/collapse/__tests__/collapse.test.tsx index 3affc7df6..b18a47ee9 100644 --- a/src/collapse/__tests__/collapse.test.tsx +++ b/src/collapse/__tests__/collapse.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { describe, expect, it, render, fireEvent, vi, beforeEach, afterEach, waitFor } from '@test/utils'; +import { describe, expect, it, render, fireEvent, vi, beforeEach, afterEach, waitFor, act } from '@test/utils'; import { Collapse, CollapsePanel } from 'tdesign-mobile-react'; describe('Collapse', () => { @@ -426,7 +426,9 @@ describe('Collapse', () => { fireEvent.click(panels[1]); // 此时应该有一次debounced调用 - vi.advanceTimersByTime(150); + act(() => { + vi.advanceTimersByTime(150); + }); // 验证最终状态 expect(onChange).toHaveBeenCalled(); @@ -452,7 +454,9 @@ describe('Collapse', () => { fireEvent.click(panels[0]); // 等待debounce - vi.advanceTimersByTime(150); + act(() => { + vi.advanceTimersByTime(150); + }); // 验证行为 expect(onChange).toHaveBeenCalled(); diff --git a/src/dialog/__tests__/dialog.test.tsx b/src/dialog/__tests__/dialog.test.tsx index 1d6d5225f..509ad7aa0 100644 --- a/src/dialog/__tests__/dialog.test.tsx +++ b/src/dialog/__tests__/dialog.test.tsx @@ -201,12 +201,14 @@ describe('Dialog', () => { onClosed, }); }); - instance.hide(); - - setTimeout(() => { - expect(document.querySelector(name)).toBeFalsy(); - expect(onClosed).toHaveBeenCalled(); - }, 1000); + await act(async () => { + instance.hide(); + }); + await act(async () => { + vi.advanceTimersByTime(1000); + }); + expect(document.querySelector(name)).toBeFalsy(); + expect(onClosed).toHaveBeenCalled(); }); it(': update', async () => { @@ -218,10 +220,10 @@ describe('Dialog', () => { onCancel: vi.fn(), }); }); - instance.update({ title: '新标题' }); - setInterval(() => { - expect(document.querySelector(`${name}__header`).textContent).toBe('新标题'); - }, 1000); + await act(async () => { + instance.update({ title: '新标题' }); + }); + expect(document.querySelector(`${name}__header`).textContent).toBe('新标题'); }); it(': destroy', async () => { diff --git a/src/form/__tests__/form.test.tsx b/src/form/__tests__/form.test.tsx index 52c17ac63..a89d7f1df 100644 --- a/src/form/__tests__/form.test.tsx +++ b/src/form/__tests__/form.test.tsx @@ -1690,7 +1690,7 @@ describe('Form 组件测试', () => { expect(() => requestSubmit({} as any)).toThrow('target must be HTMLFormElement'); }); - it('HTMLFormElement 正常工作', () => { + it('HTMLFormElement 正常工作', async () => { const { container } = render(
    @@ -1698,7 +1698,9 @@ describe('Form 组件测试', () => {
    , ); - expect(() => requestSubmit(container.querySelector('form') as HTMLFormElement)).not.toThrow(); + await act(async () => { + expect(() => requestSubmit(container.querySelector('form') as HTMLFormElement)).not.toThrow(); + }); }); }); @@ -1804,7 +1806,7 @@ describe('Form 组件测试', () => { expect((getByPlaceholderText('name') as HTMLInputElement).value).toBe('delayed'); }); - it('taskQueue 延迟执行 - setFields/submit/reset/clearValidate/setValidateMessage', () => { + it('taskQueue 延迟执行 - setFields/submit/reset/clearValidate/setValidateMessage', async () => { const submitFn = vi.fn(); const TestForm = () => { const [form] = Form.useForm(); @@ -1832,6 +1834,7 @@ describe('Form 组件测试', () => { }; render(); // taskQueue 方法在 flashQueue 时执行，不崩溃即可 + await mockDelay(); }); }); @@ -2490,6 +2493,7 @@ describe('Form 组件测试', () => { ); // 无 onSubmit 时不崩溃 expect(() => fireEvent.click(getByText('submit'))).not.toThrow(); + await mockDelay(); }); it('onReset 不传时 reset 正常工作', async () => { diff --git a/src/guide/__tests__/guide.test.tsx b/src/guide/__tests__/guide.test.tsx index a457b6daf..d5e026df7 100644 --- a/src/guide/__tests__/guide.test.tsx +++ b/src/guide/__tests__/guide.test.tsx @@ -1,5 +1,5 @@ import '@testing-library/jest-dom'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; import React from 'react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import Guide from '../Guide'; @@ -850,7 +850,9 @@ describe('Guide Component', () => { render(); // 快进定时器 - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); const portal = document.querySelector('.t-portal-wrapper'); expect(portal).toBeInTheDocument(); @@ -863,11 +865,15 @@ describe('Guide Component', () => { // 超时后应可见 vi.useFakeTimers(); - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // 更改 current 触发可见性变化 rerender(); - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); const portal = document.querySelector('.t-portal-wrapper'); expect(portal).toBeInTheDocument(); @@ -889,7 +895,9 @@ describe('Guide Component', () => { render(); // 快进定时器以触发 showDialogGuide（内部调用 scrollToParentVisibleArea） - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // 应调用 scrollToParentVisibleArea const portal = document.querySelector('.t-portal-wrapper'); @@ -907,7 +915,9 @@ describe('Guide Component', () => { expect(portal).toBeInTheDocument(); // 快进定时器触发 showGuide 内的 setTimeout - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // 超时后设置为可见 portal = document.querySelector('.t-portal-wrapper'); @@ -930,7 +940,9 @@ describe('Guide Component', () => { render(); // 快进定时器以触发 setReferenceFullW（可能存在空元素） - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // setReferenceFullW 应优雅处理空元素 const portal = document.querySelector('.t-portal-wrapper'); @@ -1152,7 +1164,9 @@ describe('Guide Component', () => { render(); // 快进定时器以触发 showPopoverGuide（其以 isReference=true 调用 setHighlightLayerPosition） - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // 组件应渲染自定义高亮 expect(screen.getByTestId('custom-highlight-ref')).toBeInTheDocument(); @@ -1204,7 +1218,9 @@ describe('Guide Component', () => { render(); // 快进定时器以触发 showPopoverGuide - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // 气泡模式下居中应调用 setReferenceFullW const portal = document.querySelector('.t-portal-wrapper'); @@ -1227,7 +1243,9 @@ describe('Guide Component', () => { render(); // 快进定时器以触发 showDialogGuide - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // showDialogGuide 应无错执行 const portal = document.querySelector('.t-portal-wrapper'); @@ -1245,7 +1263,9 @@ describe('Guide Component', () => { expect(portal).toBeInTheDocument(); // 快进定时器触发 setPopoverVisible(true) - vi.advanceTimersByTime(100); + act(() => { + vi.advanceTimersByTime(100); + }); // 现在气泡应可见 portal = document.querySelector('.t-portal-wrapper'); diff --git a/src/message/__tests__/message.test.tsx b/src/message/__tests__/message.test.tsx index 3fb792b82..37593755b 100644 --- a/src/message/__tests__/message.test.tsx +++ b/src/message/__tests__/message.test.tsx @@ -264,7 +264,9 @@ describe('Message', () => { expect(textEl).toMatchSnapshot(); // Fire transitionend -> snapshot reset state - textEl.dispatchEvent(new Event('transitionend')); + act(() => { + textEl.dispatchEvent(new Event('transitionend')); + }); expect(textEl).toMatchSnapshot(); // Next play after delay (playedCount > 0): snapshot styles applied @@ -290,7 +292,9 @@ describe('Message', () => { expect(textEl).toMatchSnapshot(); // Fire transitionend -> snapshot reset state - textEl.dispatchEvent(new Event('transitionend')); + act(() => { + textEl.dispatchEvent(new Event('transitionend')); + }); expect(textEl).toMatchSnapshot(); // Next play after delay (playedCount > 0): snapshot styles applied diff --git a/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx b/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx index c57d8f8b4..4e71aa715 100644 --- a/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx +++ b/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx @@ -167,7 +167,7 @@ describe('PullDownRefresh', () => { expect(container.querySelector(name)).toBeTruthy(); }); - it(': maxBarHeight with string', () => { + it(': maxBarHeight with string', async () => { const { container } = render(
    content
    @@ -177,6 +177,8 @@ describe('PullDownRefresh', () => { const track = container.querySelector(`${name}__track`) as HTMLElement; mockPullDown(track!, 60, 2, 0); + // 等待 doRefresh 内的异步状态更新在 act 中完成 + await act(async () => {}); expect(track).toHaveStyle({ transform: 'translate3d(0, 50px, 0)' }); }); @@ -366,6 +368,8 @@ describe('PullDownRefresh', () => { // absX = 0, absY = 60 mockPullDown(track!, 80, 4, 0); + // 等待 doRefresh 内的异步状态更新在 act 中完成 + await act(async () => {}); expect(mockRefresh).toHaveBeenCalled(); }); diff --git a/src/qrcode/__tests__/qrcode.test.tsx b/src/qrcode/__tests__/qrcode.test.tsx index a81c4fd3a..93273249a 100644 --- a/src/qrcode/__tests__/qrcode.test.tsx +++ b/src/qrcode/__tests__/qrcode.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { describe, it, expect, render, fireEvent, waitFor, vi, cleanup, afterEach } from '@test/utils'; +import { describe, it, expect, render, fireEvent, waitFor, vi, cleanup, afterEach, act } from '@test/utils'; import QRCode from '../QRCode'; import { QRCodeSVG } from '../QRCodeSVG'; @@ -250,7 +250,9 @@ describe('QRCodeCanvas - image settings, excavation and crossOrigin (merged)', ( Object.defineProperty(img, 'naturalWidth', { configurable: true, get: () => 10 }); Object.defineProperty(img, 'naturalHeight', { configurable: true, get: () => 10 }); - img.dispatchEvent(new Event('load')); + act(() => { + img.dispatchEvent(new Event('load')); + }); await waitFor(() => { const alphaSets = calls.globalAlpha || []; From 3e02e211606c70dbd34da9c891c274d88a8e234c Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 30 Sep 2026 17:31:26 +0800 Subject: [PATCH 10/24] fix(Input): fix style error of password input (#988) * fix(Input): fix style error of password input * test: update snapshots * chore: update snapshot --------- Co-authored-by: github-actions[bot] --- src/_common | 2 +- src/input/Input.tsx | 1 + test/snap/__snapshots__/csr.test.jsx.snap | 20 ++++++++++---------- test/snap/__snapshots__/ssr.test.jsx.snap | 10 +++++----- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/_common b/src/_common index 0c9b38898..57b8724fe 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 0c9b38898608d9f558d4e85a38843bd85db241e8 +Subproject commit 57b8724fe14f0e3350708b69414c71526c737549 diff --git a/src/input/Input.tsx b/src/input/Input.tsx index 68831513e..7d2db95db 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -69,6 +69,7 @@ const Input = forwardRef((props, ref) => { [`${rootClassName}--${align}`]: align !== 'left', [`${rootClassName}--${status}`]: status, [`${rootClassName}__control--disabled`]: disabled, + [`${rootClassName}--password`]: renderType === 'password', }); const rootClasses = classNames(`${rootClassName}`, { [`${rootClassName}--layout-${layout}`]: layout, diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index f71262e34..bfc0407a3 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -60687,7 +60687,7 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = ` class="t-input__content t-input--default" > csr test src/form/_example/index.tsx 1`] = ` class="t-input__content t-input--default" > csr test src/form/_example/vertical.tsx 1`] = ` class="t-input__content t-input--default" > csr test src/input/_example/index.tsx 1`] = ` class="t-input__content t-input--default" > csr test src/input/_example/special.tsx 1`] = ` class="t-input__content t-input--default" > ssr test src/footer/_example/links.tsx 1`] = `"
    ssr test src/footer/_example/logo.tsx 1`] = `"
    Copyright © 2019-2023 TDesign.All Rights Reserved.
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
    标题文字
    8
    标题文字
    13
    标题五字内
    NEW
    标题五字内
    "`; @@ -166023,7 +166023,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `" ssr test src/input/_example/custom.tsx 1`] = `"
    标签文字
    "`; -exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `"

    Input 输入框

    用于单行文本信息输入。

    01 组件类型

    基础输入框

    标签文字
    标签文字

    带字数限制输入框

    标签文字
    最大输入10个字符
    标签文字
    最大输入10个字符，汉字算两个

    带操作输入框

    标签文字
    标签文字
    标签文字

    带图标输入框

    标签文字

    特定类型输入框

    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个

    02 组件状态

    输入框状态

    标签文字
    辅助说明
    不可编辑

    信息超长状态

    标签超长时最多十个字

    03 组件样式

    内容位置

    左对齐
    居中
    右对齐

    竖排样式

    标签文字

    非通栏样式

    标签文字

    标签外置样式

    标签文字

    自定义样式输入框

    标签文字
    "`; +exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `"

    Input 输入框

    用于单行文本信息输入。

    01 组件类型

    基础输入框

    标签文字
    标签文字

    带字数限制输入框

    标签文字
    最大输入10个字符
    标签文字
    最大输入10个字符，汉字算两个

    带操作输入框

    标签文字
    标签文字
    标签文字

    带图标输入框

    标签文字

    特定类型输入框

    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个

    02 组件状态

    输入框状态

    标签文字
    辅助说明
    不可编辑

    信息超长状态

    标签超长时最多十个字

    03 组件样式

    内容位置

    左对齐
    居中
    右对齐

    竖排样式

    标签文字

    非通栏样式

    标签文字

    标签外置样式

    标签文字

    自定义样式输入框

    标签文字
    "`; exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `"
    标签超长时最多十个字
    "`; @@ -166033,7 +166033,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/maxlength.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/input/_example/prefix.tsx 1`] = `"
    标签文字
    "`; -exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `"
    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个
    "`; +exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `"
    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个
    "`; exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `"
    标签文字
    辅助说明
    不可编辑
    "`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 810d9229f..807408b4a 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -254,11 +254,11 @@ exports[`ssr snapshot test > ssr test src/footer/_example/links.tsx 1`] = `"
    ssr test src/footer/_example/logo.tsx 1`] = `"
    Copyright © 2019-2023 TDesign.All Rights Reserved.
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"

    Form 表单

    用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

    01 组件类型

    基础表单

    禁用态
    请输入用户名
    男
    女
    保密
    0/50
    "`; -exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; +exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `"
    请输入用户名
    男
    女
    保密
    0/50
    "`; exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
    标题文字
    8
    标题文字
    13
    标题五字内
    NEW
    标题五字内
    "`; @@ -338,7 +338,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `" ssr test src/input/_example/custom.tsx 1`] = `"
    标签文字
    "`; -exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `"

    Input 输入框

    用于单行文本信息输入。

    01 组件类型

    基础输入框

    标签文字
    标签文字

    带字数限制输入框

    标签文字
    最大输入10个字符
    标签文字
    最大输入10个字符，汉字算两个

    带操作输入框

    标签文字
    标签文字
    标签文字

    带图标输入框

    标签文字

    特定类型输入框

    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个

    02 组件状态

    输入框状态

    标签文字
    辅助说明
    不可编辑

    信息超长状态

    标签超长时最多十个字

    03 组件样式

    内容位置

    左对齐
    居中
    右对齐

    竖排样式

    标签文字

    非通栏样式

    标签文字

    标签外置样式

    标签文字

    自定义样式输入框

    标签文字
    "`; +exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `"

    Input 输入框

    用于单行文本信息输入。

    01 组件类型

    基础输入框

    标签文字
    标签文字

    带字数限制输入框

    标签文字
    最大输入10个字符
    标签文字
    最大输入10个字符，汉字算两个

    带操作输入框

    标签文字
    标签文字
    标签文字

    带图标输入框

    标签文字

    特定类型输入框

    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个

    02 组件状态

    输入框状态

    标签文字
    辅助说明
    不可编辑

    信息超长状态

    标签超长时最多十个字

    03 组件样式

    内容位置

    左对齐
    居中
    右对齐

    竖排样式

    标签文字

    非通栏样式

    标签文字

    标签外置样式

    标签文字

    自定义样式输入框

    标签文字
    "`; exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `"
    标签超长时最多十个字
    "`; @@ -348,7 +348,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/maxlength.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/input/_example/prefix.tsx 1`] = `"
    标签文字
    "`; -exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `"
    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个
    "`; +exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `"
    输入密码
    验证码
    手机号
    发送验证码
    价格
    元
    数量
    个
    "`; exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `"
    标签文字
    辅助说明
    不可编辑
    "`; From 9ac01ccff15033840a1dd766aa10faa2ac71e06e Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Tue, 13 Oct 2026 16:13:44 +0800 Subject: [PATCH 11/24] chore: update demos of multiple components (#972) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(Slider): support vertical prop, update demos of multiple components * chore: 更新子模块引用及示例样式颜色变量 * feat(slider): 移除垂直模式支持 * fix(input): 修正最大长度示例属性类型 * chore: 更新 _common 子模块 * fix: fix cr --------- Co-authored-by: Y. --- src/_common | 2 +- src/date-time-picker/_example/index.tsx | 4 + src/date-time-picker/_example/steps.tsx | 51 + src/dialog/_example/index.tsx | 2 +- src/input/_example/maxlength.tsx | 4 +- src/loading/_example/style/index.less | 2 +- src/qrcode/_example/download.tsx | 73 + src/qrcode/_example/index.tsx | 15 + src/qrcode/_example/status-render.tsx | 41 + src/qrcode/_example/style/index.less | 29 + src/qrcode/_example/type.tsx | 13 + src/swipe-cell/_example/index.tsx | 3 + src/textarea/_example/style/index.less | 2 +- test/snap/__snapshots__/csr.test.jsx.snap | 2897 ++++++++++++++------- test/snap/__snapshots__/ssr.test.jsx.snap | 16 +- 15 files changed, 2222 insertions(+), 932 deletions(-) create mode 100644 src/date-time-picker/_example/steps.tsx create mode 100644 src/qrcode/_example/download.tsx create mode 100644 src/qrcode/_example/status-render.tsx create mode 100644 src/qrcode/_example/type.tsx diff --git a/src/_common b/src/_common index 57b8724fe..47ee87c61 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 57b8724fe14f0e3350708b69414c71526c737549 +Subproject commit 47ee87c61c1011cbad95769fb6f54d5fbf9deddb diff --git a/src/date-time-picker/_example/index.tsx b/src/date-time-picker/_example/index.tsx index 2a862c8b3..c03e374d0 100644 --- a/src/date-time-picker/_example/index.tsx +++ b/src/date-time-picker/_example/index.tsx @@ -10,6 +10,7 @@ import DateSecondDemo from './date-all'; import WithTitleDemo from './with-title'; import WithoutTitleDemo from './without-title'; import ShowWeekDemo from './show-week'; +import StepsDemo from './steps'; export default function DateTimePickerDemo() { return ( @@ -33,6 +34,9 @@ export default function DateTimePickerDemo() { + + + diff --git a/src/date-time-picker/_example/steps.tsx b/src/date-time-picker/_example/steps.tsx new file mode 100644 index 000000000..c1fafbb90 --- /dev/null +++ b/src/date-time-picker/_example/steps.tsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { DateTimePicker, Cell, Popup } from 'tdesign-mobile-react'; + +export default function DateTimePickerDemo() { + const [visible, setVisible] = useState(false); + const [pickerValue, setPickerValue] = useState(''); + const [pickerValueText, setPickerValueText] = useState(''); + + const onPick = (value: string) => { + console.log('[onPick]', value); + }; + const onChange = (value: string) => { + console.log('[onChange]', value); + }; + + const onCancel = () => { + console.log('[onCancel]'); + setVisible(false); + }; + + const onConfirm = (value: string) => { + console.log('[onConfirm]', value); + setPickerValueText(value); + setPickerValue(value); + setVisible(false); + }; + + return ( +
    + setVisible(true)} + /> + + + +
    + ); +} diff --git a/src/dialog/_example/index.tsx b/src/dialog/_example/index.tsx index 711c4c2e9..9b14b0e7b 100644 --- a/src/dialog/_example/index.tsx +++ b/src/dialog/_example/index.tsx @@ -27,7 +27,7 @@ export default function Base() { - + {/* diff --git a/src/input/_example/maxlength.tsx b/src/input/_example/maxlength.tsx index ba412d542..97a278d9e 100644 --- a/src/input/_example/maxlength.tsx +++ b/src/input/_example/maxlength.tsx @@ -4,8 +4,8 @@ import { Input } from 'tdesign-mobile-react'; export default function MaxLength() { return ( <> - - + + ); } diff --git a/src/loading/_example/style/index.less b/src/loading/_example/style/index.less index 4c64b3abe..2a531a915 100644 --- a/src/loading/_example/style/index.less +++ b/src/loading/_example/style/index.less @@ -36,7 +36,7 @@ .loading-demo__summary { font-size: 14px; - color: rgba(0, 0, 0, .6); + color: var(--td-text-color-secondary); line-height: 22px; } .mt-24 { diff --git a/src/qrcode/_example/download.tsx b/src/qrcode/_example/download.tsx new file mode 100644 index 000000000..4db046c8b --- /dev/null +++ b/src/qrcode/_example/download.tsx @@ -0,0 +1,73 @@ +import React, { useRef, useState } from 'react'; +import { QRCode, Button } from 'tdesign-mobile-react'; + +const value = 'https://tdesign.tencent.com/'; +const icon = 'https://tdesign.gtimg.com/site/tdesign-logo.png'; +const typeList: Array<'canvas' | 'svg'> = ['canvas', 'svg']; + +function downloadFile(url: string, fileName: string) { + const a = document.createElement('a'); + a.download = fileName; + a.href = url; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); +} + +export default function QRCodeExample() { + const [type, setType] = useState<'canvas' | 'svg'>('canvas'); + const qrcodeRef = useRef(null); + + const downloadCanvas = () => { + const canvas = qrcodeRef.current?.querySelector('canvas'); + if (canvas) { + const url = canvas.toDataURL(); + downloadFile(url, 'TDesign-QRCode.png'); + } + }; + + const downloadSvg = () => { + const svg = qrcodeRef.current?.querySelector('svg'); + if (svg) { + const svgData = new XMLSerializer().serializeToString(svg); + const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); + const url = URL.createObjectURL(blob); + downloadFile(url, 'TDesign-QRCode.svg'); + } + }; + + const handleDownload = () => { + if (type === 'canvas') { + downloadCanvas(); + } + if (type === 'svg') { + downloadSvg(); + } + }; + + return ( +
    +
    + {typeList.map((item) => ( + + ))} +
    +
    + +
    +
    + +
    +
    + ); +} diff --git a/src/qrcode/_example/index.tsx b/src/qrcode/_example/index.tsx index d1befa857..2854b917d 100644 --- a/src/qrcode/_example/index.tsx +++ b/src/qrcode/_example/index.tsx @@ -2,12 +2,15 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import BaseDemo from './base'; +import TypeDemo from './type'; import IconDemo from './icon'; import BorderlessDemo from './borderless'; import LevelDemo from './level'; import StatusDemo from './status'; +import StatusRenderDemo from './status-render'; import ColorDemo from './color'; import SizeDemo from './size'; +import DownloadDemo from './download'; import './style/index.less'; @@ -19,6 +22,10 @@ export default function Base() {     + + + + @@ -35,6 +42,10 @@ export default function Base() {     + + + + @@ -42,6 +53,10 @@ export default function Base() { + + + +
    ); } diff --git a/src/qrcode/_example/status-render.tsx b/src/qrcode/_example/status-render.tsx new file mode 100644 index 000000000..16956f8af --- /dev/null +++ b/src/qrcode/_example/status-render.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { QRCode, Loading } from 'tdesign-mobile-react'; +import type { StatusRenderInfo } from 'tdesign-mobile-react'; +import { CloseCircleFilledIcon, RefreshIcon } from 'tdesign-icons-react'; + +const value = 'https://tdesign.tencent.com/'; + +export default function QRCodeExample() { + const renderStatus = (info: StatusRenderInfo) => { + if (info.status === 'loading') { + return ( +
    + +

    加载中...

    +
    + ); + } + if (info.status === 'expired') { + return ( +
    +

    + + 二维码过期 +

    +

    console.log('Click Refresh')}> + + 点击刷新 +

    +
    + ); + } + }; + + return ( +
    + + + +
    + ); +} diff --git a/src/qrcode/_example/style/index.less b/src/qrcode/_example/style/index.less index 805d925a1..a0af76e67 100644 --- a/src/qrcode/_example/style/index.less +++ b/src/qrcode/_example/style/index.less @@ -14,6 +14,35 @@ flex-wrap: wrap; } +.tdesign-demo-qrcode__status-render { + display: flex; + align-items: center; + flex-direction: column; +} + +.tdesign-demo-qrcode__status-render-text { + margin-top: 4px; +} + +.tdesign-demo-qrcode__status-render-title { + display: flex; + align-items: center; + gap: 8px; + + .t-icon { + color: var(--td-error-color); + } +} + +.tdesign-demo-qrcode__status-render-action { + display: flex; + align-items: center; + gap: 8px; + color: var(--td-brand-color); + cursor: pointer; + line-height: 32px; +} + .button-group { width: 100%; diff --git a/src/qrcode/_example/type.tsx b/src/qrcode/_example/type.tsx new file mode 100644 index 000000000..912501a7f --- /dev/null +++ b/src/qrcode/_example/type.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { QRCode } from 'tdesign-mobile-react'; + +const value = 'https://tdesign.tencent.com/'; + +export default function QRCodeExample() { + return ( +
    + + +
    + ); +} diff --git a/src/swipe-cell/_example/index.tsx b/src/swipe-cell/_example/index.tsx index 09b64a360..3816af3c8 100644 --- a/src/swipe-cell/_example/index.tsx +++ b/src/swipe-cell/_example/index.tsx @@ -1,5 +1,7 @@ import React from 'react'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; + import Left from './left'; import Right from './right'; import Double from './double'; @@ -15,6 +17,7 @@ export default function SwipeCellDemo() { title="SwipeCell 滑动操作" summary="用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。" /> + diff --git a/src/textarea/_example/style/index.less b/src/textarea/_example/style/index.less index 3b73e31f9..aeac1cf3a 100644 --- a/src/textarea/_example/style/index.less +++ b/src/textarea/_example/style/index.less @@ -11,7 +11,7 @@ &__summary { font-size: 14px; - color: rgba(0, 0, 0, .6); + color: var(--td-text-color-secondary); margin: 0 16px 16px; line-height: 22px; } diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index bfc0407a3..49fc5f49c 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -118,7 +118,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] = 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_12v_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_135_-overlap-fill1)" /> csr test src/action-sheet/_example/align.tsx 1`] = 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_130_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_136_-overlap-fill1)" /> csr test src/action-sheet/_example/align.tsx 1`] = 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_133_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_139_-overlap-fill1)" /> csr test src/action-sheet/_example/align.tsx 1`] = 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_134_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_13a_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` csr test src/action-sheet/_example/grid.tsx 1`] = ` > csr test src/action-sheet/_example/grid.tsx 1`] = ` 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_12d_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_12j_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` csr test src/action-sheet/_example/grid.tsx 1`] = ` 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_12f_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_12l_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` csr test src/action-sheet/_example/grid.tsx 1`] = ` > csr test src/action-sheet/_example/grid.tsx 1`] = ` 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_12h_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_12n_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` csr test src/action-sheet/_example/grid.tsx 1`] = ` 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_12j_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_12p_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` csr test src/action-sheet/_example/grid.tsx 1`] = ` > csr test src/action-sheet/_example/grid.tsx 1`] = ` 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_12l_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_12r_-overlap-fill1)" /> csr test src/action-sheet/_example/grid.tsx 1`] = ` csr test src/action-sheet/_example/grid.tsx 1`] = ` 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_12n_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_12t_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts csr test src/action-sheet/_example/grid-multiple.ts > csr test src/action-sheet/_example/grid-multiple.ts 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_12p_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_12v_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts csr test src/action-sheet/_example/grid-multiple.ts 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_12r_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_131_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts csr test src/action-sheet/_example/grid-multiple.ts 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_12s_-overlap-fill1)" + mask="url(#t-icon-image-instance-_r_132_-overlap-fill1)" /> csr test src/action-sheet/_example/grid-multiple.ts csr test src/action-sheet/_example/grid-multiple.ts 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_12t_-overlap-fill1)" + mask="url(#t-icon-image-instance-_r_133_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_11b_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_11h_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_11c_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_11i_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = > csr test src/action-sheet/_example/index.tsx 1`] = 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_11f_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_11l_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = 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_11h_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_11n_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = > csr test src/action-sheet/_example/index.tsx 1`] = 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_11j_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_11p_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = 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_11l_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_11r_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = > csr test src/action-sheet/_example/index.tsx 1`] = 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_11n_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_11t_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = 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_11p_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_11v_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = > csr test src/action-sheet/_example/index.tsx 1`] = 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_11r_-overlap-fill1)" + mask="url(#t-icon-star-instance-_r_121_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = 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_11t_-overlap-fill1)" + mask="url(#t-icon-edit-1-instance-_r_123_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = 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_11u_-overlap-fill1)" + mask="url(#t-icon-image-instance-_r_124_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = csr test src/action-sheet/_example/index.tsx 1`] = 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_11v_-overlap-fill1)" + mask="url(#t-icon-image-instance-_r_125_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_121_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_127_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_122_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_128_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_125_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_12b_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_126_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_12c_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_129_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_12f_-overlap-fill1)" /> csr test src/action-sheet/_example/index.tsx 1`] = 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_12a_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_12g_-overlap-fill1)" /> csr test src/action-sheet/_example/list.tsx 1`] = ` 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_117_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_11d_-overlap-fill1)" /> csr test src/action-sheet/_example/list.tsx 1`] = ` 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_118_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_11e_-overlap-fill1)" /> csr test src/action-sheet/_example/status.tsx 1`] = 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_113_-overlap-fill1)" + mask="url(#t-icon-bookmark-instance-_r_119_-overlap-fill1)" /> csr test src/action-sheet/_example/status.tsx 1`] = 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_114_-overlap-fill1)" + mask="url(#t-icon-pin-instance-_r_11a_-overlap-fill1)" /> csr test src/avatar/_example/action.tsx 1`] = ` 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_111_-overlap-fill1)" + mask="url(#t-icon-user-add-instance-_r_117_-overlap-fill1)" /> csr test src/avatar/_example/badge-avatar.tsx 1`] = csr test src/avatar/_example/badge-avatar.tsx 1`] = > csr test src/avatar/_example/icon-avatar.tsx 1`] = csr test src/avatar/_example/icon-avatar.tsx 1`] = > csr test src/avatar/_example/icon-avatar.tsx 1`] = csr test src/avatar/_example/icon-avatar.tsx 1`] = > csr test src/avatar/_example/index.tsx 1`] = ` csr test src/avatar/_example/index.tsx 1`] = ` > csr test src/avatar/_example/index.tsx 1`] = ` csr test src/avatar/_example/index.tsx 1`] = ` > csr test src/avatar/_example/index.tsx 1`] = ` csr test src/avatar/_example/index.tsx 1`] = ` > csr test src/avatar/_example/index.tsx 1`] = ` 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_10q_-overlap-fill1)" + mask="url(#t-icon-user-add-instance-_r_110_-overlap-fill1)" /> csr test src/avatar/_example/index.tsx 1`] = ` csr test src/avatar/_example/index.tsx 1`] = ` > csr test src/avatar/_example/index.tsx 1`] = ` csr test src/avatar/_example/index.tsx 1`] = ` > csr test src/avatar/_example/index.tsx 1`] = ` csr test src/avatar/_example/index.tsx 1`] = ` > csr test src/avatar/_example/size.tsx 1`] = ` csr test src/avatar/_example/size.tsx 1`] = ` > csr test src/avatar/_example/size.tsx 1`] = ` csr test src/avatar/_example/size.tsx 1`] = ` > csr test src/avatar/_example/size.tsx 1`] = ` csr test src/avatar/_example/size.tsx 1`] = ` > csr test src/badge/_example/base.tsx 1`] = ` csr test src/badge/_example/base.tsx 1`] = ` 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_10h_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10n_-overlap-fill1)" /> csr test src/badge/_example/base.tsx 1`] = ` csr test src/badge/_example/base.tsx 1`] = ` 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_10i_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10o_-overlap-fill1)" /> csr test src/badge/_example/base.tsx 1`] = ` csr test src/badge/_example/base.tsx 1`] = ` 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_10j_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10p_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` 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_109_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10f_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` 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_10a_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10g_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` 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_10b_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10h_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` 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_10c_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10i_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` 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_10d_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10j_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` d="M4 8H20V22H4V8Z" fill="transparent" id="fill1" - mask="url(#t-icon-shop-instance-_r_10e_-overlap-fill1)" + mask="url(#t-icon-shop-instance-_r_10k_-overlap-fill1)" /> csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` > csr test src/badge/_example/index.tsx 1`] = ` csr test src/badge/_example/index.tsx 1`] = ` > csr test src/badge/_example/size.tsx 1`] = ` csr test src/badge/_example/size.tsx 1`] = ` > csr test src/badge/_example/size.tsx 1`] = ` csr test src/badge/_example/size.tsx 1`] = ` > csr test src/badge/_example/theme.tsx 1`] = ` csr test src/badge/_example/theme.tsx 1`] = ` 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_104_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10a_-overlap-fill1)" /> csr test src/badge/_example/theme.tsx 1`] = ` csr test src/badge/_example/theme.tsx 1`] = ` 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_105_-overlap-fill1)" + mask="url(#t-icon-notification-instance-_r_10b_-overlap-fill1)" /> csr test src/badge/_example/theme.tsx 1`] = ` csr test src/badge/_example/theme.tsx 1`] = ` d="M4 8H20V22H4V8Z" fill="transparent" id="fill1" - mask="url(#t-icon-shop-instance-_r_106_-overlap-fill1)" + mask="url(#t-icon-shop-instance-_r_10c_-overlap-fill1)" /> csr test src/button/_example/icon.tsx 1`] = ` csr test src/button/_example/icon.tsx 1`] = ` csr test src/button/_example/icon.tsx 1`] = ` > 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_102_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_108_-overlap-fill2)" /> csr test src/button/_example/icon.tsx 1`] = ` csr test src/button/_example/icon.tsx 1`] = ` csr test src/button/_example/icon.tsx 1`] = ` > 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_103_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_109_-overlap-fill2)" /> csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` > 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_vu_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_104_-overlap-fill2)" /> csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` > 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_vv_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_105_-overlap-fill2)" /> csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` > 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_100_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_106_-overlap-fill2)" /> csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` csr test src/button/_example/index.tsx 1`] = ` > 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_101_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_107_-overlap-fill2)" /> csr test src/button/_example/shape.tsx 1`] = ` csr test src/button/_example/shape.tsx 1`] = ` csr test src/button/_example/shape.tsx 1`] = ` > 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_vs_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_102_-overlap-fill2)" /> csr test src/button/_example/shape.tsx 1`] = ` csr test src/button/_example/shape.tsx 1`] = ` csr test src/button/_example/shape.tsx 1`] = ` > 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_vt_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_103_-overlap-fill2)" /> csr test src/cell/_example/group.tsx 1`] = ` csr test src/cell/_example/group.tsx 1`] = ` csr test src/cell/_example/group.tsx 1`] = ` > 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_sk_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_sq_-overlap-fill2)" /> csr test src/cell/_example/group.tsx 1`] = ` csr test src/cell/_example/group.tsx 1`] = ` csr test src/cell/_example/group.tsx 1`] = ` > 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_sm_-overlap-fill2)" + mask="url(#t-icon-service-instance-_r_ss_-overlap-fill2)" /> csr test src/cell/_example/group.tsx 1`] = ` csr test src/cell/_example/group.tsx 1`] = ` csr test src/cell/_example/group.tsx 1`] = ` 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_so_-overlap-fill1)" + mask="url(#t-icon-internet-instance-_r_su_-overlap-fill1)" /> csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` > 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_s5_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_sb_-overlap-fill2)" /> csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` > 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_sb_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_sh_-overlap-fill2)" /> csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` > 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_se_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_sk_-overlap-fill2)" /> csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` > csr test src/cell/_example/index.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_sg_-overlap-fill2)" + mask="url(#t-icon-service-instance-_r_sm_-overlap-fill2)" /> csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.tsx 1`] = ` csr test src/cell/_example/index.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_si_-overlap-fill1)" + mask="url(#t-icon-internet-instance-_r_so_-overlap-fill1)" /> csr test src/cell/_example/multiple.tsx 1`] = ` csr test src/cell/_example/multiple.tsx 1`] = ` csr test src/cell/_example/multiple.tsx 1`] = ` > 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_ru_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_s4_-overlap-fill2)" /> csr test src/cell/_example/single.tsx 1`] = ` csr test src/cell/_example/single.tsx 1`] = ` csr test src/cell/_example/single.tsx 1`] = ` > 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_ro_-overlap-fill2)" + mask="url(#t-icon-app-instance-_r_ru_-overlap-fill2)" /> csr test src/config-provider/_example/index.tsx 1`] csr test src/config-provider/_example/index.tsx 1`] fill="transparent" fill-rule="evenodd" id="fill1" - mask="url(#t-icon-filter-instance-_r_pf_-overlap-fill1)" + mask="url(#t-icon-filter-instance-_r_pl_-overlap-fill1)" /> csr test src/config-provider/_example/table-en.tsx csr test src/config-provider/_example/table-en.tsx fill="transparent" fill-rule="evenodd" id="fill1" - mask="url(#t-icon-filter-instance-_r_ov_-overlap-fill1)" + mask="url(#t-icon-filter-instance-_r_p5_-overlap-fill1)" /> csr test src/date-time-picker/_example/index.tsx 1`
    -

    - 02 组件样式 -

    - 是否带标题 + 间隔时间选择器

    -
    +
    csr test src/date-time-picker/_example/index.tsx 1`
    - 带标题时间选择器 + 选择时间(间隔)
    - 2025-07-09 + 时 分
    csr test src/date-time-picker/_example/index.tsx 1`
  • - 2022 年 -
    • -
  • - 2023 年 -
    • -
  • - 2024 年 -
    • -
  • - 2025 年 -
    • -
  • - 2026 年 -
    • -
  • - 2027 年 -
    • -
  • - 2028 年 -
    • -
  • - 2029 年 -
    • -
  • - 2030 年 -
    • - -
    -
    -
      -
    • - 1 月 -
      • -
    • - 2 月 -
      • -
    • - 3 月 -
      • -
    • - 4 月 -
      • -
    • - 5 月 -
      • -
    • - 6 月 -
      • -
    • - 7 月 -
      • -
    • - 8 月 -
      • -
    • - 9 月 -
      • -
    • - 10 月 -
      • -
    • - 11 月 -
      • -
    • - 12 月 -
      • -
    -
    -
    -
      -
    • - 1 日 -
      • -
    • - 2 日 -
      • -
    • - 3 日 -
      • -
    • - 4 日 -
      • -
    • - 5 日 -
      • -
    • - 6 日 + 0 时
    • - 7 日 + 1 时
    • - 8 日 + 2 时
    • - 9 日 + 3 时
    • - 10 日 + 4 时
    • - 11 日 + 5 时
    • - 12 日 + 6 时
    • - 13 日 + 7 时
    • - 14 日 + 8 时
    • - 15 日 + 9 时
    • - 16 日 + 10 时
    • - 17 日 + 11 时
    • - 18 日 + 12 时
    • - 19 日 + 13 时
    • - 20 日 + 14 时
    • - 21 日 + 15 时
    • - 22 日 + 16 时
    • - 23 日 + 17 时
    • - 24 日 + 18 时
    • - 25 日 + 19 时
    • - 26 日 + 20 时
    • - 27 日 + 21 时
    • - 28 日 + 22 时
    • - 29 日 + 23 时
      • +
    +
    +
    +
    • - 30 日 + 0 分
    • - 31 日 + 30 分
    @@ -52884,13 +52739,27 @@ exports[`csr snapshot test > csr test src/date-time-picker/_example/index.tsx 1`
    +
    +

    + 02 组件样式 +

    +

    + 是否带标题 +

    +
    csr test src/date-time-picker/_example/index.tsx 1`
    - 无标题时间选择器 + 带标题时间选择器
    - 2025-07-10 + 2025-07-09
    csr test src/date-time-picker/_example/index.tsx 1`
    + > + 选择时间 +
    +
    + 确定 +
    +
    +
    +
    +
      +
    • + 2022 年 +
      • +
    • + 2023 年 +
      • +
    • + 2024 年 +
      • +
    • + 2025 年 +
      • +
    • + 2026 年 +
      • +
    • + 2027 年 +
      • +
    • + 2028 年 +
      • +
    • + 2029 年 +
      • +
    • + 2030 年 +
      • +
    +
    +
    +
      +
    • + 1 月 +
      • +
    • + 2 月 +
      • +
    • + 3 月 +
      • +
    • + 4 月 +
      • +
    • + 5 月 +
      • +
    • + 6 月 +
      • +
    • + 7 月 +
      • +
    • + 8 月 +
      • +
    • + 9 月 +
      • +
    • + 10 月 +
      • +
    • + 11 月 +
      • +
    • + 12 月 +
      • +
    +
    +
    +
      +
    • + 1 日 +
      • +
    • + 2 日 +
      • +
    • + 3 日 +
      • +
    • + 4 日 +
      • +
    • + 5 日 +
      • +
    • + 6 日 +
      • +
    • + 7 日 +
      • +
    • + 8 日 +
      • +
    • + 9 日 +
      • +
    • + 10 日 +
      • +
    • + 11 日 +
      • +
    • + 12 日 +
      • +
    • + 13 日 +
      • +
    • + 14 日 +
      • +
    • + 15 日 +
      • +
    • + 16 日 +
      • +
    • + 17 日 +
      • +
    • + 18 日 +
      • +
    • + 19 日 +
      • +
    • + 20 日 +
      • +
    • + 21 日 +
      • +
    • + 22 日 +
      • +
    • + 23 日 +
      • +
    • + 24 日 +
      • +
    • + 25 日 +
      • +
    • + 26 日 +
      • +
    • + 27 日 +
      • +
    • + 28 日 +
      • +
    • + 29 日 +
      • +
    • + 30 日 +
      • +
    • + 31 日 +
      • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 无标题时间选择器 +
    +
    +
    + 2025-07-10 +
    +
    +