Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Grid support flex responsive config #47124

Merged
merged 3 commits into from Jan 23, 2024
Merged

feat: Grid support flex responsive config #47124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8634cdf
chore: add flex css var
zombieJ Jan 23, 2024
4e12c3e
Merge remote-tracking branch 'origin/feature' into flex
zombieJ Jan 23, 2024
7d6aed5
feat: support flex responsive
zombieJ Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
69 changes: 69 additions & 0 deletions components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down
67 changes: 67 additions & 0 deletions components/grid/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down
21 changes: 18 additions & 3 deletions components/grid/col.tsx
View file
Open in desktop
Expand Up @@ -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];
Expand All @@ -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,
{
Expand Down Expand Up @@ -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>,
);
Expand Down
7 changes: 7 additions & 0 deletions components/grid/demo/responsive-flex.md
View file
Open in desktop
@@ -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.
24 changes: 24 additions & 0 deletions components/grid/demo/responsive-flex.tsx
View file
Open in desktop
@@ -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}`;
zombieJ marked this conversation as resolved.
Show resolved Hide resolved
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;
1 change: 1 addition & 0 deletions components/grid/index.en-US.md
View file
Open in desktop
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions components/grid/index.zh-CN.md
View file
Open in desktop
Expand Up @@ -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>
Expand Down
9 changes: 7 additions & 2 deletions components/grid/style/index.ts
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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--) {
Expand Down Expand Up @@ -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;
};

Expand Down