mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

feat: wrap prop support boolean (#48391)

Browse Source 
* feat: wrap prop support boolean

* test: add test case

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* test: update

* chore: revert
This commit is contained in:
lijianan 2024-04-11 22:29:50 +08:00 committed by GitHub
parent 6a7945d2fd
commit a09b9dd820
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/flex/__tests__/index.test.tsx
View File

@ -67,4 +67,19 @@ describe('Flex', () => {
'ant-flex-align-center',
);
});
it('wrap prop shouled support boolean', () => {
const { container, rerender } = render(<Flex>test</Flex>);
const element = container.querySelector<HTMLDivElement>('.ant-flex');
([true, 'wrap'] as const).forEach((value) => {
rerender(<Flex wrap={value}>test</Flex>);
expect(element).toHaveClass('ant-flex-wrap-wrap');
});
([false, 'nowrap'] as const).forEach((value) => {
rerender(<Flex wrap={value}>test</Flex>);
expect(element).not.toHaveClass('ant-flex-wrap-wrap');
});
});
});

8
components/flex/index.en-US.md
View File

@ -37,10 +37,10 @@ Common props ref：[Common props](/docs/react/common-props)
| Property | Description | type | Default | Version |
| --- | --- | --- | --- | --- |
| vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` | |
| wrap | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | nowrap | |
| justify | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal | |
| align | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal | |
| flex | flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal | |
| wrap | Set whether the element is displayed in a single line or in multiple lines | [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) \| boolean | nowrap | boolean: 5.17.0 |
| justify | Sets the alignment of elements in the direction of the main axis | [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal | |
| align | Sets the alignment of elements in the direction of the cross axis | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal | |
| flex | flex CSS shorthand properties | [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal | |
| gap | Sets the gap between grids | `small` \| `middle` \| `large` \| string \| number | - | |
| component | custom element type | React.ComponentType | `div` | |

8
components/flex/index.zh-CN.md
View File

@ -38,10 +38,10 @@ tag: 5.10.0
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| vertical | flex 主轴的方向是否垂直，使用 `flex-direction: column` | boolean | `false` |
| wrap | 设置元素单行显示还是多行显示 | 参考 [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | nowrap | |
| justify | 设置元素在主轴方向上的对齐方式 | 参考 [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal | |
| align | 设置元素在交叉轴方向上的对齐方式 | 参考 [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal | |
| flex | flex CSS 简写属性 | 参考 [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal | |
| wrap | 设置元素单行显示还是多行显示 | [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) \| boolean | nowrap | boolean: 5.17.0 |
| justify | 设置元素在主轴方向上的对齐方式 | [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal | |
| align | 设置元素在交叉轴方向上的对齐方式 | [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal | |
| flex | flex CSS 简写属性 | [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal | |
| gap | 设置网格之间的间隙 | `small` \| `middle` \| `large` \| string \| number | - | |
| component | 自定义元素类型 | React.ComponentType | `div` | |

2
components/flex/interface.ts
View File

@ -7,7 +7,7 @@ export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLEleme
prefixCls?: string;
rootClassName?: string;
vertical?: boolean;
wrap?: React.CSSProperties['flexWrap'];
wrap?: boolean | React.CSSProperties['flexWrap'];
justify?: React.CSSProperties['justifyContent'];
align?: React.CSSProperties['alignItems'];
flex?: React.CSSProperties['flex'];

19
components/flex/utils.ts
View File

@ -2,9 +2,9 @@ import classNames from 'classnames';
import type { FlexProps } from './interface';
export const flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'] as const;
export const flexWrapValues: React.CSSProperties['flexWrap'][] = ['wrap', 'nowrap', 'wrap-reverse'];
export const justifyContentValues = [
export const justifyContentValues: React.CSSProperties['justifyContent'][] = [
'flex-start',
'flex-end',
'start',
@ -17,9 +17,9 @@ export const justifyContentValues = [
'normal',
'left',
'right',
] as const;
];
export const alignItemsValues = [
export const alignItemsValues: React.CSSProperties['alignItems'][] = [
'center',
'start',
'end',
@ -30,14 +30,13 @@ export const alignItemsValues = [
'baseline',
'normal',
'stretch',
] as const;
];
const genClsWrap = (prefixCls: string, props: FlexProps) => {
const wrapCls: Record<PropertyKey, boolean> = {};
flexWrapValues.forEach((cssKey) => {
wrapCls[`${prefixCls}-wrap-${cssKey}`] = props.wrap === cssKey;
});
return wrapCls;
const wrap = props.wrap === true ? 'wrap' : props.wrap;
return {
[`${prefixCls}-wrap-${wrap}`]: wrap && flexWrapValues.includes(wrap),
};
};
const genClsAlign = (prefixCls: string, props: FlexProps) => {