From 463ab6a2f583971da7ea52cabbd2fd383a4fffaa Mon Sep 17 00:00:00 2001 From: jiasy1616 <103417037+jiasy1616@users.noreply.github.com> Date: Mon, 26 Aug 2024 17:20:40 +0800 Subject: [PATCH 01/28] =?UTF-8?q?feat(layout):=20=E6=96=B0=E5=A2=9E=20layo?= =?UTF-8?q?ut=20=E7=BB=84=E4=BB=B6=20(#452)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(layout): add layout component * fix(layout): add convertUnit in _utils and use parseTNode * fix(Row): use parseTNode * fix(layout): usePrefixClass instead of useConfig * fix: fix cr --------- Co-authored-by: anlyyao --- site/mobile/mobile.config.js | 5 + site/web/site.config.js | 6 + src/_util/convertUnit.ts | 6 + src/index.ts | 1 + src/layout/Col.tsx | 58 ++++ src/layout/Row.tsx | 46 +++ .../__snapshots__/demo.test.jsx.snap | 320 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 7 + src/layout/__tests__/demo.test.tsx | 21 ++ src/layout/__tests__/index.test.tsx | 52 +++ src/layout/_example/base.tsx | 35 ++ src/layout/_example/index.tsx | 24 ++ src/layout/_example/offset.tsx | 20 ++ src/layout/_example/style/index.less | 22 ++ src/layout/defaultProps.ts | 17 + src/layout/index.ts | 12 + src/layout/layout.en-US.md | 18 + src/layout/layout.md | 19 ++ src/layout/style/css.js | 1 + src/layout/style/index.js | 1 + src/layout/type.ts | 23 ++ test/snap/__snapshots__/csr.test.jsx.snap | 249 ++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 6 + 23 files changed, 969 insertions(+) create mode 100644 src/_util/convertUnit.ts create mode 100644 src/layout/Col.tsx create mode 100644 src/layout/Row.tsx create mode 100644 src/layout/__tests__/__snapshots__/demo.test.jsx.snap create mode 100644 src/layout/__tests__/__snapshots__/demo.test.tsx.snap create mode 100644 src/layout/__tests__/demo.test.tsx create mode 100644 src/layout/__tests__/index.test.tsx create mode 100644 src/layout/_example/base.tsx create mode 100644 src/layout/_example/index.tsx create mode 100644 src/layout/_example/offset.tsx create mode 100644 src/layout/_example/style/index.less create mode 100644 src/layout/defaultProps.ts create mode 100644 src/layout/index.ts create mode 100644 src/layout/layout.en-US.md create mode 100644 src/layout/layout.md create mode 100644 src/layout/style/css.js create mode 100644 src/layout/style/index.js create mode 100644 src/layout/type.ts diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index f46775a5..d5967f20 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -15,6 +15,11 @@ export default { name: 'icon', component: () => import('tdesign-mobile-react/icon/_example/index.tsx'), }, + { + title: 'Layout 布局', + name: 'layout', + component: () => import('tdesign-mobile-react/layout/_example/index.tsx'), + }, { title: 'Tabs 选项卡', name: 'tabs', diff --git a/site/web/site.config.js b/site/web/site.config.js index 30bb0e7c..f709bd4a 100644 --- a/site/web/site.config.js +++ b/site/web/site.config.js @@ -46,6 +46,12 @@ export default { path: '/mobile-react/components/icon', component: () => import('tdesign-mobile-react/icon/icon.md'), }, + { + title: 'Layout 布局', + name: 'layout', + path: '/mobile-react/components/layout', + component: () => import('tdesign-mobile-react/layout/layout.md'), + }, { title: 'Link 链接', name: 'link', diff --git a/src/_util/convertUnit.ts b/src/_util/convertUnit.ts new file mode 100644 index 00000000..b0a26671 --- /dev/null +++ b/src/_util/convertUnit.ts @@ -0,0 +1,6 @@ +import isNumber from 'lodash/isNumber'; + +export const convertUnit = (val: string | number | undefined) => { + if (val == null) return 0; + return isNumber(val) ? `${val}px` : val; +}; diff --git a/src/index.ts b/src/index.ts index 5e8bc151..91b4e09e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,6 +5,7 @@ export * from './button'; export * from './divider'; export * from './fab'; export * from './progress'; +export * from './layout'; export * from './link'; /** diff --git a/src/layout/Col.tsx b/src/layout/Col.tsx new file mode 100644 index 00000000..860460f6 --- /dev/null +++ b/src/layout/Col.tsx @@ -0,0 +1,58 @@ +import React, { forwardRef, useContext } from 'react'; +import classNames from 'classnames'; + +import { TdColProps } from './type'; +import { colDefaultProps } from './defaultProps'; + +import { StyledProps } from '../common'; + +import { convertUnit } from '../_util/convertUnit'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; + +import { RowContext, RowProps } from './Row'; + +export interface ColProps extends TdColProps, StyledProps { + children?: React.ReactNode; +} + +const calcColPadding = (gutter: RowProps['gutter']) => { + const styles: React.CSSProperties = {}; + + if (!gutter) { + return styles; + } + const gutterVal = convertUnit(Number(gutter) / 2); + styles.paddingRight = gutterVal; + styles.paddingLeft = gutterVal; + return styles; +}; + +const Col = forwardRef((props, ref) => { + const { offset, span, className, children, style: propStyle } = useDefaultProps(props, colDefaultProps); + + const colClass = usePrefixClass('col'); + + const { gutter } = useContext(RowContext); + + const colClassNames = classNames(colClass, className, { + [`${colClass}--${span}`]: span !== undefined, + [`${colClass}--offset-${offset}`]: parseInt(offset as string, 10) >= 0, + }); + + const colStyle = { + ...calcColPadding(gutter), + ...propStyle, + }; + + return ( +
+ {parseTNode(children)} +
+ ); +}); + +Col.displayName = 'Col'; + +export default Col; diff --git a/src/layout/Row.tsx b/src/layout/Row.tsx new file mode 100644 index 00000000..bc3dde65 --- /dev/null +++ b/src/layout/Row.tsx @@ -0,0 +1,46 @@ +import React, { createContext, forwardRef, useMemo } from 'react'; +import classNames from 'classnames'; + +import type { TdRowProps } from './type'; + +import { convertUnit } from '../_util/convertUnit'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; +import { StyledProps } from '../common'; + +import { rowDefaultProps } from './defaultProps'; + +export interface RowProps extends TdRowProps, StyledProps { + children?: React.ReactNode; +} + +export const RowContext = createContext<{ gutter: RowProps['gutter'] }>({ gutter: undefined }); + +const Row = forwardRef((props, ref) => { + const { children, className = '', gutter, style } = useDefaultProps(props, rowDefaultProps); + + const colClass = usePrefixClass('row'); + + const computedStyle = useMemo(() => { + const mergedStyle = { ...style }; + if (!gutter) { + return mergedStyle; + } + + const gutterVal = convertUnit(-gutter / 2); + + mergedStyle.marginRight = gutterVal; + mergedStyle.marginLeft = gutterVal; + + return mergedStyle; + }, [gutter, style]); + + return ( +
+ {parseTNode(children)} +
+ ); +}); + +export default Row; diff --git a/src/layout/__tests__/__snapshots__/demo.test.jsx.snap b/src/layout/__tests__/__snapshots__/demo.test.jsx.snap new file mode 100644 index 00000000..9aa9c3bf --- /dev/null +++ b/src/layout/__tests__/__snapshots__/demo.test.jsx.snap @@ -0,0 +1,320 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Col > Col baseVue demo works fine 1`] = ` +
+ +
+ +
+ + col-8 + +
+
+ + col-8 + +
+
+ + col-8 + +
+ +
+
+ +
+ + col-4 + +
+
+ + col-16 col-offset-4 + +
+ +
+
+ +
+ + col-12 col-offset-12 + +
+ +
+ +
+`; + +exports[`Col > Col mobileVue demo works fine 1`] = ` +
+

+ Layout 布局 +

+

+ 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。 +

+
+
+

+ 01 组件类型 +

+

+ 基础用法 +

+
+
+ + +
+ +
+ + col-8 + +
+
+ + col-8 + +
+
+ + col-8 + +
+ +
+
+ +
+ + col-4 + +
+
+ + col-16 col-offset-4 + +
+ +
+
+ +
+ + col-12 col-offset-12 + +
+ +
+ + +
+
+
+
+ +

+ 在列元素之间增加间距 +

