feat: wrap prop support boolean (#48391)

* 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
ant-design · Apr 11, 2024 · a09b9dd · a09b9dd
1 parent 6a7945d
commit a09b9dd
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 19 deletions.
diff --git a/components/flex/__tests__/index.test.tsx b/components/flex/__tests__/index.test.tsx
@@ -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');
+    });
+  });
 });
diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md
@@ -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` |  |
 

diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md
@@ -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` |  |
 

diff --git a/components/flex/interface.ts b/components/flex/interface.ts
@@ -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'];

diff --git a/components/flex/utils.ts b/components/flex/utils.ts
@@ -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) => {