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] 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; }