+
+
+ +
+ +
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+ +
+ +
+
+
+`; + +exports[`Col > Col offsetVue demo works fine 1`] = ` +
+ +
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+ +
+`; diff --git a/src/layout/__tests__/__snapshots__/demo.test.tsx.snap b/src/layout/__tests__/__snapshots__/demo.test.tsx.snap new file mode 100644 index 00000000..51983172 --- /dev/null +++ b/src/layout/__tests__/__snapshots__/demo.test.tsx.snap @@ -0,0 +1,7 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Col > Col baseDemo demo works fine 1`] = `null`; + +exports[`Col > Col indexDemo demo works fine 1`] = `null`; + +exports[`Col > Col offsetDemo demo works fine 1`] = `null`; diff --git a/src/layout/__tests__/demo.test.tsx b/src/layout/__tests__/demo.test.tsx new file mode 100644 index 00000000..f0a4b04c --- /dev/null +++ b/src/layout/__tests__/demo.test.tsx @@ -0,0 +1,21 @@ +import { describe, expect, render, it } from '@test/utils'; + +import baseDemo from '../_example/base'; +import indexDemo from '../_example/index'; +import offsetDemo from '../_example/offset'; + +const mapper = { + baseDemo, + indexDemo, + offsetDemo, +}; + +describe('Col', () => { + Object.keys(mapper).forEach((demoName) => { + it(`Col ${demoName} demo works fine`, () => { + const { container } = render(mapper[demoName]); + + expect(container.firstChild).toMatchSnapshot(); + }); + }); +}); diff --git a/src/layout/__tests__/index.test.tsx b/src/layout/__tests__/index.test.tsx new file mode 100644 index 00000000..f27697f8 --- /dev/null +++ b/src/layout/__tests__/index.test.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { describe, it, expect, render } from '@test/utils'; +import Row from '../Row'; +import Col from '../Col'; + +const prefix = 't'; +const rowName = `${prefix}-row`; +const colName = `${prefix}-col`; + +const TEXT = 'tdesign-mobile-vue'; + +describe('row', () => { + describe('props', () => { + it(':gutter', async () => { + const { container } = render( + + + , + ); + expect(container.firstChild).toHaveStyle('margin-right: -50px; margin-left: -50px;'); + + expect(container.firstChild).toHaveClass(rowName); + }); + }); +}); + +describe('col', () => { + describe('props', () => { + it(':offset', async () => { + const { container } = render( + + + , + ); + const col = container.querySelector(`.${colName}--2`); + expect(col).not.toBeNull(); + expect(container.firstChild).toHaveClass(rowName); + }); + + it(':span', async () => { + const { container } = render( + + {TEXT} + , + ); + + const col = container.querySelector(`.${colName}--2`); + expect(col).not.toBeNull(); + expect(container.querySelector(`.${colName}--2`).textContent).toBe(TEXT); + }); + }); +}); diff --git a/src/layout/_example/base.tsx b/src/layout/_example/base.tsx new file mode 100644 index 00000000..f2d96c57 --- /dev/null +++ b/src/layout/_example/base.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Col, Row } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+ + + col-8 + + + col-8 + + + col-8 + + + + + + col-4 + + + col-16 col-offset-4 + + + + + + col-12 col-offset-12 + + +
+ ); +} diff --git a/src/layout/_example/index.tsx b/src/layout/_example/index.tsx new file mode 100644 index 00000000..378f6c28 --- /dev/null +++ b/src/layout/_example/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import './style/index.less'; + +import BaseDemo from './base'; +import OffsetDemo from './offset'; + +export default function Base() { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/layout/_example/offset.tsx b/src/layout/_example/offset.tsx new file mode 100644 index 00000000..a2f042c8 --- /dev/null +++ b/src/layout/_example/offset.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Col, Row } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+ + +
col-8
+ + +
col-8
+ + +
col-8
+ + +
+ ); +} diff --git a/src/layout/_example/style/index.less b/src/layout/_example/style/index.less new file mode 100644 index 00000000..1b185e67 --- /dev/null +++ b/src/layout/_example/style/index.less @@ -0,0 +1,22 @@ +.dark { + background-color: #0052d9; +} + +.light { + background-color: #366ef4; +} + +.dark, +.light { + color: #fff; + font-size: 14px; + line-height: 48px; + margin-bottom: 16px; + text-align: center; +} + +.tdesign-mobile-demo { + // background-color: #fff; + min-height: 100%; + box-sizing: border-box; +} diff --git a/src/layout/defaultProps.ts b/src/layout/defaultProps.ts new file mode 100644 index 00000000..20f1594b --- /dev/null +++ b/src/layout/defaultProps.ts @@ -0,0 +1,17 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdColProps, TdRowProps } from './type'; + +export const rowDefaultProps: TdRowProps = { + /** 列之间的间距（默认单位px） */ + gutter: 0, +}; + +export const colDefaultProps: TdColProps = { + /** 列的偏移量（默认单位px） */ + offset: 0, + /** 列的宽度（默认单位px） */ + span: 0, +}; diff --git a/src/layout/index.ts b/src/layout/index.ts new file mode 100644 index 00000000..68730641 --- /dev/null +++ b/src/layout/index.ts @@ -0,0 +1,12 @@ +import _Col from './Col'; +import _Row from './Row'; + +import './style'; + +export type { ColProps } from './Col'; +export type { RowProps } from './Row'; + +export * from './type'; + +export const Col = _Col; +export const Row = _Row; diff --git a/src/layout/layout.en-US.md b/src/layout/layout.en-US.md new file mode 100644 index 00000000..26e7f7ae --- /dev/null +++ b/src/layout/layout.en-US.md @@ -0,0 +1,18 @@ +:: BASE_DOC :: + +## API + + +### Row Props + +name | type | default | description | required +-- | -- | -- | -- | -- +gutter | String / Number | - | \- | N + + +### Col Props + +name | type | default | description | required +-- | -- | -- | -- | -- +offset | String / Number | - | \- | N +span | String / Number | - | \- | N diff --git a/src/layout/layout.md b/src/layout/layout.md new file mode 100644 index 00000000..b1e6eeba --- /dev/null +++ b/src/layout/layout.md @@ -0,0 +1,19 @@ +:: BASE_DOC :: + +## API +### Col Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +offset | String / Number | - | 列的偏移量（默认单位px） | N +span | String / Number | - | 列的宽度（默认单位px） | N + +### Row Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +gutter | String / Number | - | 列之间的间距（默认单位px） | N diff --git a/src/layout/style/css.js b/src/layout/style/css.js new file mode 100644 index 00000000..6a9a4b13 --- /dev/null +++ b/src/layout/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/layout/style/index.js b/src/layout/style/index.js new file mode 100644 index 00000000..93977d5d --- /dev/null +++ b/src/layout/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/layout/_index.less'; diff --git a/src/layout/type.ts b/src/layout/type.ts new file mode 100644 index 00000000..1a791d31 --- /dev/null +++ b/src/layout/type.ts @@ -0,0 +1,23 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +export interface TdColProps { + /** + * 列的偏移量（默认单位px） + */ + offset?: string | number; + /** + * 列的宽度（默认单位px） + */ + span?: string | number; +} + +export interface TdRowProps { + /** + * 列之间的间距（默认单位px） + */ + gutter?: string | number; +} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index c1793487..a6cfcae1 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -16310,6 +16310,249 @@ exports[`csr snapshot test > csr test src/input/_example/suffix.tsx 1`] = ` `; +exports[`csr snapshot test > csr test src/layout/_example/base.tsx 1`] = ` +
+
+
+
+ col-8 +
+
+ col-8 +
+
+ col-8 +
+
+
+
+ col-4 +
+
+ col-16 col-offset-4 +
+
+
+
+ col-12 col-offset-12 +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/layout/_example/index.tsx 1`] = ` +
+
+
+

+ Layout 布局 +

+

+ 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。 +

+
+
+
+

+ 01 组件类型 +

+

+ 基础用法 +

+
+
+
+
+
+ col-8 +
+
+ col-8 +
+
+ col-8 +
+
+
+
+ col-4 +
+
+ col-16 col-offset-4 +
+
+
+
+ col-12 col-offset-12 +
+
+
+
+
+
+
+ +

+ 在列元素之间增加间距 +

+
+
+
+
+
+
+ col-8 +
+
+
+
+ col-8 +
+
+
+
+ col-8 +
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/layout/_example/offset.tsx 1`] = ` +
+
+
+
+
+ col-8 +
+
+
+
+ col-8 +
+
+
+
+ col-8 +
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/link/_example/base.tsx 1`] = `
ssr test src/input/_example/status.tsx 1`] = `"
ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `"
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
"`; + +exports[`ssr snapshot test > ssr test src/layout/_example/index.tsx 1`] = `"

Layout 布局

以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。

01 组件类型

基础用法

col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12

在列元素之间增加间距

col-8
col-8
col-8
"`; + +exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `"
col-8
col-8
col-8
"`; + exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

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

禁用状态

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

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index fd46a3f6..4701822c 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -116,6 +116,12 @@ exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `"
ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `"
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
"`; + +exports[`ssr snapshot test > ssr test src/layout/_example/index.tsx 1`] = `"

Layout 布局

以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。

01 组件类型

基础用法

col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12

在列元素之间增加间距

col-8
col-8
col-8
"`; + +exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `"
col-8
col-8
col-8
"`; + exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

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

禁用状态

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

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; From 4c5791b84893ecfd6278ff2ddd888dc43222c0f6 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Mon, 26 Aug 2024 20:45:27 +0800 Subject: [PATCH 02/28] docs: update cell.md (#497) --- src/cell/cell.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/cell/cell.md b/src/cell/cell.md index c8881de3..56241d59 100644 --- a/src/cell/cell.md +++ b/src/cell/cell.md @@ -6,16 +6,6 @@ isComponent: true toc: false --- -## 单行单元格 - -::: demo _example/single cell -::: - -## 多行单元格 - -::: demo _example/multiple cell -::: - ## API ### Cell Props From 96dcd6a0cce967e72438cb0ef111f6eabb59d206 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Mon, 26 Aug 2024 20:58:25 +0800 Subject: [PATCH 03/28] feat(Divider): support TNode function (#496) --- src/divider/Divider.tsx | 7 +++---- src/divider/__tests__/divider.test.tsx | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx index 911da7c4..c0e19b13 100644 --- a/src/divider/Divider.tsx +++ b/src/divider/Divider.tsx @@ -6,10 +6,9 @@ import { dividerDefaultProps } from './defaultProps'; import { StyledProps } from '../common'; import useConfig from '../_util/useConfig'; import useDefaultProps from '../hooks/useDefaultProps'; +import parseTNode from '../_util/parseTNode'; -export interface DividerProps extends TdDividerProps, StyledProps { - children?: React.ReactNode; -} +export interface DividerProps extends TdDividerProps, StyledProps {} const Divider: FC = (props) => { const { children, align, dashed, layout, content, style } = useDefaultProps(props, dividerDefaultProps); @@ -28,7 +27,7 @@ const Divider: FC = (props) => { return (
-
{contentNode}
+
{parseTNode(contentNode)}
); }; diff --git a/src/divider/__tests__/divider.test.tsx b/src/divider/__tests__/divider.test.tsx index dd6144a3..c7c52249 100644 --- a/src/divider/__tests__/divider.test.tsx +++ b/src/divider/__tests__/divider.test.tsx @@ -9,11 +9,7 @@ describe('Divider', () => { const testId = 'divider test align'; const aligns: TdDividerProps['align'][] = ['left', 'right', 'center']; const { getByTestId } = render( -
- {aligns?.map((align, index) => ( - - ))} -
, +
{aligns?.map((align, index) => )}
, ); const instance = await waitFor(() => getByTestId(testId)); @@ -28,11 +24,7 @@ describe('Divider', () => { const testId = 'divider test layout'; const layouts: TdDividerProps['layout'][] = ['horizontal', 'vertical']; const { getByTestId } = render( -
- {layouts?.map((layout, index) => ( - - ))} -
, +
{layouts?.map((layout, index) => )}
, ); const instance = await waitFor(() => getByTestId(testId)); @@ -56,6 +48,14 @@ describe('Divider', () => { }); }); + describe('function', () => { + it(':content', async () => { + const content = () => 'DividerContent'; + const { getByText } = render({content}); + expect(getByText(content()).textContent).toBeTruthy(); + }); + }); + describe('slot', () => { it(':children', async () => { const content = 'DividerContent'; From dea8dbc0c430e8cdc906c86a677486c877221073 Mon Sep 17 00:00:00 2001 From: "Y." Date: Tue, 27 Aug 2024 14:36:24 +0800 Subject: [PATCH 04/28] fix(Badge): fix style error when content is ReactNode (#499) * fix(Badge): fix style error when content is ReactNode * test: update csr and ssr snap --- src/badge/Badge.tsx | 14 +- test/snap/__snapshots__/csr.test.jsx.snap | 880 ++++++++++------------ test/snap/__snapshots__/ssr.test.jsx.snap | 18 +- 3 files changed, 423 insertions(+), 489 deletions(-) diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx index 3d8909dc..9d876472 100644 --- a/src/badge/Badge.tsx +++ b/src/badge/Badge.tsx @@ -81,12 +81,12 @@ const Badge = forwardRef((originProps, ref) => { const childNode = content || children; - const readerContent = () => - childNode && ( -
- {parseTNode(childNode)} -
- ); + const readerContent = () => { + if (typeof content === 'string') { + return {content}; + } + return parseTNode(childNode); + }; const readerBadge = () => { if (!isShowBadge) return null; @@ -99,7 +99,7 @@ const Badge = forwardRef((originProps, ref) => { return (
- {readerContent()} +
{readerContent()}
{readerBadge()}
); diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index a6cfcae1..d4c5db5b 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -308,22 +308,18 @@ exports[`csr snapshot test > csr test src/badge/_example/base.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`] = `
- - - + + 按钮 + +
csr test src/badge/_example/base.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/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/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/theme.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`] = `
+
csr test src/cell/_example/base.tsx 1`] = `
+
@@ -3194,6 +3151,9 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = `
+
@@ -3913,6 +3873,9 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = `
+
@@ -4280,6 +4243,9 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = `
+
@@ -6488,44 +6454,40 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/badge.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/badge.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/badge.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/index.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/index.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/index.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
csr test src/grid/_example/index.tsx 1`] = `
-
-
-
-
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
-
- + +
ssr test src/back-top/_example/base.tsx 1`] = `" ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; -exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
"`; exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"
"`; @@ -25120,13 +25054,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; @@ -25140,7 +25074,7 @@ exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `" ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; exports[`ssr snapshot test > ssr test src/grid/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
"`; @@ -25152,7 +25086,7 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"
ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏
保存
编辑
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 4701822c..a9fa0e2d 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -4,13 +4,13 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `" ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; -exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
"`; exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"
"`; @@ -34,13 +34,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; @@ -54,7 +54,7 @@ exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `" ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; exports[`ssr snapshot test > ssr test src/grid/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
"`; @@ -66,7 +66,7 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"
ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏
保存
编辑
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
"`; From 3acb9ef4ff53f2e2b840c5d30ae38d3494635433 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Tue, 27 Aug 2024 14:37:26 +0800 Subject: [PATCH 05/28] test(divider): add test case (#498) * test(divider): add test case * test(divider): add test case --- .../vitest-divider.test.jsx.snap | 110 ++++++++++++++++++ src/divider/__tests__/vitest-divider.test.jsx | 55 +++++++++ src/divider/divider.md | 4 +- tsconfig.json | 3 +- 4 files changed, 169 insertions(+), 3 deletions(-) create mode 100644 src/divider/__tests__/__snapshots__/vitest-divider.test.jsx.snap create mode 100644 src/divider/__tests__/vitest-divider.test.jsx diff --git a/src/divider/__tests__/__snapshots__/vitest-divider.test.jsx.snap b/src/divider/__tests__/__snapshots__/vitest-divider.test.jsx.snap new file mode 100644 index 00000000..e472676a --- /dev/null +++ b/src/divider/__tests__/__snapshots__/vitest-divider.test.jsx.snap @@ -0,0 +1,110 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Divider Component > props.align is equal to center 1`] = ` +
+ +
+`; + +exports[`Divider Component > props.align is equal to left 1`] = ` +
+ +
+`; + +exports[`Divider Component > props.align is equal to right 1`] = ` +
+ +
+`; + +exports[`Divider Component > props.children works fine 1`] = ` +
+ +
+`; + +exports[`Divider Component > props.content works fine 1`] = ` +
+ +
+`; + +exports[`Divider Component > props.layout is equal to horizontal 1`] = ` +
+ +`; + +exports[`Divider Component > props.layout is equal to vertical 1`] = ` +
+ +`; diff --git a/src/divider/__tests__/vitest-divider.test.jsx b/src/divider/__tests__/vitest-divider.test.jsx new file mode 100644 index 00000000..95566cbd --- /dev/null +++ b/src/divider/__tests__/vitest-divider.test.jsx @@ -0,0 +1,55 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/** + * 该文件由脚本自动生成，如需修改请联系 PMC + * This file generated by scripts of tdesign-api. `npm run api:docs Divider React(Mobile) vitest,finalProject` + * If you need to modify this file, contact PMC first please. + */ +import React from 'react'; +import { render } from '@test/utils'; +import { Divider } from '..'; + +describe('Divider Component', () => { + ['left', 'right', 'center'].forEach((item) => { + it(`props.align is equal to ${item}`, () => { + const { container } = render(Text); + expect(container.firstChild).toHaveClass(`t-divider--${item}`); + expect(container).toMatchSnapshot(); + }); + }); + + it('props.children works fine', () => { + const { container } = render( + + TNode + , + ); + expect(container.querySelector('.custom-node')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it('props.content works fine', () => { + const { container } = render(TNode}>); + expect(container.querySelector('.custom-node')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it('props.dashed works fine', () => { + // dashed default value is false + const { container: container1 } = render(); + expect(container1.querySelector(`.${'t-divider--dashed'}`)).toBeFalsy(); + // dashed = true + const { container: container2 } = render(); + expect(container2.firstChild).toHaveClass('t-divider--dashed'); + // dashed = false + const { container: container3 } = render(); + expect(container3.querySelector(`.${'t-divider--dashed'}`)).toBeFalsy(); + }); + + ['horizontal', 'vertical'].forEach((item) => { + it(`props.layout is equal to ${item}`, () => { + const { container } = render(); + expect(container.firstChild).toHaveClass(`t-divider--${item}`); + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/src/divider/divider.md b/src/divider/divider.md index 87e28ad5..392f272c 100644 --- a/src/divider/divider.md +++ b/src/divider/divider.md @@ -8,7 +8,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N -children | TNode | - | 子元素，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N diff --git a/tsconfig.json b/tsconfig.json index 87c3593c..de500ac4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,7 +32,8 @@ "cjs", "esm", "es", - "site" + "site", + "**/*.jsx", ], "compileOnSave": false } From b346021c17506ca175ef5c9d6b0d5ecbd1ecf0c9 Mon Sep 17 00:00:00 2001 From: slatejack <39983389+slatejack@users.noreply.github.com> Date: Wed, 28 Aug 2024 10:41:52 +0800 Subject: [PATCH 06/28] =?UTF-8?q?feat(NoticeBar):=20NoticeBar=20=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=20mobile-vue=20(#501)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(notice-bar): update notice bar update notice bar style to v2, implementation of synchronized vue feat #404 * fix(notice-bar): fix notice-bar demo entry path, fix notice-bar render prefixIcon method * feat(notice-bar): update notice-bar demo * style(notice-bar): fix spell check * fix(notice-bar): fix with code review use useClassPrefix instead useContext, clear timer and optimize assignment --- site/mobile/mobile.config.js | 2 +- src/notice-bar/NoticeBar.tsx | 283 ++--- src/notice-bar/_example/base.tsx | 6 + src/notice-bar/_example/controller.jsx | 30 - src/notice-bar/_example/custom.tsx | 16 + src/notice-bar/_example/customization.tsx | 19 + src/notice-bar/_example/event.jsx | 34 - src/notice-bar/_example/event.tsx | 19 + src/notice-bar/_example/icon.jsx | 13 - src/notice-bar/_example/icon.tsx | 6 + src/notice-bar/_example/mobile.jsx | 82 -- src/notice-bar/_example/mobile.tsx | 48 + src/notice-bar/_example/multi-line.jsx | 43 - src/notice-bar/_example/scrolling.jsx | 21 - src/notice-bar/_example/scrolling.tsx | 17 + src/notice-bar/_example/static.jsx | 15 - src/notice-bar/_example/style/index.less | 23 + src/notice-bar/_example/suffixIcon.tsx | 7 + src/notice-bar/_example/theme.jsx | 16 - src/notice-bar/_example/theme.tsx | 14 + src/notice-bar/defaultProps.ts | 7 +- src/notice-bar/notice-bar.en-US.md | 22 + src/notice-bar/notice-bar.md | 16 +- src/notice-bar/style/index.js | 2 +- src/notice-bar/type.ts | 23 +- test/snap/__snapshots__/csr.test.jsx.snap | 1230 +++++++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 18 + 27 files changed, 1618 insertions(+), 414 deletions(-) create mode 100644 src/notice-bar/_example/base.tsx delete mode 100644 src/notice-bar/_example/controller.jsx create mode 100644 src/notice-bar/_example/custom.tsx create mode 100644 src/notice-bar/_example/customization.tsx delete mode 100644 src/notice-bar/_example/event.jsx create mode 100644 src/notice-bar/_example/event.tsx delete mode 100644 src/notice-bar/_example/icon.jsx create mode 100644 src/notice-bar/_example/icon.tsx delete mode 100644 src/notice-bar/_example/mobile.jsx create mode 100644 src/notice-bar/_example/mobile.tsx delete mode 100644 src/notice-bar/_example/multi-line.jsx delete mode 100644 src/notice-bar/_example/scrolling.jsx create mode 100644 src/notice-bar/_example/scrolling.tsx delete mode 100644 src/notice-bar/_example/static.jsx create mode 100644 src/notice-bar/_example/style/index.less create mode 100644 src/notice-bar/_example/suffixIcon.tsx delete mode 100644 src/notice-bar/_example/theme.jsx create mode 100644 src/notice-bar/_example/theme.tsx create mode 100644 src/notice-bar/notice-bar.en-US.md diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index d5967f20..5268ecd2 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -220,7 +220,7 @@ export default { { title: 'NoticeBar 公告栏', name: 'notice-bar', - component: () => import('tdesign-mobile-react/notice-bar/_example/mobile.jsx'), + component: () => import('tdesign-mobile-react/notice-bar/_example/mobile.tsx'), }, { title: 'Result 结果', diff --git a/src/notice-bar/NoticeBar.tsx b/src/notice-bar/NoticeBar.tsx index 0db0c021..6f35814c 100644 --- a/src/notice-bar/NoticeBar.tsx +++ b/src/notice-bar/NoticeBar.tsx @@ -1,10 +1,18 @@ -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { InfoCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react'; -import cls from 'classnames'; -import { ConfigContext } from '../config-provider'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-react'; +import classNames from 'classnames'; +import isObject from 'lodash/isObject'; +import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; +import isArray from 'lodash/isArray'; +import Swiper from 'tdesign-mobile-react/swiper'; +import SwiperItem from 'tdesign-mobile-react/swiper/SwiperItem'; +import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass'; import type { StyledProps } from '../common'; -import type { TdNoticeBarProps, NoticeBarTrigger } from './type'; +import type { TdNoticeBarProps, NoticeBarTrigger, NoticeBarMarquee } from './type'; import useDefault from '../_util/useDefault'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { noticeBarDefaultProps } from './defaultProps'; +import noop from '../_util/noop'; export interface NoticeBarProps extends TdNoticeBarProps, StyledProps {} @@ -44,26 +52,15 @@ const defaultIcons: Record = { info: , success: , warning: , - error: , + error: , }; -function filterUndefinedValue>(obj: T): Partial { - const keys = Object.keys(obj); - const result = keys.reduce((prev, next: keyof T) => { - if (typeof obj[next] !== 'undefined') { - return { - ...prev, - [next]: obj[next], - }; - } - return prev; - }, {}); - - return result; -} - function useAnimationSettingValue() { - const animationSettingValue = useRef(defaultReduceState()); + const animationSettingValue = useRef(null); + if (!animationSettingValue.current) { + // 仅为null时进行初始化 + animationSettingValue.current = defaultReduceState(); + } const [, setState] = useState(0); function updateScroll(obj: Partial) { @@ -89,6 +86,7 @@ function useAnimationSettingValue() { animationSettingValue.current = obj || defaultReduceState(); setState(Math.random()); } + return { animationSettingValue, updateScroll, @@ -98,60 +96,51 @@ function useAnimationSettingValue() { } const NoticeBar: React.FC = (props) => { - const { classPrefix } = useContext(ConfigContext); const { content, - extra, + direction, marquee, + operation, prefixIcon, suffixIcon, theme = 'info', visible, defaultVisible, - onChange, onClick, - } = props; + } = useDefaultProps(props, noticeBarDefaultProps); - const { animationSettingValue, updateScroll, updateAnimationFrame } = useAnimationSettingValue(); - - const name = `${classPrefix}-notice-bar`; + const listDOM = useRef(null); + const itemDOM = useRef(null); + const hasBeenExecute = useRef(false); - const showExtraText = !!extra; - const rootClasses = useMemo(() => cls([name, `${name}--${theme}`]), [name, theme]); + const [isShow] = useDefault(visible, defaultVisible, noop); + const rootClassName = usePrefixClass('notice-bar'); + const containerClassName = classNames(rootClassName, `${rootClassName}--${theme}`); + const { animationSettingValue, updateScroll, updateAnimationFrame } = useAnimationSettingValue(); - const computedPrefixIcon: TdNoticeBarProps['prefixIcon'] | IconType | null = useMemo(() => { - let temp = null; - if (prefixIcon !== '') { - if (Object.keys(defaultIcons).includes(theme)) { - temp = defaultIcons[theme]; + useEffect(() => { + if (!hasBeenExecute.current) { + if (isShow) { + hasBeenExecute.current = true; + handleScrolling(); } - - return prefixIcon || temp || null; + return; } - return null; - }, [prefixIcon, theme]); - - const handleClick = useCallback( - (trigger: NoticeBarTrigger) => { - onClick?.(trigger); - }, - [onClick], - ); + const timer = setTimeout(() => { + if (isShow) { + updateAnimationFrame({ + offset: animationSettingValue.current.listWidth, + duration: 0, + }); + handleScrolling(); + } + }, 0); - const animateStyle = useMemo( - () => ({ - transform: animationSettingValue.current.offset ? `translateX(${animationSettingValue.current.offset}px)` : '', - transitionDuration: `${animationSettingValue.current.duration}s`, - transitionTimingFunction: 'linear', - }), + return () => { + clearTimeout(timer); + }; // eslint-disable-next-line react-hooks/exhaustive-deps - [animationSettingValue.current.offset, animationSettingValue.current.duration], - ); - - const listDOM = useRef(null); - const itemDOM = useRef(null); - - const [isShow] = useDefault(visible, defaultVisible, onChange); + }, [isShow]); function handleScrolling() { // 过滤 marquee 为 false @@ -170,13 +159,16 @@ const NoticeBar: React.FC = (props) => { updateScrollState = { ...animationSettingValue.current.scroll, ...defaultReduceState().scroll, - marquee: true, + marquee, }; - } else { + } + if (isObject(marquee)) { + const curMarquee = marquee as NoticeBarMarquee; updateScrollState = { - ...animationSettingValue.current.scroll, - ...filterUndefinedValue(marquee), marquee: true, + loop: typeof curMarquee?.loop === 'undefined' ? updateScrollState.loop : curMarquee.loop, + speed: curMarquee.speed ?? updateScrollState.speed, + delay: curMarquee.delay ?? updateScrollState.delay, }; } @@ -225,90 +217,103 @@ const NoticeBar: React.FC = (props) => { }, 0); } - const listScrollDomCls = cls(`${name}__list`, { - [`${name}__list--scrolling`]: animationSettingValue.current.scroll.marquee, - }); - - const listItemScrollDomCls = cls(`${name}__item`, { - [`${name}__item-detail`]: showExtraText, - }); - - const renderPrefixIcon = useMemo( - () => - computedPrefixIcon ? ( -
handleClick('prefix-icon')}> - {computedPrefixIcon} -
- ) : null, - [handleClick, name, computedPrefixIcon], + const handleClick = (trigger: NoticeBarTrigger) => { + onClick?.(trigger); + }; + // 动画 + const animateStyle = useMemo( + () => ({ + transform: animationSettingValue.current.offset ? `translateX(${animationSettingValue.current.offset}px)` : '', + transitionDuration: `${animationSettingValue.current.duration}s`, + transitionTimingFunction: 'linear', + }), + // eslint-disable-next-line react-hooks/exhaustive-deps + [animationSettingValue.current.offset, animationSettingValue.current.duration], ); - function onClickExtra(e: React.MouseEvent) { - e.stopPropagation(); - handleClick('extra'); - } - - const itemDomStyle = animationSettingValue.current.scroll.marquee ? animateStyle : {}; - - const hasBeenExecute = useRef(false); - - useEffect(() => { - if (!hasBeenExecute.current) { - if (isShow) { - hasBeenExecute.current = true; - handleScrolling(); - } - return; + const renderPrefixIcon = () => { + const prefixIconContent = prefixIcon ? parseTNode(prefixIcon) : defaultIcons[theme]; + if (prefixIcon !== null && prefixIconContent) { + return ( +
handleClick('prefix-icon')}> + {prefixIconContent} +
+ ); } - onChange?.(isShow); - setTimeout(() => { - if (isShow) { - updateAnimationFrame({ - offset: animationSettingValue.current.listWidth, - duration: 0, - }); - handleScrolling(); - } - }, 0); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isShow]); - - if (!isShow) { return null; - } - - return ( -
-
- {renderPrefixIcon} -
-
-
- handleClick('content')}> - {content} - {showExtraText && ( - - {extra} - - )} - -
-
-
+ }; - {suffixIcon && ( -
handleClick('suffix-icon')}> - {suffixIcon} + const renderContent = () => { + const renderShowContent = () => parseTNode(content) || null; + const renderOperationContent = () => { + const operationContent = parseTNode(operation); + if (!operationContent) { + return null; + } + return ( + { + e.stopPropagation(); + handleClick('operation'); + }} + > + {operationContent} + + ); + }; + return ( +
handleClick('content')}> + {direction === 'vertical' && isArray(content) ? ( + + {content.map((item, index) => ( + +
{item}
+ + ))} + + ) : ( +
+ {renderShowContent()} + {renderOperationContent()}
)}
+ ); + }; + + const renderSuffixIconContent = () => { + const suffixIconContent = parseTNode(suffixIcon); + if (!suffixIconContent) { + return null; + } + return ( +
handleClick('suffix-icon')}> + {suffixIconContent} +
+ ); + }; + return isShow ? ( +
+ {renderPrefixIcon()} + {renderContent()} + {renderSuffixIconContent()}
- ); + ) : null; }; NoticeBar.displayName = 'NoticeBar'; diff --git a/src/notice-bar/_example/base.tsx b/src/notice-bar/_example/base.tsx new file mode 100644 index 00000000..7631cf21 --- /dev/null +++ b/src/notice-bar/_example/base.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { NoticeBar } from 'tdesign-mobile-react'; + +export default function Base() { + return ; +} diff --git a/src/notice-bar/_example/controller.jsx b/src/notice-bar/_example/controller.jsx deleted file mode 100644 index 6e1d9b4f..00000000 --- a/src/notice-bar/_example/controller.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { ArrowRightIcon, AppIcon } from 'tdesign-icons-react'; -import { NoticeBar, Toast } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function ControllerDemo() { - const handleClick = (context) => { - Toast({ message: `click: ${context}` }); - }; - - return ( -
- - } - onClick={handleClick} - /> - } - onClick={handleClick} - /> - -
- ); -} diff --git a/src/notice-bar/_example/custom.tsx b/src/notice-bar/_example/custom.tsx new file mode 100644 index 00000000..d716fa16 --- /dev/null +++ b/src/notice-bar/_example/custom.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { NoticeBar } from 'tdesign-mobile-react'; +import { ChevronRightIcon, SoundIcon } from 'tdesign-icons-react'; +import './style/index.less'; + +export default function Custom() { + return ( + } + suffixIcon={} + /> + ); +} diff --git a/src/notice-bar/_example/customization.tsx b/src/notice-bar/_example/customization.tsx new file mode 100644 index 00000000..4318b82b --- /dev/null +++ b/src/notice-bar/_example/customization.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Link, NoticeBar } from 'tdesign-mobile-react'; +import { CloseIcon } from 'tdesign-icons-react'; +import './style/index.less'; + +export default function Customization() { + return ( + + 详情 + + } + suffixIcon={} + /> + ); +} diff --git a/src/notice-bar/_example/event.jsx b/src/notice-bar/_example/event.jsx deleted file mode 100644 index 66ba54e9..00000000 --- a/src/notice-bar/_example/event.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { CloseIcon } from 'tdesign-icons-react'; -import { NoticeBar, Toast, Button } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function EventDemo() { - const [visible, setVisible] = useState(false); - const handleClick = (context) => { - Toast({ message: `click: ${context}` }); - }; - - const handleChange = () => { - setVisible((prev) => !prev); - }; - - const handleConsole = (value) => { - console.log(value); - }; - - return ( -
- - - } - /> - -
- ); -} diff --git a/src/notice-bar/_example/event.tsx b/src/notice-bar/_example/event.tsx new file mode 100644 index 00000000..b9c5c1cc --- /dev/null +++ b/src/notice-bar/_example/event.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { NoticeBar, Toast } from 'tdesign-mobile-react'; +import { ChevronRightIcon } from 'tdesign-icons-react'; +import './style/index.less'; + +export default function Event() { + const handleClick = (context: string) => { + Toast({ message: `click:${context}` }); + }; + return ( + } + onClick={handleClick} + /> + ); +} diff --git a/src/notice-bar/_example/icon.jsx b/src/notice-bar/_example/icon.jsx deleted file mode 100644 index 7ab8a341..00000000 --- a/src/notice-bar/_example/icon.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { NoticeBar } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function IconDemo() { - return ( -
- - - -
- ); -} diff --git a/src/notice-bar/_example/icon.tsx b/src/notice-bar/_example/icon.tsx new file mode 100644 index 00000000..b378cea1 --- /dev/null +++ b/src/notice-bar/_example/icon.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { NoticeBar } from 'tdesign-mobile-react'; + +export default function IconDemo() { + return ; +} diff --git a/src/notice-bar/_example/mobile.jsx b/src/notice-bar/_example/mobile.jsx deleted file mode 100644 index 2761cfce..00000000 --- a/src/notice-bar/_example/mobile.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { useState } from 'react'; -import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-react'; -import { NoticeBar, Toast } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -function MobileDemo() { - const [visible] = useState(true); - const iconFunc = ; - const arrowRight = ; - const handleClick = (context) => { - Toast({ message: `click:${context}` }); - }; - - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - {' '} -
- ); -} - -export default MobileDemo; diff --git a/src/notice-bar/_example/mobile.tsx b/src/notice-bar/_example/mobile.tsx new file mode 100644 index 00000000..8f39a84d --- /dev/null +++ b/src/notice-bar/_example/mobile.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import BaseDemo from './base'; +import IconDemo from './icon'; +import SuffixIcon from './suffixIcon'; +import Event from './event'; +import CustomDemo from './custom'; +import Customization from './customization'; +import ThemeDemo from './theme'; +import ScrollDemo from './scrolling'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; + +function MobileDemo() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default MobileDemo; diff --git a/src/notice-bar/_example/multi-line.jsx b/src/notice-bar/_example/multi-line.jsx deleted file mode 100644 index aa0de456..00000000 --- a/src/notice-bar/_example/multi-line.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { ArrowRightIcon, CloseIcon } from 'tdesign-icons-react'; -import { NoticeBar, Toast } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function MultiLineDemo() { - const closeIcon = ; - const arrowRightIcon = ; - - const handleClick = (context) => { - Toast({ message: `click:${context}` }); - }; - - return ( -
- - - - - - -
- ); -} diff --git a/src/notice-bar/_example/scrolling.jsx b/src/notice-bar/_example/scrolling.jsx deleted file mode 100644 index 74a976b1..00000000 --- a/src/notice-bar/_example/scrolling.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useState } from 'react'; -import { NoticeBar } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function ScrollingDemo() { - const [visible] = useState(true); - - return ( -
- - - - -
- ); -} diff --git a/src/notice-bar/_example/scrolling.tsx b/src/notice-bar/_example/scrolling.tsx new file mode 100644 index 00000000..074c9ce5 --- /dev/null +++ b/src/notice-bar/_example/scrolling.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { NoticeBar } from 'tdesign-mobile-react'; +import './style/index.less'; +import { SoundIcon } from 'tdesign-icons-react'; + +export default function Scrolling() { + const content = '提示文字描述提示文字描述提示文字描述提示文字描述文'; + const content1 = ['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月']; + + return ( + <> + + + } /> + + ); +} diff --git a/src/notice-bar/_example/static.jsx b/src/notice-bar/_example/static.jsx deleted file mode 100644 index 96bf575a..00000000 --- a/src/notice-bar/_example/static.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -import { NoticeBar } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function StaticDemo() { - const [visible] = useState(true); - - return ( -
- - - -
- ); -} diff --git a/src/notice-bar/_example/style/index.less b/src/notice-bar/_example/style/index.less new file mode 100644 index 00000000..254f28bb --- /dev/null +++ b/src/notice-bar/_example/style/index.less @@ -0,0 +1,23 @@ +.cover-class { + background-color: var(--bg-color-demo, #fff); + + .t-icon { + color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9)) !important; + } + + .t-notice-bar__text { + color: var(--bg-color-demo, #fff) !important; + } +} + +.custom-link { + margin-left: 2px; +} + +.notice-bar-demo-block { + margin-bottom: 16px; +} + +.tdesign-mobile-demo { + background-color: var(--bg-color-demo, #fff); +} diff --git a/src/notice-bar/_example/suffixIcon.tsx b/src/notice-bar/_example/suffixIcon.tsx new file mode 100644 index 00000000..c91af8c0 --- /dev/null +++ b/src/notice-bar/_example/suffixIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { NoticeBar } from 'tdesign-mobile-react'; +import { CloseIcon } from 'tdesign-icons-react'; + +export default function SuffixIcon() { + return } />; +} diff --git a/src/notice-bar/_example/theme.jsx b/src/notice-bar/_example/theme.jsx deleted file mode 100644 index 39b89f53..00000000 --- a/src/notice-bar/_example/theme.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { NoticeBar } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -export default function ThemeDemo() { - return ( -
- - - - - - -
- ); -} diff --git a/src/notice-bar/_example/theme.tsx b/src/notice-bar/_example/theme.tsx new file mode 100644 index 00000000..8129c096 --- /dev/null +++ b/src/notice-bar/_example/theme.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { NoticeBar } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function ThemeDemo() { + return ( + <> + + + + + + ); +} diff --git a/src/notice-bar/defaultProps.ts b/src/notice-bar/defaultProps.ts index a40c4a2f..7653f552 100644 --- a/src/notice-bar/defaultProps.ts +++ b/src/notice-bar/defaultProps.ts @@ -4,4 +4,9 @@ import { TdNoticeBarProps } from './type'; -export const noticeBarDefaultProps: TdNoticeBarProps = { marquee: false, theme: 'info', defaultVisible: false }; +export const noticeBarDefaultProps: TdNoticeBarProps = { + direction: 'horizontal', + marquee: false, + theme: 'info', + defaultVisible: false, +}; diff --git a/src/notice-bar/notice-bar.en-US.md b/src/notice-bar/notice-bar.en-US.md new file mode 100644 index 00000000..8ad8a151 --- /dev/null +++ b/src/notice-bar/notice-bar.en-US.md @@ -0,0 +1,22 @@ +:: BASE_DOC :: + +## API + + +### NoticeBar Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +content | TNode | - | Typescript：`string \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +direction | String | horizontal | options: horizontal/vertical | N +marquee | Boolean / Object | false | Typescript：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts) | N +operation | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +theme | String | info | options: info/success/warning/error | N +visible | Boolean | false | \- | N +defaultVisible | Boolean | false | uncontrolled property | N +onChange | Function | | Typescript：`(value: boolean) => void`
`deprecated` | N +onClick | Function | | Typescript：`(trigger: NoticeBarTrigger) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
| N diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md index 16c6039c..a41b6a35 100644 --- a/src/notice-bar/notice-bar.md +++ b/src/notice-bar/notice-bar.md @@ -2,19 +2,21 @@ ## API + ### NoticeBar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -content | TNode | - | 文本内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -extra | TNode | - | 右侧额外信息。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts) | N -prefixIcon | TNode | - | 前缀图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 文本内容。TS 类型：`string \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N +marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts) | N +operation | TNode | - | 右侧额外信息。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | 前缀图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N suffixIcon | TElement | - | 后缀图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N theme | String | info | 内置主题。可选项：info/success/warning/error | N visible | Boolean | false | 显示/隐藏 | N defaultVisible | Boolean | false | 显示/隐藏。非受控属性 | N -onChange | Function | | TS 类型：`(value: boolean) => void`
展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 | N -onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`
点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon';`
| N +onChange | Function | | TS 类型：`(value: boolean) => void`
已废弃。展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 | N +onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`
点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
| N diff --git a/src/notice-bar/style/index.js b/src/notice-bar/style/index.js index 9ce2be11..fc4c44cc 100644 --- a/src/notice-bar/style/index.js +++ b/src/notice-bar/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/notice-bar/_index.less'; +import '../../_common/style/mobile/components/notice-bar/v2/_index.less'; diff --git a/src/notice-bar/type.ts b/src/notice-bar/type.ts index 3e347002..f073008f 100644 --- a/src/notice-bar/type.ts +++ b/src/notice-bar/type.ts @@ -10,20 +10,25 @@ export interface TdNoticeBarProps { /** * 文本内容 */ - content?: TNode; + content?: [] | TNode; /** - * 右侧额外信息 + * 滚动方向 + * @default horizontal */ - extra?: TNode; + direction?: 'horizontal' | 'vertical'; /** * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 * @default false */ - marquee?: boolean | DrawMarquee; + marquee?: boolean | NoticeBarMarquee; + /** + * 右侧额外信息 + */ + operation?: TNode; /** * 前缀图标 */ - prefixIcon?: TNode; + prefixIcon?: TElement; /** * 后缀图标 */ @@ -43,20 +48,16 @@ export interface TdNoticeBarProps { * @default false */ defaultVisible?: boolean; - /** - * 展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 - */ - onChange?: (value: boolean) => void; /** * 点击事件 */ onClick?: (trigger: NoticeBarTrigger) => void; } -export interface DrawMarquee { +export interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number; } -export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon'; +export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'operation' | 'suffix-icon'; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index d4c5db5b..73822122 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -20121,6 +20121,1218 @@ exports[`csr snapshot test > csr test src/navbar/_example/size.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/notice-bar/_example/base.tsx 1`] = ` +
+
+
+
+ 这是一条普通的通知消息 +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/notice-bar/_example/custom.tsx 1`] = ` +
+
+
+ + + +
+
+
+ 提示文字描述提示文字描述提示文字描述 +
+
+
+ + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/notice-bar/_example/customization.tsx 1`] = ` +
+
+
+ + + +
+
+
+ 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 + + + + 详情 + + + +
+
+
+ + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/notice-bar/_example/event.tsx 1`] = ` +
+
+
+ + + +
+
+
+ 这是一条普通的消息通知 +
+
+
+ + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/notice-bar/_example/icon.tsx 1`] = ` +
+
+
+ + + +
+
+
+ 提示文字描述提示文字描述提示文字描述 +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = ` +
+
+
+

+ NoticeBar 公告栏 +

+

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

+
+
+
+

+ 01 组件类型 +

+

+ 纯文字的公告栏 +

+
+
+
+
+
+ 这是一条普通的通知消息 +
+
+
+
+
+
+
+

+ 带图标静态公告栏 +

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

+ 带关闭的公告栏 +

+
+
+
+
+ + + +
+
+
+ 这是一条普通的通知信息 +
+
+
+ + + +
+
+
+
+
+
+

+ 带入口的公告栏 +

+
+
+
+
+ + + +
+
+
+ 这是一条普通的消息通知 +
+
+
+ + + +
+
+
+
+
+
+

+ 自定样式的公告栏 +

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

+ 自定义内容的公告栏 +

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

+ 02 组件状态 +

+

+ 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error） +

+
+
+
+
+ + + +
+
+
+ 默认状态公告栏默认状态公告栏 +
+
+
+
+
+ + + +
+
+
+ 成功状态公告栏成功状态公告栏 +
+
+
+
+
+ + + +
+
+
+ 警示状态公告栏警示状态公告栏 +
+
+
+
+
+ + + +
+
+
+ 错误状态公告栏错误状态公告栏 +
+
+
+
+
+
+
+

+ 03 可滚动的公告栏 +

+

+ 可滚动公告栏有水平 (horizontal) 和垂直 (vertical) +

+
+
+
+
+
+ 提示文字描述提示文字描述提示文字描述提示文字描述文 +
+
+
+
+
+ + + +
+
+
+ 提示文字描述提示文字描述提示文字描述提示文字描述文 +
+
+
+
+
+ + + +
+
+
+
+
+
+ 莫使金樽空对月 +
+
+
+
+ 君不见 +
+
+
+
+ 高堂明镜悲白发 +
+
+
+
+ 朝如青丝暮成雪 +
+
+
+
+ 人生得意须尽欢 +
+
+
+
+ 莫使金樽空对月 +
+
+
+
+ 君不见 +
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > 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/theme.tsx 1`] = ` +
+
+
+ + + +
+
+
+ 默认状态公告栏默认状态公告栏 +
+
+
+
+
+ + + +
+
+
+ 成功状态公告栏成功状态公告栏 +
+
+
+
+
+ + + +
+
+
+ 警示状态公告栏警示状态公告栏 +
+
+
+
+
+ + + +
+
+
+ 错误状态公告栏错误状态公告栏 +
+
+
+
+`; + exports[`csr snapshot test > csr test src/overlay/_example/base.tsx 1`] = `
@@ -25194,6 +26406,24 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `" ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
标题左对齐
大尺寸标题
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; + +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/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; + exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index a9fa0e2d..c6605a6f 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -174,6 +174,24 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `" ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
标题左对齐
大尺寸标题
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; + +exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; + +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/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; + exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

"`; From 8a52e8859e7c3481ddd5eb1202014628ad2d0246 Mon Sep 17 00:00:00 2001 From: Toby Date: Wed, 28 Aug 2024 10:54:41 +0800 Subject: [PATCH 07/28] =?UTF-8?q?feat(TabBar):=20TabBar=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=AF=B9=E9=BD=90=20mobile-vue=20(#482)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 更新样式文件 * feat(Demo): 升级TabBar示例 * fix(TabBar-type): 修复TabBar类型错误 * fix(TabBar-type): 同步新类型 * feat(TabBarItem): 增加tab-bar-item/样式 * feat(Demo): 升级TabBar示例 * feat(Demo): 组件TabBar自定义示例升级 * feat(TabBar-type): 增加TabBarContext类型 * feat(TabBar): 完成TabBar逻辑迁移 * feat(TabBar): 加上parseTNode * chore: 更新snap * feat(TabBar-API): 同步TabBar的API文档 * chore: update common * chore(TabBar): update snap * chore(TabBar): sync common file * chore: 变更common分支 * chore(TabBar): update tdesign-api * fix: 去掉旧的默认值定义 * refactor(TabBar): 改用usePrefixClass、useDefaultProps * chore(TabBar): update api * chore: 更改common到develop * refactor(TabBar): 简化逻辑 --------- Co-authored-by: github-actions[bot] --- site/mobile/mobile.config.js | 2 +- src/_common | 2 +- src/tab-bar/TabBar.tsx | 46 +- src/tab-bar/TabBarContext.tsx | 14 +- src/tab-bar/TabBarItem.tsx | 145 +- src/tab-bar/_example/badge-props.tsx | 41 + .../_example/{badge-props.jsx => base.tsx} | 16 +- src/tab-bar/_example/{base.jsx => custom.tsx} | 16 +- .../_example/{mobile.jsx => mobile.tsx} | 24 +- .../_example/{pure-icon.jsx => pure-icon.tsx} | 13 +- src/tab-bar/_example/round.tsx | 34 + src/tab-bar/_example/style/index.less | 20 + src/tab-bar/_example/text-spread.jsx | 47 - src/tab-bar/_example/text-spread.tsx | 49 + src/tab-bar/_example/{text.jsx => text.tsx} | 16 +- src/tab-bar/defaultProps.ts | 15 + src/tab-bar/style/index.js | 3 +- src/tab-bar/tab-bar.en-US.md | 50 + src/tab-bar/tab-bar.md | 38 +- src/tab-bar/type.ts | 45 +- test/snap/__snapshots__/csr.test.jsx.snap | 1760 +++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 16 + 22 files changed, 2235 insertions(+), 177 deletions(-) create mode 100644 src/tab-bar/_example/badge-props.tsx rename src/tab-bar/_example/{badge-props.jsx => base.tsx} (50%) rename src/tab-bar/_example/{base.jsx => custom.tsx} (56%) rename src/tab-bar/_example/{mobile.jsx => mobile.tsx} (58%) rename src/tab-bar/_example/{pure-icon.jsx => pure-icon.tsx} (53%) create mode 100644 src/tab-bar/_example/round.tsx delete mode 100644 src/tab-bar/_example/text-spread.jsx create mode 100644 src/tab-bar/_example/text-spread.tsx rename src/tab-bar/_example/{text.jsx => text.tsx} (59%) create mode 100644 src/tab-bar/defaultProps.ts create mode 100644 src/tab-bar/tab-bar.en-US.md diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 5268ecd2..6d827833 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -210,7 +210,7 @@ export default { { title: 'TabBar 标签栏', name: 'tab-bar', - component: () => import('tdesign-mobile-react/tab-bar/_example/mobile.jsx'), + component: () => import('tdesign-mobile-react/tab-bar/_example/mobile.tsx'), }, { title: 'Fab 悬浮按钮', diff --git a/src/_common b/src/_common index 074d44f1..3e51c011 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 074d44f1a1b06c4ee97759e3edf6cb3bbef2f61a +Subproject commit 3e51c01173a3a30cefe60dae7e802231c787d410 diff --git a/src/tab-bar/TabBar.tsx b/src/tab-bar/TabBar.tsx index 9cafeb0a..348c7883 100644 --- a/src/tab-bar/TabBar.tsx +++ b/src/tab-bar/TabBar.tsx @@ -1,47 +1,59 @@ import React, { forwardRef, memo, useMemo, useRef } from 'react'; import cls from 'classnames'; -import useConfig from '../_util/useConfig'; import useDefault from '../_util/useDefault'; import type { StyledProps } from '../common'; import type { TdTabBarProps } from './type'; import { TabBarProvider } from './TabBarContext'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; +import { tabBarDefaultProps } from './defaultProps'; export interface TabBarProps extends TdTabBarProps, StyledProps {} -const TabBar = forwardRef((props, ref) => { - const { bordered, fixed, onChange, value, defaultValue } = props; - const { classPrefix } = useConfig(); - const name = `${classPrefix}-tab-bar`; +const TabBar = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, tabBarDefaultProps); + const { bordered, fixed, onChange, value, defaultValue, safeAreaInsetBottom, shape, split, theme, children } = props; + + const tabBarClass = usePrefixClass('tab-bar'); const [activeValue, onToggleActiveValue] = useDefault(value, defaultValue, onChange); const defaultIndex = useRef(-1); const updateChild = onToggleActiveValue; - const tabBarClass = cls(name, { - [`${name}--bordered`]: bordered, - [`${name}--fixed`]: fixed, - }); + const itemCount = React.Children.count(parseTNode(children)); const memoProviderValues = useMemo( () => ({ defaultIndex, activeValue, updateChild, + shape, + split, + theme, + itemCount, }), - [defaultIndex, activeValue, updateChild], + [defaultIndex, activeValue, updateChild, shape, split, theme, itemCount], ); return ( -
- {props.children} +
+ {parseTNode(children)}
); }); -TabBar.defaultProps = { - bordered: true, - fixed: true, -}; - export default memo(TabBar); diff --git a/src/tab-bar/TabBarContext.tsx b/src/tab-bar/TabBarContext.tsx index 18a41018..36ab8646 100644 --- a/src/tab-bar/TabBarContext.tsx +++ b/src/tab-bar/TabBarContext.tsx @@ -1,11 +1,15 @@ import React, { createContext, MutableRefObject, useMemo } from 'react'; import { ChangeHandler } from '../_util/useDefault'; +import { TdTabBarProps } from './type'; -export const TabBarContext = createContext<{ - defaultIndex: MutableRefObject; - activeValue: number | string | (number | string)[]; - updateChild: ChangeHandler; -}>(null); +export const TabBarContext = createContext< + { + defaultIndex: MutableRefObject; + activeValue: number | string | (number | string)[]; + updateChild: ChangeHandler; + itemCount: number; + } & Pick +>(null); export function TabBarProvider({ children, value }) { const memoValue = useMemo(() => value, [value]); diff --git a/src/tab-bar/TabBarItem.tsx b/src/tab-bar/TabBarItem.tsx index 4d854e9c..a2a8dba1 100644 --- a/src/tab-bar/TabBarItem.tsx +++ b/src/tab-bar/TabBarItem.tsx @@ -1,24 +1,34 @@ import cls from 'classnames'; -import React, { forwardRef, memo, useContext, useEffect, useMemo, useState } from 'react'; - +import React, { forwardRef, memo, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { CSSTransition } from 'react-transition-group'; +import { Icon } from 'tdesign-icons-react'; import type { StyledProps } from '../common'; import type { TdTabBarItemProps } from './type'; import { TabBarContext } from './TabBarContext'; import Badge from '../badge'; -import useConfig from '../_util/useConfig'; import useTabBarCssTransition from './useTabBarCssTransition'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; export interface TabBarItemProps extends TdTabBarItemProps, StyledProps {} -const defaultBadgeOffset = [0, 5]; +const defaultBadgeOffset = [0, 0]; const defaultBadgeMaxCount = 99; -const TabBarItem = forwardRef((props, ref) => { +const TabBarItem = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, {}); const { subTabBar, icon, badgeProps, value, children } = props; const hasSubTabBar = useMemo(() => !!subTabBar, [subTabBar]); - const { defaultIndex, activeValue, updateChild } = useContext(TabBarContext); + const { defaultIndex, activeValue, updateChild, shape, split, theme, itemCount } = useContext(TabBarContext); + + const tabBarItemClass = usePrefixClass('tab-bar-item'); + + const textNode = useRef(null); + + const [iconOnly, setIconOnly] = useState(false); + // 组件每次 render 生成一个临时的当前组件唯一值 const [currentName] = useState(() => { if (value) { @@ -27,9 +37,10 @@ const TabBarItem = forwardRef((props, ref) => { return (defaultIndex.current += 1); }); - const { classPrefix } = useConfig(); - - const componentName = `${classPrefix}-tab-bar-item`; + useEffect(() => { + const height = textNode?.current?.clientHeight; + setIconOnly(Number(height) === 0); + }, [textNode]); const [isSpread, setIsSpread] = useState(false); @@ -42,6 +53,8 @@ const TabBarItem = forwardRef((props, ref) => { const mergedBadgeProps = useMemo( () => ({ + count: 0, + dot: false, offset: defaultBadgeOffset, maxCount: defaultBadgeMaxCount, ...badgeProps, @@ -83,68 +96,92 @@ const TabBarItem = forwardRef((props, ref) => { setIsSpread(() => false); }; - const tabItemCls = cls(componentName, { - [`${classPrefix}-no-border`]: icon, - }); - const tabItemInnerCls = cls(`${componentName}__content`, { - [`${classPrefix}-is-checked`]: isChecked, - [`${componentName}--onlytext`]: !icon, + /** 拥挤否 */ + const crowded = itemCount > 3; + + const tabItemCls = cls( + tabBarItemClass, + { + [`${tabBarItemClass}--split`]: split, + [`${tabBarItemClass}--text-only`]: !icon, + [`${tabBarItemClass}--crowded`]: crowded, + }, + `${tabBarItemClass}--${shape}`, + ); + const tabItemInnerCls = cls( + `${tabBarItemClass}__content`, + { + [`${tabBarItemClass}__content--checked`]: isChecked, + }, + `${tabBarItemClass}__content--${theme}`, + ); + const tabItemTextCls = cls(`${tabBarItemClass}__text`, { + [`${tabBarItemClass}__text--small`]: icon, }); - const tabItemIconCls = cls(`${componentName}__icon`); - const tabItemSpreadCls = cls(`${componentName}__spread`); - const tabItemSpreadItemCls = cls(`${componentName}__spread-item`); - const tabItemTextCls = cls(`${componentName}__text`); - const tabItemIconMenuCls = cls(`${componentName}__icon-menu`); const transitionClsNames = useTabBarCssTransition({ name: 'spread', }); + const iconSize = `${iconOnly ? 24 : 20}px`; + + const iconContent = + icon && + React.cloneElement(icon, { + style: { fontSize: iconSize }, + }); + return ( -
-
+
+
{icon && ( -
+
{badgeProps && (badgeProps?.dot || badgeProps?.count) ? ( - + ) : ( - icon + iconContent )}
)} {children && ( -
- {shouldShowSubTabBar &&
} - {children} +
+ {shouldShowSubTabBar && ( + <> + +
+ + )} + {parseTNode(children)}
)} - - -
    - {subTabBar?.map((child, index) => ( -
  • { - e.stopPropagation(); - selectChild(child.value || index); - }} - > - {child.label} -
    • - ))} -
-
+ + +
    + {subTabBar?.map((child, index) => ( +
    { + e.stopPropagation(); + selectChild(child.value || index); + }} + > + {index !== 0 &&
    } +
    {child.label}
    +
    + ))} +
+
); }); diff --git a/src/tab-bar/_example/badge-props.tsx b/src/tab-bar/_example/badge-props.tsx new file mode 100644 index 00000000..b844fda6 --- /dev/null +++ b/src/tab-bar/_example/badge-props.tsx @@ -0,0 +1,41 @@ +import React, { useState, useEffect } from 'react'; +import { TabBar, TabBarItem } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +function TabBarBaseDemo() { + const list = [ + { name: 'label_1', text: '首页', icon: 'home', badgeProps: { count: 16 }, ariaLabel: '首页，有16条消息' }, + { name: 'label_2', text: '软件', icon: 'app', badgeProps: { dot: true }, ariaLabel: '软件，有新的消息' }, + { name: 'label_3', text: '聊天', icon: 'chat', badgeProps: { count: 'New' }, ariaLabel: '聊天，New' }, + { name: 'label_4', text: '我的', icon: 'user', badgeProps: { count: '···' }, ariaLabel: '我的，有很多消息' }, + ]; + const [value, setValue] = useState('label_1'); + + const change = (changeValue) => { + setValue(changeValue); + console.log('TabBar 值改变为：', changeValue); + }; + + useEffect(() => { + console.log('当前值：', value); + }, [value]); + + return ( +
+ + {list.map((item, i) => ( + } + value={item.name} + badgeProps={item.badgeProps} + > + {item.text} + + ))} + +
+ ); +} + +export default TabBarBaseDemo; diff --git a/src/tab-bar/_example/badge-props.jsx b/src/tab-bar/_example/base.tsx similarity index 50% rename from src/tab-bar/_example/badge-props.jsx rename to src/tab-bar/_example/base.tsx index 8c6fab1b..2136f4ad 100644 --- a/src/tab-bar/_example/badge-props.jsx +++ b/src/tab-bar/_example/base.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react'; import { TabBar, TabBarItem } from 'tdesign-mobile-react'; -import { AppIcon } from 'tdesign-icons-react'; +import { Icon } from 'tdesign-icons-react'; function TabBarBaseDemo() { const list = [ - { name: 'label_1', text: '文字', icon: , badgeProps: { count: 16 } }, - { name: 'label_2', text: '文字', icon: , badgeProps: { dot: true } }, - { name: 'label_3', text: '文字', icon: , badgeProps: { count: 'New' } }, - { name: 'label_4', text: '文字', icon: , badgeProps: { count: '···' } }, + { value: 'label_1', label: '首页', icon: 'home' }, + { value: 'label_2', label: '应用', icon: 'app' }, + { value: 'label_3', label: '聊天', icon: 'chat' }, + { value: 'label_4', label: '我的', icon: 'user' }, ]; const [value, setValue] = useState('label_1'); @@ -22,10 +22,10 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - - {item.text} + } value={item.value}> + {item.label} ))} diff --git a/src/tab-bar/_example/base.jsx b/src/tab-bar/_example/custom.tsx similarity index 56% rename from src/tab-bar/_example/base.jsx rename to src/tab-bar/_example/custom.tsx index a3a46da6..a8fb00eb 100644 --- a/src/tab-bar/_example/base.jsx +++ b/src/tab-bar/_example/custom.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react'; import { TabBar, TabBarItem } from 'tdesign-mobile-react'; -import { AppIcon } from 'tdesign-icons-react'; +import { Icon } from 'tdesign-icons-react'; function TabBarBaseDemo() { const list = [ - { name: 'label_1', text: '文字', icon: }, - { name: 'label_2', text: '文字', icon: }, - { name: 'label_3', text: '文字', icon: }, - { name: 'label_4', text: '文字', icon: }, + { value: 'label_1', icon: 'home', ariaLabel: '首页' }, + { value: 'label_2', icon: 'app', ariaLabel: '软件' }, + { value: 'label_3', icon: 'chat', ariaLabel: '聊天' }, + { value: 'label_4', icon: 'user', ariaLabel: '我的' }, ]; const [value, setValue] = useState('label_1'); @@ -21,12 +21,10 @@ function TabBarBaseDemo() { }, [value]); return ( -
+
{list.map((item, i) => ( - - {item.text} - + } value={item.value} /> ))}
diff --git a/src/tab-bar/_example/mobile.jsx b/src/tab-bar/_example/mobile.tsx similarity index 58% rename from src/tab-bar/_example/mobile.jsx rename to src/tab-bar/_example/mobile.tsx index d7e63e98..46108059 100644 --- a/src/tab-bar/_example/mobile.jsx +++ b/src/tab-bar/_example/mobile.tsx @@ -7,28 +7,36 @@ import BadgePropsDemo from './badge-props'; import TextDemo from './text'; import PureIconDemo from './pure-icon'; import TextSpreadDemo from './text-spread'; +import RoundDemo from './round'; +import CustomDemo from './custom'; import './style/index.less'; function TabBarMobileDemo() { return (
- - - - - - - - + + + + + + + + + + + + + +
); } diff --git a/src/tab-bar/_example/pure-icon.jsx b/src/tab-bar/_example/pure-icon.tsx similarity index 53% rename from src/tab-bar/_example/pure-icon.jsx rename to src/tab-bar/_example/pure-icon.tsx index 813d0479..06a2f07a 100644 --- a/src/tab-bar/_example/pure-icon.jsx +++ b/src/tab-bar/_example/pure-icon.tsx @@ -1,9 +1,14 @@ import React, { useState, useEffect } from 'react'; import { TabBar, TabBarItem } from 'tdesign-mobile-react'; -import { AppIcon } from 'tdesign-icons-react'; +import { Icon } from 'tdesign-icons-react'; function TabBarBaseDemo() { - const list = [{ name: 'label_1' }, { name: 'label_2' }, { name: 'label_3' }, { name: 'label_4' }]; + const list = [ + { value: 'label_1', icon: 'home', ariaLabel: '首页' }, + { value: 'label_2', icon: 'app', ariaLabel: '软件' }, + { value: 'label_3', icon: 'chat', ariaLabel: '聊天' }, + { value: 'label_4', icon: 'user', ariaLabel: '我的' }, + ]; const [value, setValue] = useState('label_1'); const change = (changeValue) => { @@ -17,9 +22,9 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - } value={item.name} /> + } value={item.value} /> ))}
diff --git a/src/tab-bar/_example/round.tsx b/src/tab-bar/_example/round.tsx new file mode 100644 index 00000000..201f1b23 --- /dev/null +++ b/src/tab-bar/_example/round.tsx @@ -0,0 +1,34 @@ +import React, { useState, useEffect } from 'react'; +import { TabBar, TabBarItem } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +function TabBarBaseDemo() { + const list = [ + { value: 'label_1', icon: 'home', ariaLabel: '首页' }, + { value: 'label_2', icon: 'app', ariaLabel: '软件' }, + { value: 'label_3', icon: 'chat', ariaLabel: '聊天' }, + { value: 'label_4', icon: 'user', ariaLabel: '我的' }, + ]; + const [value, setValue] = useState('label_1'); + + const change = (changeValue) => { + setValue(changeValue); + console.log('TabBar 值改变为：', changeValue); + }; + + useEffect(() => { + console.log('当前值：', value); + }, [value]); + + return ( +
+ + {list.map((item, i) => ( + } value={item.value} /> + ))} + +
+ ); +} + +export default TabBarBaseDemo; diff --git a/src/tab-bar/_example/style/index.less b/src/tab-bar/_example/style/index.less index 374185e0..21a757ef 100644 --- a/src/tab-bar/_example/style/index.less +++ b/src/tab-bar/_example/style/index.less @@ -5,4 +5,24 @@ .t-tab-bar + .t-tab-bar { margin-top: 16px; } + + .section { + &-custom { + --td-tab-bar-border-color: #e7e7e7; + --td-tab-bar-bg-color: #eee; + --td-tab-bar-hover-color: #ddd; + --td-tab-bar-item-color: #bbb; + --td-tab-bar-item-active-color: #333; + } + } +} + +:root[theme-mode='dark'] { + .tdesign-mobile-demo { + .section { + &-custom { + --td-tab-bar-color: rgba(0, 0, 0, 0.9); + } + } + } } diff --git a/src/tab-bar/_example/text-spread.jsx b/src/tab-bar/_example/text-spread.jsx deleted file mode 100644 index 0b4b2883..00000000 --- a/src/tab-bar/_example/text-spread.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { TabBar, TabBarItem } from 'tdesign-mobile-react'; - -function TabBarBaseDemo() { - const list = [ - { - name: 'label_1', - text: '标签栏一', - }, - { - name: 'label_2', - text: '标签栏二', - }, - { - name: 'label_3', - text: '此处展开', - children: [ - { - value: 'spread_3', - label: '展开项三', - }, - { - value: 'spread_2', - label: '展开项二', - }, - { - value: 'spread_1', - label: '展开项一', - }, - ], - }, - ]; - - return ( -
- - {list.map((item, i) => ( - - {item.text} - - ))} - -
- ); -} - -export default TabBarBaseDemo; diff --git a/src/tab-bar/_example/text-spread.tsx b/src/tab-bar/_example/text-spread.tsx new file mode 100644 index 00000000..75698218 --- /dev/null +++ b/src/tab-bar/_example/text-spread.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { TabBar, TabBarItem } from 'tdesign-mobile-react'; + +function TabBarBaseDemo() { + const list = [ + { + value: 'home', + label: '首页', + icon: 'home', + }, + { + value: 'app', + label: '应用', + icon: 'app', + }, + { + value: 'user', + label: '我的', + children: [ + { + value: 'info', + label: '基本信息', + }, + { + value: 'home-page', + label: '个人主页', + }, + { + value: 'setting', + label: '设置', + }, + ], + }, + ]; + + return ( +
+ + {list.map((item, i) => ( + + {item.label} + + ))} + +
+ ); +} + +export default TabBarBaseDemo; diff --git a/src/tab-bar/_example/text.jsx b/src/tab-bar/_example/text.tsx similarity index 59% rename from src/tab-bar/_example/text.jsx rename to src/tab-bar/_example/text.tsx index 66c816bd..0cc38e73 100644 --- a/src/tab-bar/_example/text.jsx +++ b/src/tab-bar/_example/text.tsx @@ -3,12 +3,12 @@ import { TabBar, TabBarItem } from 'tdesign-mobile-react'; function TabBarBaseDemo() { const list = [ - { name: 'label_1', text: '标签栏一' }, - { name: 'label_2', text: '标签栏二' }, - { name: 'label_3', text: '标签栏三' }, - { name: 'label_4', text: '标签栏四' }, + { value: 'home', label: '首页' }, + { value: 'app', label: '应用' }, + { value: 'chat', label: '聊天' }, + { value: 'user', label: '我的' }, ]; - const [value, setValue] = useState('label_1'); + const [value, setValue] = useState('home'); const change = (changeValue) => { setValue(changeValue); @@ -21,10 +21,10 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - - {item.text} + + {item.label} ))} diff --git a/src/tab-bar/defaultProps.ts b/src/tab-bar/defaultProps.ts new file mode 100644 index 00000000..af85cd59 --- /dev/null +++ b/src/tab-bar/defaultProps.ts @@ -0,0 +1,15 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTabBarProps } from './type'; + +export const tabBarDefaultProps: TdTabBarProps = { + bordered: true, + fixed: true, + safeAreaInsetBottom: true, + shape: 'normal', + split: true, + theme: 'normal', + defaultValue: undefined, +}; diff --git a/src/tab-bar/style/index.js b/src/tab-bar/style/index.js index 702d60a8..5d6c7d7d 100644 --- a/src/tab-bar/style/index.js +++ b/src/tab-bar/style/index.js @@ -1 +1,2 @@ -import '../../_common/style/mobile/components/tab-bar/_index.less'; +import '../../_common/style/mobile/components/tab-bar/v2/_index.less'; +import '../../_common/style/mobile/components/tab-bar-item/v2/_index.less'; diff --git a/src/tab-bar/tab-bar.en-US.md b/src/tab-bar/tab-bar.en-US.md new file mode 100644 index 00000000..087a8848 --- /dev/null +++ b/src/tab-bar/tab-bar.en-US.md @@ -0,0 +1,50 @@ +:: BASE_DOC :: + +## API + +### TabBar Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +bordered | Boolean | true | \- | N +children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +fixed | Boolean | true | \- | N +safeAreaInsetBottom | Boolean | true | \- | N +shape | String | 'normal' | options: normal/round | N +split | Boolean | true | \- | N +theme | String | 'normal' | options: normal/tag | N +value | String / Number / Array | undefined | Typescript：`string \| number \| Array` | N +defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript：`string \| number \| Array` | N +onChange | Function | | Typescript：`(value: string \| number) => void`
| N + + +### TabBarItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +value | String / Number | - | \- | N + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-tab-bar-active-bg | @brand-color-light | - +--td-tab-bar-active-color | @brand-color | - +--td-tab-bar-bg-color | @bg-color-container | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-color | @font-gray-1 | - +--td-tab-bar-height | 40px | - +--td-tab-bar-hover-bg-color | rgba(0, 0, 0, .05) | - +--td-tab-bar-spread-border-color | @border-color | - +--td-tab-bar-spread-shadow | @shadow-3 | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-round-shadow | @shadow-3 | - \ No newline at end of file diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md index acb6981d..3b381250 100644 --- a/src/tab-bar/tab-bar.md +++ b/src/tab-bar/tab-bar.md @@ -4,23 +4,47 @@ ### TabBar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N bordered | Boolean | true | 是否显示外边框 | N +children | TNode | - | 标签栏内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N fixed | Boolean | true | 是否固定在底部 | N -value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string | number | Array` | N -defaultValue | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string | number | Array` | N -onChange | Function | | TS 类型：`() => void`
选中标签切换时触发 | N +safeAreaInsetBottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N +shape | String | 'normal' | 标签栏的形状。可选项：normal/round | N +split | Boolean | true | 是否需要分割线 | N +theme | String | 'normal' | 选项风格。可选项：normal/tag | N +value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string \| number \| Array` | N +defaultValue | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N +onChange | Function | | TS 类型：`(value: string \| number) => void`
选中标签切换时触发 | N + ### TabBarItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -badgeProps | Object | - | 图标右上角提示信息。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -icon | TNode | - | 图标名称。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +badgeProps | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +children | TNode | - | 标签内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | 图标名称。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | 标识符 | N + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-tab-bar-active-bg | @brand-color-light | - +--td-tab-bar-active-color | @brand-color | - +--td-tab-bar-bg-color | @bg-color-container | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-color | @font-gray-1 | - +--td-tab-bar-height | 40px | - +--td-tab-bar-hover-bg-color | rgba(0, 0, 0, .05) | - +--td-tab-bar-spread-border-color | @border-color | - +--td-tab-bar-spread-shadow | @shadow-3 | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-round-shadow | @shadow-3 | - \ No newline at end of file diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index 004e9cf3..2dfbae2c 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -4,8 +4,8 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdBadgeProps } from '../badge'; -import { TNode } from '../common'; +import { BadgeProps } from '../badge'; +import { TNode, TElement } from '../common'; export interface TdTabBarProps { /** @@ -13,11 +13,35 @@ export interface TdTabBarProps { * @default true */ bordered?: boolean; + /** + * 标签栏内容 + */ + children?: TNode; /** * 是否固定在底部 * @default true */ fixed?: boolean; + /** + * 是否为 iPhoneX 留出底部安全距离 + * @default true + */ + safeAreaInsetBottom?: boolean; + /** + * 标签栏的形状 + * @default 'normal' + */ + shape?: 'normal' | 'round'; + /** + * 是否需要分割线 + * @default true + */ + split?: boolean; + /** + * 选项风格 + * @default 'normal' + */ + theme?: 'normal' | 'tag'; /** * 当前选中标签的索引 */ @@ -29,26 +53,33 @@ export interface TdTabBarProps { /** * 选中标签切换时触发 */ - onChange?: () => void; + onChange?: (value: string | number) => void; } export interface TdTabBarItemProps { /** * 图标右上角提示信息 */ - badgeProps?: TdBadgeProps; + badgeProps?: BadgeProps; + /** + * 标签内容 + */ + children?: TNode; /** * 图标名称 */ - icon?: TNode; + icon?: TElement; /** * 二级菜单 */ - subTabBar?: SubTabBarItem[] ; + subTabBar?: SubTabBarItem[]; /** * 标识符 */ value?: string | number; } -export interface SubTabBarItem { value: string; label: string }; +export interface SubTabBarItem { + value: string; + label: string; +} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 73822122..3da6f6d6 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -24677,6 +24677,1750 @@ exports[`csr snapshot test > csr test src/sticky/_example/offset.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/base.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/custom.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = ` +
+
+
+

+ TabBar 标签栏 +

+

+ 用于在不同功能模块之间进行快速切换，位于页面底部。 +

+
+
+
+

+ 01 组件类型 +

+

+ 纯文本标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 图标加文字标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 纯图标标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 双层级纯文本标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+

+ 01 组件类型 +

+

+ 弱选中标签栏 +

+
+
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+

+ 悬浮胶囊标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 03 自定义 +

+

+ 自定义样式 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/pure-icon.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/round.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/text.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/text-spread.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+
+`; + exports[`csr snapshot test > csr test src/tag/_example/checkable.tsx 1`] = `
ssr test src/sticky/_example/index.tsx 1`] = `"
ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index c6605a6f..b143a8d7 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -252,6 +252,22 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"
ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; From 2cb121219a11ffa2c1cbc48327692abca4deaee7 Mon Sep 17 00:00:00 2001 From: Toby Date: Wed, 28 Aug 2024 11:17:47 +0800 Subject: [PATCH 08/28] =?UTF-8?q?feat(SideBar):=20=E5=88=9B=E5=BB=BASideBa?= =?UTF-8?q?r=E7=BB=84=E4=BB=B6=20(#491)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(SideBar): 升级SideBar样式 * feat(SideBar): 创建SideBar组件 * feat(SideBar): 创建SideBar文档 * fix(Grid): 补充Grid遗漏的type * chore: update snap * test(SideBar): 测试增加React路由 * test(SideBar): update snap * docs(SideBar): 解决演示用例样式冲突问题 * test(SideBar): update snap * docs(SideBar): 修复示例内容体高度样式 * refactor(SideBar): 按规范改用useDefaultProps、usePrefixClass * docs(SideBar): 移除多余API文档 * chore(SideBar): update tdesign-api * test: update snap * docs(SideBar): 删除多余示例参数 * chore(SideBar): update tdesign-api * chore: 变更common分支 * chore(SideBar): update tdesign-api * chore(SideBar): update tdesign-api * chore(SideBar): update api * perf(Demo): 示例头部的返回按钮优化为按需引入 * chore: update snapshot --------- Co-authored-by: github-actions[bot] --- site/mobile/components/Header.jsx | 11 +- site/mobile/mobile.config.js | 25 + site/web/site.config.js | 6 + src/grid/type.ts | 4 + src/side-bar/SideBar.tsx | 88 + src/side-bar/SideBarContext.tsx | 22 + src/side-bar/SideBarItem.tsx | 58 + .../__snapshots__/side-bar.test.tsx.snap | 3 + src/side-bar/__tests__/side-bar.test.tsx | 12 + src/side-bar/_example/base.tsx | 93 + src/side-bar/_example/custom.tsx | 93 + src/side-bar/_example/index.tsx | 36 + src/side-bar/_example/style/base.less | 31 + src/side-bar/_example/style/custom.less | 34 + src/side-bar/_example/style/index.less | 8 + src/side-bar/_example/style/switch.less | 35 + src/side-bar/_example/switch.tsx | 55 + src/side-bar/_example/with-icon.tsx | 95 + src/side-bar/defaultProps.ts | 9 + src/side-bar/index.ts | 16 + src/side-bar/side-bar.en-US.md | 46 + src/side-bar/side-bar.md | 46 + src/side-bar/style/css.js | 1 + src/side-bar/style/index.js | 1 + src/side-bar/type.ts | 56 + test/snap/__snapshots__/csr.test.jsx.snap | 5772 ++++++++++++++++- test/snap/__snapshots__/ssr.test.jsx.snap | 172 +- test/snap/csr.test.jsx | 3 +- test/snap/ssr.test.jsx | 3 +- 29 files changed, 6581 insertions(+), 253 deletions(-) create mode 100644 src/side-bar/SideBar.tsx create mode 100644 src/side-bar/SideBarContext.tsx create mode 100644 src/side-bar/SideBarItem.tsx create mode 100644 src/side-bar/__tests__/__snapshots__/side-bar.test.tsx.snap create mode 100644 src/side-bar/__tests__/side-bar.test.tsx create mode 100644 src/side-bar/_example/base.tsx create mode 100644 src/side-bar/_example/custom.tsx create mode 100644 src/side-bar/_example/index.tsx create mode 100644 src/side-bar/_example/style/base.less create mode 100644 src/side-bar/_example/style/custom.less create mode 100644 src/side-bar/_example/style/index.less create mode 100644 src/side-bar/_example/style/switch.less create mode 100644 src/side-bar/_example/switch.tsx create mode 100644 src/side-bar/_example/with-icon.tsx create mode 100644 src/side-bar/defaultProps.ts create mode 100644 src/side-bar/index.ts create mode 100644 src/side-bar/side-bar.en-US.md create mode 100644 src/side-bar/side-bar.md create mode 100644 src/side-bar/style/css.js create mode 100644 src/side-bar/style/index.js create mode 100644 src/side-bar/type.ts diff --git a/site/mobile/components/Header.jsx b/site/mobile/components/Header.jsx index 3aa8daa1..75785400 100644 --- a/site/mobile/components/Header.jsx +++ b/site/mobile/components/Header.jsx @@ -1,13 +1,22 @@ import React from 'react'; +import { ChevronLeftIcon } from 'tdesign-icons-react'; +import { useSearchParams, useNavigate } from 'react-router-dom'; const THeader = (prop) => { const { title } = prop; + const [searchParams] = useSearchParams(); + const navigate = useNavigate(); + + const showNavBack = !!searchParams.get('showNavBack'); + + const navBack = () => navigate(-1); + return ( <> {title ? (
{title}
- {/* */} + {showNavBack && }
) : null} diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 6d827833..ed785fc0 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -147,6 +147,31 @@ export default { name: 'navbar', component: () => import('tdesign-mobile-react/navbar/_example/index.tsx'), }, + { + title: 'SideBar 侧边栏', + name: 'side-bar', + component: () => import('tdesign-mobile-react/side-bar/_example/index.tsx'), + }, + { + title: 'SideBar 侧边栏', + name: 'side-bar-base', + component: () => import('tdesign-mobile-react/side-bar/_example/base.tsx'), + }, + { + title: 'SideBar 侧边栏', + name: 'side-bar-switch', + component: () => import('tdesign-mobile-react/side-bar/_example/switch.tsx'), + }, + { + title: 'SideBar 侧边栏', + name: 'side-bar-with-icon', + component: () => import('tdesign-mobile-react/side-bar/_example/with-icon.tsx'), + }, + { + title: 'SideBar 侧边栏', + name: 'side-bar-custom', + component: () => import('tdesign-mobile-react/side-bar/_example/custom.tsx'), + }, { title: 'SwipeCell 滑动单元格', name: 'swipe-cell', diff --git a/site/web/site.config.js b/site/web/site.config.js index f709bd4a..008d134f 100644 --- a/site/web/site.config.js +++ b/site/web/site.config.js @@ -124,6 +124,12 @@ export default { path: '/mobile-react/components/navbar', component: () => import('tdesign-mobile-react/navbar/navbar.md'), }, + { + title: 'SideBar 侧边栏', + name: 'side-bar', + path: '/mobile-react/components/side-bar', + component: () => import('tdesign-mobile-react/side-bar/side-bar.md'), + }, { title: 'Tabs 选项卡', name: 'tabs', diff --git a/src/grid/type.ts b/src/grid/type.ts index 27523ce2..9e47fe29 100644 --- a/src/grid/type.ts +++ b/src/grid/type.ts @@ -32,6 +32,10 @@ export interface TdGridProps { * @default default */ theme?: 'default' | 'card'; + /** + * 标签栏内容 + */ + children?: TNode; } export interface TdGridItemProps { diff --git a/src/side-bar/SideBar.tsx b/src/side-bar/SideBar.tsx new file mode 100644 index 00000000..55e03f5d --- /dev/null +++ b/src/side-bar/SideBar.tsx @@ -0,0 +1,88 @@ +import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import type { StyledProps } from '../common'; +import type { TdSideBarProps } from './type'; +import { sideBarDefaultProps } from './defaultProps'; +import { SideBarProvider } from './SideBarContext'; +import useDefault from '../_util/useDefault'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; + +export interface SideBarProps extends TdSideBarProps, StyledProps {} + +/** + * SideBar is a sidebar component that can be used to display a list of items in a collapsible menu. + * + * @param {Object} props - The properties of the SideBar component. + * @returns The rendered SideBar component. + */ +const SideBar = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, sideBarDefaultProps); + const sideBarClass = usePrefixClass('side-bar'); + + const { onClick, onChange, children, defaultValue, value } = props; + const [activeValue, onToggleActiveValue] = useDefault(value, defaultValue, onChange); + + const defaultIndex = useRef(-1); + const updateChild = onToggleActiveValue; + + const [childrenList, setChildrenList] = useState([]); + + useEffect(() => { + onChange?.(activeValue); + }, [activeValue, onChange]); + + /** + * Adds a child component to the children array. + * + * @param {React.Element} child - The child component to add. + */ + const relation = useCallback((child) => { + setChildrenList((prevChildrenList) => [...prevChildrenList, child]); + }, []); + + /** + * Removes a child component from the children array. + * + * @param {React.Element} child - The child component to remove. + */ + const removeRelation = useCallback((child) => { + setChildrenList((prevChildrenList) => prevChildrenList.filter((item) => item !== child)); + }, []); + + /** + * Handles the click event on a SideBar item. + * + * @param {string | number} cur - The value of the clicked item. + * @param {string} label - The label of the clicked item. + */ + const onClickItem = useCallback( + (cur, label) => { + onToggleActiveValue(cur); + onClick?.(cur, label); + }, + [onToggleActiveValue, onClick], + ); + + const memoProviderValues = useMemo( + () => ({ + defaultIndex, + activeValue, + updateChild, + childrenList, + relation, + removeRelation, + onClickItem, + }), + [activeValue, updateChild, childrenList, relation, removeRelation, onClickItem], + ); + + return ( +
+ {parseTNode(children)} +
+
+ ); +}); + +export default memo(SideBar); diff --git a/src/side-bar/SideBarContext.tsx b/src/side-bar/SideBarContext.tsx new file mode 100644 index 00000000..2f201105 --- /dev/null +++ b/src/side-bar/SideBarContext.tsx @@ -0,0 +1,22 @@ +import React, { createContext, MutableRefObject, useMemo } from 'react'; +import { ChangeHandler } from '../_util/useDefault'; +import { TdSideBarProps } from './type'; + +/** + * SideBarContext is a React context that stores the state and actions related to the SideBar component. + */ +export const SideBarContext = createContext< + { + defaultIndex: MutableRefObject; + activeValue: number | string | (number | string)[]; + updateChild: ChangeHandler; + relation: (child: any) => void; + removeRelation: (child: any) => void; + onClickItem: (cur: any, label: any) => void; + } & Pick +>(null); + +export function SideBarProvider({ children, value }) { + const memoValue = useMemo(() => value, [value]); + return {children}; +} diff --git a/src/side-bar/SideBarItem.tsx b/src/side-bar/SideBarItem.tsx new file mode 100644 index 00000000..7c226f6d --- /dev/null +++ b/src/side-bar/SideBarItem.tsx @@ -0,0 +1,58 @@ +import React, { forwardRef, memo, useContext, useEffect } from 'react'; +import cls from 'classnames'; +import type { StyledProps } from '../common'; +import type { TdSideBarItemProps } from './type'; +import { SideBarContext } from './SideBarContext'; +import Badge from '../badge'; +import parseTNode from '../_util/parseTNode'; +import { sideBarItemDefaultProps } from './defaultProps'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; + +export interface SideBarItemProps extends TdSideBarItemProps, StyledProps {} + +const SideBarItem = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, sideBarItemDefaultProps); + const { badgeProps, disabled, icon, label, value } = props; + const { relation, removeRelation, activeValue, onClickItem } = useContext(SideBarContext); + + const sideBarItemClass = usePrefixClass('side-bar-item'); + + useEffect(() => { + relation(props); + return () => { + removeRelation(props); + }; + }, [props, relation, removeRelation]); + + const isActive = activeValue === value; + + const onClick = () => { + if (!disabled) onClickItem(value, label); + }; + + const isShowBadge = badgeProps?.count || badgeProps?.dot; + + return ( +
+ {isActive && ( +
+
+
+
+
+ )} + {icon &&
{parseTNode(icon)}
} + {isShowBadge ? :
{label}
} +
+ ); +}); + +export default memo(SideBarItem); diff --git a/src/side-bar/__tests__/__snapshots__/side-bar.test.tsx.snap b/src/side-bar/__tests__/__snapshots__/side-bar.test.tsx.snap new file mode 100644 index 00000000..dc66d572 --- /dev/null +++ b/src/side-bar/__tests__/__snapshots__/side-bar.test.tsx.snap @@ -0,0 +1,3 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`SideBar 组件测试 > content 1`] = `null`; diff --git a/src/side-bar/__tests__/side-bar.test.tsx b/src/side-bar/__tests__/side-bar.test.tsx new file mode 100644 index 00000000..cf1c3aae --- /dev/null +++ b/src/side-bar/__tests__/side-bar.test.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { describe, it, expect, render } from '@test/utils'; + +import SideBar from '../SideBar'; + +describe('SideBar 组件测试', () => { + const SideBarText = 'SideBar组件'; + it('content', async () => { + const { queryByText } = render(); + expect(queryByText(SideBarText)).toMatchSnapshot(); + }); +}); diff --git a/src/side-bar/_example/base.tsx b/src/side-bar/_example/base.tsx new file mode 100644 index 00000000..b4904431 --- /dev/null +++ b/src/side-bar/_example/base.tsx @@ -0,0 +1,93 @@ +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { Grid, GridItem } from '../../grid'; +import { SideBarProps, SideBarItemProps, SideBar, SideBarItem } from '..'; +import './style/base.less'; + +const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png'; +const items = new Array(12).fill({ label: '标题文字', image }); + +const categories = [ + { label: '选项一', title: '标题一', badgeProps: {}, items }, + { label: '选项二', title: '标题二', badgeProps: { dot: true }, items: items.slice(0, 9) }, + { label: '选项三', title: '标题三', badgeProps: {}, items: items.slice(0, 9) }, + { label: '选项四', title: '标题四', badgeProps: { count: 6 }, items: items.slice(0, 6) }, + { label: '选项五', title: '标题五', badgeProps: {}, items: items.slice(0, 3) }, +]; + +function SideBarWrapper() { + const [sideBarIndex, setSideBarIndex] = useState(1); + const [offsetTopList, setOffsetTopList] = useState([]); + const wrapperRef = useRef(null); + + const moveToActiveSideBar = useCallback( + (index) => { + if (wrapperRef.current) { + wrapperRef.current.scrollTop = offsetTopList[index] - offsetTopList[0]; + } + }, + [offsetTopList], + ); + + const onSideBarChange = (value) => { + setSideBarIndex(value); + moveToActiveSideBar(value); + }; + + const onScroll = (e) => { + const threshold = offsetTopList[0]; + const { scrollTop } = e.target; + if (scrollTop < threshold) { + setSideBarIndex(0); + return; + } + const index = offsetTopList.findIndex((top) => top > scrollTop && top - scrollTop <= threshold); + if (index > -1) { + setSideBarIndex(index); + } + }; + + const onSideBarClick = (value: SideBarProps['value'], label: SideBarItemProps['label']) => { + console.log('=onSideBarClick===', value, label); + }; + + useEffect(() => { + const newOffsetTopList = []; + const titles = wrapperRef.current.querySelectorAll('.title'); + titles.forEach((title) => { + newOffsetTopList.push(title.offsetTop); + }); + setOffsetTopList(newOffsetTopList); + moveToActiveSideBar(sideBarIndex); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sideBarIndex]); + + return ( + <> +
+ + {categories.map((item, index) => ( + + ))} + +
+ {categories.map((item, index) => ( +
+
{item.title || item.label}
+ + {item.items.map((cargo, cargoIndex) => ( + + ))} + +
+ ))} +
+
+ + ); +} + +export default SideBarWrapper; diff --git a/src/side-bar/_example/custom.tsx b/src/side-bar/_example/custom.tsx new file mode 100644 index 00000000..992e5b1b --- /dev/null +++ b/src/side-bar/_example/custom.tsx @@ -0,0 +1,93 @@ +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { Grid, GridItem } from '../../grid'; +import { SideBarProps, SideBarItemProps, SideBar, SideBarItem } from '..'; +import './style/custom.less'; + +const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png'; +const items = new Array(12).fill({ label: '标题文字', image }); + +const categories = [ + { label: '选项一', title: '标题一', badgeProps: {}, items }, + { label: '选项二', title: '标题二', badgeProps: { dot: true }, items: items.slice(0, 9) }, + { label: '选项三', title: '标题三', badgeProps: {}, items: items.slice(0, 9) }, + { label: '选项四', title: '标题四', badgeProps: { count: 6 }, items: items.slice(0, 6) }, + { label: '选项五', title: '标题五', badgeProps: {}, items: items.slice(0, 3) }, +]; + +function SideBarWrapper() { + const [sideBarIndex, setSideBarIndex] = useState(1); + const [offsetTopList, setOffsetTopList] = useState([]); + const wrapperRef = useRef(null); + + const moveToActiveSideBar = useCallback( + (index) => { + if (wrapperRef.current) { + wrapperRef.current.scrollTop = offsetTopList[index] - offsetTopList[0]; + } + }, + [offsetTopList], + ); + + const onSideBarChange = (value) => { + setSideBarIndex(value); + moveToActiveSideBar(value); + }; + + const onScroll = (e) => { + const threshold = offsetTopList[0]; + const { scrollTop } = e.target; + if (scrollTop < threshold) { + setSideBarIndex(0); + return; + } + const index = offsetTopList.findIndex((top) => top > scrollTop && top - scrollTop <= threshold); + if (index > -1) { + setSideBarIndex(index); + } + }; + + const onSideBarClick = (value: SideBarProps['value'], label: SideBarItemProps['label']) => { + console.log('=onSideBarClick===', value, label); + }; + + useEffect(() => { + const newOffsetTopList = []; + const titles = wrapperRef.current.querySelectorAll('.title'); + titles.forEach((title) => { + newOffsetTopList.push(title.offsetTop); + }); + setOffsetTopList(newOffsetTopList); + moveToActiveSideBar(sideBarIndex); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sideBarIndex]); + + return ( + <> +
+ + {categories.map((item, index) => ( + + ))} + +
+ {categories.map((item, index) => ( +
+
{item.title || item.label}
+ + {item.items.map((cargo, cargoIndex) => ( + + ))} + +
+ ))} +
+
+ + ); +} + +export default SideBarWrapper; diff --git a/src/side-bar/_example/index.tsx b/src/side-bar/_example/index.tsx new file mode 100644 index 00000000..749ba950 --- /dev/null +++ b/src/side-bar/_example/index.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Button } from 'tdesign-mobile-react'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import './style/index.less'; + +export default function Base() { + const navigate = useNavigate(); + const handleClick = (t = 'base') => { + navigate(`/side-bar-${t}?showNavBack=true`); + }; + return ( +
+ + + + + + + + + + + +
+ ); +} diff --git a/src/side-bar/_example/style/base.less b/src/side-bar/_example/style/base.less new file mode 100644 index 00000000..4babbb3e --- /dev/null +++ b/src/side-bar/_example/style/base.less @@ -0,0 +1,31 @@ +.side-bar-wrapper { + &.section-base { + display: flex; + height: calc(100vh - 50px); + background-color: var(--bg-color-demo, #fff); + z-index: 0; + .content { + flex: 1; + overflow-y: scroll; + } + + .section { + padding: 16px 0; + } + + .title { + padding-left: 20px; + margin-bottom: 4px; + line-height: 26px; + } + + .image { + width: 48px; + height: 48px; + } + } +} + +.tdesign-demo-topnav { + z-index: 1; +} diff --git a/src/side-bar/_example/style/custom.less b/src/side-bar/_example/style/custom.less new file mode 100644 index 00000000..ff3c984c --- /dev/null +++ b/src/side-bar/_example/style/custom.less @@ -0,0 +1,34 @@ +.side-bar-wrapper { + &.section-custom { + display: flex; + height: calc(100vh - 50px); + background-color: var(--bg-color-demo, #fff); + + --td-side-bar-border-radius: 6px; + --td-side-bar-active-color: green; + + .content { + flex: 1; + overflow-y: scroll; + } + + .section { + padding: 16px 0; + } + + .title { + padding-left: 20px; + margin-bottom: 4px; + line-height: 26px; + } + + .image { + width: 48px; + height: 48px; + } + } +} + +.tdesign-demo-topnav { + z-index: 1; +} diff --git a/src/side-bar/_example/style/index.less b/src/side-bar/_example/style/index.less new file mode 100644 index 00000000..a4e6c637 --- /dev/null +++ b/src/side-bar/_example/style/index.less @@ -0,0 +1,8 @@ +.tdesign-mobile-demo { + background-color: #ffffff; + padding-bottom: 28px; + + .t-button { + margin-bottom: 16px; + } +} diff --git a/src/side-bar/_example/style/switch.less b/src/side-bar/_example/style/switch.less new file mode 100644 index 00000000..c2bdac4b --- /dev/null +++ b/src/side-bar/_example/style/switch.less @@ -0,0 +1,35 @@ +.side-bar-wrapper { + &.section-switch { + display: flex; + height: calc(100vh - 50px); + background-color: var(--bg-color-demo, #fff); + overflow: hidden; + .content { + flex: 1; + transition: transform 0.3s ease; + } + + .section { + padding: 16px 0; + box-sizing: border-box; + height: 100%; + overflow-y: auto; + } + + .title { + padding-left: 20px; + margin-bottom: 4px; + line-height: 26px; + } + + .image { + width: 48px; + height: 48px; + border: 1px solid #e7e7e7; + } + } +} + +.tdesign-demo-topnav { + z-index: 1; +} diff --git a/src/side-bar/_example/switch.tsx b/src/side-bar/_example/switch.tsx new file mode 100644 index 00000000..00680c17 --- /dev/null +++ b/src/side-bar/_example/switch.tsx @@ -0,0 +1,55 @@ +import React, { useState, useRef } from 'react'; +import { Cell, Image } from 'tdesign-mobile-react'; +import { SideBarProps, SideBarItemProps, SideBar, SideBarItem } from '..'; +import './style/switch.less'; + +const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png'; +const items = new Array(12).fill({ label: '标题文字', image }, 0, 12); + +const categories = [ + { label: '选项一', title: '标题一', badgeProps: {}, items }, + { label: '选项二', title: '标题二', badgeProps: { dot: true }, items: items.slice(0, 9) }, + { label: '选项三', title: '标题三', badgeProps: {}, items: items.slice(0, 9) }, + { label: '选项四', title: '标题四', badgeProps: { count: 6 }, items: items.slice(0, 6) }, + { label: '选项五', title: '标题五', badgeProps: {}, items: items.slice(0, 3) }, +]; + +function SideBarWrapper() { + const [sideBarIndex, setSideBarIndex] = useState(1); + const wrapperRef = useRef(null); + + const onSideBarChange = setSideBarIndex; + + const onSideBarClick = (value: SideBarProps['value'], label: SideBarItemProps['label']) => { + console.log('=onSideBarClick===', value, label); + }; + + return ( + <> +
+ + {categories.map((item, index) => ( + + ))} + + +
+ {categories.map((item, index) => ( +
+
{item.title || item.label}
+ {item.items.map((cargo, cargoIndex) => ( + } + /> + ))} +
+ ))} +
+
+ + ); +} + +export default SideBarWrapper; diff --git a/src/side-bar/_example/with-icon.tsx b/src/side-bar/_example/with-icon.tsx new file mode 100644 index 00000000..a23b6ce0 --- /dev/null +++ b/src/side-bar/_example/with-icon.tsx @@ -0,0 +1,95 @@ +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { Icon } from 'tdesign-icons-react'; +import { Grid, GridItem } from '../../grid'; +import { SideBarProps, SideBarItemProps, SideBar, SideBarItem } from '..'; +import './style/base.less'; + +const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png'; +const items = new Array(12).fill({ label: '标题文字', image }); +const icon = ; + +const categories = [ + { label: '选项一', title: '标题一', badgeProps: {}, items, icon }, + { label: '选项二', title: '标题二', badgeProps: { dot: true }, items: items.slice(0, 9), icon }, + { label: '选项三', title: '标题三', badgeProps: {}, items: items.slice(0, 9), icon }, + { label: '选项四', title: '标题四', badgeProps: { count: 6 }, items: items.slice(0, 6), icon }, + { label: '选项五', title: '标题五', badgeProps: {}, items: items.slice(0, 3), icon }, +]; + +function SideBarWrapper() { + const [sideBarIndex, setSideBarIndex] = useState(1); + const [offsetTopList, setOffsetTopList] = useState([]); + const wrapperRef = useRef(null); + + const moveToActiveSideBar = useCallback( + (index) => { + if (wrapperRef.current) { + wrapperRef.current.scrollTop = offsetTopList[index] - offsetTopList[0]; + } + }, + [offsetTopList], + ); + + const onSideBarChange = (value) => { + setSideBarIndex(value); + moveToActiveSideBar(value); + }; + + const onScroll = (e) => { + const threshold = offsetTopList[0]; + const { scrollTop } = e.target; + if (scrollTop < threshold) { + setSideBarIndex(0); + return; + } + const index = offsetTopList.findIndex((top) => top > scrollTop && top - scrollTop <= threshold); + if (index > -1) { + setSideBarIndex(index); + } + }; + + const onSideBarClick = (value: SideBarProps['value'], label: SideBarItemProps['label']) => { + console.log('=onSideBarClick===', value, label); + }; + + useEffect(() => { + const newOffsetTopList = []; + const titles = wrapperRef.current.querySelectorAll('.title'); + titles.forEach((title) => { + newOffsetTopList.push(title.offsetTop); + }); + setOffsetTopList(newOffsetTopList); + moveToActiveSideBar(sideBarIndex); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sideBarIndex]); + + return ( + <> +
+ + {categories.map((item, index) => ( + + ))} + +
+ {categories.map((item, index) => ( +
+
{item.title || item.label}
+ + {item.items.map((cargo, cargoIndex) => ( + + ))} + +
+ ))} +
+
+ + ); +} + +export default SideBarWrapper; diff --git a/src/side-bar/defaultProps.ts b/src/side-bar/defaultProps.ts new file mode 100644 index 00000000..2617290e --- /dev/null +++ b/src/side-bar/defaultProps.ts @@ -0,0 +1,9 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdSideBarProps, TdSideBarItemProps } from './type'; + +export const sideBarDefaultProps: TdSideBarProps = { defaultValue: undefined }; + +export const sideBarItemDefaultProps: TdSideBarItemProps = { disabled: false }; diff --git a/src/side-bar/index.ts b/src/side-bar/index.ts new file mode 100644 index 00000000..3537caf0 --- /dev/null +++ b/src/side-bar/index.ts @@ -0,0 +1,16 @@ +import _SideBar from './SideBar'; +import _SideBarItem from './SideBarItem'; + +import './style'; + +export type { SideBarProps } from './SideBar'; +export type { SideBarItemProps } from './SideBarItem'; +export * from './type'; + +export const SideBar = _SideBar; +export const SideBarItem = _SideBarItem; + +export default { + SideBar, + SideBarItem, +}; diff --git a/src/side-bar/side-bar.en-US.md b/src/side-bar/side-bar.en-US.md new file mode 100644 index 00000000..72733542 --- /dev/null +++ b/src/side-bar/side-bar.en-US.md @@ -0,0 +1,46 @@ +:: BASE_DOC :: + +## API + +### SideBar Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +children | TNode | - | children。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +defaultValue | String / Number | undefined | \- | N +value | String / Number | - | \- | N +onChange | Function | | Typescript：`(value: number \| string) => void`
| N +onClick | Function | | Typescript：`(value: number \| string, label: string) => void`
| N + + +### SideBarItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/side-bar/type.ts) | N +disabled | Boolean | false | \- | N +icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +label | String | - | \- | N +value | String / Number | - | \- | N + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-side-bar-active-color | @brand-color | - +--td-side-bar-bg-color | @bg-color-secondarycontainer | - +--td-side-bar-bg-color | @bg-color-secondarycontainer | - +--td-side-bar-border-radius | 9px | - +--td-side-bar-color | @font-gray-1 | - +--td-side-bar-disabled-color | @font-gray-4 | - +--td-side-bar-font-size | 16px | - +--td-side-bar-height | 100% | - +--td-side-bar-icon-size | 20px | - +--td-side-bar-item-height | 56px | - +--td-side-bar-item-line-height | 24px | - +--td-side-bar-width | 103px | - \ No newline at end of file diff --git a/src/side-bar/side-bar.md b/src/side-bar/side-bar.md new file mode 100644 index 00000000..e44a4c1f --- /dev/null +++ b/src/side-bar/side-bar.md @@ -0,0 +1,46 @@ +:: BASE_DOC :: + +## API + +### SideBar Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +children | TNode | - | 侧边导航内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +defaultValue | String / Number | undefined | 选项值。非受控属性 | N +value | String / Number | - | 选项值 | N +onChange | Function | | TS 类型：`(value: number \| string) => void`
选项值发生变化时触发 | N +onClick | Function | | TS 类型：`(value: number \| string, label: string) => void`
点击选项时触发 | N + + +### SideBarItem Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +badgeProps | Object | - | 透传至 Badge 组件。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/side-bar/type.ts) | N +disabled | Boolean | false | 是否禁用 | N +icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +label | String | - | 展示的标签 | N +value | String / Number | - | 当前选项的值 | N + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-side-bar-active-color | @brand-color | - +--td-side-bar-bg-color | @bg-color-secondarycontainer | - +--td-side-bar-bg-color | @bg-color-secondarycontainer | - +--td-side-bar-border-radius | 9px | - +--td-side-bar-color | @font-gray-1 | - +--td-side-bar-disabled-color | @font-gray-4 | - +--td-side-bar-font-size | 16px | - +--td-side-bar-height | 100% | - +--td-side-bar-icon-size | 20px | - +--td-side-bar-item-height | 56px | - +--td-side-bar-item-line-height | 24px | - +--td-side-bar-width | 103px | - \ No newline at end of file diff --git a/src/side-bar/style/css.js b/src/side-bar/style/css.js new file mode 100644 index 00000000..6a9a4b13 --- /dev/null +++ b/src/side-bar/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/side-bar/style/index.js b/src/side-bar/style/index.js new file mode 100644 index 00000000..5536bf0b --- /dev/null +++ b/src/side-bar/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/side-bar/v2/_index.less'; diff --git a/src/side-bar/type.ts b/src/side-bar/type.ts new file mode 100644 index 00000000..18267831 --- /dev/null +++ b/src/side-bar/type.ts @@ -0,0 +1,56 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { BadgeProps } from '../badge'; +import { TNode, TElement } from '../common'; + +export interface TdSideBarProps { + /** + * 侧边导航内容 + */ + children?: TNode; + /** + * 选项值。非受控属性 + */ + defaultValue?: string | number; + /** + * 选项值 + */ + value?: string | number; + /** + * 选项值发生变化时触发 + */ + onChange?: (value: number | string) => void; + /** + * 点击选项时触发 + */ + onClick?: (value: number | string, label: string) => void; +} + +export interface TdSideBarItemProps { + /** + * 透传至 Badge 组件 + */ + badgeProps?: BadgeProps; + /** + * 是否禁用 + * @default false + */ + disabled?: boolean; + /** + * 图标 + */ + icon?: TElement; + /** + * 展示的标签 + * @default '' + */ + label?: string; + /** + * 当前选项的值 + */ + value?: string | number; +} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 3da6f6d6..bcd20a55 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -24029,6 +24029,5462 @@ exports[`csr snapshot test > csr test src/search/_example/shape.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/side-bar/_example/base.tsx 1`] = ` +
+
+
+
+
+ 选项一 +
+
+
+
+
+
+
+
+
+
+ + 选项二 + +
+
+
+
+
+
+ 选项三 +
+
+
+
+
+ + 选项四 + +
+
+ 6 +
+
+
+
+
+ 选项五 +
+
+
+
+
+
+
+ 标题一 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题二 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题三 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题四 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题五 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/side-bar/_example/custom.tsx 1`] = ` +
+
+
+
+
+ 选项一 +
+
+
+
+
+
+
+
+
+
+ + 选项二 + +
+
+
+
+
+
+ 选项三 +
+
+
+
+
+ + 选项四 + +
+
+ 6 +
+
+
+
+
+ 选项五 +
+
+
+
+
+
+
+ 标题一 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题二 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题三 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题四 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题五 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/side-bar/_example/index.tsx 1`] = ` +
+
+
+

