Merge pull request #47124 from ant-design/flex

feat: Grid support `flex` responsive config
ant-design · Jan 23, 2024 · 2b9ced5 · 2b9ced5
2 parents 0adf67f + 7d6aed5
commit 2b9ced5
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 5 deletions.
diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1387,6 +1387,75 @@ exports[`renders components/grid/demo/responsive.tsx extend context correctly 1`
 
 exports[`renders components/grid/demo/responsive.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/grid/demo/responsive-flex.tsx extend context correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
+  >
+    Col
+  </div>
+</div>
+`;
+
+exports[`renders components/grid/demo/responsive-flex.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/grid/demo/responsive-more.tsx extend context correctly 1`] = `
 <div
   class="ant-row"

diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
@@ -1312,6 +1312,73 @@ exports[`renders components/grid/demo/responsive.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/grid/demo/responsive-flex.tsx correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+  <div
+    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
+    style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
+  >
+    Col
+  </div>
+</div>
+`;
+
 exports[`renders components/grid/demo/responsive-more.tsx correctly 1`] = `
 <div
   class="ant-row"

diff --git a/components/grid/col.tsx b/components/grid/col.tsx
@@ -70,7 +70,10 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
 
   const [wrapCSSVar, hashId, cssVarCls] = useColStyle(prefixCls);
 
-  let sizeClassObj = {};
+  // ===================== Size ======================
+  const sizeStyle: Record<string, string> = {};
+
+  let sizeClassObj: Record<string, boolean | ColSpanType> = {};
   sizes.forEach((size) => {
     let sizeProps: ColSize = {};
     const propSize = props[size];
@@ -90,11 +93,17 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
         sizeProps.offset || sizeProps.offset === 0,
       [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
       [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
-      [`${prefixCls}-${size}-flex-${sizeProps.flex}`]: sizeProps.flex || sizeProps.flex === 'auto',
       [`${prefixCls}-rtl`]: direction === 'rtl',
     };
+
+    // Responsive flex layout
+    if (sizeProps.flex) {
+      sizeClassObj[`${prefixCls}-${size}-flex`] = true;
+      sizeStyle[`--${prefixCls}-${size}-flex`] = parseFlex(sizeProps.flex);
+    }
   });
 
+  // ==================== Normal =====================
   const classes = classNames(
     prefixCls,
     {
@@ -128,8 +137,14 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
     }
   }
 
+  // ==================== Render =====================
   return wrapCSSVar(
-    <div {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
+    <div
+      {...others}
+      style={{ ...mergedStyle, ...style, ...sizeStyle }}
+      className={classes}
+      ref={ref}
+    >
       {children}
     </div>,
   );

diff --git a/components/grid/demo/responsive-flex.md b/components/grid/demo/responsive-flex.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+支持更灵活的响应式下的任意 flex 比例，该功能需要浏览器支持 CSS Variables。
+
+## en-US
+
+Support much more flexible responsive flex ratio, which requires CSS Variables supported by browser.
diff --git a/components/grid/demo/responsive-flex.tsx b/components/grid/demo/responsive-flex.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Col, Row } from 'antd';
+
+const App: React.FC = () => (
+  <Row>
+    {new Array(10).fill(0).map((_, index) => {
+      const key = `col-${index}`;
+      return (
+        <Col
+          key={key}
+          xs={{ flex: '100%' }}
+          sm={{ flex: '50%' }}
+          md={{ flex: '40%' }}
+          lg={{ flex: '20%' }}
+          xl={{ flex: '10%' }}
+        >
+          Col
+        </Col>
+      );
+    })}
+  </Row>
+);
+
+export default App;
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
@@ -45,6 +45,7 @@ Layout uses a 24 grid layout to define the width of each "box", but does not rig
 <code src="./demo/flex-order.tsx">Order</code>
 <code src="./demo/flex-stretch.tsx">Flex Stretch</code>
 <code src="./demo/responsive.tsx">Responsive</code>
+<code src="./demo/responsive-flex.tsx" version="5.14.0">Flex Responsive</code>
 <code src="./demo/responsive-more.tsx">More responsive</code>
 <code src="./demo/playground.tsx">Playground</code>
 <code src="./demo/useBreakpoint.tsx">useBreakpoint Hook</code>

diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
@@ -44,6 +44,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
 <code src="./demo/flex-order.tsx">排序</code>
 <code src="./demo/flex-stretch.tsx">Flex 填充</code>
 <code src="./demo/responsive.tsx">响应式布局</code>
+<code src="./demo/responsive-flex.tsx" version="5.14.0">Flex 响应式布局</code>
 <code src="./demo/responsive-more.tsx">其他属性的响应式</code>
 <code src="./demo/playground.tsx">栅格配置器</code>
 <code src="./demo/useBreakpoint.tsx">useBreakpoint Hook</code>

diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
@@ -1,4 +1,4 @@
-import { type CSSObject, unit } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
@@ -94,7 +94,7 @@ const genGridColStyle: GenerateStyle<GridColToken> = (token): CSSObject => {
 };
 
 const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObject => {
-  const { componentCls, gridColumns } = token;
+  const { prefixCls, componentCls, gridColumns } = token;
 
   const gridColumnsStyle: CSSObject = {};
   for (let i = gridColumns; i >= 0; i--) {
@@ -151,6 +151,11 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
     }
   }
 
+  // Flex CSS Var
+  gridColumnsStyle[`${componentCls}${sizeCls}-flex`] = {
+    flex: `var(--${prefixCls}${sizeCls}-flex)`,
+  };
+
   return gridColumnsStyle;
 };