mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix: fix divider component innerStyle style error (#42797)

Browse Source 
* 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
This commit is contained in:
凤之兮原 2023-06-03 12:45:26 +08:00 committed by GitHub
parent 036ef07013
commit 8e8433c426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/divider/index.en-US.md
View File

@ -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` | |

14
components/divider/index.tsx
View File

@ -57,9 +57,19 @@ const Divider: React.FC<DividerProps> = (props) => {
rootClassName,
);
const memoizedOrientationMargin = React.useMemo<string | number>(() => {
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

2
components/divider/index.zh-CN.md
View File

@ -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` | |