mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 07:26:56 +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
|
<ul
|
||||||
className="ant-list-items"
|
className="ant-list-items"
|
||||||
>
|
>
|
||||||
<Item
|
<Item>
|
||||||
key="1/.0"
|
|
||||||
>
|
|
||||||
<li
|
<li
|
||||||
className="ant-list-item"
|
className="ant-list-item"
|
||||||
>
|
>
|
||||||
ant design
|
ant design
|
||||||
</li>
|
</li>
|
||||||
</Item>
|
</Item>
|
||||||
<Item
|
<Item>
|
||||||
key="2/.1"
|
|
||||||
>
|
|
||||||
<li
|
<li
|
||||||
className="ant-list-item"
|
className="ant-list-item"
|
||||||
>
|
>
|
||||||
ant design
|
ant design
|
||||||
</li>
|
</li>
|
||||||
</Item>
|
</Item>
|
||||||
<Item
|
<Item>
|
||||||
key="3/.2"
|
|
||||||
>
|
|
||||||
<li
|
<li
|
||||||
className="ant-list-item"
|
className="ant-list-item"
|
||||||
>
|
>
|
||||||
@ -170,27 +164,21 @@ exports[`List Item Layout rowKey could be string 1`] = `
|
|||||||
<ul
|
<ul
|
||||||
className="ant-list-items"
|
className="ant-list-items"
|
||||||
>
|
>
|
||||||
<Item
|
<Item>
|
||||||
key="1/.0"
|
|
||||||
>
|
|
||||||
<li
|
<li
|
||||||
className="ant-list-item"
|
className="ant-list-item"
|
||||||
>
|
>
|
||||||
ant design
|
ant design
|
||||||
</li>
|
</li>
|
||||||
</Item>
|
</Item>
|
||||||
<Item
|
<Item>
|
||||||
key="2/.1"
|
|
||||||
>
|
|
||||||
<li
|
<li
|
||||||
className="ant-list-item"
|
className="ant-list-item"
|
||||||
>
|
>
|
||||||
ant design
|
ant design
|
||||||
</li>
|
</li>
|
||||||
</Item>
|
</Item>
|
||||||
<Item
|
<Item>
|
||||||
key="3/.2"
|
|
||||||
>
|
|
||||||
<li
|
<li
|
||||||
className="ant-list-item"
|
className="ant-list-item"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -180,10 +180,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="ant-row"
|
class="ant-row"
|
||||||
style="margin-left:-8px;margin-right:-8px"
|
style="margin-left:-8px;margin-right:-8px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width:25%;max-width:25%"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
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
|
<div
|
||||||
class="ant-list-item"
|
class="ant-list-item"
|
||||||
@ -212,9 +215,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="width:25%;max-width:25%"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
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
|
<div
|
||||||
class="ant-list-item"
|
class="ant-list-item"
|
||||||
@ -243,9 +250,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="width:25%;max-width:25%"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
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
|
<div
|
||||||
class="ant-list-item"
|
class="ant-list-item"
|
||||||
@ -274,9 +285,13 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="width:25%;max-width:25%"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
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
|
<div
|
||||||
class="ant-list-item"
|
class="ant-list-item"
|
||||||
@ -309,6 +324,699 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</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`] = `
|
exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
|
||||||
@ -450,6 +1158,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
|||||||
class="ant-row"
|
class="ant-row"
|
||||||
style="margin-left:-8px;margin-right:-8px"
|
style="margin-left:-8px;margin-right:-8px"
|
||||||
>
|
>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-col"
|
||||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-col"
|
||||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-col"
|
||||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-col"
|
||||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-col"
|
||||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-col"
|
||||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||||
@ -640,6 +1359,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/list/demo/simple.md correctly 1`] = `
|
exports[`renders ./components/list/demo/simple.md correctly 1`] = `
|
||||||
|
|||||||
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 Pagination, { PaginationConfig } from '../pagination';
|
||||||
import { Row } from '../grid';
|
import { Row } from '../grid';
|
||||||
import Item from './Item';
|
import Item from './Item';
|
||||||
import { cloneElement } from '../_util/reactNode';
|
|
||||||
|
|
||||||
export { ListItemProps, ListItemMetaProps } from './Item';
|
export { ListItemProps, ListItemMetaProps } from './Item';
|
||||||
|
|
||||||
@ -249,23 +248,15 @@ function List<T>({
|
|||||||
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
|
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
|
||||||
if (splitDataSource.length > 0) {
|
if (splitDataSource.length > 0) {
|
||||||
const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
|
const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
|
||||||
const childrenList = React.Children.map(items, (child: any, index) =>
|
const childrenList = React.Children.map(items, (child: any, index) => (
|
||||||
cloneElement(
|
<div key={keys[index]} style={colStyle}>
|
||||||
child,
|
{child}
|
||||||
grid
|
</div>
|
||||||
? {
|
));
|
||||||
key: keys[index],
|
|
||||||
colStyle,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
key: keys[index],
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
childrenContent = grid ? (
|
childrenContent = grid ? (
|
||||||
<Row gutter={grid.gutter}>{childrenList}</Row>
|
<Row gutter={grid.gutter}>{childrenList}</Row>
|
||||||
) : (
|
) : (
|
||||||
<ul className={`${prefixCls}-items`}>{childrenList}</ul>
|
<ul className={`${prefixCls}-items`}>{items}</ul>
|
||||||
);
|
);
|
||||||
} else if (!children && !isLoading) {
|
} else if (!children && !isLoading) {
|
||||||
childrenContent = renderEmptyFunc(prefixCls, renderEmpty);
|
childrenContent = renderEmptyFunc(prefixCls, renderEmpty);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user