+ SideBar 侧边栏 +

+

+ 用于内容分类后的展示切换。 +

+
+
+
+

+ 01 组件类型 +

+

+ 侧边导航用法 +

+
+
+ + +
+
+
+
+

+ 带图标侧边导航 +

+
+
+ +
+
+
+
+

+ 02 组件样式 +

+

+ 侧边导航样式 +

+
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/side-bar/_example/switch.tsx 1`] = ` +
+
+
+
+
+ 选项一 +
+
+
+
+
+
+
+
+
+
+ + 选项二 + +
+
+
+
+
+
+ 选项三 +
+
+
+
+
+ + 选项四 + +
+
+ 6 +
+
+
+
+
+ 选项五 +
+
+
+
+
+
+
+ 标题一 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字0 +
+
+
+
+
+ 标题二 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字1 +
+
+
+
+
+ 标题三 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字2 +
+
+
+
+
+ 标题四 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字3 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字3 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字3 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字3 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字3 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字3 +
+
+
+
+
+ 标题五 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字4 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字4 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ 标题文字4 +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/side-bar/_example/with-icon.tsx 1`] = ` +
+
+
+
+
+ + + +
+
+ 选项一 +
+
+
+
+
+
+
+
+
+ + + +
+
+
+ + 选项二 + +
+
+
+
+
+
+ + + +
+
+ 选项三 +
+
+
+
+ + + +
+
+
+ + 选项四 + +
+
+ 6 +
+
+
+
+
+ + + +
+
+ 选项五 +
+
+
+
+
+
+
+ 标题一 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题二 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题三 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题四 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 标题五 +
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/skeleton/_example/animation.tsx 1`] = `
@@ -24705,18 +30161,14 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] =
- - - - - + +
csr test src/tab-bar/_example/badge-props.tsx 1`] =
- - - - - + +
csr test src/tab-bar/_example/badge-props.tsx 1`] =
- - - - - + +
csr test src/tab-bar/_example/badge-props.tsx 1`] =
- - - - - + +
csr test src/tab-bar/_example/mobile.tsx 1`] = `
- - - - - + +
csr test src/tab-bar/_example/mobile.tsx 1`] = `
- - - - - + +
csr test src/tab-bar/_example/mobile.tsx 1`] = `
- - - - - + +
csr test src/tab-bar/_example/mobile.tsx 1`] = `
- - - - - + +
csr test src/tag/_example/type.tsx 1`] = ` exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; @@ -27990,45 +33414,45 @@ exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
ssr test src/button/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/group.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/group.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `"

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 组件类型

