mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: Row support wrap (#27469)

Browse Source 
* feat: Support noWrap

* test: update snapshot

* fix: Miss check

* test: fix snapshot

* refactor: rename to wrap

* update snapshot
This commit is contained in:
二货机器人 2020-10-30 22:13:23 +08:00 committed by GitHub
parent f6f3166108
commit d052543844
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/grid/RowContext.tsx
View File

@ -2,6 +2,7 @@ import { createContext, Context } from 'react';
export interface RowContextState {
gutter?: [number, number];
wrap?: boolean;
}
const RowContext: Context<RowContextState> = createContext({});

20
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -554,6 +554,26 @@ Array [
0 1 300px
</div>
</div>,
<div
class="ant-row ant-row-no-wrap"
>
<div
class="ant-col"
style="flex:none"
>
<div
style="padding:0 16px"
>
none
</div>
</div>
<div
class="ant-col"
style="flex:auto;min-width:0"
>
auto with no-wrap
</div>
</div>,
]
`;

8
components/grid/col.tsx
View File

@ -47,7 +47,7 @@ function parseFlex(flex: FlexType): string {
const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { gutter } = React.useContext(RowContext);
const { gutter, wrap } = React.useContext(RowContext);
const {
prefixCls: customizePrefixCls,
@ -122,6 +122,12 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
}
if (flex) {
mergedStyle.flex = parseFlex(flex);
// Hack for Firefox to avoid size issue
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
if (flex === 'auto' && wrap === false && !mergedStyle.minWidth) {
mergedStyle.minWidth = 0;
}
}
return (

7
components/grid/demo/flex-stretch.md
View File

@ -33,6 +33,13 @@ ReactDOM.render(
<Col flex="1 1 200px">1 1 200px</Col>
<Col flex="0 1 300px">0 1 300px</Col>
</Row>
<Row wrap={false}>
<Col flex="none">
<div style={{ padding: '0 16px' }}>none</div>
</Col>
<Col flex="auto">auto with no-wrap</Col>
</Row>
</>,
mountNode,
);

1
components/grid/index.en-US.md
View File

@ -92,6 +92,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | | |
| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | | |
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | | |
| wrap | Auto wrap line | boolean | true | 4.8.0 |
### Col

1
components/grid/index.zh-CN.md
View File

@ -91,6 +91,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | |
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
| wrap | 是否自动换行 | boolean | true | 4.8.0 |
### Col

5
components/grid/row.tsx
View File

@ -18,6 +18,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
align?: typeof RowAligns[number];
justify?: typeof RowJustify[number];
prefixCls?: string;
wrap?: boolean;
}
const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
@ -29,6 +30,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
style,
children,
gutter = 0,
wrap,
...others
} = props;
@ -83,6 +85,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
const classes = classNames(
prefixCls,
{
[`${prefixCls}-no-wrap`]: wrap === false,
[`${prefixCls}-${justify}`]: justify,
[`${prefixCls}-${align}`]: align,
[`${prefixCls}-rtl`]: direction === 'rtl',
@ -106,7 +109,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
};
return (
<RowContext.Provider value={{ gutter: gutters }}>
<RowContext.Provider value={{ gutter: gutters, wrap }}>
<div {...others} className={classes} style={rowStyle} ref={ref}>
{children}
</div>

5
components/grid/style/index.less
View File

@ -11,6 +11,11 @@
&::after {
display: flex;
}
// No wrap of flex
&-no-wrap {
flex-wrap: nowrap;
}
}
// x轴原点

6
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -76,7 +76,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -427,7 +427,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -730,7 +730,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"

12
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5697,7 +5697,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -6157,7 +6157,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -7227,7 +7227,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -8667,7 +8667,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -15555,7 +15555,7 @@ exports[`renders ./components/table/demo/sticky.md correctly 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"
@ -16790,7 +16790,7 @@ Array [
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"

2
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -341,7 +341,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
style="height:0;font-size:0"
>
<td
style="padding:0;border:0;height:0"