mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-31 20:36:35 +08:00
fix: List grid not working in React.Fragment or wrapped List.Item (#24955)
* 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:
偏右
GitHub
parent
f6c8f81484
commit
31a9fffeac
@ -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"
|
||||
>
|
||||
|
||||
@ -180,10 +180,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -212,9 +215,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -243,9 +250,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -274,9 +285,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -308,9 +323,702 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/list/demo/grid-test.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-list ant-list-split ant-list-grid"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Title 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Title 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Title 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Title 4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Title 5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Title 6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-list ant-list-split ant-list-grid"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-list ant-list-split ant-list-grid"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
style="width:25%;max-width:25%"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
|
||||
<div
|
||||
class="demo-infinite-container"
|
||||
@ -450,6 +1158,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
@ -481,6 +1190,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
@ -512,6 +1223,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
@ -543,6 +1256,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
@ -574,6 +1289,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
@ -605,6 +1322,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
@ -639,6 +1358,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
78
components/list/demo/grid-test.md
Normal file
78
components/list/demo/grid-test.md
Normal 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,
|
||||
);
|
||||
```
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user