基础按钮

图标按钮

幽灵按钮

组合按钮

通栏按钮

02 组件状态

按钮禁用态

03 组件样式

按钮尺寸

按钮形状

按钮主题

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

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 组件类型

基础按钮

图标按钮

幽灵按钮

组合按钮

通栏按钮

02 组件状态

按钮禁用态

03 组件样式

按钮尺寸

按钮形状

按钮主题

"`; exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/button/_example/status.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; -exports[`ssr snapshot test > ssr test src/count-down/_example/index.tsx 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

01 组件类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

02 组件尺寸

倒计时 large/medium/small 尺寸

时分秒
带毫秒
带方形底
带圆形底
带单位
"`; +exports[`ssr snapshot test > ssr test src/count-down/_example/index.tsx 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

01 组件类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

02 组件尺寸

倒计时 large/medium/small 尺寸

时分秒
带毫秒
带方形底
带圆形底
带单位
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/size.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
"`; exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息
"`; -exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"

Divider 分割符

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 组件类型

水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息

02 组件状态

虚线样式
"`; +exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"

Divider 分割符

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 组件类型

水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息

02 组件状态

虚线样式
"`; -exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; +exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; @@ -28042,29 +33466,29 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"
ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏
保存
编辑
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/icon/_example/base.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/base.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/enhanced.tsx 1`] = `"

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/enhanced.tsx 1`] = `"

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `"

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `"

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `"

Icon 图标

Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。

SVG 全量引入

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

SVG 按需引入


SVG 高级用法


iconfont 图标

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

iconfont 高级用法


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

Icon 图标

Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。

SVG 全量引入

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

SVG 按需引入


SVG 高级用法


iconfont 图标

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

iconfont 高级用法


"`; -exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `"

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `"

