From db20395545df6bdfde8e76cc29fc193e0e47c8f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 24 Jul 2024 14:54:08 +0800 Subject: [PATCH 01/11] feat(DIvider): refactor --- src/divider/Divider.tsx | 36 ++++++--------- src/divider/__tests__/divider.test.tsx | 63 ++++++++++++++++++++++++++ src/divider/_example/align.jsx | 21 --------- src/divider/_example/base.jsx | 31 ++++++------- src/divider/_example/index.jsx | 12 ++--- src/divider/_example/style/index.less | 37 ++++----------- src/divider/_example/theme.jsx | 15 ++++++ src/divider/_example/vertical.jsx | 25 ---------- src/divider/defaultProps.ts | 7 +++ src/divider/divider.en-US.md | 15 ++++++ src/divider/divider.md | 8 ++-- src/divider/type.ts | 5 -- 12 files changed, 149 insertions(+), 126 deletions(-) create mode 100644 src/divider/__tests__/divider.test.tsx delete mode 100644 src/divider/_example/align.jsx create mode 100644 src/divider/_example/theme.jsx delete mode 100644 src/divider/_example/vertical.jsx create mode 100644 src/divider/defaultProps.ts create mode 100644 src/divider/divider.en-US.md diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx index d290ca38..8cd53e5f 100644 --- a/src/divider/Divider.tsx +++ b/src/divider/Divider.tsx @@ -1,40 +1,32 @@ import React, { FC } from 'react'; import classNames from 'classnames'; import { TdDividerProps } from './type'; +import { dividerDefaultProps } from './defaultProps'; +import { StyledProps } from '../common'; import useConfig from '../_util/useConfig'; -import withNativeProps, { NativeProps } from '../_util/withNativeProps'; +import useDefaultProps from '../hooks/useDefaultProps'; -export interface DividerProps extends TdDividerProps, NativeProps {} - -const defaultProps = { - align: 'center', - dashed: false, - layout: 'horizontal', - lineColor: '', -}; +export interface DividerProps extends TdDividerProps, StyledProps {} const Divider: FC = (props) => { - const { children, align, dashed, layout, lineColor, content } = props; + const { children, align, dashed, layout, content, style } = useDefaultProps(props, dividerDefaultProps); const { classPrefix } = useConfig(); - const name = `${classPrefix}-divider`; + const dividerClass = `${classPrefix}-divider`; const contentNode = content || children; - const classes = classNames(name, { - [`${name}-${layout}`]: layout, - [`${name}--hairline`]: true, - [`${name}--content-${align}`]: align && contentNode, - [`${name}--dashed`]: dashed, + const classes = classNames(dividerClass, { + [`${dividerClass}--${layout}`]: layout, + [`${dividerClass}--${align}`]: align, + [`${dividerClass}--dashed`]: dashed, }); - return withNativeProps( - props, -
- {contentNode && {contentNode}} -
, + return ( +
+
{contentNode}
+
); }; -Divider.defaultProps = defaultProps as DividerProps; Divider.displayName = 'Divider'; export default Divider; diff --git a/src/divider/__tests__/divider.test.tsx b/src/divider/__tests__/divider.test.tsx new file mode 100644 index 00000000..cb356f85 --- /dev/null +++ b/src/divider/__tests__/divider.test.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { describe, expect, it, render, waitFor } from '@test/utils'; +import Divider from '../Divider'; +import { TdDividerProps } from '../type'; + +describe('Divider', () => { + describe('props', () => { + it(':align', async () => { + const testId = 'divider test align'; + const aligns: TdDividerProps['align'][] = ['left', 'right', 'center']; + const { getByTestId } = render( +
+ {aligns?.map((align, index) => ( + + ))} +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + + for (let index = 0; index < aligns.length; index++) { + const align = aligns[index]; + expect(() => instance.querySelector(`.t-divider--${align}`)).toBeTruthy(); + } + }); + + it(':layout', async () => { + const testId = 'divider test layout'; + const layouts: TdDividerProps['layout'][] = ['horizontal', 'vertical']; + const { getByTestId } = render( +
+ {layouts?.map((layout, index) => ( + + ))} +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + + for (let index = 0; index < layouts.length; index++) { + const layout = layouts[index]; + expect(() => instance.querySelector(`.t-divider--${layout}`)).toBeTruthy(); + } + }); + + it(':dashed', async () => { + const { container } = render(); + const dividerElement = container.firstChild; + expect(dividerElement).toHaveClass('t-divider--dashed'); + }); + + it(':content', async () => { + const content = 'DividerContent'; + const { getByText } = render(); + expect(getByText(content).textContent).toBeTruthy(); + }); + it(':children', async () => { + const content = 'DividerContent'; + const { getByText } = render({content}); + expect(getByText(content).textContent).toBeTruthy(); + }); + }); +}); diff --git a/src/divider/_example/align.jsx b/src/divider/_example/align.jsx deleted file mode 100644 index 09c9706e..00000000 --- a/src/divider/_example/align.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Divider } from 'tdesign-mobile-react'; -import './style/index.less'; - -export default function Content() { - return ( -
-

文字+直线

-
- -
- -

文字+虚线

-
- - 文字信息 - -
-
- ); -} diff --git a/src/divider/_example/base.jsx b/src/divider/_example/base.jsx index 08a65dee..f50a24c7 100644 --- a/src/divider/_example/base.jsx +++ b/src/divider/_example/base.jsx @@ -5,26 +5,25 @@ import './style/index.less'; export default function Base() { return ( -
-

直线拉通

+ <> +
水平分割线
-

虚线拉通

- +
带文字水平分割线
+ + + -

左右间距

-
- +
+ 垂直分割线
- -

右侧拉通

-
- -
-

自定义左侧距离

-
- +
+ 文字信息 + + 文字信息 + + 文字信息
-
+ ); } diff --git a/src/divider/_example/index.jsx b/src/divider/_example/index.jsx index 12183f28..dc9629ac 100644 --- a/src/divider/_example/index.jsx +++ b/src/divider/_example/index.jsx @@ -1,20 +1,20 @@ import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; -import Vertical from './vertical'; import BaseDemo from './base'; -import AlignDemo from './align'; +import ThemeDemo from './theme'; import './style/index.less'; -export default function Base() { +export default function DividerDemo() { return (
- + - - + + +
); diff --git a/src/divider/_example/style/index.less b/src/divider/_example/style/index.less index 01a345bb..3ccc2562 100644 --- a/src/divider/_example/style/index.less +++ b/src/divider/_example/style/index.less @@ -1,34 +1,17 @@ .tdesign-mobile-demo { background-color: #fff; - padding-bottom: 16px; - - .divider-demo-container { - h3 { - font-size: 12px; - font-weight: 400; - font-family: 'PingFang SC'; - color: #a9a9a9; - padding: 16px; - } - } -} - -.t-demo1 { - margin: 0 16px; } -.t-demo2 { - margin-left: 16px; +.divider-demo__title { + font-size: 14px; + color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6)); + padding: 8px 16px; + line-height: 20px; } - -.t-demo3 { - margin-left: 76px; -} - -.vertical-panel { +.divider-wrapper { display: flex; - height: 20px; - margin: 0 16px; - font-size: 12px; - color: rgba(0, 0, 0, 0.4); + align-items: center; + font-size: 14px; + color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9)); + padding-left: 16px; } diff --git a/src/divider/_example/theme.jsx b/src/divider/_example/theme.jsx new file mode 100644 index 00000000..950b55a0 --- /dev/null +++ b/src/divider/_example/theme.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Divider } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function Theme() { + return ( +
+
虚线样式
+ + + + +
+ ); +} diff --git a/src/divider/_example/vertical.jsx b/src/divider/_example/vertical.jsx deleted file mode 100644 index ef1e7e5e..00000000 --- a/src/divider/_example/vertical.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Divider } from 'tdesign-mobile-react'; -import './style/index.less'; - -export default function Vertical() { - return ( -
-

纯文字

-
- - 没有更多了～ - -
- -

垂直分割

-
- 文字信息 - - 文字信息 - - 文字信息 -
-
- ); -} diff --git a/src/divider/defaultProps.ts b/src/divider/defaultProps.ts new file mode 100644 index 00000000..5d7b1c94 --- /dev/null +++ b/src/divider/defaultProps.ts @@ -0,0 +1,7 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdDividerProps } from './type'; + +export const dividerDefaultProps: TdDividerProps = { align: 'center', dashed: false, layout: 'horizontal' }; diff --git a/src/divider/divider.en-US.md b/src/divider/divider.en-US.md new file mode 100644 index 00000000..146dfea0 --- /dev/null +++ b/src/divider/divider.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + +### Divider Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +align | String | center | options: left/right/center | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +dashed | Boolean | false | \- | N +layout | String | horizontal | options: horizontal/vertical | N diff --git a/src/divider/divider.md b/src/divider/divider.md index 2d26ca6a..7c049981 100644 --- a/src/divider/divider.md +++ b/src/divider/divider.md @@ -1,14 +1,14 @@ :: BASE_DOC :: ## API + ### Divider Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- 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/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N -lineColor | String | - | 分隔线颜色 | N diff --git a/src/divider/type.ts b/src/divider/type.ts index 919d7c76..a0b0408e 100644 --- a/src/divider/type.ts +++ b/src/divider/type.ts @@ -30,9 +30,4 @@ export interface TdDividerProps { * @default horizontal */ layout?: 'horizontal' | 'vertical'; - /** - * 分隔线颜色 - * @default '' - */ - lineColor?: string; } From 65c0ae516fe66b02877cbcefcffe13e76537ceaf Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 24 Jul 2024 07:00:32 +0000 Subject: [PATCH 02/11] chore: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 1bacc8e9..05c1f59e 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 1bacc8e91408cca2b26a3ca7b4b13f9bb62d8af2 +Subproject commit 05c1f59ef27bea7da2fcfd09f98b0b838516d538 From 8965135699d04be3d3e2dfe0b1b459dad17ce763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 24 Jul 2024 15:09:30 +0800 Subject: [PATCH 03/11] chore: rename tsx --- src/divider/_example/{base.jsx => base.tsx} | 0 src/divider/_example/{index.jsx => index.tsx} | 0 src/divider/_example/{theme.jsx => theme.tsx} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename src/divider/_example/{base.jsx => base.tsx} (100%) rename src/divider/_example/{index.jsx => index.tsx} (100%) rename src/divider/_example/{theme.jsx => theme.tsx} (100%) diff --git a/src/divider/_example/base.jsx b/src/divider/_example/base.tsx similarity index 100% rename from src/divider/_example/base.jsx rename to src/divider/_example/base.tsx diff --git a/src/divider/_example/index.jsx b/src/divider/_example/index.tsx similarity index 100% rename from src/divider/_example/index.jsx rename to src/divider/_example/index.tsx diff --git a/src/divider/_example/theme.jsx b/src/divider/_example/theme.tsx similarity index 100% rename from src/divider/_example/theme.jsx rename to src/divider/_example/theme.tsx From 6f1f798022d5c4af24c0210beb508cf210a9cdc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 24 Jul 2024 15:18:12 +0800 Subject: [PATCH 04/11] chore(site): update mobile.config --- site/mobile/mobile.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index ce2a6fec..4bb613b7 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -8,7 +8,7 @@ export default { { title: 'Divider 分割符', name: 'divider', - component: () => import('tdesign-mobile-react/divider/_example/index.jsx'), + component: () => import('tdesign-mobile-react/divider/_example/index.tsx'), }, { title: 'Icon 图标', From 5c9fb59bfe824d4d77998fb019c98722b0f88595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 24 Jul 2024 15:57:22 +0800 Subject: [PATCH 05/11] =?UTF-8?q?chore(husky):=20ci=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E4=B8=8D=E8=BF=90=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/commit-msg | 1 + .husky/pre-commit | 1 + 2 files changed, 2 insertions(+) diff --git a/.husky/commit-msg b/.husky/commit-msg index 4132fe04..59a2376c 100755 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -1,4 +1,5 @@ #!/bin/sh +[ -n "$CI" ] && exit 0 . "$(dirname "$0")/_/husky.sh" npx commitlint -e $HUSKY_GIT_PARAMS diff --git a/.husky/pre-commit b/.husky/pre-commit index 6d395b88..7c96b908 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,5 @@ #!/bin/sh +[ -n "$CI" ] && exit 0 . "$(dirname "$0")/_/husky.sh" npm run lint:fix From 0063d8e2dee266e63b1f69f4a5cb4550aed23442 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 24 Jul 2024 08:08:30 +0000 Subject: [PATCH 06/11] chore: update snapshot --- test/snap/__snapshots__/csr.test.jsx.snap | 811 ++++++++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 6 + 2 files changed, 817 insertions(+) diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 6c885976..5e98494d 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -1,5 +1,810 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`csr snapshot test > csr test src/divider/_example/base.tsx 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ 水平分割线 +
+