Merge pull request #47124 from ant-design/flex

feat: Grid support `flex` responsive config
2024-12-04 04:58:55 +08:00 · 2024-01-23 22:13:49 +08:00 · 2024-01-23 22:13:49 +08:00 · 2b9ced595f
commit 2b9ced595f
parent 0adf67fd7e 7d6aed50c0
8 changed files with 194 additions and 5 deletions
--- 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"
--- 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"
--- 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>,
  );
--- 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.
--- 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;
--- 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>
--- 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>
--- 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;
 };