"`; -exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `"
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。

fill

contain

cover

none

scale-down

"`; +exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `"
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。

fill

contain

cover

none

scale-down

"`; exports[`ssr snapshot test > ssr test src/image/_example/index.tsx 1`] = `"

Image 图片

用于展示图片素材

01 组件类型

不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。

fill

contain

cover

none

scale-down

不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

cover center

cover left

cover right

cover top

cover bottom

contain top

contain bottom

contain center

contain left

contain right

不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。

方形

圆角方形

圆形

一张图片

02 组件状态

加载默认提示

加载自定义提示

失败默认提示

失败自定义提示

"`; -exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `"
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

cover center

cover left

cover right

cover top

cover bottom

contain top

contain bottom

contain center

contain left

contain right

"`; +exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `"
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

cover center

cover left

cover right

cover top

cover bottom

contain top

contain bottom

contain center

contain left

contain right

"`; -exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `"
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。

方形

圆角方形

圆形

一张图片
"`; +exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `"
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。

方形

圆角方形

圆形

一张图片
"`; exports[`ssr snapshot test > ssr test src/image/_example/status.tsx 1`] = `"

加载默认提示

加载自定义提示

失败默认提示

失败自定义提示

"`; @@ -28074,9 +33498,9 @@ exports[`ssr snapshot test > ssr test src/input/_example/banner.tsx 1`] = `"
ssr test src/input/_example/base.tsx 1`] = `"
标签文字
标签文字
"`; -exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `"
标签文字
"`; +exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `"
标签文字
"`; -exports[`ssr snapshot test > ssr test src/input/_example/custom.tsx 1`] = `"
标签文字
"`; +exports[`ssr snapshot test > ssr test src/input/_example/custom.tsx 1`] = `"
标签文字
"`; exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `"
标签超长时最多十个字
"`; @@ -28092,35 +33516,35 @@ exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `"
ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `"
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `"
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/index.tsx 1`] = `"

Layout 布局

以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。

01 组件类型

基础用法

col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12

在列元素之间增加间距

col-8
col-8
col-8
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/index.tsx 1`] = `"

Layout 布局

以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。

01 组件类型

基础用法

col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12

在列元素之间增加间距

col-8
col-8
col-8
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `"
col-8
col-8
col-8
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `"
col-8
col-8
col-8
"`; -exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

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

