mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

fix: List grid not working in React.Fragment or wrapped List.Item (#24955)

Browse Source 
* fix: List grid not working for Fragment or wrapping List.Item

close #24553
close #24828

* remove unused code

* no need extra wrap div for List without grid prop
This commit is contained in:
偏右 2020-06-12 18:11:29 +08:00 committed by GitHub
parent f6c8f81484
commit 31a9fffeac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 952 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/list/__tests__/__snapshots__/Item.test.js.snap
View File

@ -96,27 +96,21 @@ exports[`List Item Layout rowKey could be function 1`] = `
<ul
className="ant-list-items"
>
<Item
key="1/.0"
>
<Item>
<li
className="ant-list-item"
>
ant design
</li>
</Item>
<Item
key="2/.1"
>
<Item>
<li
className="ant-list-item"
>
ant design
</li>
</Item>
<Item
key="3/.2"
>
<Item>
<li
className="ant-list-item"
>
@ -170,27 +164,21 @@ exports[`List Item Layout rowKey could be string 1`] = `
<ul
className="ant-list-items"
>
<Item
key="1/.0"
>
<Item>
<li
className="ant-list-item"
>
ant design
</li>
</Item>
<Item
key="2/.1"
>
<Item>
<li
className="ant-list-item"
>
ant design
</li>
</Item>
<Item
key="3/.2"
>
<Item>
<li
className="ant-list-item"
>

1004
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

78
components/list/demo/grid-test.md Normal file
View File

@ -0,0 +1,78 @@
---
order: 4.1
title:
zh-CN: 测试栅格列表
en-US: Test Grid
debug: true
---
## zh-CN
List `grid` 在各种情况下的样式表现，如 Fragment 和封装了 List.Item.
## en-US
Test List `grid` for some edge cases.
```jsx
import { List, Card } from 'antd';
const data = [
{
title: 'Title 1',
},
{
title: 'Title 2',
},
{
title: 'Title 3',
},
{
title: 'Title 4',
},
{
title: 'Title 5',
},
{
title: 'Title 6',
},
];
const ListItem = () => (
<List.Item>
<Card title="title">Card content</Card>
</List.Item>
);
ReactDOM.render(
<>
<List
grid={{ gutter: 16, column: 4 }}
dataSource={data}
renderItem={item => (
<>
<List.Item>
<Card title={item.title}>Card content</Card>
</List.Item>
</>
)}
/>
<List
grid={{ gutter: 16, column: 4 }}
dataSource={data}
renderItem={() => <ListItem />}
/>
<List
grid={{ gutter: 16, column: 4 }}
dataSource={data}
renderItem={() => (
<>
<ListItem />
<div />
</>
)}
/>
</>,
mountNode,
);
```

21
components/list/index.tsx
View File

@ -7,7 +7,6 @@ import { RenderEmptyHandler, ConfigContext } from '../config-provider';
import Pagination, { PaginationConfig } from '../pagination';
import { Row } from '../grid';
import Item from './Item';
import { cloneElement } from '../_util/reactNode';
export { ListItemProps, ListItemMetaProps } from './Item';
@ -249,23 +248,15 @@ function List<T>({
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
if (splitDataSource.length > 0) {
const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
const childrenList = React.Children.map(items, (child: any, index) =>
cloneElement(
child,
grid
? {
key: keys[index],
colStyle,
}
: {
key: keys[index],
},
),
);
const childrenList = React.Children.map(items, (child: any, index) => (
<div key={keys[index]} style={colStyle}>
{child}
</div>
));
childrenContent = grid ? (
<Row gutter={grid.gutter}>{childrenList}</Row>
) : (
<ul className={`${prefixCls}-items`}>{childrenList}</ul>
<ul className={`${prefixCls}-items`}>{items}</ul>
);
} else if (!children && !isLoading) {
childrenContent = renderEmptyFunc(prefixCls, renderEmpty);