Skip to content

Commit 9b20042

Browse files
HaixingOoOHaixingOoO
authored
feat(Divider): support size api (#3893)
* feat(divider): support size api * fix(divider): adjust size api * fix(divider): size api support string type and remove redundant func * fix(divider): fix size bug * test(divider): update test case
1 parent 4460279 commit 9b20042

File tree

13 files changed

+138
-54
lines changed

13 files changed

+138
-54
lines changed

‎packages/components/_util/helper.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,6 @@ export function getPropsApiByEvent(eventName: string) {
6363
return camelCase(`on-${eventName}`);
6464
}
6565

66-
/**
67-
* 兼容样式中支持 number/string 类型的传值 得出最后的结果。
68-
* @param param number 或 string 类型的可用于样式上的值
69-
* @returns 可使用的样式值。
70-
*/
71-
export function pxCompat(param: string | number) {
72-
return typeof param === 'number' ? `${param}px` : param;
73-
}
74-
7566
/**
7667
* 获取元素相对于容器(祖先)的偏移量
7768
* @param element 目标元素

‎packages/components/dialog/Dialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { CSSTransition } from 'react-transition-group';
33
import classNames from 'classnames';
44
import { isUndefined } from 'lodash-es';
55
import log from '@tdesign/common-js/log/index';
6+
import { pxCompat } from '@tdesign/common-js/utils/helper';
67
import Portal from '../common/Portal';
78
import useAttach from '../hooks/useAttach';
89
import useConfig from '../hooks/useConfig';
@@ -16,7 +17,6 @@ import useDialogDrag from './hooks/useDialogDrag';
1617
import useDialogEsc from './hooks/useDialogEsc';
1718
import useDialogPosition from './hooks/useDialogPosition';
1819
import useLockStyle from './hooks/useLockStyle';
19-
import { parseValueToPx } from './utils';
2020
import type { StyledProps } from '../common';
2121
import type { DialogInstance, TdDialogProps } from './type';
2222

@@ -221,7 +221,7 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
221221
[`${componentCls}--top`]: !!props.top || props.placement === 'top',
222222
[`${componentCls}--center`]: props.placement === 'center' && !props.top,
223223
})}
224-
style={{ paddingTop: parseValueToPx(props.top) }}
224+
style={{ paddingTop: pxCompat(props.top) }}
225225
onClick={onMaskClick}
226226
>
227227
<CSSTransition
@@ -237,7 +237,7 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
237237
ref={dialogCardRef}
238238
{...restState}
239239
className={dialogClassName}
240-
style={{ ...style, width: parseValueToPx(width || style?.width) }}
240+
style={{ ...style, width: pxCompat(width || style?.width) }}
241241
onConfirm={onConfirm}
242242
onCancel={handleCancel}
243243
onCloseBtnClick={handleClose}

‎packages/components/dialog/utils.ts‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/components/divider/Divider.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import classNames from 'classnames';
3+
import { pxCompat } from '@tdesign/common-js/utils/helper';
34
import useConfig from '../hooks/useConfig';
45
import { StyledProps } from '../common';
56
import { TdDividerProps } from './type';
@@ -20,15 +21,16 @@ export interface DividerProps extends TdDividerProps, StyledProps {
2021
* 分割线组件
2122
*/
2223
const Divider: React.FC<DividerProps> = (props) => {
23-
const { layout, dashed, align, className, style, children, content, ...otherDividerProps } = useDefaultProps(
24+
const { layout, dashed, align, className, style, children, content, size, ...otherDividerProps } = useDefaultProps(
2425
props,
2526
dividerDefaultProps,
2627
);
2728

2829
const { classPrefix } = useConfig();
2930
const childrenNode = content || children;
31+
const isHorizontal = layout !== 'vertical';
3032

31-
const showText = layout !== 'vertical' && !!childrenNode;
33+
const showText = isHorizontal && !!childrenNode;
3234

3335
const dividerClassNames = classNames(`${classPrefix}-divider`, className, {
3436
[`${classPrefix}-divider--${layout}`]: layout,
@@ -37,8 +39,20 @@ const Divider: React.FC<DividerProps> = (props) => {
3739
[`${classPrefix}-divider--with-text-${align}`]: showText,
3840
});
3941

42+
const dividerWrapperStyle = useMemo<React.CSSProperties>(() => {
43+
if (size) {
44+
const margin = isHorizontal ? `${pxCompat(size)} 0` : `0 ${pxCompat(size)}`;
45+
return {
46+
margin,
47+
...style,
48+
};
49+
}
50+
51+
return style;
52+
}, [isHorizontal, size, style]);
53+
4054
return (
41-
<div {...otherDividerProps} className={dividerClassNames} style={style}>
55+
<div {...otherDividerProps} className={dividerClassNames} style={dividerWrapperStyle}>
4256
{showText ? <span className={`${classPrefix}-divider__inner-text`}>{childrenNode}</span> : null}
4357
</div>
4458
);

‎packages/components/divider/__tests__/divider.test.tsx‎

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,67 @@ import { render } from '@test/utils';
33
import Divider from '../Divider';
44

55
describe('Divider 组件测试', () => {
6-
test('Divider 水平分割线', async () => {
7-
const { container } = render(<Divider />);
6+
describe('props', () => {
7+
test('Divider 水平分割线', async () => {
8+
const { container } = render(<Divider />);
89

9-
// 校验默认 className
10-
const defaultClass = ['t-divider', 't-divider--horizontal'];
11-
expect(container.firstChild).toHaveClass(...defaultClass);
12-
});
13-
test('Divider 虚线', () => {
14-
const { container } = render(<Divider dashed />);
10+
// 校验默认 className
11+
const defaultClass = ['t-divider', 't-divider--horizontal'];
12+
expect(container.firstChild).toHaveClass(...defaultClass);
13+
});
14+
test('Divider 虚线', () => {
15+
const { container } = render(<Divider dashed />);
1516

16-
// 校验默认 className
17-
const defaultClass = ['t-divider', 't-divider--horizontal', 't-divider--dashed'];
18-
expect(container.firstChild).toHaveClass(...defaultClass);
19-
});
20-
test('Divider 带文字', () => {
21-
const text = '腾讯中';
22-
const { container, getByText } = render(<Divider>{text}</Divider>);
17+
// 校验默认 className
18+
const defaultClass = ['t-divider', 't-divider--horizontal', 't-divider--dashed'];
19+
expect(container.firstChild).toHaveClass(...defaultClass);
20+
});
21+
test('Divider 带文字', () => {
22+
const text = '腾讯中';
23+
const { container, getByText } = render(<Divider>{text}</Divider>);
2324

24-
// 校验默认 className
25-
const defaultClass = ['t-divider', 't-divider--horizontal', 't-divider--with-text'];
26-
expect(container.firstChild).toHaveClass(...defaultClass);
25+
// 校验默认 className
26+
const defaultClass = ['t-divider', 't-divider--horizontal', 't-divider--with-text'];
27+
expect(container.firstChild).toHaveClass(...defaultClass);
2728

28-
expect(getByText(text).textContent).toBe(text);
29-
});
30-
test('Divider content带文字 ', () => {
31-
const text = '腾讯中content';
32-
const { container, getByText } = render(<Divider content={text}></Divider>);
29+
expect(getByText(text).textContent).toBe(text);
30+
});
31+
test('Divider content带文字 ', () => {
32+
const text = '腾讯中content';
33+
const { container, getByText } = render(<Divider content={text}></Divider>);
34+
35+
// 校验默认 className
36+
const defaultClass = ['t-divider', 't-divider--horizontal', 't-divider--with-text'];
37+
expect(container.firstChild).toHaveClass(...defaultClass);
38+
39+
expect(getByText(text).textContent).toBe(text);
40+
});
41+
42+
test('Divider size horizontal number', () => {
43+
const text = '腾讯中content';
44+
const { container } = render(<Divider content={text} size={20}></Divider>);
45+
46+
expect(container.querySelector('.t-divider')).toHaveStyle({
47+
margin: '20px 0',
48+
});
49+
});
50+
51+
test('Divider size horizontal string', () => {
52+
const text = '腾讯中content';
53+
const { container } = render(<Divider content={text} size="20px"></Divider>);
54+
55+
expect(container.querySelector('.t-divider')).toHaveStyle({
56+
margin: '20px 0',
57+
});
58+
});
3359

34-
// 校验默认 className
35-
const defaultClass = ['t-divider', 't-divider--horizontal', 't-divider--with-text'];
36-
expect(container.firstChild).toHaveClass(...defaultClass);
60+
test('Divider size vertical', () => {
61+
const text = '腾讯中content';
62+
const { container } = render(<Divider content={text} size={20} layout="vertical"></Divider>);
3763

38-
expect(getByText(text).textContent).toBe(text);
64+
expect(container.querySelector('.t-divider')).toHaveStyle({
65+
margin: '0 20px',
66+
});
67+
});
3968
});
4069
});

‎packages/components/divider/_example/size.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Divider } from 'tdesign-react';
3+
4+
export default function BasicDivider() {
5+
return (
6+
<>
7+
<p>
8+
通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
9+
</p>
10+
<Divider size={20}></Divider>
11+
<p>
12+
通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
13+
</p>
14+
<Divider size="20px" layout="vertical"></Divider>
15+
<p>
16+
通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
17+
</p>
18+
</>
19+
);
20+
}

‎packages/components/divider/divider.en-US.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Divider Props
56

67
name | type | default | description | required
78
-- | -- | -- | -- | --
8-
className | String | - | 类名 | N
9-
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
10-
align | String | center | options：left/right/center | N
9+
className | String | - | className of component | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
11+
align | String | center | options: left/right/center | N
1112
children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1213
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1314
dashed | Boolean | false | \- | N
14-
layout | String | horizontal | options：horizontal/vertical | N
15+
layout | String | horizontal | options: horizontal/vertical | N
16+
size | String / Number | - | Spacing size | N

‎packages/components/divider/divider.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Divider Props
56

6-
名称 | 类型 | 默认值 | 说明 | 必传
7+
名称 | 类型 | 默认值 | 描述 | 必传
78
-- | -- | -- | -- | --
89
className | String | - | 类名 | N
910
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -12,3 +13,4 @@ children | TNode | - | 子元素，同 content。TS 类型：`string \| TNode`
1213
content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1314
dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
1415
layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
16+
size | String / Number | - | 间距大小 | N

‎packages/components/divider/type.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,8 @@ export interface TdDividerProps {
3030
* @default horizontal
3131
*/
3232
layout?: 'horizontal' | 'vertical';
33+
/**
34+
* 间距大小
35+
*/
36+
size?: string | number;
3337
}

‎packages/components/dropdown/DropdownItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { forwardRef } from 'react';
22
import type { RefObject } from 'react';
33
import classNames from 'classnames';
4+
import { pxCompat } from '@tdesign/common-js/utils/helper';
45
import { DropdownOption, TdDropdownProps, DropdownItemTheme } from './type';
56
import useConfig from '../hooks/useConfig';
67
import useDomRefCallback from '../hooks/useDomRefCallback';
78
import useRipple from '../hooks/useRipple';
89
import { dropdownItemDefaultProps } from './defaultProps';
910
import { StyledProps } from '../common';
10-
import { pxCompat } from '../_util/helper';
1111
import useDefaultProps from '../hooks/useDefaultProps';
1212

1313
type DropdownItemProps = Pick<DropdownOption, 'value'> &

0 commit comments

Comments
 (0)