禁用状态

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

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; +exports[`ssr snapshot test > 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/linkSize.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `"
跳转链接跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/delay.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/delay.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/fullscreen.tsx 1`] = `"
全局加载开关（开启加载1秒后自动归位）：
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/fullscreen.tsx 1`] = `"
全局加载开关（开启加载1秒后自动归位）：
"`; exports[`ssr snapshot test > ssr test src/loading/_example/horz.tsx 1`] = `"
加载中...
加载中...
"`; @@ -28128,7 +33552,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `" ssr test src/loading/_example/pure-text.tsx 1`] = `"
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; exports[`ssr snapshot test > ssr test src/loading/_example/size.tsx 1`] = `"
大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...
"`; @@ -28146,71 +33570,81 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
标题左对齐
大尺寸标题
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; 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/suffixIcon.tsx 1`] = `"
这是一条普通的通知信息
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

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

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

"`; -exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

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

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

"`; exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; -exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; -exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `"

Search 搜索框

用于用户输入搜索信息，并进行页面内容搜索。

01 组件类型

基础搜索框

输入值后显示取消按钮

02 组件样式

搜索框形状

03 组件状态

默认状态其他对齐方式

"`; + +exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题二
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题三
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题四
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题五
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/custom.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题二
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题三
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题四
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题五
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `"

Search 搜索框

用于用户输入搜索信息，并进行页面内容搜索。

01 组件类型

基础搜索框

输入值后显示取消按钮

02 组件样式

搜索框形状

03 组件状态

默认状态其他对齐方式

"`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/index.tsx 1`] = `"

SideBar 侧边栏

用于内容分类后的展示切换。

01 组件类型

侧边导航用法

带图标侧边导航

02 组件样式

侧边导航样式

"`; -exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/switch.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题二
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题三
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题四
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题五
标题文字4
标题文字4
标题文字4
"`; -exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题二
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题三
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题四
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题五
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; +exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; exports[`ssr snapshot test > ssr test src/skeleton/_example/cell-group.tsx 1`] = `"
"`; @@ -28220,35 +33654,35 @@ exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

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

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > 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 b143a8d7..a4c0bf2f 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -2,11 +2,11 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户，该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; @@ -14,45 +14,45 @@ exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
ssr test src/button/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/group.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/group.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `"

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 组件类型

基础按钮

图标按钮

幽灵按钮

组合按钮

通栏按钮

02 组件状态

按钮禁用态

03 组件样式

按钮尺寸

按钮形状

按钮主题

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

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 组件类型

基础按钮

图标按钮

幽灵按钮

组合按钮

通栏按钮

02 组件状态

按钮禁用态

03 组件样式

按钮尺寸

按钮形状

按钮主题

"`; exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/button/_example/status.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; -exports[`ssr snapshot test > ssr test src/count-down/_example/index.tsx 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

01 组件类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

02 组件尺寸

倒计时 large/medium/small 尺寸

时分秒
带毫秒
带方形底
带圆形底
带单位
"`; +exports[`ssr snapshot test > ssr test src/count-down/_example/index.tsx 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

01 组件类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

02 组件尺寸

倒计时 large/medium/small 尺寸

时分秒
带毫秒
带方形底
带圆形底
带单位
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/size.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
"`; exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息
"`; -exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"

Divider 分割符

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 组件类型

水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息

02 组件状态

虚线样式
"`; +exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"

Divider 分割符

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 组件类型

水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息

02 组件状态

虚线样式
"`; -exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; +exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; @@ -66,29 +66,29 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"
ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏
保存
编辑
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/icon/_example/base.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/base.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/enhanced.tsx 1`] = `"

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/enhanced.tsx 1`] = `"

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `"

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `"

"`; -exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `"

Icon 图标

Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。

SVG 全量引入

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

SVG 按需引入


SVG 高级用法


iconfont 图标

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

iconfont 高级用法


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

Icon 图标

Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。

SVG 全量引入

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

SVG 按需引入


SVG 高级用法


iconfont 图标

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

iconfont 高级用法


"`; -exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `"

"`; +exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `"

"`; -exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `"
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。

fill

contain

cover

none

scale-down

"`; +exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `"
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。

fill

contain

cover

none

scale-down

"`; exports[`ssr snapshot test > ssr test src/image/_example/index.tsx 1`] = `"

Image 图片

用于展示图片素材

01 组件类型

不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。

fill

contain

cover

none

scale-down

不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

cover center

cover left

cover right

cover top

cover bottom

contain top

contain bottom

contain center

contain left

contain right

不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。

方形

圆角方形

圆形

一张图片

02 组件状态

加载默认提示

加载自定义提示

失败默认提示

失败自定义提示

"`; -exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `"
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

cover center

cover left

cover right

cover top

cover bottom

contain top

contain bottom

contain center

contain left

contain right

"`; +exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `"
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

cover center

cover left

cover right

cover top

cover bottom

contain top

contain bottom

contain center

contain left

contain right

"`; -exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `"
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。

方形

圆角方形

圆形

一张图片
"`; +exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `"
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。

方形

圆角方形

圆形

一张图片
"`; exports[`ssr snapshot test > ssr test src/image/_example/status.tsx 1`] = `"

加载默认提示

加载自定义提示

失败默认提示

失败自定义提示

"`; @@ -98,9 +98,9 @@ exports[`ssr snapshot test > ssr test src/input/_example/banner.tsx 1`] = `"
ssr test src/input/_example/base.tsx 1`] = `"
标签文字
标签文字
"`; -exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `"
标签文字
"`; +exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `"
标签文字
"`; -exports[`ssr snapshot test > ssr test src/input/_example/custom.tsx 1`] = `"
标签文字
"`; +exports[`ssr snapshot test > ssr test src/input/_example/custom.tsx 1`] = `"
标签文字
"`; exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `"
标签超长时最多十个字
"`; @@ -116,35 +116,35 @@ exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `"
ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `"
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `"
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/index.tsx 1`] = `"

Layout 布局

以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。

01 组件类型

基础用法

col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12

在列元素之间增加间距

col-8
col-8
col-8
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/index.tsx 1`] = `"

Layout 布局

以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。

01 组件类型

基础用法

col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12

在列元素之间增加间距

col-8
col-8
col-8
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `"
col-8
col-8
col-8
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `"
col-8
col-8
col-8
"`; -exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

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

禁用状态

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

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; +exports[`ssr snapshot test > 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/linkSize.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `"
跳转链接跳转链接
"`; exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/delay.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/delay.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/fullscreen.tsx 1`] = `"
全局加载开关（开启加载1秒后自动归位）：
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/fullscreen.tsx 1`] = `"
全局加载开关（开启加载1秒后自动归位）：
"`; exports[`ssr snapshot test > ssr test src/loading/_example/horz.tsx 1`] = `"
加载中...
加载中...
"`; @@ -152,7 +152,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `" ssr test src/loading/_example/pure-text.tsx 1`] = `"
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; exports[`ssr snapshot test > ssr test src/loading/_example/size.tsx 1`] = `"
大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...
"`; @@ -170,71 +170,81 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
标题左对齐
大尺寸标题
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; 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/suffixIcon.tsx 1`] = `"
这是一条普通的通知信息
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

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

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

"`; -exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

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

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

"`; exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; -exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; -exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; -exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `"

Search 搜索框

用于用户输入搜索信息，并进行页面内容搜索。

01 组件类型

基础搜索框

输入值后显示取消按钮

02 组件样式

搜索框形状

03 组件状态

默认状态其他对齐方式

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

Search 搜索框

用于用户输入搜索信息，并进行页面内容搜索。

01 组件类型

基础搜索框

输入值后显示取消按钮

02 组件样式

搜索框形状

03 组件状态

默认状态其他对齐方式

"`; -exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题二
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题三
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题四
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题五
标题文字
标题文字
标题文字
"`; + +exports[`ssr snapshot test > ssr test src/side-bar/_example/custom.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题二
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题三
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题四
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题五
标题文字
标题文字
标题文字
"`; + +exports[`ssr snapshot test > ssr test src/side-bar/_example/index.tsx 1`] = `"

SideBar 侧边栏

用于内容分类后的展示切换。

01 组件类型

侧边导航用法

带图标侧边导航

02 组件样式

侧边导航样式

"`; + +exports[`ssr snapshot test > ssr test src/side-bar/_example/switch.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题二
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题三
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题四
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题五
标题文字4
标题文字4
标题文字4
"`; + +exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `"
选项一
选项二
选项三
选项四
6
选项五
标题一
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题二
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题三
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题四
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题五
标题文字
标题文字
标题文字
"`; + +exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; exports[`ssr snapshot test > ssr test src/skeleton/_example/cell-group.tsx 1`] = `"
"`; @@ -244,35 +254,35 @@ exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

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

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > 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/csr.test.jsx b/test/snap/csr.test.jsx index 5436a9f4..1cc5a687 100644 --- a/test/snap/csr.test.jsx +++ b/test/snap/csr.test.jsx @@ -3,6 +3,7 @@ import MockDate from 'mockdate'; import React from 'react'; import { vi } from 'vitest'; import { render } from '@test/utils'; +import { BrowserRouter as Router } from 'react-router-dom'; import { IGNORE_ASYNC_EXAMPLE_LIST } from './ssr.test'; // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockDate 插件见 https://github.com/boblauer/MockDate @@ -31,7 +32,7 @@ function runTest() { it(`csr test ${file}`, async () => { const demo = await import(`../../${file}`); const RealDemoComp = demo.default ? demo.default : demo; - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); }); diff --git a/test/snap/ssr.test.jsx b/test/snap/ssr.test.jsx index 4a4b5b8f..0f30608c 100644 --- a/test/snap/ssr.test.jsx +++ b/test/snap/ssr.test.jsx @@ -2,6 +2,7 @@ import { glob } from 'glob'; import MockDate from 'mockdate'; import { vi } from 'vitest'; import React from 'react'; +import { BrowserRouter as Router } from 'react-router-dom'; import { renderToString } from 'react-dom/server'; // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate @@ -26,7 +27,7 @@ function runTest() { it(`ssr test ${file}`, async () => { const demo = await import(`../../${file}`); const RealDemoComp = demo.default ? demo.default : demo; - const html = renderToString(); + const html = renderToString(); expect(html).toMatchSnapshot(); }); }); From 00106b73882d06ba70fba02442bd05f3d972048d Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 28 Aug 2024 14:37:58 +0800 Subject: [PATCH 09/28] docs(Popup): update docs (#502) * docs(Popup): update docs * fix(NoticeBar): fix className and style attributes are invalid * fix(Table): use tsx suffix instead * test: update csr and ssr snap --- site/mobile/mobile.config.js | 2 +- src/notice-bar/NoticeBar.tsx | 6 +- src/popup/popup.en-US.md | 11 +- src/popup/popup.md | 11 +- src/popup/type.ts | 2 +- src/table/_example/{base.jsx => base.tsx} | 22 +- .../_example/{bordered.jsx => bordered.tsx} | 24 +- src/table/_example/{index.jsx => index.tsx} | 16 +- src/table/_example/{scroll.jsx => scroll.tsx} | 8 +- src/table/_example/{stripe.jsx => stripe.tsx} | 22 +- test/snap/__snapshots__/csr.test.jsx.snap | 3655 +++++++++++++++-- test/snap/__snapshots__/ssr.test.jsx.snap | 20 +- 12 files changed, 3466 insertions(+), 333 deletions(-) rename src/table/_example/{base.jsx => base.tsx} (76%) rename src/table/_example/{bordered.jsx => bordered.tsx} (74%) rename src/table/_example/{index.jsx => index.tsx} (74%) rename src/table/_example/{scroll.jsx => scroll.tsx} (80%) rename src/table/_example/{stripe.jsx => stripe.tsx} (72%) diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index ed785fc0..e24870e1 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -260,7 +260,7 @@ export default { { title: 'Table 表格', name: 'table', - component: () => import('tdesign-mobile-react/table/_example/index.jsx'), + component: () => import('tdesign-mobile-react/table/_example/index.tsx'), }, ], }; diff --git a/src/notice-bar/NoticeBar.tsx b/src/notice-bar/NoticeBar.tsx index 6f35814c..76204c4d 100644 --- a/src/notice-bar/NoticeBar.tsx +++ b/src/notice-bar/NoticeBar.tsx @@ -97,6 +97,8 @@ function useAnimationSettingValue() { const NoticeBar: React.FC = (props) => { const { + style, + className, content, direction, marquee, @@ -115,7 +117,7 @@ const NoticeBar: React.FC = (props) => { const [isShow] = useDefault(visible, defaultVisible, noop); const rootClassName = usePrefixClass('notice-bar'); - const containerClassName = classNames(rootClassName, `${rootClassName}--${theme}`); + const containerClassName = classNames(rootClassName, `${rootClassName}--${theme}`, className); const { animationSettingValue, updateScroll, updateAnimationFrame } = useAnimationSettingValue(); useEffect(() => { @@ -308,7 +310,7 @@ const NoticeBar: React.FC = (props) => { ); }; return isShow ? ( -
+
{renderPrefixIcon()} {renderContent()} {renderSuffixIconContent()} diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 5e24d03d..89e0aed2 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -6,19 +6,20 @@ name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -closeBtn | TNode | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +closeBtn | TNode | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N closeOnOverlayClick | Boolean | true | \- | N destroyOnClose | Boolean | false | \- | N -overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N +overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N placement | String | top | options: top/left/right/bottom/center | N preventScrollThrough | Boolean | true | \- | N showOverlay | Boolean | true | \- | N visible | Boolean | - | Typescript：`boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N zIndex | Number | - | \- | N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClosed | Function | | Typescript：`() => void`
| N onOpen | Function | | Typescript：`() => void`
| N onOpened | Function | | Typescript：`() => void`
| N -onVisibleChange | Function | | Typescript：`(visible: boolean, trigger: PopupSource) => void`
[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' \| 'overlay'`
| N +onVisibleChange | Function | | Typescript：`(visible: boolean, trigger: PopupSource) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' \| 'overlay'`
| N diff --git a/src/popup/popup.md b/src/popup/popup.md index 0802f43c..8d6127ca 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -6,19 +6,20 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -closeBtn | TNode | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +closeBtn | TNode | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N closeOnOverlayClick | Boolean | true | 点击遮罩层是否关闭 | N destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N -overlayProps | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N +overlayProps | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts) | N placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N preventScrollThrough | Boolean | true | 是否阻止背景滚动 | N showOverlay | Boolean | true | 是否显示遮罩层 | N visible | Boolean | - | 是否显示浮层。TS 类型：`boolean` | N +defaultVisible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
组件准备关闭时触发 | N onClosed | Function | | TS 类型：`() => void`
组件关闭且动画结束后执行 | N onOpen | Function | | TS 类型：`() => void`
组件准备展示时触发 | N onOpened | Function | | TS 类型：`() => void`
组件展示且动画结束后执行 | N -onVisibleChange | Function | | TS 类型：`(visible: boolean, trigger: PopupSource) => void`
当浮层隐藏或显示时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' \| 'overlay'`
| N +onVisibleChange | Function | | TS 类型：`(visible: boolean, trigger: PopupSource) => void`
当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' \| 'overlay'`
| N diff --git a/src/popup/type.ts b/src/popup/type.ts index 82298b21..1eaac694 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -10,7 +10,7 @@ import { MouseEvent } from 'react'; export interface TdPopupProps { /** - * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body + * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body * @default 'body' */ attach?: AttachNode; diff --git a/src/table/_example/base.jsx b/src/table/_example/base.tsx similarity index 76% rename from src/table/_example/base.jsx rename to src/table/_example/base.tsx index 4cfcfd6e..f1a5ddca 100644 --- a/src/table/_example/base.jsx +++ b/src/table/_example/base.tsx @@ -36,7 +36,7 @@ const columns = [ }, ]; -export function BaseExample() { +export default function BaseExample() { const handleRowClick = (e) => { console.log('row-cliek=====', e); }; @@ -46,16 +46,14 @@ export function BaseExample() { }; return ( -
-
-
+
); } diff --git a/src/table/_example/bordered.jsx b/src/table/_example/bordered.tsx similarity index 74% rename from src/table/_example/bordered.jsx rename to src/table/_example/bordered.tsx index ab114e88..b8c07d1c 100644 --- a/src/table/_example/bordered.jsx +++ b/src/table/_example/bordered.tsx @@ -26,7 +26,7 @@ const columns = [ { colKey: 'detail.email', title: '标题', ellipsis: true }, ]; -export function BorderedExample() { +export default function BorderedExample() { const handleRowClick = (e) => { console.log('row-cliek=====', e); }; @@ -40,17 +40,15 @@ export function BorderedExample() { }; return ( -
-
-
+
); } diff --git a/src/table/_example/index.jsx b/src/table/_example/index.tsx similarity index 74% rename from src/table/_example/index.jsx rename to src/table/_example/index.tsx index 1b517013..188bac57 100644 --- a/src/table/_example/index.jsx +++ b/src/table/_example/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; -import { BaseExample } from './base'; -import { ScrollExample } from './scroll'; -import { StripeExample } from './stripe'; -import { BorderedExample } from './bordered'; +import BaseExample from './base'; +import ScrollExample from './scroll'; +import StripeExample from './stripe'; +import BorderedExample from './bordered'; export default function Base() { return ( @@ -13,16 +13,16 @@ export default function Base() { title="Table 表格" summary=" 表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。 " /> - + - + - + - +
diff --git a/src/table/_example/scroll.jsx b/src/table/_example/scroll.tsx similarity index 80% rename from src/table/_example/scroll.jsx rename to src/table/_example/scroll.tsx index 66993417..4f6959cb 100644 --- a/src/table/_example/scroll.jsx +++ b/src/table/_example/scroll.tsx @@ -26,14 +26,10 @@ const columns = [ { colKey: 'detail.email', title: '标题', width: 180 }, ]; -export function ScrollExample() { +export default function ScrollExample() { const handleScroll = (e) => { console.log('scroll=====', e); }; - return ( -
-
-
- ); + return
; } diff --git a/src/table/_example/stripe.jsx b/src/table/_example/stripe.tsx similarity index 72% rename from src/table/_example/stripe.jsx rename to src/table/_example/stripe.tsx index 54c1d2dd..83b1ef53 100644 --- a/src/table/_example/stripe.jsx +++ b/src/table/_example/stripe.tsx @@ -25,22 +25,20 @@ const columns = [ { colKey: 'detail.email', title: '标题', ellipsis: true }, ]; -export function StripeExample() { +export default function StripeExample() { const handleScroll = (e) => { console.log('scroll=====', e); }; return ( -
-
-
+
); } diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index bcd20a55..04f6cfaa 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -20142,7 +20142,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/base.tsx 1`] = ` exports[`csr snapshot test > csr test src/notice-bar/_example/custom.tsx 1`] = `
csr test src/notice-bar/_example/customization.tsx exports[`csr snapshot test > csr test src/notice-bar/_example/event.tsx 1`] = `
csr test src/notice-bar/_example/mobile.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/notice-bar/_example/mobile.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/notice-bar/_example/mobile.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/notice-bar/_example/mobile.tsx 1`] = `
csr test src/notice-bar/_example/mobile.tsx 1`] = `
csr test src/notice-bar/_example/mobile.tsx 1`] = `
csr test src/notice-bar/_example/mobile.tsx 1`] = ` class="tdesign-mobile-demo-block__slot" >
csr test src/notice-bar/_example/mobile.tsx 1`] = `
csr test src/notice-bar/_example/mobile.tsx 1`] = ` exports[`csr snapshot test > csr test src/notice-bar/_example/scrolling.tsx 1`] = `
csr test src/notice-bar/_example/scrolling.tsx 1`]
csr test src/notice-bar/_example/suffixIcon.tsx 1`] exports[`csr snapshot test > csr test src/notice-bar/_example/theme.tsx 1`] = `
csr test src/notice-bar/_example/theme.tsx 1`] = `
csr test src/notice-bar/_example/theme.tsx 1`] = `
csr test src/notice-bar/_example/theme.tsx 1`] = `
csr test src/tab-bar/_example/text-spread.tsx 1`] =
`; -exports[`csr snapshot test > csr test src/tag/_example/checkable.tsx 1`] = ` -
-
- 可选中的标签 -
-
-
-
-
- light -
- - - 未选中态 - - - - - 已选中态 - - -
-
-
- dark -
- - - 未选中态 - - - - - 已选中态 - - -
-
-
- outline -
- - - 未选中态 - - - - - 已选中态 - - -
-
-
- light-outline -
- - - 未选中态 - - - - - 已选中态 - - -
-
-
-
-`; - -exports[`csr snapshot test > csr test src/tag/_example/closable.tsx 1`] = ` +exports[`csr snapshot test > csr test src/table/_example/base.tsx 1`] = `
- 可关闭标签 -
-
- - - 文字标签 - - - - + - - - - - - 文字标签 - - - - - - - -
-
-`; - -exports[`csr snapshot test > csr test src/tag/_example/index.tsx 1`] = ` -
-
-

- Tag 标签 -

-

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

-
-
-

- 01 组件类型 -

-
-
-
- 基础标签 -
-
+ + + - - + - 标签文字 - - - + 标题 +
+ + +
+ 标题 +
+ + +
+ 标题 +
+ + +
+ 标题 +
+ + + + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + +
+ 内容 +
+ + + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/table/_example/bordered.tsx 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容内容内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容内容内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容内容内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/table/_example/index.tsx 1`] = ` +
+
+
+

+ Table 表格 +

+

+ 表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。 +

+
+
+
+

+ 01 组件类型 +

+

+ 基础表格 +

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+

+

+ 横向平铺可滚动表格 +

+

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+

+

+ 带斑马纹表格样式 +

+

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+

+

+ 带边框表格样式 +

+

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容内容内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容内容内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容内容内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/table/_example/scroll.tsx 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+ 		+
+ 横向平铺内容不省略 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/table/_example/stripe.tsx 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+ 		+
+ 标题 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+ 		+
+ 内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tag/_example/checkable.tsx 1`] = ` +
+
+ 可选中的标签 +
+
+
+
+
+ light +
+ + + 未选中态 + + + + + 已选中态 + + +
+
+
+ dark +
+ + + 未选中态 + + + + + 已选中态 + + +
+
+
+ outline +
+ + + 未选中态 + + + + + 已选中态 + + +
+
+
+ light-outline +
+ + + 未选中态 + + + + + 已选中态 + + +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tag/_example/closable.tsx 1`] = ` +
+
+ 可关闭标签 +
+
+ + + 文字标签 + + + + + + + + + + 文字标签 + + + + + + + +
+
+`; + +exports[`csr snapshot test > csr test src/tag/_example/index.tsx 1`] = ` +
+
+

+ Tag 标签 +

+

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

+
+
+

+ 01 组件类型 +

+
+
+
+ 基础标签 +
+
+ + + 标签文字 + + + ssr test src/navbar/_example/size.tsx 1`] = `"
ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; +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/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; @@ -33678,6 +36797,16 @@ exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/table/_example/base.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/bordered.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/index.tsx 1`] = `"

Table 表格

表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。

01 组件类型

基础表格

标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

横向平铺可滚动表格

标题
标题
标题
标题
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容
内容
内容
内容
内容
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容

带斑马纹表格样式

标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

带边框表格样式

标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
标题
标题
标题
标题
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容
内容
内容
内容
内容
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/stripe.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; + exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index a4c0bf2f..593435fe 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -176,21 +176,21 @@ exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述详情
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `"
这是一条普通的消息通知
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/icon.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"

NoticeBar 公告栏

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

01 组件类型

纯文字的公告栏

这是一条普通的通知消息

带图标静态公告栏

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

带关闭的公告栏

这是一条普通的通知信息

带入口的公告栏

这是一条普通的消息通知

自定样式的公告栏

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

自定义内容的公告栏

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

02 组件状态

公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）

默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏

03 可滚动的公告栏

可滚动公告栏有水平 (horizontal) 和垂直 (vertical)

提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; -exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `"
提示文字描述提示文字描述提示文字描述提示文字描述文
提示文字描述提示文字描述提示文字描述提示文字描述文
莫使金樽空对月
君不见
高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
君不见
"`; +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/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; +exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `"
默认状态公告栏默认状态公告栏
成功状态公告栏成功状态公告栏
警示状态公告栏警示状态公告栏
错误状态公告栏错误状态公告栏
"`; exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; @@ -278,6 +278,16 @@ exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/table/_example/base.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/bordered.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/index.tsx 1`] = `"

Table 表格

表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。

01 组件类型

基础表格

标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

横向平铺可滚动表格

标题
标题
标题
标题
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容
内容
内容
内容
内容
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容

带斑马纹表格样式

标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

带边框表格样式

标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容内容内容
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
标题
标题
标题
标题
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容
内容
内容
内容
内容
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
横向平铺内容不省略
内容
内容
内容
内容
"`; + +exports[`ssr snapshot test > ssr test src/table/_example/stripe.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; + exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; From 7cdce6830c2a162f9235ee6effb43bde0e2594f8 Mon Sep 17 00:00:00 2001 From: Toby Date: Wed, 28 Aug 2024 16:08:17 +0800 Subject: [PATCH 10/28] =?UTF-8?q?feat(Collapse):=20Collapse=20=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=20mobile-vue=20(#500)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(Collapse): update api * refactor(collapse): 升级样式 * feat(collapse): 增加入口 * docs(Collapse): 更新文档 * refactor(Collapse): 增加CollapsePanel导出 * refactor(Collapse): 新增Collapse组件 * chore(Collapse): 更新API * docs(Collapse): 补充Collapse演示用例 * fix(Collapse): 完成折叠图标逻辑 * chore: update snap * fix(Collapse): 修复onPanelChange类型不一致 * fix(Collapse): 补充onPanelChange的事件入参 * docs(Collapse): 补充向上展开用例 * docs(Collapse): 示例引入改为tdesign-mobile-react * docs(Collapse): 目录位置对齐mobile-vue * chore: update snap * docs(Collapse): 卡片折叠面板示例对齐mobile-vue，去掉互斥展开 * chore: update snap * fix(Collapse): 补充遗漏支持的className，style * fix(Collapse): 补充逻辑：当前面板处理折叠状态时，是否销毁面板内容 * chore: update snap --- site/mobile/mobile.config.js | 2 +- site/web/site.config.js | 12 +- src/_common | 2 +- src/collapse/Collapse.tsx | 147 +- src/collapse/CollapseContext.tsx | 14 + src/collapse/CollapsePanel.tsx | 202 +-- src/collapse/_example/accordion.jsx | 20 - src/collapse/_example/accordion.tsx | 24 + src/collapse/_example/action.tsx | 20 + src/collapse/_example/{base.jsx => base.tsx} | 14 +- src/collapse/_example/card.tsx | 24 + src/collapse/_example/control.jsx | 28 - src/collapse/_example/destroy.jsx | 25 - src/collapse/_example/disable.jsx | 18 - src/collapse/_example/expandIcon.jsx | 27 - .../_example/{index.jsx => index.tsx} | 10 + src/collapse/_example/more.jsx | 25 - .../_example/{action.jsx => placement.tsx} | 17 +- src/collapse/collapse.en-US.md | 37 + src/collapse/collapse.md | 27 +- src/collapse/defaultProps.ts | 20 + src/collapse/index.ts | 3 +- src/collapse/style/index.js | 5 +- src/collapse/type.ts | 28 +- test/snap/__snapshots__/csr.test.jsx.snap | 1473 +++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 12 + 26 files changed, 1858 insertions(+), 378 deletions(-) create mode 100644 src/collapse/CollapseContext.tsx delete mode 100644 src/collapse/_example/accordion.jsx create mode 100644 src/collapse/_example/accordion.tsx create mode 100644 src/collapse/_example/action.tsx rename src/collapse/_example/{base.jsx => base.tsx} (65%) create mode 100644 src/collapse/_example/card.tsx delete mode 100644 src/collapse/_example/control.jsx delete mode 100644 src/collapse/_example/destroy.jsx delete mode 100644 src/collapse/_example/disable.jsx delete mode 100644 src/collapse/_example/expandIcon.jsx rename src/collapse/_example/{index.jsx => index.tsx} (74%) delete mode 100644 src/collapse/_example/more.jsx rename src/collapse/_example/{action.jsx => placement.tsx} (54%) create mode 100644 src/collapse/collapse.en-US.md create mode 100644 src/collapse/defaultProps.ts diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index e24870e1..167d0fb3 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -195,7 +195,7 @@ export default { { title: 'Collapse 折叠面板', name: 'Collapse', - component: () => import('tdesign-mobile-react/collapse/_example/index.jsx'), + component: () => import('tdesign-mobile-react/collapse/_example/index.tsx'), }, { title: 'Stepper 步进器', diff --git a/site/web/site.config.js b/site/web/site.config.js index 008d134f..6138e9cc 100644 --- a/site/web/site.config.js +++ b/site/web/site.config.js @@ -238,12 +238,12 @@ export default { path: '/mobile-react/components/badge', component: () => import('tdesign-mobile-react/badge/badge.md'), }, - // { - // title: 'Collapse 折叠面板', - // name: 'collapse', - // path: '/mobile-react/components/collapse', - // component: () => import('tdesign-mobile-react/collapse/collapse.md'), - // }, + { + title: 'Collapse 折叠面板', + name: 'collapse', + path: '/mobile-react/components/collapse', + component: () => import('tdesign-mobile-react/collapse/collapse.md'), + }, { title: 'CountDown 倒计时', name: 'count-down', diff --git a/src/_common b/src/_common index 3e51c011..fe449a2a 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 3e51c01173a3a30cefe60dae7e802231c787d410 +Subproject commit fe449a2ad4a247e0abb49e995f459c19644d8bbf diff --git a/src/collapse/Collapse.tsx b/src/collapse/Collapse.tsx index 9f195e5a..d86b9a8a 100644 --- a/src/collapse/Collapse.tsx +++ b/src/collapse/Collapse.tsx @@ -1,112 +1,69 @@ -import React, { useMemo } from 'react'; -import classNames from 'classnames'; -import { TdCollapseProps } from './type'; -import { StyledProps } from '../common'; -import useDefault from '../_util/useDefault'; -import useConfig from '../_util/useConfig'; -import noop from '../_util/noop'; -import CollapsePanel, { CollapsePanelProps } from './CollapsePanel'; +import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react'; +import type { StyledProps } from '../common'; +import type { TdCollapseProps, CollapseValue } from './type'; +import { collapseDefaultProps } from './defaultProps'; +import { CollapseProvider } from './CollapseContext'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; +import parseTNode from '../_util/parseTNode'; -export interface CollapseProps extends TdCollapseProps, StyledProps { - children?: React.ReactNode; -} +export interface CollapseProps extends TdCollapseProps, StyledProps {} -export const CollapseContext = React.createContext(null); +const Collapse = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, collapseDefaultProps); + const collapseClass = usePrefixClass('collapse'); -export interface CollapsePanelContextValue { - inject: (props: CollapsePanelProps) => CollapsePanelProps; -} - -const Collapse = function(props: CollapseProps) { - const { classPrefix } = useConfig(); - const { - className, - style, + const { + defaultValue, + value, + onChange, disabled, - defaultExpandAll, expandIcon, expandMutex, - value: propsValue, - defaultValue, - onChange: propsOnChange = noop, + defaultExpandAll, + theme, children, - } = props; - const collapseClassNames = classNames( className, - `${classPrefix}-collapse`, - ); - - const propsValueArr = useMemo(() => { - if (typeof propsValue === 'string' || typeof propsValue === 'number') { - return [propsValue]; - } - if (Array.isArray(propsValue)) { - return [...propsValue] - } - }, [propsValue]); - - let defaultValueArr = []; - if (typeof defaultValue === 'string' || typeof defaultValue === 'number') { - defaultValueArr = [defaultValue]; - } - if (Array.isArray(defaultValue)) { - defaultValueArr = [...defaultValue]; - } - - const [value, setValue] = useDefault(propsValueArr, defaultValueArr, noop); - - const valueSet = useMemo(() => { - if (!Array.isArray(value)) return new Set([]); - return new Set([].concat(value)); - }, [value]); + style, + } = props; - const context: CollapsePanelContextValue = { - inject: (collapsePanelProps) => { - const { - disabled: innerDisabled, - expandIcon: innerExpandedIcon, - value: innerValue, - } = collapsePanelProps; + const [activeValue, setActiveValue] = useState(value || defaultValue); - const expanded = valueSet.has(innerValue) || defaultExpandAll; - const returnDisabled = typeof innerDisabled === 'undefined' ? disabled : innerDisabled; + const onPanelChange = useCallback( + (panelValue: string | number, args: { e: React.MouseEvent }) => { + if (Array.isArray(activeValue)) { + const hit = activeValue.indexOf(panelValue); - return { - ...collapsePanelProps, - disabled: returnDisabled, - expandIcon: typeof innerExpandedIcon === 'undefined' ? expandIcon : innerExpandedIcon, - isControlled: typeof propsValue !== 'undefined', - expanded, - onChange(v) { - if (value.includes(v)) { - setValue([...value.filter(item => item !== v)]); - } else { - if (expandMutex) { - setValue([v]); - return; - } - setValue([...value, v]); - } - propsOnChange(v); + if (hit > -1) { + const newVal = activeValue.filter((item) => item !== panelValue); + setActiveValue(newVal); + onChange?.(newVal, args); + } else { + const newVal = expandMutex ? [panelValue] : activeValue.concat(panelValue); + setActiveValue(newVal); + onChange?.(newVal, args); } - }; + } }, - }; + [activeValue, onChange, expandMutex], + ); + + const memoProviderValues = useMemo( + () => ({ + activeValue, + disabled, + expandIcon, + onPanelChange, + defaultExpandAll, + }), + [activeValue, disabled, expandIcon, onPanelChange, defaultExpandAll], + ); + return ( -
- - {React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) { - return child; - } - const childProps = { value: index } - return React.cloneElement(child, childProps) - })} - +
+ {parseTNode(children)}
); -}; - -Collapse.Panel = CollapsePanel; +}); -export default Collapse; +export default memo(Collapse); diff --git a/src/collapse/CollapseContext.tsx b/src/collapse/CollapseContext.tsx new file mode 100644 index 00000000..f374534d --- /dev/null +++ b/src/collapse/CollapseContext.tsx @@ -0,0 +1,14 @@ +import { createContext } from 'react'; +import type { CollapseValue } from './type'; + +export interface CollapseContextValue { + activeValue: CollapseValue | undefined; + disabled: boolean; + expandIcon: React.ReactNode; + onPanelChange: (name: string | number, args: { e: React.MouseEvent }) => void; + defaultExpandAll: boolean; +} + +export const CollapseContext = createContext(null); + +export const CollapseProvider = CollapseContext.Provider; diff --git a/src/collapse/CollapsePanel.tsx b/src/collapse/CollapsePanel.tsx index a732b64a..0a6b1c53 100644 --- a/src/collapse/CollapsePanel.tsx +++ b/src/collapse/CollapsePanel.tsx @@ -1,122 +1,130 @@ -import React, { useContext, useState, useRef, useEffect } from 'react'; -import { Icon } from 'tdesign-icons-react'; -import classNames from 'classnames'; -import useConfig from '../_util/useConfig'; -import { TdCollapsePanelProps } from './type'; -import { StyledProps } from '../common'; -import { CollapseContext } from './Collapse'; - -export interface CollapsePanelProps extends TdCollapsePanelProps, StyledProps { - children?: React.ReactNode; -} - -const CollapsePanel = function(_props: CollapsePanelProps) { - const context = useContext(CollapseContext); - const props = context ? context.inject(_props) : _props; +import React, { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import cls from 'classnames'; +import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-react'; +import type { StyledProps } from '../common'; +import type { TdCollapsePanelProps } from './type'; +import { collapsePanelDefaultProps } from './defaultProps'; +import { CollapseContext } from './CollapseContext'; +import { Cell } from '../cell'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; +import parseTNode from '../_util/parseTNode'; + +export interface CollapsePanelProps extends TdCollapsePanelProps, StyledProps {} + +const CollapsePanel = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, collapsePanelDefaultProps); + const collapsePanelClass = usePrefixClass('collapse-panel'); + const { - className, - style, - children, - content, - destroyOnCollapse, + value, disabled, + placement, expandIcon, + children, + headerLeftIcon, header, headerRightContent, - expanded: injectedExpanded, - value, - onChange, - isControlled, + className, + style, } = props; - const { classPrefix } = useConfig(); - - const [expanded, setExpanded] = useState(injectedExpanded); - const [showPanelBody, setShowPanelBody] = useState(injectedExpanded); - const [panelStyle, setPanelStyle] = useState({}); - - const panelRef = useRef(null); - const headerRef = useRef(null); - const bodyRef = useRef(null); - - const panelClassNames = classNames( - className, - `${classPrefix}-collapse-panel`, - {[`${classPrefix}-collapse-panel--active`]: expanded}, - {[`${classPrefix}-collapse-panel--disabled`]: disabled}, + const parent = useContext(CollapseContext); + + const isActive = useMemo(() => !!parent?.activeValue?.includes(value), [parent, value]); + + const handleClick: React.MouseEventHandler = useCallback( + (e) => { + e?.stopPropagation(); + if (parent?.disabled || disabled) return; + parent?.onPanelChange(value, { e }); + }, + [parent, value, disabled], ); + const bodyRef = useRef(null); + const headRef = useRef(null); + const [wrapperHeight, setWrapperHeight] = useState(''); + useEffect(() => { - if (expanded) { - setShowPanelBody(true); - } - setTimeout(() => { - const headerHeight = headerRef.current.getBoundingClientRect().height; - const bodyHeight = (bodyRef && bodyRef.current) ? bodyRef.current.getBoundingClientRect().height : 0; - setPanelStyle({ - height: `${expanded ? (headerHeight + bodyHeight) : headerHeight}px` - }); - }); - }, [expanded]); + const updatePanelState = () => { + if (!headRef.current || !bodyRef.current) { + return; + } + const headHeight = headRef.current.getBoundingClientRect().height; + if (!isActive) { + setWrapperHeight(`${headHeight}px`); + return; + } + const bodyHeight = bodyRef.current.getBoundingClientRect().height; + const height = headHeight + bodyHeight; + setWrapperHeight(`${height}px`); + }; + + updatePanelState(); + }, [isActive]); useEffect(() => { - if (!disabled) { - setExpanded(injectedExpanded); + if (parent?.defaultExpandAll) { + parent.onPanelChange(value, { e: null }); } - }, [injectedExpanded, disabled]); + }, [parent, value]); - const handleHeaderClick = () => { - if (disabled) { - return; - } - if (!isControlled) { - setExpanded(!expanded); - onChange(value); + const renderDefaultIcon = () => { + if (placement === 'bottom') { + return isActive ? : ; } + return isActive ? : ; }; - const renderIcon = () => { - if (expandIcon === 'undefined' || expandIcon === false) { - return <>; - } - if (expandIcon === true) { - return ( - - ); - } - return expandIcon; + const renderRightIcon = () => { + const showIcon = expandIcon || parent?.expandIcon; + const icon = showIcon === true ? renderDefaultIcon() : showIcon; + return
{icon}
; }; - const onTransitionEnd = () => { - const { height: panelHeight } = panelRef.current.getBoundingClientRect(); - if (destroyOnCollapse && panelHeight <= 48) { - setShowPanelBody(false); - } - } + /** 面板内容区， */ + const PanelContent = () => { + const panelContent = parseTNode(children); + // 当前面板处理折叠状态时，是否销毁面板内容 + if (props.destroyOnCollapse && !isActive) return null; + + return ( +
+ {panelContent} +
+ ); + }; return ( -
-
-
{header}
-
-
- {headerRightContent} -
- {renderIcon()} -
+
+
+
- {(!destroyOnCollapse || destroyOnCollapse && showPanelBody) - &&
-
- {children || content} -
-
} +
); -}; +}); -export default CollapsePanel; +export default memo(CollapsePanel); diff --git a/src/collapse/_example/accordion.jsx b/src/collapse/_example/accordion.jsx deleted file mode 100644 index 9f0beb71..00000000 --- a/src/collapse/_example/accordion.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Collapse } from 'tdesign-mobile-react'; - -export default function () { - return ( - <> - console.log('value change: ', value)}> - - 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 - - - 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 - - - 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 - - - - ); -} diff --git a/src/collapse/_example/accordion.tsx b/src/collapse/_example/accordion.tsx new file mode 100644 index 00000000..4d84d9a6 --- /dev/null +++ b/src/collapse/_example/accordion.tsx @@ -0,0 +1,24 @@ +import React, { useState, Fragment } from 'react'; +import { Collapse, CollapsePanel } from 'tdesign-mobile-react'; + +export default function () { + const [values, setValues] = useState([1]); + + const handleChange = (value: number[]) => { + setValues(value); + }; + + return ( + + {Array.from({ length: 4 }).map((_, i) => ( + + +
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+ + + ))} + + ); +} diff --git a/src/collapse/_example/action.tsx b/src/collapse/_example/action.tsx new file mode 100644 index 00000000..60dbf35f --- /dev/null +++ b/src/collapse/_example/action.tsx @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; +import { Collapse, CollapsePanel } from 'tdesign-mobile-react'; + +export default function () { + const [values, setValues] = useState([0]); + + const handleChange = (value: number[]) => { + setValues(value); + }; + + return ( + + +
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+ + + ); +} diff --git a/src/collapse/_example/base.jsx b/src/collapse/_example/base.tsx similarity index 65% rename from src/collapse/_example/base.jsx rename to src/collapse/_example/base.tsx index 7068d169..61b737ea 100644 --- a/src/collapse/_example/base.jsx +++ b/src/collapse/_example/base.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import { Collapse } from 'tdesign-mobile-react'; +import { Collapse, CollapsePanel } from 'tdesign-mobile-react'; export default function () { return ( - <> - - + + +
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 - - - +
+ + ); } diff --git a/src/collapse/_example/card.tsx b/src/collapse/_example/card.tsx new file mode 100644 index 00000000..7e5af9b7 --- /dev/null +++ b/src/collapse/_example/card.tsx @@ -0,0 +1,24 @@ +import React, { useState, Fragment } from 'react'; +import { Collapse, CollapsePanel } from 'tdesign-mobile-react'; + +export default function () { + const [values, setValues] = useState([1]); + + const handleChange = (value: number[]) => { + setValues(value); + }; + + return ( + + {Array.from({ length: 4 }).map((_, i) => ( + + +
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+ + + ))} + + ); +} diff --git a/src/collapse/_example/control.jsx b/src/collapse/_example/control.jsx deleted file mode 100644 index f3992492..00000000 --- a/src/collapse/_example/control.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useState } from 'react'; -import { Collapse, Checkbox } from 'tdesign-mobile-react'; - -export default function () { - const [value, setValue] = useState([]); - return ( - <> - - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - -
- setValue(value ? [0, 1] : [])} /> - - ); -} diff --git a/src/collapse/_example/destroy.jsx b/src/collapse/_example/destroy.jsx deleted file mode 100644 index 03c02291..00000000 --- a/src/collapse/_example/destroy.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Collapse } from 'tdesign-mobile-react'; - -export default function () { - return ( - <> - - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - - - ); -} diff --git a/src/collapse/_example/disable.jsx b/src/collapse/_example/disable.jsx deleted file mode 100644 index 398fe5f6..00000000 --- a/src/collapse/_example/disable.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Collapse } from 'tdesign-mobile-react'; - -export default function () { - return ( - <> - - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - - - ); -} diff --git a/src/collapse/_example/expandIcon.jsx b/src/collapse/_example/expandIcon.jsx deleted file mode 100644 index d9e25116..00000000 --- a/src/collapse/_example/expandIcon.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Collapse } from 'tdesign-mobile-react'; -import { Icon } from 'tdesign-icons-react'; - -export default function () { - const expandIcon = ; - return ( - <> - - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - - - ); -} diff --git a/src/collapse/_example/index.jsx b/src/collapse/_example/index.tsx similarity index 74% rename from src/collapse/_example/index.jsx rename to src/collapse/_example/index.tsx index 0ee7dfe2..e29f54aa 100644 --- a/src/collapse/_example/index.jsx +++ b/src/collapse/_example/index.tsx @@ -2,8 +2,10 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; import Base from './base'; +import Placement from './placement'; import Action from './action'; import Accordion from './accordion'; +import Card from './card'; export default function CheckboxDemo() { return ( @@ -14,6 +16,10 @@ export default function CheckboxDemo() { + + + + @@ -21,6 +27,10 @@ export default function CheckboxDemo() { + + + +
); } diff --git a/src/collapse/_example/more.jsx b/src/collapse/_example/more.jsx deleted file mode 100644 index fe49144d..00000000 --- a/src/collapse/_example/more.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Collapse } from 'tdesign-mobile-react'; - -export default function () { - return ( - <> - - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - -
    -
  • 面板内容
    • -
  • 面板内容
    • -
  • 面板内容
    • -
- - - - ); -} diff --git a/src/collapse/_example/action.jsx b/src/collapse/_example/placement.tsx similarity index 54% rename from src/collapse/_example/action.jsx rename to src/collapse/_example/placement.tsx index ee36f016..261e5b21 100644 --- a/src/collapse/_example/action.jsx +++ b/src/collapse/_example/placement.tsx @@ -1,15 +1,14 @@ -import React, { useState } from 'react'; -import { Collapse } from 'tdesign-mobile-react'; +import React from 'react'; +import { Collapse, CollapsePanel } from 'tdesign-mobile-react'; export default function () { - const [val, setVal] = useState(0); return ( - <> - setVal(val)} expandIcon> - + + +
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 - - - +
+ + ); } diff --git a/src/collapse/collapse.en-US.md b/src/collapse/collapse.en-US.md new file mode 100644 index 00000000..a515d34b --- /dev/null +++ b/src/collapse/collapse.en-US.md @@ -0,0 +1,37 @@ +:: BASE_DOC :: + +## API + +### Collapse Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +defaultExpandAll | Boolean | false | \- | N +disabled | Boolean | - | \- | N +expandIcon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +expandMutex | Boolean | false | \- | N +theme | String | default | options: default/card | N +value | Array | [] | Typescript：`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/collapse/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/collapse/type.ts) | N +onChange | Function | | Typescript：`(value: CollapseValue, context: { e: MouseEvent }) => void`
| N + + +### CollapsePanel Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +destroyOnCollapse | Boolean | false | \- | N +disabled | Boolean | undefined | \- | N +expandIcon | TNode | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +header | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +headerLeftIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +headerRightContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +placement | String | bottom | options: bottom/top | N +value | String / Number | - | \- | N diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md index b8999709..140e64b7 100644 --- a/src/collapse/collapse.md +++ b/src/collapse/collapse.md @@ -4,29 +4,34 @@ ### Collapse Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +children | TNode | - | 折叠面板列表内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N defaultExpandAll | Boolean | false | 默认是否展开全部 | N disabled | Boolean | - | 是否禁用面板展开/收起操作 | N -expandIcon | TNode | - | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +expandIcon | TNode | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N expandMutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N -value | String / Number / Array | - | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = string | number | Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/collapse/type.ts) | N -defaultValue | String / Number / Array | - | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = string | number | Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/collapse/type.ts) | N -onChange | Function | | TS 类型：`(value: CollapseValue) => void`
切换面板时触发，返回变化的值 | N +theme | String | default | 折叠面板风格。可选项：default/card | N +value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/collapse/type.ts) | N +defaultValue | Array | [] | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/collapse/type.ts) | N +onChange | Function | | TS 类型：`(value: CollapseValue, context: { e: MouseEvent }) => void`
切换面板时触发，返回变化的值 | N + ### CollapsePanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 折叠面板内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 折叠面板内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 折叠面板内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 折叠面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N -expandIcon | TNode | - | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -header | TNode | - | 面板头内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -headerRightContent | TNode | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +expandIcon | TNode | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +header | TNode | - | 面板头内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +headerLeftIcon | TElement | - | 面板头左侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +headerRightContent | TNode | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N diff --git a/src/collapse/defaultProps.ts b/src/collapse/defaultProps.ts new file mode 100644 index 00000000..2036443e --- /dev/null +++ b/src/collapse/defaultProps.ts @@ -0,0 +1,20 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdCollapseProps, TdCollapsePanelProps } from './type'; + +export const collapseDefaultProps: TdCollapseProps = { + defaultExpandAll: false, + expandIcon: true, + expandMutex: false, + theme: 'default', + defaultValue: [], +}; + +export const collapsePanelDefaultProps: TdCollapsePanelProps = { + destroyOnCollapse: false, + disabled: undefined, + expandIcon: undefined, + placement: 'bottom', +}; diff --git a/src/collapse/index.ts b/src/collapse/index.ts index 8750cef7..f9c4c64c 100644 --- a/src/collapse/index.ts +++ b/src/collapse/index.ts @@ -1,4 +1,5 @@ import _Collapse from './Collapse'; +import _CollapsePanel from './CollapsePanel'; import './style/index.js'; @@ -8,4 +9,4 @@ export type { CollapsePanelProps } from './CollapsePanel'; export * from './type'; export const Collapse = _Collapse; -export default Collapse; +export const CollapsePanel = _CollapsePanel; diff --git a/src/collapse/style/index.js b/src/collapse/style/index.js index a2530da5..779a586e 100644 --- a/src/collapse/style/index.js +++ b/src/collapse/style/index.js @@ -1,5 +1,2 @@ // index.js -import '../../_common/style/mobile/components/collapse/_index.less'; - -// css.js -import './index.less'; +import '../../_common/style/mobile/components/collapse/v2/_index.less'; diff --git a/src/collapse/type.ts b/src/collapse/type.ts index 75b905eb..4c4a5ab4 100644 --- a/src/collapse/type.ts +++ b/src/collapse/type.ts @@ -4,9 +4,14 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import { TNode, TElement } from '../common'; +import { MouseEvent } from 'react'; export interface TdCollapseProps { + /** + * 折叠面板列表内容 + */ + children?: TNode; /** * 默认是否展开全部 * @default false @@ -18,6 +23,7 @@ export interface TdCollapseProps { disabled?: boolean; /** * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 + * @default true */ expandIcon?: TNode; /** @@ -25,18 +31,25 @@ export interface TdCollapseProps { * @default false */ expandMutex?: boolean; + /** + * 折叠面板风格 + * @default default + */ + theme?: 'default' | 'card'; /** * 展开的面板集合 + * @default [] */ value?: CollapseValue; /** * 展开的面板集合，非受控属性 + * @default [] */ defaultValue?: CollapseValue; /** * 切换面板时触发，返回变化的值 */ - onChange?: (value: CollapseValue) => void; + onChange?: (value: CollapseValue, context: { e: MouseEvent }) => void; } export interface TdCollapsePanelProps { @@ -65,14 +78,23 @@ export interface TdCollapsePanelProps { * 面板头内容 */ header?: TNode; + /** + * 面板头左侧图标 + */ + headerLeftIcon?: TElement; /** * 面板头的右侧区域，一般用于呈现面板操作 */ headerRightContent?: TNode; + /** + * 选项卡内容的位置 + * @default bottom + */ + placement?: 'bottom' | 'top'; /** * 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 */ value?: string | number; } -export type CollapseValue = string | number | Array; +export type CollapseValue = Array; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 04f6cfaa..ef8d479c 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -4394,6 +4394,1467 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/collapse/_example/accordion.tsx 1`] = ` +
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/collapse/_example/action.tsx 1`] = ` +
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 收起 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/collapse/_example/base.tsx 1`] = ` +
+
+
+
+
+
+
+ 折叠面板标题 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/collapse/_example/card.tsx 1`] = ` +
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/collapse/_example/index.tsx 1`] = ` +
+
+
+

+ Collapse 折叠面板 +

+

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

+
+
+
+

+ 01 类型 +

+

+ 基础面板 +

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

+ 向上展开 +

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

+ 带操作说明 +

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

+ 手风琴模式 +

+
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+

+ 02 组件样式 +

+

+ 卡片折叠面板 +

+
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+ 折叠面板标题 +
+
+ 单元测试 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/collapse/_example/placement.tsx 1`] = ` +
+
+
+
+
+
+
+ 折叠面板标题 +
+
+
+
+ + + +
+
+
+
+
+
+
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 +
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
ssr test src/cell/_example/multiple.tsx 1`] = `" ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/action.tsx 1`] = `"
折叠面板标题
收起
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/card.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `"

Collapse 折叠面板

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

01 类型

基础面板

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

向上展开

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

带操作说明

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

手风琴模式

折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容

02 组件样式

卡片折叠面板

折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/placement.tsx 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/index.tsx 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

01 组件类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

02 组件尺寸

倒计时 large/medium/small 尺寸

时分秒
带毫秒
带方形底
带圆形底
带单位
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 593435fe..70a5e225 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -42,6 +42,18 @@ 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/collapse/_example/accordion.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/action.tsx 1`] = `"
折叠面板标题
收起
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/card.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `"

Collapse 折叠面板

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

01 类型

基础面板

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

向上展开

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

带操作说明

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

手风琴模式

折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容

02 组件样式

卡片折叠面板

