From 8e8433c426509bb08daecdbedf6971b064641dc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A4=E4=B9=8B=E5=85=AE=E5=8E=9F?= <88939906+kongmingLatern@users.noreply.github.com> Date: Sat, 3 Jun 2023 12:45:26 +0800 Subject: [PATCH 1/3] fix: fix divider component innerStyle style error (#42797) * fix: fix style transformation * fix: fix style transformation * fix: eslint * feat: compatible with str writing * fix: lint * refactor: orientationMargin transform * docs: update docs * chore:add process.env.NODE_ENV displayName --- components/divider/index.en-US.md | 2 +- components/divider/index.tsx | 14 ++++++++++++-- components/divider/index.zh-CN.md | 2 +- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md index 786dc76188..e6f4d5faec 100644 --- a/components/divider/index.en-US.md +++ b/components/divider/index.en-US.md @@ -34,7 +34,7 @@ A divider line separates different content. | className | The className of container | string | - | | | dashed | Whether line is dashed | boolean | false | | | orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` | | -| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - | | +| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - | | | plain | Divider text show as plain style | boolean | true | 4.2.0 | | style | The style object of container | CSSProperties | - | | | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | | diff --git a/components/divider/index.tsx b/components/divider/index.tsx index cab33801a0..7337ad7339 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -57,9 +57,19 @@ const Divider: React.FC = (props) => { rootClassName, ); + const memoizedOrientationMargin = React.useMemo(() => { + if (typeof orientationMargin === 'number') { + return orientationMargin; + } + if (/^\d+$/.test(orientationMargin!)) { + return Number(orientationMargin); + } + return orientationMargin!; + }, [orientationMargin]); + const innerStyle: React.CSSProperties = { - ...(hasCustomMarginLeft && { marginLeft: orientationMargin }), - ...(hasCustomMarginRight && { marginRight: orientationMargin }), + ...(hasCustomMarginLeft && { marginLeft: memoizedOrientationMargin }), + ...(hasCustomMarginRight && { marginRight: memoizedOrientationMargin }), }; // Warning children not work in vertical mode diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index b818c1b96d..fb2207ddae 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -35,7 +35,7 @@ group: | className | 分割线样式类 | string | - | | | dashed | 是否虚线 | boolean | false | | | orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | | -| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - | | +| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - | | | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 | | style | 分割线样式对象 | CSSProperties | - | | | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | From 26ab02f38a938cce3f73fa9028002bbd0cbd94e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sat, 3 Jun 2023 13:18:12 +0800 Subject: [PATCH 2/3] docs(Tabs): update docs about tabs closable prop (#42795) * docs: update docs about tabs closable prop * Update components/tabs/index.zh-CN.md Co-authored-by: afc163 * Update components/tabs/index.zh-CN.md Co-authored-by: afc163 --------- Co-authored-by: afc163 --- components/tabs/index.en-US.md | 1 + components/tabs/index.zh-CN.md | 17 +++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index f73d7756fb..1ac9bbb2fd 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -72,6 +72,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs) | Property | Description | Type | Default | | --- | --- | --- | --- | | closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - | +| closable | Whether the Tab can be closed, Only works while `type="editable-card"` | boolean | true | | disabled | Set TabPane disabled | boolean | false | | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | | key | TabPane's key | string | - | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 040edd41f5..82e67816b7 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -71,14 +71,15 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 ### TabItemType -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | ----------------------------------------------- | --------- | ------ | -| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - | -| disabled | 禁用某一项 | boolean | false | -| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | -| key | 对应 activeKey | string | - | -| label | 选项卡头显示文字 | ReactNode | - | -| children | 选项卡头显示内容 | ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | ------------------------------------------------------- | --------- | ------ | +| closeIcon | 自定义关闭图标，在 `type="editable-card"` 时有效 | ReactNode | - | +| closable | 当前选项卡是否可被关闭，在 `type="editable-card"` 时有效 | boolean | true | +| disabled | 禁用某一项 | boolean | false | +| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | +| key | 对应 activeKey | string | - | +| label | 选项卡头显示文字 | ReactNode | - | +| children | 选项卡头显示内容 | ReactNode | - | ## Design Token From 71c155f0431fc70190b22dcf3ea66394432e57b4 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 3 Jun 2023 18:16:28 +0800 Subject: [PATCH 3/3] test: add test case (#42800) --- components/divider/__tests__/index.test.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/components/divider/__tests__/index.test.tsx b/components/divider/__tests__/index.test.tsx index 0e581f43b2..367b319105 100644 --- a/components/divider/__tests__/index.test.tsx +++ b/components/divider/__tests__/index.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { render } from '../../../tests/utils'; import Divider from '..'; import mountTest from '../../../tests/shared/mountTest'; +import { render } from '../../../tests/utils'; describe('Divider', () => { mountTest(Divider); @@ -10,8 +10,19 @@ describe('Divider', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const { container } = render(Bamboo); - expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy(); + expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy(); errSpy.mockRestore(); }); + + it('support string orientationMargin', () => { + const { container } = render( + + test test test + , + ); + expect(container?.querySelector('.ant-divider-inner-text')).toHaveStyle({ + marginRight: 10, + }); + }); });