-
-
- 
-
-
-
- Ant Design Title 1
- +-
+
-
+ +-+
-
@@ -50,59 +52,51 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
-
-
-
-
+
- Ant Design Title 2
- + +
+
+
-
-
-
-
-
-
+
- Ant Design Title 3
- + +
+
+
-
-
-
-
+
+
-
+
- Ant Design Title 4
- + +
+
+
-
-
+
-
-
-
-
-
-
+ Title 1
-
+
+
+
+
- Title 1
Card content
Card content
+
-
-
-
-
-
-
+ Title 2
-
+
+
+
+
- Title 2
Card content
Card content
+
-
-
-
-
-
-
+ Title 3
-
+
+
+
+
- Title 3
Card content
Card content
+
-
-
@@ -148,7 +150,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
-
@@ -119,7 +113,15 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
-
-
+ Title 4
-
+
+
+
+
- Title 4
Card content
Card content
- ![No Data]()
+
No Data
-
+
@@ -163,87 +165,75 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
-
+
-
-
-
-
-
-
+ Title 1
-
+
+
+
+
- Title 1
Card content
Card content
+
-
-
-
-
-
-
+ Title 2
-
+
+
+
+
- Title 2
Card content
Card content
+
-
-
-
-
-
-
+ Title 3
-
+
+
+
+
- Title 3
Card content
Card content
+
-
-
-
-
-
-
+ Title 4
-
+
+
+
+
- Title 4
Card content
Card content
+
-
-
-
-
-
-
+ Title 5
-
+
+
+
+
- Title 5
Card content
Card content
+
-
-
-
@@ -262,21 +252,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
-
-
+ Title 6
-
+
+
+
+
- Title 6
Card content
Card content
-
-
- Racing car sprays burning fuel into crowd.
-
-
- Japanese princess to wed commoner.
-
-
- Australian walks 100km after outback crash.
-
-
- Man charged over missing wedding girl.
-
-
+ Los Angeles battles huge wildfires.
- -
+
- Racing car sprays burning fuel into crowd. +
- Japanese princess to wed commoner. +
- Australian walks 100km after outback crash. +
- Man charged over missing wedding girl. +
- Los Angeles battles huge wildfires. +
-
-
- Racing car sprays burning fuel into crowd.
-
-
- Japanese princess to wed commoner.
-
-
- Australian walks 100km after outback crash.
-
-
- Man charged over missing wedding girl.
-
-
+ Los Angeles battles huge wildfires.
- -
+
- Racing car sprays burning fuel into crowd. +
- Japanese princess to wed commoner. +
- Australian walks 100km after outback crash. +
- Man charged over missing wedding girl. +
- Los Angeles battles huge wildfires. +
-
-
- Racing car sprays burning fuel into crowd.
-
-
- Japanese princess to wed commoner.
-
-
- Australian walks 100km after outback crash.
-
-
- Man charged over missing wedding girl.
-
-
+ Los Angeles battles huge wildfires.
- -
+
- Racing car sprays burning fuel into crowd. +
- Japanese princess to wed commoner. +
- Australian walks 100km after outback crash. +
- Man charged over missing wedding girl. +
- Los Angeles battles huge wildfires. +
@@ -346,8 +312,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
-
+
+
-
-
- 
-
-
+
-
+
-
-@@ -356,9 +322,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156 @@ -372,10 +336,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
-
-
-
+
+
@@ -384,9 +346,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
-
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156 @@ -400,10 +360,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
-
-
-
+
+
@@ -412,9 +370,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
-
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156 @@ -428,8 +384,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
diff --git a/components/list/__tests__/__snapshots__/empty.test.js.snap b/components/list/__tests__/__snapshots__/empty.test.js.snap
index 774a4594b..761d8f863 100644
--- a/components/list/__tests__/__snapshots__/empty.test.js.snap
+++ b/components/list/__tests__/__snapshots__/empty.test.js.snap
@@ -6,7 +6,15 @@ exports[`List renders empty list 1`] = `
diff --git a/components/list/__tests__/index.test.js b/components/list/__tests__/index.test.js
index 8ec8a6345..f5936c641 100644
--- a/components/list/__tests__/index.test.js
+++ b/components/list/__tests__/index.test.js
@@ -1,8 +1,11 @@
import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils';
import List from '..';
+import mountTest from '../../../tests/shared/mountTest';
describe('List', () => {
+ mountTest(List);
+ mountTest(List.Item);
it('locale not passed to internal div', async () => {
const locale = { emptyText: 'Custom text' };
const wrapper = mount(
diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md
index baddb6c0b..039505a79 100644
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@@ -2,20 +2,21 @@
### List
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| bordered | Toggles rendering of the border around the list | boolean | false |
-| footer | List footer renderer | string\|slot | - |
-| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - |
-| header | List header renderer | string\|slot | - |
-| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
-| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
-| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#API) | false |
-| loadMore | Shows a load more content | string\|slot | - |
-| locale | i18n text including empty text | object | emptyText: 'No Data'
| -| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | -| split | Toggles rendering of the split under the list item | boolean | true | -| renderItem | Custom item renderer, slot="renderItem" and slot-scope="item, index" | (item, index) => vNode | | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| bordered | Toggles rendering of the border around the list | boolean | false | | +| footer | List footer renderer | string\|slot | - | | +| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | +| header | List header renderer | string\|slot | - | | +| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | | +| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | | +| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#API) | false | | +| loadMore | Shows a load more content | string\|slot | - | | +| locale | i18n text including empty text | object | emptyText: 'No Data'
| | +| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | | +| split | Toggles rendering of the split under the list item | boolean | true | | +| dataSource | dataSource array for list | any[] | - | 3.20.1 | +| renderItem | Custom item renderer, slot="renderItem" and slot-scope="item, index" | (item, index) => vNode | | - | | ### pagination diff --git a/components/list/index.jsx b/components/list/index.jsx index 9740572cf..ddd6b82d9 100644 --- a/components/list/index.jsx +++ b/components/list/index.jsx @@ -38,7 +38,7 @@ export const ListSize = ['small', 'default', 'large']; export const ListProps = () => ({ bordered: PropTypes.bool, - dataSource: PropTypes.any, + dataSource: PropTypes.array, extra: PropTypes.any, grid: PropTypes.shape(ListGridType).loose, itemLayout: PropTypes.string, @@ -87,15 +87,31 @@ const List = { }, total: 0, }; + this.onPaginationChange = this.triggerPaginationEvent('onChange'); + this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange'); + const { pagination } = this.$props; + const paginationObj = pagination && typeof pagination === 'object' ? pagination : {}; return { - paginationCurrent: 1, + paginationCurrent: paginationObj.defaultCurrent || 1, + paginationSize: paginationObj.defaultPageSize || 10, }; }, methods: { + triggerPaginationEvent(eventName) { + return (page, pageSize) => { + const { pagination } = this.$props; + this.paginationCurrent = page; + this.paginationSize = pageSize; + if (pagination && pagination[eventName]) { + pagination[eventName](page, pageSize); + } + }; + }, renderItem2(item, index) { const { $scopedSlots, rowKey } = this; - let key; const renderItem = this.renderItem || $scopedSlots.renderItem; + if (!renderItem) return null; + let key; if (typeof rowKey === 'function') { key = rowKey(item); } else if (typeof rowKey === 'string') { @@ -138,11 +154,12 @@ const List = { itemLayout, pagination, grid, - dataSource, + dataSource = [], size, loading, $slots, paginationCurrent, + paginationSize, } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('list', customizePrefixCls); @@ -185,13 +202,14 @@ const List = { ...this.defaultPaginationProps, total: dataSource.length, current: paginationCurrent, + pageSize: paginationSize, ...(pagination || {}), }; const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize); if (paginationProps.current > largestPage) { paginationProps.current = largestPage; } - const { class: cls, style, onShowSizeChange = () => {}, ...restProps } = paginationProps; + const { class: cls, style, ...restProps } = paginationProps; const paginationContent = pagination ? (
{childrenList}
: childrenList;
+ childrenContent = grid ? (
+ {childrenList}
+ ) : (
+
- ![No Data]()
+
No Data
| -| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | -| split | Toggles rendering of the split under the list item | boolean | true | -| renderItem | Custom item renderer, slot="renderItem" and slot-scope="item, index" | (item, index) => vNode | | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| bordered | Toggles rendering of the border around the list | boolean | false | | +| footer | List footer renderer | string\|slot | - | | +| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | +| header | List header renderer | string\|slot | - | | +| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | | +| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | | +| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#API) | false | | +| loadMore | Shows a load more content | string\|slot | - | | +| locale | i18n text including empty text | object | emptyText: 'No Data'
| | +| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | | +| split | Toggles rendering of the split under the list item | boolean | true | | +| dataSource | dataSource array for list | any[] | - | 3.20.1 | +| renderItem | Custom item renderer, slot="renderItem" and slot-scope="item, index" | (item, index) => vNode | | - | | ### pagination diff --git a/components/list/index.jsx b/components/list/index.jsx index 9740572cf..ddd6b82d9 100644 --- a/components/list/index.jsx +++ b/components/list/index.jsx @@ -38,7 +38,7 @@ export const ListSize = ['small', 'default', 'large']; export const ListProps = () => ({ bordered: PropTypes.bool, - dataSource: PropTypes.any, + dataSource: PropTypes.array, extra: PropTypes.any, grid: PropTypes.shape(ListGridType).loose, itemLayout: PropTypes.string, @@ -87,15 +87,31 @@ const List = { }, total: 0, }; + this.onPaginationChange = this.triggerPaginationEvent('onChange'); + this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange'); + const { pagination } = this.$props; + const paginationObj = pagination && typeof pagination === 'object' ? pagination : {}; return { - paginationCurrent: 1, + paginationCurrent: paginationObj.defaultCurrent || 1, + paginationSize: paginationObj.defaultPageSize || 10, }; }, methods: { + triggerPaginationEvent(eventName) { + return (page, pageSize) => { + const { pagination } = this.$props; + this.paginationCurrent = page; + this.paginationSize = pageSize; + if (pagination && pagination[eventName]) { + pagination[eventName](page, pageSize); + } + }; + }, renderItem2(item, index) { const { $scopedSlots, rowKey } = this; - let key; const renderItem = this.renderItem || $scopedSlots.renderItem; + if (!renderItem) return null; + let key; if (typeof rowKey === 'function') { key = rowKey(item); } else if (typeof rowKey === 'string') { @@ -138,11 +154,12 @@ const List = { itemLayout, pagination, grid, - dataSource, + dataSource = [], size, loading, $slots, paginationCurrent, + paginationSize, } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('list', customizePrefixCls); @@ -185,13 +202,14 @@ const List = { ...this.defaultPaginationProps, total: dataSource.length, current: paginationCurrent, + pageSize: paginationSize, ...(pagination || {}), }; const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize); if (paginationProps.current > largestPage) { paginationProps.current = largestPage; } - const { class: cls, style, onShowSizeChange = () => {}, ...restProps } = paginationProps; + const { class: cls, style, ...restProps } = paginationProps; const paginationContent = pagination ? (
- {childrenList}