折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + +exports[`ssr snapshot test > ssr test src/collapse/_example/placement.tsx 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; + exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `"
时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; exports[`ssr snapshot test > ssr test src/count-down/_example/index.tsx 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

01 组件类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

02 组件尺寸

倒计时 large/medium/small 尺寸

时分秒
带毫秒
带方形底
带圆形底
带单位
"`; From dc953d7f2dcd1bff3ae08547f1f5d601f431f16a Mon Sep 17 00:00:00 2001 From: "Y." Date: Fri, 30 Aug 2024 19:16:21 +0800 Subject: [PATCH 11/28] chore: publish v0.6.0 (#506) * chore: publish v0.6.0 * chore: changelog's changes * chore: update snapshot --------- Co-authored-by: github-actions[bot] --- CHANGELOG.md | 15 +++++++++++ package.json | 2 +- test/snap/__snapshots__/csr.test.jsx.snap | 32 +++++++---------------- test/snap/__snapshots__/ssr.test.jsx.snap | 8 +++--- 4 files changed, 30 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ec4d9c6d..38934db4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,21 @@ toc: false spline: explain --- +## 🌈 0.6.0 `2024-08-30` +### 🚀 Features +- `Table`: 新增 `Table` 组件 @TianlunXiong ([#472](https://github.com/Tencent/tdesign-mobile-react/pull/472)) +- `SideBar`: 新增 `SideBar` 组件 @tobytovi ([#491](https://github.com/Tencent/tdesign-mobile-react/pull/491)) +- `layout`: 新增 layout 组件 @jiasy1616 ([#452](https://github.com/Tencent/tdesign-mobile-react/pull/452)) +- `NoticeBar`: 新增 `direction` 属性， `extra` 属性名称变更为 `operation`，废弃 `change` 事件 @slatejack ([#501](https://github.com/Tencent/tdesign-mobile-react/pull/501)) +- `TabBar`: 新增 `children`、`split` 和 `shape` 等属性 @tobytovi ([#482](https://github.com/Tencent/tdesign-mobile-react/pull/482)) +- `TabBarItem`: 新增 `children` 属性 @tobytovi ([#482](https://github.com/Tencent/tdesign-mobile-react/pull/482)) +- `Collapse`: 新增 `children` 和 `theme` 属性 @tobytovi ([#500](https://github.com/Tencent/tdesign-mobile-react/pull/500)) +- `CollapsePanel`: 新增 `placement` 和 `headerLeftIcon` 属性 @tobytovi ([#500](https://github.com/Tencent/tdesign-mobile-react/pull/500)) + +### 🐞 Bug Fixes +- `Badge`: 修复 `content` 为 `ReactNode` 类型时组件渲染异常 @anlyyao ([#499](https://github.com/Tencent/tdesign-mobile-react/pull/499)) + + ## 🌈 0.5.0 `2024-08-23` ### ❗ Breaking Changes - `Input`: 组件重构，新增 `allowInputOverMax`、`autocomplete`、`borderless`、`readonly`、`status` 与`tips` 属性，新增 `onValidate` 事件 @slatejack ([#467](https://github.com/Tencent/tdesign-mobile-react/pull/467)) diff --git a/package.json b/package.json index 44e0b9de..6406ad1a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tdesign-mobile-react", - "version": "0.5.0", + "version": "0.6.0", "description": "TDesign Component for Mobile React", "title": "tdesign-mobile-react", "main": "cjs/index.js", diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index ef8d479c..928afa03 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -2987,10 +2987,8 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` width="1em" >
@@ -3272,10 +3270,8 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` width="1em" >
@@ -3466,10 +3462,8 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` width="1em" >
@@ -3629,10 +3623,8 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` width="1em" >
@@ -3994,10 +3986,8 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` width="1em" >
@@ -4354,10 +4344,8 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` width="1em" >
@@ -38014,13 +38002,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 70a5e225..ee4055e1 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -34,13 +34,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; From 66353f0451fa7e58a8d68b78d149480462ea5b20 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Wed, 4 Sep 2024 14:10:28 +0800 Subject: [PATCH 12/28] chore: upgrade tdesign-icons-react 0.3.5 (#507) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6406ad1a..1ba3bed0 100644 --- a/package.json +++ b/package.json @@ -169,7 +169,7 @@ "react-spring": "9.6.1", "react-transition-group": "^4.4.2", "smoothscroll-polyfill": "^0.4.4", - "tdesign-icons-react": "^0.3.4" + "tdesign-icons-react": "^0.3.5" }, "config": { "commitizen": { From a0417ab88bc478dc359f2bb662a50b6ccea475fb Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 4 Sep 2024 15:58:42 +0800 Subject: [PATCH 13/28] fix: use relative paths instead (#511) --- src/drawer/Drawer.tsx | 2 +- src/grid/GridItem.tsx | 4 ++-- src/input/Input.tsx | 4 ++-- src/navbar/Navbar.tsx | 2 +- src/notice-bar/NoticeBar.tsx | 8 ++++---- src/picker/Picker.tsx | 3 ++- src/popup/Popup.tsx | 6 +++--- src/pull-down-refresh/PullDownRefresh.tsx | 2 +- src/swipe-cell/SwipeCell.tsx | 2 +- src/tag/CheckTag.tsx | 4 ++-- src/tag/Tag.tsx | 6 +++--- 11 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx index 0e310245..9ae7a7d9 100644 --- a/src/drawer/Drawer.tsx +++ b/src/drawer/Drawer.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Popup } from 'tdesign-mobile-react'; +import Popup from '../popup'; import { TdDrawerProps, DrawerCloseContext, DrawerItem } from './type'; import useConfig from '../_util/useConfig'; diff --git a/src/grid/GridItem.tsx b/src/grid/GridItem.tsx index eaad1931..2c3a0dfa 100644 --- a/src/grid/GridItem.tsx +++ b/src/grid/GridItem.tsx @@ -3,11 +3,11 @@ import cls from 'classnames'; import isString from 'lodash/isString'; import isObject from 'lodash/isObject'; import isFunction from 'lodash/isFunction'; -import { Badge, Image } from 'tdesign-mobile-react'; import useConfig from '../_util/useConfig'; import parseTNode from '../_util/parseTNode'; import useDefaultProps from '../hooks/useDefaultProps'; - +import Badge from '../badge'; +import Image from '../image'; import { TdGridItemProps, TdGridProps } from './type'; import { GridContext } from './GridContext'; import { gridItemDefaultProps } from './defaultProps'; diff --git a/src/input/Input.tsx b/src/input/Input.tsx index b18c157a..6e0db126 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -2,8 +2,8 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f import type { FocusEvent, TouchEvent, CompositionEvent, FormEvent } from 'react'; import classNames from 'classnames'; import { CloseCircleFilledIcon, BrowseOffIcon, BrowseIcon } from 'tdesign-icons-react'; -import useDefault from 'tdesign-mobile-react/_util/useDefault'; -import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; +import useDefault from '../_util/useDefault'; +import parseTNode from '../_util/parseTNode'; import { inputDefaultProps } from './defaultProps'; import { getCharacterLength } from '../_common/js/utils/helper'; import useConfig from '../_util/useConfig'; diff --git a/src/navbar/Navbar.tsx b/src/navbar/Navbar.tsx index 87f1dfa9..01fee294 100644 --- a/src/navbar/Navbar.tsx +++ b/src/navbar/Navbar.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react'; import type { CSSProperties } from 'react'; import { ChevronLeftIcon } from 'tdesign-icons-react'; import ClassNames from 'classnames'; -import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass'; +import { usePrefixClass } from '../hooks/useClass'; import { StyledProps } from '../common'; import { TdNavbarProps } from './type'; import { navbarDefaultProps } from './defaultProps'; diff --git a/src/notice-bar/NoticeBar.tsx b/src/notice-bar/NoticeBar.tsx index 76204c4d..4f4b6e20 100644 --- a/src/notice-bar/NoticeBar.tsx +++ b/src/notice-bar/NoticeBar.tsx @@ -2,11 +2,11 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-react'; import classNames from 'classnames'; import isObject from 'lodash/isObject'; -import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; import isArray from 'lodash/isArray'; -import Swiper from 'tdesign-mobile-react/swiper'; -import SwiperItem from 'tdesign-mobile-react/swiper/SwiperItem'; -import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass'; +import parseTNode from '../_util/parseTNode'; +import Swiper from '../swiper'; +import SwiperItem from '../swiper/SwiperItem'; +import { usePrefixClass } from '../hooks/useClass'; import type { StyledProps } from '../common'; import type { TdNoticeBarProps, NoticeBarTrigger, NoticeBarMarquee } from './type'; import useDefault from '../_util/useDefault'; diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index 32baa9f4..35dd949f 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -1,11 +1,12 @@ import React, { FC, useMemo } from 'react'; -import { Button, Popup } from 'tdesign-mobile-react'; import useConfig from '../_util/useConfig'; import useDefault from '../_util/useDefault'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; import PickerView, { getPickerViewDefaultValue } from './PickerView'; import { pickerDefaultProps } from './defaultProps'; import { TdPickerProps } from './type'; +import Button from '../button'; +import Popup from '../popup'; export interface PickerProps extends TdPickerProps, NativeProps {} diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx index aba1bbe3..f6d5760c 100644 --- a/src/popup/Popup.tsx +++ b/src/popup/Popup.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useMemo, useRef, useState } from 'react'; +import React, { useMemo, useRef, useState } from 'react'; import classnames from 'classnames'; import { CloseIcon } from 'tdesign-icons-react'; import { CSSTransition } from 'react-transition-group'; @@ -20,7 +20,7 @@ enum PopupSourceEnum { CLOSEBTN = 'close-btn', } -const Popup = forwardRef((props) => { +const Popup: React.FC = (props) => { const { children, placement, @@ -123,7 +123,7 @@ const Popup = forwardRef((props) => { ); return {node}; -}); +}; Popup.displayName = 'Popup'; diff --git a/src/pull-down-refresh/PullDownRefresh.tsx b/src/pull-down-refresh/PullDownRefresh.tsx index edba7887..c68b8ec0 100644 --- a/src/pull-down-refresh/PullDownRefresh.tsx +++ b/src/pull-down-refresh/PullDownRefresh.tsx @@ -5,7 +5,7 @@ import uniqueId from 'lodash/uniqueId'; import { useDrag } from '@use-gesture/react'; import { useSpring, animated } from '@react-spring/web'; import isBoolean from 'lodash/isBoolean'; -import { Loading } from 'tdesign-mobile-react'; +import Loading from '../loading'; import useConfig from '../_util/useConfig'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; import getScrollParent from '../_util/getScrollParent'; diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx index d79299b5..204c4927 100644 --- a/src/swipe-cell/SwipeCell.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -3,8 +3,8 @@ import isArray from 'lodash/isArray'; import identity from 'lodash/identity'; import { useClickAway } from 'ahooks'; import { useDrag } from '@use-gesture/react'; -import { Button } from 'tdesign-mobile-react'; import { useSpring, animated } from '@react-spring/web'; +import Button from '../button'; import useConfig from '../_util/useConfig'; import nearest from '../_util/nearest'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; diff --git a/src/tag/CheckTag.tsx b/src/tag/CheckTag.tsx index 1f76e2df..bc1c04ef 100644 --- a/src/tag/CheckTag.tsx +++ b/src/tag/CheckTag.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import React, { forwardRef } from 'react'; import { Icon } from 'tdesign-icons-react'; -import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; -import { StyledProps } from 'tdesign-mobile-react/common'; +import parseTNode from '../_util/parseTNode'; +import { StyledProps } from '../common'; import useConfig from '../_util/useConfig'; import useDefault from '../_util/useDefault'; import useDefaultProps from '../hooks/useDefaultProps'; diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx index eda89eda..c538783d 100644 --- a/src/tag/Tag.tsx +++ b/src/tag/Tag.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import React, { forwardRef } from 'react'; import { Icon } from 'tdesign-icons-react'; -import parseTNode from 'tdesign-mobile-react/_util/parseTNode'; -import { StyledProps } from 'tdesign-mobile-react/common'; -import useDefaultProps from 'tdesign-mobile-react/hooks/useDefaultProps'; +import parseTNode from '../_util/parseTNode'; +import { StyledProps } from '../common'; +import useDefaultProps from '../hooks/useDefaultProps'; import useConfig from '../_util/useConfig'; import { tagDefaultProps } from './defaultProps'; import { TdTagProps } from './type'; From a02e0fe263c7f7e1c284513f06ff88c8b723f21f Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Wed, 4 Sep 2024 16:04:06 +0800 Subject: [PATCH 14/28] docs(input): fix status default value (#509) --- src/input/defaultProps.ts | 2 +- src/input/input.en-US.md | 2 +- src/input/input.md | 2 +- src/input/type.ts | 3 ++- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/input/defaultProps.ts b/src/input/defaultProps.ts index cde7ff7b..f4fd1473 100644 --- a/src/input/defaultProps.ts +++ b/src/input/defaultProps.ts @@ -16,6 +16,6 @@ export const inputDefaultProps: TdInputProps = { layout: 'horizontal', placeholder: undefined, readonly: undefined, - status: undefined, + status: 'default', type: 'text', }; diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md index b17e7a32..3bd45e74 100644 --- a/src/input/input.en-US.md +++ b/src/input/input.en-US.md @@ -27,7 +27,7 @@ placeholder | String | undefined | \- | N prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N readonly | Boolean | undefined | \- | N size | String | medium | `deprecated`。options: small/medium。Typescript：`'medium' \| 'small'` | N -status | String | undefined | options: default/success/warning/error | N +status | String | default | options: default/success/warning/error | N suffix | TNode | - | suffix content before suffixIcon。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N suffixIcon | TElement | - | suffix icon of input。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N tips | TNode | - | tips on the bottom of input, different `status` can make tips to be different color。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/input/input.md b/src/input/input.md index 8d54c489..460f91ed 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -27,7 +27,7 @@ placeholder | String | undefined | 占位符 | N prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N readonly | Boolean | undefined | 只读状态 | N size | String | medium | 已废弃。输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N -status | String | undefined | 输入框状态。默认情况会由组件内部根据实际情况呈现，如果文本过长引起的状态变化。可选项：default/success/warning/error | N +status | String | default | 输入框状态。可选项：default/success/warning/error | N suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/input/type.ts b/src/input/type.ts index fd81e396..d49ac655 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -85,7 +85,8 @@ export interface TdInputProps { */ readonly?: boolean; /** - * 输入框状态。默认情况会由组件内部根据实际情况呈现，如果文本过长引起的状态变化 + * 输入框状态 + * @default default */ status?: 'default' | 'success' | 'warning' | 'error'; /** From dd24b4698804c38819f7e20a5cbcf7da21d41680 Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 4 Sep 2024 16:22:21 +0800 Subject: [PATCH 15/28] chore: publish v0.6.1 (#512) * chore: publish v0.6.1 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38934db4..665849fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,10 @@ toc: false spline: explain --- +## 🌈 0.6.1 `2024-09-04` +### 🚀 Features +- `Icon`: 更新图标库版本到 `0.3.5` ，`lock-on` 图标存在更新 @liweijie0812 ([#507](https://github.com/Tencent/tdesign-mobile-react/pull/507)) + ## 🌈 0.6.0 `2024-08-30` ### 🚀 Features - `Table`: 新增 `Table` 组件 @TianlunXiong ([#472](https://github.com/Tencent/tdesign-mobile-react/pull/472)) diff --git a/package.json b/package.json index 1ba3bed0..522f63ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tdesign-mobile-react", - "version": "0.6.0", + "version": "0.6.1", "description": "TDesign Component for Mobile React", "title": "tdesign-mobile-react", "main": "cjs/index.js", From 35fa74b08c6e89e558b6b789b80f7f6a8bdb4c49 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Fri, 13 Sep 2024 13:05:35 +0800 Subject: [PATCH 16/28] chore: update pr-comment-ci (#519) --- .github/workflows/pr-comment-ci.yml | 101 ++++++++++++++++++++++++---- package.json | 4 +- 2 files changed, 91 insertions(+), 14 deletions(-) diff --git a/.github/workflows/pr-comment-ci.yml b/.github/workflows/pr-comment-ci.yml index 75f6366b..29db963e 100644 --- a/.github/workflows/pr-comment-ci.yml +++ b/.github/workflows/pr-comment-ci.yml @@ -15,8 +15,9 @@ jobs: steps: - uses: actions/checkout@v4 with: + repository: Tencent/tdesign sparse-checkout: | - .github/CODEOWNERS + .github/.pr-comment-ci-whitelist sparse-checkout-cone-mode: false - uses: actions/github-script@v7 @@ -24,21 +25,20 @@ jobs: with: script: | const user = context.payload.comment.user.login - core.debug(`user: ${user}`) + core.info(`user: ${user}`) - const fs = require('fs') - const CODEOWNERS = fs.readFileSync('.github/CODEOWNERS', 'utf8') - core.debug(`CODEOWNERS: ${CODEOWNERS}`) + const fs = require('fs'); + const whitelist = fs.readFileSync('.github/.pr-comment-ci-whitelist', 'utf8'); - let isReviewer = false; - CODEOWNERS.match(/@\w+/g).forEach((owner) => { - if (owner === `@${user}`) { - isReviewer = true + let isWhitelist = false; + whitelist.split('\n').forEach((owner) => { + if (owner === user) { + isWhitelist = true; } - }) + }); let next_action = '' - if (isReviewer) { + if (isWhitelist) { const body = context.payload.comment.body core.info(`body: ${body}`) if (body.startsWith('/update-common')) { @@ -47,6 +47,10 @@ jobs: if (body.startsWith('/update-snapshot')) { next_action='update-snapshot' } + if (body.startsWith('/update-coverage')) { + next_action='update-coverage' + } + if(next_action){ await github.rest.reactions.createForIssueComment({ owner: context.repo.owner, @@ -151,6 +155,21 @@ jobs: GH_TOKEN: ${{ secrets.PERSONAL_TOKEN }} run: gh pr checkout ${{ github.event.issue.number }} --recurse-submodules + - name: bot commtent + id: bot-comment + uses: actions/github-script@v7 + with: + script: | + const url = `${context.serverUrl}//${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}` + const urlLink = `[Open](${url})` + const { data: comment } = await github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: `⏳ 正在运行快照更新。。。 CI: ${urlLink}` + }) + return comment.id + - name: git config run: | git config --local user.email "github-actions[bot]@users.noreply.github.com" @@ -225,7 +244,65 @@ jobs: git commit -m "chore: update snapshot" fi git status - + + - name: git push + run: | + git status + git push || true + + update-coverage: + needs: check + runs-on: ubuntu-latest + if: ${{ needs.check.outputs.next_action == 'update-coverage' }} + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + token: ${{ secrets.PERSONAL_TOKEN }} + + - name: gh checkout pr + env: + GH_TOKEN: ${{ secrets.PERSONAL_TOKEN }} + run: gh pr checkout ${{ github.event.issue.number }} --recurse-submodules + + - name: git config + run: | + git config --local user.email "github-actions[bot]@users.noreply.github.com" + git config --local user.name "github-actions[bot]" + + - name: bot commtent + id: bot-comment + uses: actions/github-script@v7 + with: + script: | + const url = `${context.serverUrl}//${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}` + const urlLink = `[Open](${url})` + const { data: comment } = await github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: `⏳ 正在运行 coverage badge 更新。。。 CI: ${urlLink}` + }) + return comment.id + + - uses: actions/setup-node@v4 + with: + node-version: 18 + + - run: npm install + + - run: npm run generate:coverage-badge + + - name: commit coverage badge + run: | + git status + working_tree_clean=$(git status | grep -c 'nothing to commit, working tree clean') || true + if [ "$working_tree_clean" -eq "0" ]; then + git add . + git commit -m "chore: update coverage badge" + fi + git status + - name: git push run: | git status diff --git a/package.json b/package.json index 522f63ad..e57aa972 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "test:snap": "cross-env NODE_ENV=test-snap vitest run", "test:snap-update": "cross-env NODE_ENV=test-snap vitest run -u", "test:update": "vitest run -u && npm run test:snap-update", - "generate:coverage-badge": "node script/generate-coverage.js", + "generate:coverage-badge": "npm run test:unit-coverage && node script/generate-coverage.js", "prebuild": "rimraf es/* lib/* dist/* esm/* cjs/*", "build": "cross-env NODE_ENV=production rollup -c script/rollup.config.js && npm run build:tsc", "build:tsc": "concurrently \"npm:build:tsc-*\"", @@ -182,4 +182,4 @@ "npm run lint:fix" ] } -} +} \ No newline at end of file From 888fadf89713d724445f19f08a319eb8837b32db Mon Sep 17 00:00:00 2001 From: "Y." Date: Sat, 14 Sep 2024 10:19:22 +0800 Subject: [PATCH 17/28] fix: fix api doc parsing failure (#521) --- site/plugin-tdoc/md-to-react.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/site/plugin-tdoc/md-to-react.js b/site/plugin-tdoc/md-to-react.js index 7da837eb..8c19b1b0 100644 --- a/site/plugin-tdoc/md-to-react.js +++ b/site/plugin-tdoc/md-to-react.js @@ -123,17 +123,17 @@ export default function mdToReact(options) { mdSegment.componentName }" >
-
-
+
+
) :
${mdSegment.docMd.replace( - /class=/g, - 'className=', - )}
+ /class=/g, + 'className=', + )}
}
@@ -195,11 +195,6 @@ function customRender({ source, file, md }) { return ``; }); - apiMd = apiMd.replace(/`([^`]+)`/g, (str, codeStr) => { - codeStr = codeStr.replace(/\|/g, '\\|'); - return `\`${codeStr}\``; - }); - const mdSegment = { ...pageData, mobileUrl: '', From c0f72e1fccefa896610c21d03248e994d6fe5a48 Mon Sep 17 00:00:00 2001 From: Dubhe Date: Wed, 18 Sep 2024 14:42:48 +0800 Subject: [PATCH 18/28] =?UTF-8?q?Refactor/tabs=20Tabs=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=AF=B9=E9=BD=90vue=20(#515)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(tabs): tabs样式及结构对齐vue * refactor(tabs): tabs api对齐vue * refactor(tabs): tabs示例demo对齐vue * refactor(tabs): 更新测试快照 * docs(tabs): 调整类型定义及文档C * test(tabs): 更新测试快照;2C * perf(tabs): 修改类型引入方式及TNode渲染方式 * perf(tabs): 调整TabPanel组件类型判断方式 * docs(tabs): 文档根据api平台重新生成 * perf(tabs): 添加clearTimeout --- site/mobile/mobile.config.js | 2 +- src/sticky/index.tsx | 4 +- src/tabs/TabPanel.tsx | 64 +- src/tabs/Tabs.tsx | 363 ++- src/tabs/_example/badge.tsx | 12 + src/tabs/_example/base.jsx | 49 - src/tabs/_example/bottom.jsx | 55 - src/tabs/_example/content.tsx | 39 + src/tabs/_example/evenly.tsx | 81 + src/tabs/_example/horizontal.jsx | 26 - src/tabs/_example/icon.tsx | 37 + src/tabs/_example/index.jsx | 33 - src/tabs/_example/index.tsx | 44 + src/tabs/_example/isometric.tsx | 55 + src/tabs/_example/noline.jsx | 57 - src/tabs/_example/scroll.jsx | 55 - src/tabs/_example/size.jsx | 45 - src/tabs/_example/size.tsx | 57 + src/tabs/_example/status.tsx | 12 + src/tabs/_example/style.less | 47 - src/tabs/_example/style/index.less | 23 + src/tabs/_example/test.jsx | 6 - src/tabs/_example/theme.tsx | 38 + src/tabs/_example/vertical.jsx | 29 - src/tabs/defaultProps.ts | 17 + src/tabs/style/index.js | 2 +- src/tabs/tabs.en-US.md | 64 + src/tabs/tabs.md | 65 +- src/tabs/type.ts | 121 +- test/snap/__snapshots__/csr.test.jsx.snap | 3502 +++++++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 18 + 31 files changed, 4407 insertions(+), 615 deletions(-) create mode 100644 src/tabs/_example/badge.tsx delete mode 100644 src/tabs/_example/base.jsx delete mode 100644 src/tabs/_example/bottom.jsx create mode 100644 src/tabs/_example/content.tsx create mode 100644 src/tabs/_example/evenly.tsx delete mode 100644 src/tabs/_example/horizontal.jsx create mode 100644 src/tabs/_example/icon.tsx delete mode 100644 src/tabs/_example/index.jsx create mode 100644 src/tabs/_example/index.tsx create mode 100644 src/tabs/_example/isometric.tsx delete mode 100644 src/tabs/_example/noline.jsx delete mode 100644 src/tabs/_example/scroll.jsx delete mode 100644 src/tabs/_example/size.jsx create mode 100644 src/tabs/_example/size.tsx create mode 100644 src/tabs/_example/status.tsx delete mode 100644 src/tabs/_example/style.less create mode 100644 src/tabs/_example/style/index.less delete mode 100644 src/tabs/_example/test.jsx create mode 100644 src/tabs/_example/theme.tsx delete mode 100644 src/tabs/_example/vertical.jsx create mode 100755 src/tabs/defaultProps.ts create mode 100644 src/tabs/tabs.en-US.md diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 167d0fb3..082cdf59 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -23,7 +23,7 @@ export default { { title: 'Tabs 选项卡', name: 'tabs', - component: () => import('tdesign-mobile-react/tabs/_example/index.jsx'), + component: () => import('tdesign-mobile-react/tabs/_example/index.tsx'), }, { title: 'Input 输入框', diff --git a/src/sticky/index.tsx b/src/sticky/index.tsx index 6e372730..dd827781 100644 --- a/src/sticky/index.tsx +++ b/src/sticky/index.tsx @@ -1,8 +1,8 @@ import _Sticky from './Sticky'; - +import { TdStickyProps } from './type'; import './style'; export const Sticky = _Sticky; +export type StickyProps = TdStickyProps; export default Sticky; - diff --git a/src/tabs/TabPanel.tsx b/src/tabs/TabPanel.tsx index d83e601e..d2336781 100644 --- a/src/tabs/TabPanel.tsx +++ b/src/tabs/TabPanel.tsx @@ -1,48 +1,40 @@ -import React, { FC, useContext } from 'react'; -import classnames from 'classnames'; -import useConfig from '../_util/useConfig'; +import React, { FC, useContext, useEffect, useMemo, useState } from 'react'; import { TdTabPanelProps } from './type'; import TabContext from './context'; +import { usePrefixClass } from '../hooks/useClass'; +import parseTNode from '../_util/parseTNode'; const TabPanel: FC = (props) => { - const { value, label, disabled } = props; + const { value, lazy, destroyOnHide, children, panel } = props; - const { classPrefix } = useConfig(); - const tabPrefix = classPrefix || ''; + const tabPanelClass = usePrefixClass('tab-panel'); + const tabClass = usePrefixClass('tabs'); const tabProps = useContext(TabContext); - const { activeKey, horiRef, vetiRef, onChange } = tabProps; + const { activeKey } = tabProps; + const isActive = useMemo(() => value === activeKey, [activeKey, value]); + const [isMount, setIsMount] = useState(lazy ? isActive : true); + + useEffect(() => { + if (isActive) { + if (!isMount) { + setIsMount(true); + } + } else if (destroyOnHide) { + setIsMount(false); + } + }, [destroyOnHide, isActive, isMount, lazy]); - const change = () => { - if (disabled) return; - onChange && onChange(value); - }; return ( -
{ - if (activeKey === value) { - vetiRef.current = ref; - } - }} - className={classnames( - `${tabPrefix}-tabs__nav-item`, - activeKey === value && `${tabPrefix}-is-active`, - disabled && `${tabPrefix}-is-disabled`, - )} - key={value} - onClick={() => change()} - > - { - if (activeKey === value) { - horiRef.current = ref; - } - }} - className={`${tabPrefix}-tabs__nav-item-btn`} + isMount && ( +
- {label} - -
+ {parseTNode(children, panel)} +
+ ) ); }; - +TabPanel.displayName = 'TabPanel'; export default TabPanel; diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index edbb19f4..aa83caee 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -1,8 +1,15 @@ -import React, { FC, HTMLAttributes, useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import classnames from 'classnames'; -import useConfig from '../_util/useConfig'; -import { TdTabsProps } from './type'; +import type { FC, HTMLAttributes, CSSProperties } from 'react'; +import Sticky from '../sticky'; +import Badge from '../badge'; +import { TdTabPanelProps, TdTabsProps } from './type'; import TabPanel from './TabPanel'; +import useConfig from '../_util/useConfig'; +import { usePrefixClass } from '../hooks/useClass'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { tabsDefaultProps } from './defaultProps'; +import parseTNode from '../_util/parseTNode'; import TabContext from './context'; type TabsHTMLAttrs = Pick, 'className' | 'style'>; @@ -10,149 +17,255 @@ export interface TabsProps extends TdTabsProps, TabsHTMLAttrs {} const Tabs: FC = (props) => { const { - className = '', - style, + bottomLineMode, children, - content, - defaultValue = '', - list = [], + list, animation, - placement, - showBottomLine = true, + spaceEvenly, + showBottomLine, size, - change, - } = props; - const [activeKey, setActiveKey] = useState(''); - const [lineStyle, setLineStyle] = useState({}); - const [wrapWidth, setWrapWidth] = useState(0); + theme, + stickyProps, + swipeable, + onChange, + onClick, + onScroll, + value, + defaultValue, + } = useDefaultProps(props, tabsDefaultProps); + const tabsClass = usePrefixClass('tabs'); + const tabsClasses = useMemo( + () => + classnames({ + [tabsClass]: true, + [`${size}`]: size, + }), + [size, tabsClass], + ); + + const itemProps = useMemo>(() => { + if (list && list.length > 0) { + return list; + } + + const propsArr = []; + React.Children.forEach(children, (child: JSX.Element) => { + if (child.type.displayName === TabPanel.displayName) { + propsArr.push(child.props); + } + }); + + return propsArr; + }, [list, children]); + + const [activeKey, setActiveKey] = useState( + defaultValue || defaultValue === 0 ? defaultValue : value, + ); + const [lineStyle, setLineStyle] = useState({}); const { classPrefix } = useConfig(); - const tabPrefix = classPrefix || 't'; - const horiRef = useRef(null); - const wrapRef = useRef(null); - const vetiRef = useRef(null); - - const onChange = (value) => { - setActiveKey(value); - change && change(value); + const activeClass = `${tabsClass}__item--active`; + const navScrollRef = useRef(null); + const navWrapRef = useRef(null); + const navLineRef = useRef(null); + + const [startX, setStartX] = useState(0); + const [startY, setStartY] = useState(0); + const [endX, setEndX] = useState(0); + const [endY, setEndY] = useState(0); + const [canMove, setCanMove] = useState(true); + const tabIndex = useMemo(() => { + let index = 0; + for (let i = 0; i < itemProps.length; i++) { + if (itemProps[i].value === activeKey) { + index = i; + break; + } + } + return index; + }, [activeKey, itemProps]); + + const currentIndex = useMemo(() => itemProps.map((p) => p.value).indexOf(activeKey), [activeKey, itemProps]); + + const moveToActiveTab = () => { + if (navWrapRef.current && navLineRef.current && showBottomLine) { + const tab = navWrapRef.current.querySelector(`.${activeClass}`); + if (!tab) return; + const line = navLineRef.current; + const tabInner = tab.querySelector(`.${classPrefix}-badge`); + const style: CSSProperties = {}; + if (bottomLineMode === 'auto') { + style.width = `${Number(tabInner?.offsetWidth)}px`; + style.transform = `translateX(${Number(tab?.offsetLeft) + Number(tabInner?.offsetLeft)}px)`; + } else if (bottomLineMode === 'full') { + style.width = `${Number(tab?.offsetWidth)}px`; + style.transform = `translateX(${Number(tab?.offsetLeft)}px)`; + } else { + style.transform = `translateX(${ + Number(tab?.offsetLeft) + (Number(tab?.offsetWidth) - Number(line?.offsetWidth)) / 2 + }px)`; + } + + if (animation) { + style.transitionDuration = `${animation.duration}ms`; + } + + setLineStyle(style); + } }; - useEffect(() => { - if (placement === 'left' || placement === 'right') { - const vetiIndfo = vetiRef.current?.getBoundingClientRect(); - if (vetiIndfo) { - const { height } = vetiIndfo || {}; - const offsetTop = vetiRef.current?.offsetTop; - const sTop = wrapRef.current?.scrollTop; - const linePosition = offsetTop + sTop; - const lStyle = { - width: '2px', - height: `${height}px`, - left: 0, - top: `${linePosition}px`, - }; - const rStyle = { - width: '2px', - height: `${height}px`, - right: 0, - top: `${linePosition}px`, - }; - if (placement === 'left') { - setLineStyle(lStyle); - } - if (placement === 'right') { - setLineStyle(rStyle); + const handleTabClick = (item: TdTabPanelProps) => { + const { value, disabled } = item; + if (disabled || activeKey === value) { + return false; + } + setActiveKey(item.value); + if (onChange) { + onChange(item.value, parseTNode(item.label).toString()); + } + if (onClick) { + onClick(item.value, parseTNode(item.label).toString()); + } + setTimeout(() => { + moveToActiveTab(); + }, 0); + }; + + const handlerScroll = (context: { scrollTop: number; isFixed: boolean }) => { + const { scrollTop, isFixed } = context; + if (stickyProps) { + onScroll?.(scrollTop, isFixed); + } + }; + + // 手势滑动开始 + const handleTouchstart = (e: React.TouchEvent) => { + if (!swipeable) return; + setStartX(e.targetTouches[0].clientX); + setStartY(e.targetTouches[0].clientY); + }; + + const handleTouchmove = (e: React.TouchEvent) => { + if (!swipeable) return; + if (!canMove) return; + setEndX(e.targetTouches[0].clientX); + setEndY(e.targetTouches[0].clientY); + + const dValueX = Math.abs(startX - endX); + const dValueY = Math.abs(startY - endY); + if (tabIndex >= 0 && tabIndex < itemProps.length) { + if (dValueX > dValueY) { + // if (typeof e.cancelable !== 'boolean' || e.cancelable) { + // e.preventDefault(); + // } + if (dValueX <= 40) return; + if (startX > endX) { + // 向左划 + if (tabIndex >= itemProps.length - 1) return; + setCanMove(false); + handleTabClick(itemProps[tabIndex + 1]); + } else if (startX < endX) { + // 向右划 + if (tabIndex <= 0) return; + setCanMove(false); + handleTabClick(itemProps[tabIndex - 1]); } } - } else { - const eleInfo = horiRef.current?.getBoundingClientRect(); - if (eleInfo) { - const sLeft = wrapRef.current?.scrollLeft; - const { width, left } = eleInfo || {}; - const linePosition = left + sLeft; - const warpEle = wrapRef?.current; - warpEle.scrollLeft = linePosition - wrapWidth / 2; - - const tbStyle = { - width: `${width}px`, - left: `${linePosition}px`, - }; - setLineStyle(tbStyle); - } } - }, [activeKey, wrapWidth, placement, defaultValue, tabPrefix]); + }; + + // 手势滑动结束 + const handleTouchend = () => { + if (!swipeable) return; + setCanMove(true); + setStartX(0); + setEndX(0); + setStartY(0); + setEndY(0); + }; useEffect(() => { - const warapWidth = wrapRef.current?.getBoundingClientRect().width; - setWrapWidth(warapWidth); + window.addEventListener('resize', moveToActiveTab, false); + const timeout = setTimeout(() => { + moveToActiveTab(); + }, 300); + + return () => { + window.removeEventListener('resize', moveToActiveTab); + clearTimeout(timeout); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - if (activeKey) return; - if (defaultValue) { - onChange(defaultValue); - return; - } - if (list.length > 0) { - onChange(list[0]?.value); - return; - } - if (!children) return; - if (Array.isArray(children)) { - onChange(children[0]?.props?.value); - } else { - onChange(children?.props.value); - } + setTimeout(() => { + moveToActiveTab(); + }, 0); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tabPrefix, defaultValue]); + }, [value]); - return ( -
-
-
- - {children} - {list && - list.length > 0 && - list.map((item) => ( - - ))} - - {showBottomLine && ( -
- )} -
-
- {(children || content) && ( + const renderNav = () => + itemProps.map((item, index) => { + const { badgeProps } = item; + return (
handleTabClick(item)} > - {children && - Array.isArray(children) && - children.map((item) => <>{activeKey === item?.props?.value && <>{item.props.children}})} - {children && typeof children === 'object' && <>{children?.props?.children}} - {content} + +
+
{parseTNode(item.label)}
+
+ + {theme === 'card' && index === currentIndex - 1 &&
} + {theme === 'card' && index === currentIndex + 1 &&
} +
+ ); + }); + + return ( +
+ +
+
+
+ {renderNav()} + {theme === 'line' && showBottomLine && ( +
+ )} +
+
- )} + +
+ {children} +
); }; - +Tabs.displayName = 'Tabs'; export default Tabs; diff --git a/src/tabs/_example/badge.tsx b/src/tabs/_example/badge.tsx new file mode 100644 index 00000000..8f7a8672 --- /dev/null +++ b/src/tabs/_example/badge.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; + +export default () => ( +
+ + + + + +
+); diff --git a/src/tabs/_example/base.jsx b/src/tabs/_example/base.jsx deleted file mode 100644 index eb6f47e2..00000000 --- a/src/tabs/_example/base.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { Tabs, TabPanel } from 'tdesign-mobile-react'; -import './style.less'; - -export default function () { - return ( -
    -
  • - - -
    标签一内容
    -     - -
    标签二内容
    -     -     -
    • -
  • - - -
    标签一内容
    -     - -
    标签二内容
    -     - -
    标签三内容
    -     -     -
    • -
  • - - -
    标签页一内容
    -     - -
    标签二内容
    -     - -
    标签三内容
    -     - -
    标签四内容
    -     -     -
    • -
- ); -} diff --git a/src/tabs/_example/bottom.jsx b/src/tabs/_example/bottom.jsx deleted file mode 100644 index ad350bc1..00000000 --- a/src/tabs/_example/bottom.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useState } from 'react'; -import { Tabs } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; -import './style.less'; - -export default function () { - const list2 = [ - { - label: '标签页一', - value: 'tab1', - }, - { - label: '标签页二', - value: 'tab2', - }, - { - label: '标签页三', - value: 'tab3', - disabled: true, - }, - { - label: '标签页四', - value: 'tab4', - }, - ]; - const content = { - tab1: '标签一内容', - tab2: '标签二内容', - tab3: '标签三内容', - tab4: '标签四内容', - tab5: '标签五内容', - tab6: '标签六内容', - }; - const [key, setKey] = useState('tab1'); - const onChange = (value) => { - setKey(value); - }; - - return ( -
- -
    -
  • - {content[key]}
} - change={onChange} - > - - - -
- ); -} diff --git a/src/tabs/_example/content.tsx b/src/tabs/_example/content.tsx new file mode 100644 index 00000000..5f64a040 --- /dev/null +++ b/src/tabs/_example/content.tsx @@ -0,0 +1,39 @@ +import React, { useState } from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; + +export default () => { + const list = [ + { + value: '1', + label: '选项', + panel: '内容区1', + }, + { + value: '2', + label: '选项', + panel: '内容区2', + }, + { + value: '3', + label: '上限六个文字', + panel: '内容区3', + }, + ]; + + const [currentValue, setCurrentValue] = useState('1'); + const onChange = (value: string) => { + setCurrentValue(value); + console.log(value); + }; + return ( +
+ + {list.map((item) => ( + +

{item.panel}

+ + ))} + +
+ ); +}; diff --git a/src/tabs/_example/evenly.tsx b/src/tabs/_example/evenly.tsx new file mode 100644 index 00000000..c311f1ca --- /dev/null +++ b/src/tabs/_example/evenly.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; + +export default () => { + const stickyProps = { + zIndex: 999, + }; + const tabPanels = [ + { + value: 'first', + label: '选项', + }, + { + value: 'second', + label: '选项', + }, + { + value: 'third', + label: '选项', + }, + { + value: 'four', + label: '选项', + }, + ]; + + const tabPanelsNext = [ + { + value: '1', + label: '选项', + }, + { + value: '2', + label: '选项', + }, + { + value: '3', + label: '选项', + }, + { + value: '4', + label: '选项', + }, + { + value: '5', + label: '选项', + }, + ]; + + const onChange = ($event: number, label: string) => { + console.log(`change to ${$event}`, label); + }; + + const onNextChange = ($event: number) => { + console.log(`changeNext to ${$event}`); + }; + + return ( +
+ + 选项
}> + 选项
}> + + + + + + + + {tabPanels.map((item, index) => ( + + ))} + + + {tabPanelsNext.map((item, index) => ( + + ))} + +
+ ); +}; diff --git a/src/tabs/_example/horizontal.jsx b/src/tabs/_example/horizontal.jsx deleted file mode 100644 index 467b4bc4..00000000 --- a/src/tabs/_example/horizontal.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { Tabs, TabPanel } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; -import './style.less'; - -export default function () { - return ( - -
    -
  • - - -
    标签一内容
    -     - -
    标签二内容
    -     - -
    标签三内容
    -     -     -
    • -
- - ); -} diff --git a/src/tabs/_example/icon.tsx b/src/tabs/_example/icon.tsx new file mode 100644 index 00000000..62f6d3d9 --- /dev/null +++ b/src/tabs/_example/icon.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; +import { IconFont } from 'tdesign-icons-react'; + +export default () => ( +
+ + + + 选项 +
+ } + > + + + 选项 +
+ } + > + + + 选项 +
+ } + > + +
+); diff --git a/src/tabs/_example/index.jsx b/src/tabs/_example/index.jsx deleted file mode 100644 index 48c1f213..00000000 --- a/src/tabs/_example/index.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import TDemoHeader from '../../../site/mobile/components/DemoHeader'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; - -import Base from './base'; -import Horizontal from './horizontal'; -import Scroll from './scroll'; -import Vertical from './vertical'; -import Size from './size'; -import NoLine from './noline'; -import Bottom from './bottom'; -import './style.less'; - -export default function () { - return ( -
- - - - - - - - - - - - - - -
- ); -} diff --git a/src/tabs/_example/index.tsx b/src/tabs/_example/index.tsx new file mode 100644 index 00000000..17fca211 --- /dev/null +++ b/src/tabs/_example/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import EvenlyDemo from './evenly'; +import IsometricDemo from './isometric'; +import IconDemo from './icon'; +import BadgeDemo from './badge'; +import ContentDemo from './content'; +import StatusDemo from './status'; +import SizeDemo from './size'; +import ThemeDemo from './theme'; +import './style/index.less'; + +export default function () { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/tabs/_example/isometric.tsx b/src/tabs/_example/isometric.tsx new file mode 100644 index 00000000..b5f6d21f --- /dev/null +++ b/src/tabs/_example/isometric.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react'; +import { Tabs } from 'tdesign-mobile-react'; + +export default () => { + const list = [ + { + value: '1', + label: '选项', + }, + { + value: '2', + label: '选项', + }, + { + value: '3', + label: '选项', + }, + { + value: '4', + label: '选项', + }, + { + value: '5', + label: '选项', + }, + { + value: '6', + label: '选项', + }, + + { + value: '7', + label: '选项', + }, + { + value: '8', + label: '选项', + }, + { + value: '9', + label: '选项', + }, + ]; + + const [currentValue, setCurrentValue] = useState('1'); + const onChange = (value: string) => { + setCurrentValue(value); + console.log(value); + }; + return ( +
+ +
+ ); +}; diff --git a/src/tabs/_example/noline.jsx b/src/tabs/_example/noline.jsx deleted file mode 100644 index bf373e63..00000000 --- a/src/tabs/_example/noline.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useState } from 'react'; -import { Tabs } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; -import './style.less'; - -export default function () { - const [key, setKey] = useState('tab1'); - const list3 = [ - { - label: '标签页一', - value: 'tab1', - }, - { - label: '标签页二', - value: 'tab2', - }, - { - label: '标签页三', - value: 'tab3', - }, - { - label: '标签页四', - value: 'tab4', - }, - { - label: '标签页五', - value: 'tab5', - }, - { - label: '标签页六', - value: 'tab6', - }, - ]; - const content = { - tab1: '标签一内容', - tab2: '标签二内容', - tab3: '标签三内容', - tab4: '标签四内容', - tab5: '标签五内容', - tab6: '标签六内容', - }; - - const onChange = (value) => { - setKey(value); - }; - - return ( - -
    -
  • - -
    {content[key]}
    -
    • -
- - ); -} diff --git a/src/tabs/_example/scroll.jsx b/src/tabs/_example/scroll.jsx deleted file mode 100644 index fd8b5fbf..00000000 --- a/src/tabs/_example/scroll.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useState } from 'react'; -import { Tabs } from 'tdesign-mobile-react'; -import './style.less'; - -export default function () { - const [key, setKey] = useState('tab1'); - const list4 = [ - { - label: '标签页一', - value: 'tab1', - }, - { - label: '标签页二', - value: 'tab2', - }, - { - label: '标签页三', - value: 'tab3', - }, - { - label: '标签页四', - value: 'tab4', - }, - { - label: '标签页五', - value: 'tab5', - }, - { - label: '标签页六', - value: 'tab6', - }, - ]; - - const content = { - tab1: '标签一内容', - tab2: '标签二内容', - tab3: '标签三内容', - tab4: '标签四内容', - tab5: '标签五内容', - tab6: '标签六内容', - }; - - const onChange = (value) => { - setKey(value); - }; - - return ( -
    -
  • - -
    {content[key]}
    -
    • -
- ); -} diff --git a/src/tabs/_example/size.jsx b/src/tabs/_example/size.jsx deleted file mode 100644 index 4cdef3a6..00000000 --- a/src/tabs/_example/size.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { Tabs, TabPanel } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; -import './style.less'; - -export default function () { - return ( - -
    -
  • - - -
    标签一内容
    -     - -
    标签二内容
    -     - -
    标签三内容
    -     - -
    标签四内容
    -     -     -
    • -
  • - - -
    标签一内容
    -     - -
    标签二内容
    -     - -
    标签三内容
    -     - -
    标签四内容
    -     -     -
    • -
- - ); -} diff --git a/src/tabs/_example/size.tsx b/src/tabs/_example/size.tsx new file mode 100644 index 00000000..a28fc7bd --- /dev/null +++ b/src/tabs/_example/size.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; + +export default () => { + const mediumTabPanels = [ + { + value: '1', + label: '小尺寸', + }, + { + value: '2', + label: '选项', + }, + { + value: '3', + label: '选项', + }, + { + value: '4', + label: '选项', + }, + ]; + + const largeTabPanels = [ + { + value: '1', + label: '大尺寸', + }, + { + value: '2', + label: '选项', + }, + { + value: '3', + label: '选项', + }, + { + value: '4', + label: '选项', + }, + ]; + + return ( +
+ + {mediumTabPanels.map((item, index) => ( + + ))} + + + {largeTabPanels.map((item, index) => ( + + ))} + +
+ ); +}; diff --git a/src/tabs/_example/status.tsx b/src/tabs/_example/status.tsx new file mode 100644 index 00000000..633c5244 --- /dev/null +++ b/src/tabs/_example/status.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; + +export default () => ( +
+ + + + + +
+); diff --git a/src/tabs/_example/style.less b/src/tabs/_example/style.less deleted file mode 100644 index 751e41a1..00000000 --- a/src/tabs/_example/style.less +++ /dev/null @@ -1,47 +0,0 @@ -.hori-wrap { - li { - margin-bottom: 38px; - } - - li:last-child { - margin-bottom: 12px; - } -} - -.veti-wrap { - li { - margin-bottom: 38px; - } -} - -.common-text { - font-size: 14px; - color: #111111; - font-weight: 400; -} - -.tdesign-mobile-demo { - padding-bottom: 38px; -} - -.tab-content { - width: 100%; - height: 86px; - background: #fff; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - color: rgba(0, 0, 0, 0.26); -} - -.veti-content { - width: 100%; - height: 100%; - background: #fff; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - color: rgba(0, 0, 0, 0.26); -} diff --git a/src/tabs/_example/style/index.less b/src/tabs/_example/style/index.less new file mode 100644 index 00000000..6898b1b7 --- /dev/null +++ b/src/tabs/_example/style/index.less @@ -0,0 +1,23 @@ +.t-tabs { + margin-bottom: 16px; +} +.label-content { + display: flex; + align-items: center; + justify-content: center; + + span { + margin-left: 3px; + } +} + +.t-tabs__panel p { + height: 120px; + align-items: center; + justify-content: center; + display: flex; + color: var(--td-text-color-secondary, rgba(#000000, 0.66)); + margin: 0; + font-size: 14px; + font-weight: 400; +} diff --git a/src/tabs/_example/test.jsx b/src/tabs/_example/test.jsx deleted file mode 100644 index f93151c0..00000000 --- a/src/tabs/_example/test.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Tabs } from 'tdesign-mobile-react'; - -export default function () { - return test1; -} diff --git a/src/tabs/_example/theme.tsx b/src/tabs/_example/theme.tsx new file mode 100644 index 00000000..e9a40676 --- /dev/null +++ b/src/tabs/_example/theme.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Tabs, TabPanel } from 'tdesign-mobile-react'; + +export default () => { + const tabPanels = [ + { + value: '1', + label: '选项', + }, + { + value: '2', + label: '选项', + }, + { + value: '3', + label: '选项', + }, + { + value: '4', + label: '选项', + }, + ]; + + return ( +
+ + {tabPanels.map((item, index) => ( + + ))} + + + {tabPanels.map((item, index) => ( + + ))} + +
+ ); +}; diff --git a/src/tabs/_example/vertical.jsx b/src/tabs/_example/vertical.jsx deleted file mode 100644 index e32e4141..00000000 --- a/src/tabs/_example/vertical.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { Tabs, TabPanel } from 'tdesign-mobile-react'; -import './style.less'; - -export default function () { - return ( -
    -
  • - - -
    标签一内容
    -     - -
    标签二内容
    -     - -
    标签三内容
    -     - -
    标签四内容
    -     - -
    标签五内容
    -     -     -
    • -
- ); -} diff --git a/src/tabs/defaultProps.ts b/src/tabs/defaultProps.ts new file mode 100755 index 00000000..8294a998 --- /dev/null +++ b/src/tabs/defaultProps.ts @@ -0,0 +1,17 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTabsProps, TdTabPanelProps } from './type'; + +export const tabsDefaultProps: TdTabsProps = { + bottomLineMode: 'fixed', + showBottomLine: true, + size: 'medium', + spaceEvenly: true, + sticky: false, + swipeable: true, + theme: 'line', +}; + +export const tabPanelDefaultProps: TdTabPanelProps = { destroyOnHide: true, disabled: false, lazy: false }; diff --git a/src/tabs/style/index.js b/src/tabs/style/index.js index becd90e2..2c0e69bc 100644 --- a/src/tabs/style/index.js +++ b/src/tabs/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/tabs/_index.less'; +import '../../_common/style/mobile/components/tabs/v2/_index.less'; diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md new file mode 100644 index 00000000..572eef6d --- /dev/null +++ b/src/tabs/tabs.en-US.md @@ -0,0 +1,64 @@ +:: BASE_DOC :: + +## API + +### Tabs Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +bottomLineMode | String | fixed | options: fixed/auto/full | N +children | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +list | Array | - | Typescript：`Array` | N +showBottomLine | Boolean | true | \- | N +size | String | medium | options: medium/large | N +spaceEvenly | Boolean | true | \- | N +sticky | Boolean | false | \- | N +stickyProps | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +swipeable | Boolean | true | \- | N +theme | String | line | options: line/tag/card | N +value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +onChange | Function | | Typescript：`(value: TabValue, label: string) => void`
| N +onClick | Function | | Typescript：`(value: TabValue, label: string) => void`
| N +onScroll | Function | | Typescript：`(scrollTop: number, isFixed: boolean) => void`
| N + + +### TabPanel Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +badgeProps | Object | - | \- | N +destroyOnHide | Boolean | true | \- | N +disabled | Boolean | false | \- | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +lazy | Boolean | false | Enable tab lazy loading | N +panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +value | String / Number | - | Typescript：`TabValue` | N + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-tab-border-color | @component-stroke | - +--td-tab-font-size | 14px | - +--td-tab-icon-size | 16px | - +--td-tab-track-color | @brand-color | - +--td-tab-track-radius | 4px | - +--td-tab-track-thickness | 3px | - +--td-tab-track-width | 16px | - +--td-tab-nav-bg-color | @bg-color-container | - +--td-tab-item-active-color | @brand-color | - +--td-tab-item-color | @font-gray-1 | - +--td-tab-item-disabled-color | @font-gray-4 | - +--td-tab-item-height | 48px | - +--td-tab-item-tag-active-bg | @brand-color-light | - +--td-tab-item-tag-bg | @bg-color-secondarycontainer | - +--td-tab-item-tag-height | 32px | - +--td-tab-item-vertical-height | 54px | - +--td-tab-item-vertical-width | 104px | - \ No newline at end of file diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md index 82a3b7b7..def57c8d 100644 --- a/src/tabs/tabs.md +++ b/src/tabs/tabs.md @@ -4,22 +4,61 @@ ### Tabs Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -list | Array | - | 选项卡列表 | N -animation | Object | - | 动画效果设置{transition-timing-function, transition-duration}。 | N -placement | String | top | 选项卡位置，可选值'left'\|'right'\|'top'\|'bottom' | N -showBottomLine | Boolean | true | 是否展示底部激活条 | N -value | String/Number | - | 激活的选项卡值 | N -defaultValue | String/number | - | 默认选中的值 | N -disabled | Boolean | - | 是否禁用选项卡 | N -content | \\\ | - | 传到容器中的内容 ｜ N +animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N +children | TElement | - | 组件子元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +list | Array | - | 选项卡列表。TS 类型：`Array` | N +showBottomLine | Boolean | true | 是否展示底部激活线条 | N +size | String | medium | 组件尺寸。可选项：medium/large | N +spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N +sticky | Boolean | false | 是否开启粘性布局 | N +stickyProps | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +swipeable | Boolean | true | 是否可以滑动切换 | N +theme | String | line | 标签的样式。可选项：line/tag/card | N +value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +defaultValue | String / Number | - | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N +onChange | Function | | TS 类型：`(value: TabValue, label: string) => void`
激活的选项卡发生变化时触发 | N +onClick | Function | | TS 类型：`(value: TabValue, label: string) => void`
点击选项卡时触发 | N +onScroll | Function | | TS 类型：`(scrollTop: number, isFixed: boolean) => void`
页面滚动时触发 | N -### Tabs Events +### TabPanel Props -名称 | 描述 --- | -- -change | 激活的选项卡时触发，参数：(value: TabValue) \ No newline at end of file +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +badgeProps | Object | - | 透传至 Badge 组件 | N +destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N +disabled | Boolean | false | 是否禁用当前选项卡 | N +label | TNode | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +lazy | Boolean | false | 是否启用选项卡懒加载 | N +panel | TNode | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-tab-border-color | @component-stroke | - +--td-tab-font-size | 14px | - +--td-tab-icon-size | 16px | - +--td-tab-track-color | @brand-color | - +--td-tab-track-radius | 4px | - +--td-tab-track-thickness | 3px | - +--td-tab-track-width | 16px | 当前激活 tab 下划线的宽度，仅在 bottomLineMode 为 'fixed' 时有效 +--td-tab-nav-bg-color | @bg-color-container | - +--td-tab-item-active-color | @brand-color | - +--td-tab-item-color | @font-gray-1 | - +--td-tab-item-disabled-color | @font-gray-4 | - +--td-tab-item-height | 48px | - +--td-tab-item-tag-active-bg | @brand-color-light | - +--td-tab-item-tag-bg | @bg-color-secondarycontainer | - +--td-tab-item-tag-height | 32px | - +--td-tab-item-vertical-height | 54px | - +--td-tab-item-vertical-width | 104px | - \ No newline at end of file diff --git a/src/tabs/type.ts b/src/tabs/type.ts index b04cf223..be08963e 100644 --- a/src/tabs/type.ts +++ b/src/tabs/type.ts @@ -2,68 +2,119 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2022-01-07 16:30:49 * */ -import { CSSProperties } from 'react'; -import { TNode } from '../common'; -export interface TdTabPanelProps { +import { StickyProps } from '../sticky'; +import { TNode, TElement } from '../common'; + +export interface TdTabsProps { /** - * 触发元素，同 triggerElement + * 动画效果设置。其中 duration 表示动画时长 */ - children?: TNode; + animation?: TabAnimation; /** - * 标签名 + * 激活下划线的模式 + * @default fixed */ - label: string; + bottomLineMode?: 'fixed' | 'auto' | 'full'; /** - * 标签值 + * 组件子元素 */ - value: string | number; + children?: TElement; /** - * 是否禁用 + * 选项卡列表 */ - disabled?: boolean; -} - -export interface TdTabsProps { + list?: Array; + /** + * 是否展示底部激活线条 + * @default true + */ + showBottomLine?: boolean; /** - * 触发元素，同 triggerElement + * 组件尺寸 + * @default medium */ - children?: any; + size?: 'medium' | 'large'; /** - * 容器内容 + * 选项卡头部空间是否均分 + * @default true */ - content?: TNode; + spaceEvenly?: boolean; /** - * 默认选中值 + * 是否开启粘性布局 + * @default false */ - defaultValue?: number | string; + sticky?: boolean; /** - * 选项卡列表 - * @default [] + * 透传至 Sticky 组件 */ - list?: Array; + stickyProps?: StickyProps; /** - * 动画效果设置 + * 是否可以滑动切换 + * @default true */ - animation?: CSSProperties; + swipeable?: boolean; /** - * 选项卡位置 - * @default 'top' + * 标签的样式 + * @default line */ - placement?: 'left' | 'right' | 'bottom'; + theme?: 'line' | 'tag' | 'card'; /** - * 是否展示底部激活条 - * @default true + * 激活的选项卡值 */ - showBottomLine?: boolean; + value?: TabValue; /** - * 尺寸大小 + * 激活的选项卡值，非受控属性 */ - size?: 'large' | 'small' | 'default'; + defaultValue?: TabValue; /** * 激活的选项卡发生变化时触发 */ - change?: (value) => void; + onChange?: (value: TabValue, label: string) => void; + /** + * 点击选项卡时触发 + */ + onClick?: (value: TabValue, label: string) => void; + /** + * 页面滚动时触发 + */ + onScroll?: (scrollTop: number, isFixed: boolean) => void; +} + +export interface TdTabPanelProps { + /** + * 透传至 Badge 组件 + */ + badgeProps?: object; + /** + * 选项卡内容隐藏时是否销毁 + * @default true + */ + destroyOnHide?: boolean; + /** + * 是否禁用当前选项卡 + * @default false + */ + disabled?: boolean; + /** + * 选项卡名称，可自定义选项卡导航内容 + */ + label?: TNode; + /** + * 是否启用选项卡懒加载 + * @default false + */ + lazy?: boolean; + /** + * 用于自定义选项卡面板内容 + */ + panel?: TNode; + /** + * 选项卡的值，唯一标识 + */ + value?: TabValue; } + +export type TabAnimation = { duration: number } & Record; + +export type TabValue = string | number; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 928afa03..7f634efe 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -36413,6 +36413,3490 @@ exports[`csr snapshot test > csr test src/table/_example/stripe.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/tabs/_example/badge.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+ 8 +
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+`; + +exports[`csr snapshot test > csr test src/tabs/_example/content.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 上限六个文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+

+ 内容区1 +

+
+ + +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tabs/_example/evenly.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+ 选项 +
+
+
+
+
+
+
+
+
+
+
+
+
+