github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update list

pull/1845/head
tangjinzhou 2020-02-20 21:21:09 +08:00
parent 45ff6701e6
commit c7b0cb0732
9 changed files with 274 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'layout', // dev components componentName: 'list', // dev components
}, },
}; };

4
components/_util/props-util.js
View File

@ -259,6 +259,10 @@ export function isEmptyElement(c) {
return !(c.tag || (c.text && c.text.trim() !== '')); return !(c.tag || (c.text && c.text.trim() !== ''));
} }
export function isStringElement(c) {
return !c.tag;
}
export function filterEmpty(children = []) { export function filterEmpty(children = []) {
return children.filter(c => !isEmptyElement(c)); return children.filter(c => !isEmptyElement(c));
} }

115
components/list/Item.jsx
View File

@ -3,12 +3,14 @@ import classNames from 'classnames';
import { import {
getSlotOptions, getSlotOptions,
getComponentFromProp, getComponentFromProp,
isEmptyElement, isStringElement,
getListeners, getListeners,
isEmptyElement,
} from '../_util/props-util'; } from '../_util/props-util';
import { Col } from '../grid'; import { Col } from '../grid';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { ListGridType } from './index'; import { ListGridType } from './index';
import { cloneElement } from '../_util/vnode';
export const ListItemProps = { export const ListItemProps = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -68,59 +70,68 @@ export default {
listContext: { default: () => ({}) }, listContext: { default: () => ({}) },
configProvider: { default: () => ConfigConsumerProps }, configProvider: { default: () => ConfigConsumerProps },
}, },
methods: {
isItemContainsTextNodeAndNotSingular() {
const { $slots } = this;
let result;
const children = $slots.default || [];
children.forEach(element => {
if (isStringElement(element) && !isEmptyElement(element)) {
result = true;
}
});
return result && children.length > 1;
},
isFlexMode() {
const extra = getComponentFromProp(this, 'extra');
const { itemLayout } = this.listContext;
if (itemLayout === 'vertical') {
return !!extra;
}
return !this.isItemContainsTextNodeAndNotSingular();
},
},
render() { render() {
const { grid } = this.listContext; const { grid, itemLayout } = this.listContext;
const { prefixCls: customizePrefixCls, $slots } = this; const { prefixCls: customizePrefixCls, $slots } = this;
const listeners = getListeners(this); const listeners = getListeners(this);
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('list', customizePrefixCls); const prefixCls = getPrefixCls('list', customizePrefixCls);
const classString = `${prefixCls}-item`;
const extra = getComponentFromProp(this, 'extra'); const extra = getComponentFromProp(this, 'extra');
const actions = getComponentFromProp(this, 'actions'); const actions = getComponentFromProp(this, 'actions');
const metaContent = [];
const otherContent = [];
($slots.default || []).forEach(element => { const actionsContent = actions && actions.length > 0 && (
if (!isEmptyElement(element)) { <ul class={`${prefixCls}-item-action`} key="actions">
if (getSlotOptions(element).__ANT_LIST_ITEM_META) { {actions.map((action, i) => (
metaContent.push(element); <li key={`${prefixCls}-item-action-${i}`}>
} else { {action}
otherContent.push(element); {i !== actions.length - 1 && <em class={`${prefixCls}-item-action-split`} />}
} </li>
} ))}
}); </ul>
);
const contentClassString = classNames(`${prefixCls}-item-content`, { const Tag = grid ? 'div' : 'li';
[`${prefixCls}-item-content-single`]: metaContent.length < 1, const itemChildren = (
}); <Tag
const content = {...{ on: listeners }}
otherContent.length > 0 ? <div class={contentClassString}>{otherContent}</div> : null; class={classNames(`${prefixCls}-item`, {
[`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
let actionsContent; })}
if (actions && actions.length > 0) { >
const actionsContentItem = (action, i) => ( {itemLayout === 'vertical' && extra
<li key={`${prefixCls}-item-action-${i}`}> ? [
{action} <div class={`${prefixCls}-item-main`} key="content">
{i !== actions.length - 1 && <em class={`${prefixCls}-item-action-split`} />} {$slots.default}
</li> {actionsContent}
); </div>,
actionsContent = ( <div class={`${prefixCls}-item-extra`} key="extra">
<ul class={`${prefixCls}-item-action`}> {extra}
{actions.map((action, i) => actionsContentItem(action, i))} </div>,
</ul> ]
); : [$slots.default, actionsContent, cloneElement(extra, { key: 'extra' })]}
} </Tag>
const extraContent = (
<div class={`${prefixCls}-item-extra-wrap`}>
<div class={`${prefixCls}-item-main`}>
{metaContent}
{content}
{actionsContent}
</div>
<div class={`${prefixCls}-item-extra`}>{extra}</div>
</div>
); );
const mainContent = grid ? ( const mainContent = grid ? (
@ -133,20 +144,10 @@ export default {
xl={getGrid(grid, 'xl')} xl={getGrid(grid, 'xl')}
xxl={getGrid(grid, 'xxl')} xxl={getGrid(grid, 'xxl')}
> >
<div {...{ on: listeners }} class={classString}> {itemChildren}
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
</Col> </Col>
) : ( ) : (
<div {...{ on: listeners }} class={classString}> itemChildren
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
); );
return mainContent; return mainContent;

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

@ -4,42 +4,44 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
<div class="ant-list ant-list-split"> <div class="ant-list ant-list-split">
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-item"> <ul class="ant-list-items">
<div class="ant-list-item-meta"> <li class="ant-list-item">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta">
<div class="ant-list-item-meta-content"> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 1</a></h4> <div class="ant-list-item-meta-content">
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div> <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 1</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
</div>
</div> </div>
</div> </li>
</div> <li class="ant-list-item">
<div class="ant-list-item"> <div class="ant-list-item-meta">
<div class="ant-list-item-meta"> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta-content">
<div class="ant-list-item-meta-content"> <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 2</a></h4>
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 2</a></h4> <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div> </div>
</div> </div>
</div> </li>
</div> <li class="ant-list-item">
<div class="ant-list-item"> <div class="ant-list-item-meta">
<div class="ant-list-item-meta"> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta-content">
<div class="ant-list-item-meta-content"> <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 3</a></h4>
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 3</a></h4> <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div> </div>
</div> </div>
</div> </li>
</div> <li class="ant-list-item">
<div class="ant-list-item"> <div class="ant-list-item-meta">
<div class="ant-list-item-meta"> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta-content">
<div class="ant-list-item-meta-content"> <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 4</a></h4>
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 4</a></h4> <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div> </div>
</div> </div>
</div> </li>
</div> </ul>
</div> </div>
</div> </div>
</div> </div>
@ -50,59 +52,51 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-row" style="margin-left: -8px; margin-right: -8px;"> <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
<div class="ant-col-6" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-6" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 1</div>
<div class="ant-card-head-title">Title 1</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-6" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-6" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 2</div>
<div class="ant-card-head-title">Title 2</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-6" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-6" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 3</div>
<div class="ant-card-head-title">Title 3</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-6" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-6" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 4</div>
<div class="ant-card-head-title">Title 4</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
@ -119,7 +113,15 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-empty-text"> <div class="ant-list-empty-text">
<div class="ant-empty ant-empty-normal"> <div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
</div> </div>
@ -148,7 +150,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
<div class="demo-loadmore-list ant-list ant-list-split ant-list-loading ant-list-something-after-last-item"> <div class="demo-loadmore-list ant-list ant-list-split ant-list-loading ant-list-something-after-last-item">
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div> <div>
<div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
</div> </div>
<div class="ant-spin-container ant-spin-blur"> <div class="ant-spin-container ant-spin-blur">
<div style="min-height: 53;"></div> <div style="min-height: 53;"></div>
@ -163,87 +165,75 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-row" style="margin-left: -8px; margin-right: -8px;"> <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
<div class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 1</div>
<div class="ant-card-head-title">Title 1</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 2</div>
<div class="ant-card-head-title">Title 2</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 3</div>
<div class="ant-card-head-title">Title 3</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 4</div>
<div class="ant-card-head-title">Title 4</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 5</div>
<div class="ant-card-head-title">Title 5</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;"> <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8" style="padding-left: 8px; padding-right: 8px;">
<div class="ant-list-item"> <div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single"> <div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered"> <div class="ant-card-head">
<div class="ant-card-head"> <div class="ant-card-head-wrapper">
<div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Title 6</div>
<div class="ant-card-head-title">Title 6</div>
</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
<div class="ant-card-body">Card content</div>
</div> </div>
</div> </div>
</div> </div>
@ -262,21 +252,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div> </div>
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-item"> <ul class="ant-list-items">
<div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div> <li class="ant-list-item">Racing car sprays burning fuel into crowd.</li>
</div> <li class="ant-list-item">Japanese princess to wed commoner.</li>
<div class="ant-list-item"> <li class="ant-list-item">Australian walks 100km after outback crash.</li>
<div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div> <li class="ant-list-item">Man charged over missing wedding girl.</li>
</div> <li class="ant-list-item">Los Angeles battles huge wildfires.</li>
<div class="ant-list-item"> </ul>
<div class="ant-list-item-content ant-list-item-content-single">Australian walks 100km after outback crash.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Man charged over missing wedding girl.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Los Angeles battles huge wildfires.</div>
</div>
</div> </div>
</div> </div>
<div class="ant-list-footer"> <div class="ant-list-footer">
@ -290,21 +272,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div> </div>
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-item"> <ul class="ant-list-items">
<div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div> <li class="ant-list-item">Racing car sprays burning fuel into crowd.</li>
</div> <li class="ant-list-item">Japanese princess to wed commoner.</li>
<div class="ant-list-item"> <li class="ant-list-item">Australian walks 100km after outback crash.</li>
<div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div> <li class="ant-list-item">Man charged over missing wedding girl.</li>
</div> <li class="ant-list-item">Los Angeles battles huge wildfires.</li>
<div class="ant-list-item"> </ul>
<div class="ant-list-item-content ant-list-item-content-single">Australian walks 100km after outback crash.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Man charged over missing wedding girl.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Los Angeles battles huge wildfires.</div>
</div>
</div> </div>
</div> </div>
<div class="ant-list-footer"> <div class="ant-list-footer">
@ -318,21 +292,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div> </div>
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-item"> <ul class="ant-list-items">
<div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div> <li class="ant-list-item">Racing car sprays burning fuel into crowd.</li>
</div> <li class="ant-list-item">Japanese princess to wed commoner.</li>
<div class="ant-list-item"> <li class="ant-list-item">Australian walks 100km after outback crash.</li>
<div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div> <li class="ant-list-item">Man charged over missing wedding girl.</li>
</div> <li class="ant-list-item">Los Angeles battles huge wildfires.</li>
<div class="ant-list-item"> </ul>
<div class="ant-list-item-content ant-list-item-content-single">Australian walks 100km after outback crash.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Man charged over missing wedding girl.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Los Angeles battles huge wildfires.</div>
</div>
</div> </div>
</div> </div>
<div class="ant-list-footer"> <div class="ant-list-footer">
@ -346,8 +312,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<div class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item"> <div class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item">
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-item"> <ul class="ant-list-items">
<div class="ant-list-item-extra-wrap"> <li class="ant-list-item">
<div class="ant-list-item-main"> <div class="ant-list-item-main">
<div class="ant-list-item-meta"> <div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
@ -356,9 +322,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div> <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
</div> </div>
</div> </div>
<div class="ant-list-item-content"> 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.
</div>
<ul class="ant-list-item-action"> <ul class="ant-list-item-action">
<li><span><i aria-label="icon: star-o" class="anticon anticon-star-o" style="margin-right: 8px;"><svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i> <li><span><i aria-label="icon: star-o" class="anticon anticon-star-o" style="margin-right: 8px;"><svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i>
156 156
@ -372,10 +336,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</ul> </ul>
</div> </div>
<div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div> <div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div>
</div> </li>
</div> <li class="ant-list-item">
<div class="ant-list-item">
<div class="ant-list-item-extra-wrap">
<div class="ant-list-item-main"> <div class="ant-list-item-main">
<div class="ant-list-item-meta"> <div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
@ -384,9 +346,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div> <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
</div> </div>
</div> </div>
<div class="ant-list-item-content"> 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.
</div>
<ul class="ant-list-item-action"> <ul class="ant-list-item-action">
<li><span><i aria-label="icon: star-o" class="anticon anticon-star-o" style="margin-right: 8px;"><svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i> <li><span><i aria-label="icon: star-o" class="anticon anticon-star-o" style="margin-right: 8px;"><svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i>
156 156
@ -400,10 +360,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</ul> </ul>
</div> </div>
<div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div> <div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div>
</div> </li>
</div> <li class="ant-list-item">
<div class="ant-list-item">
<div class="ant-list-item-extra-wrap">
<div class="ant-list-item-main"> <div class="ant-list-item-main">
<div class="ant-list-item-meta"> <div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div> <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
@ -412,9 +370,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div> <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
</div> </div>
</div> </div>
<div class="ant-list-item-content"> 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.
</div>
<ul class="ant-list-item-action"> <ul class="ant-list-item-action">
<li><span><i aria-label="icon: star-o" class="anticon anticon-star-o" style="margin-right: 8px;"><svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i> <li><span><i aria-label="icon: star-o" class="anticon anticon-star-o" style="margin-right: 8px;"><svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></i>
156 156
@ -428,8 +384,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</ul> </ul>
</div> </div>
<div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div> <div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div>
</div> </li>
</div> </ul>
</div> </div>
</div> </div>
<div class="ant-list-footer"> <div class="ant-list-footer">

10
components/list/__tests__/__snapshots__/empty.test.js.snap
View File

@ -6,7 +6,15 @@ exports[`List renders empty list 1`] = `
<div class="ant-spin-container"> <div class="ant-spin-container">
<div class="ant-list-empty-text"> <div class="ant-list-empty-text">
<div class="ant-empty ant-empty-normal"> <div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><img alt="No Data" src=""></div> <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fillRule="evenodd">
<ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g fillRule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p> <p class="ant-empty-description">No Data</p>
</div> </div>
</div> </div>

3
components/list/__tests__/index.test.js
View File

@ -1,8 +1,11 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils'; import { asyncExpect } from '@/tests/utils';
import List from '..'; import List from '..';
import mountTest from '../../../tests/shared/mountTest';
describe('List', () => { describe('List', () => {
mountTest(List);
mountTest(List.Item);
it('locale not passed to internal div', async () => { it('locale not passed to internal div', async () => {
const locale = { emptyText: 'Custom text' }; const locale = { emptyText: 'Custom text' };
const wrapper = mount( const wrapper = mount(

29
components/list/index.en-US.md
View File

@ -2,20 +2,21 @@
### List ### List
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false | | bordered | Toggles rendering of the border around the list | boolean | false | |
| footer | List footer renderer | string\|slot | - | | footer | List footer renderer | string\|slot | - | |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | |
| header | List header renderer | string\|slot | - | | 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 | - | | 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` | | 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 | | 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 | - | | loadMore | Shows a load more content | string\|slot | - | |
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> | | locale | i18n text including empty text | object | emptyText: 'No Data' <br> | |
| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | | 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 | | 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 | | - | | dataSource | dataSource array for list | any[] | - | 3.20.1 |
| renderItem | Custom item renderer, slot="renderItem" and slot-scope="item, index" | (item, index) => vNode | | - | |
### pagination ### pagination

39
components/list/index.jsx
View File

@ -38,7 +38,7 @@ export const ListSize = ['small', 'default', 'large'];
export const ListProps = () => ({ export const ListProps = () => ({
bordered: PropTypes.bool, bordered: PropTypes.bool,
dataSource: PropTypes.any, dataSource: PropTypes.array,
extra: PropTypes.any, extra: PropTypes.any,
grid: PropTypes.shape(ListGridType).loose, grid: PropTypes.shape(ListGridType).loose,
itemLayout: PropTypes.string, itemLayout: PropTypes.string,
@ -87,15 +87,31 @@ const List = {
}, },
total: 0, total: 0,
}; };
this.onPaginationChange = this.triggerPaginationEvent('onChange');
this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
const { pagination } = this.$props;
const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
return { return {
paginationCurrent: 1, paginationCurrent: paginationObj.defaultCurrent || 1,
paginationSize: paginationObj.defaultPageSize || 10,
}; };
}, },
methods: { 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) { renderItem2(item, index) {
const { $scopedSlots, rowKey } = this; const { $scopedSlots, rowKey } = this;
let key;
const renderItem = this.renderItem || $scopedSlots.renderItem; const renderItem = this.renderItem || $scopedSlots.renderItem;
if (!renderItem) return null;
let key;
if (typeof rowKey === 'function') { if (typeof rowKey === 'function') {
key = rowKey(item); key = rowKey(item);
} else if (typeof rowKey === 'string') { } else if (typeof rowKey === 'string') {
@ -138,11 +154,12 @@ const List = {
itemLayout, itemLayout,
pagination, pagination,
grid, grid,
dataSource, dataSource = [],
size, size,
loading, loading,
$slots, $slots,
paginationCurrent, paginationCurrent,
paginationSize,
} = this; } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('list', customizePrefixCls); const prefixCls = getPrefixCls('list', customizePrefixCls);
@ -185,13 +202,14 @@ const List = {
...this.defaultPaginationProps, ...this.defaultPaginationProps,
total: dataSource.length, total: dataSource.length,
current: paginationCurrent, current: paginationCurrent,
pageSize: paginationSize,
...(pagination || {}), ...(pagination || {}),
}; };
const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize); const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
if (paginationProps.current > largestPage) { if (paginationProps.current > largestPage) {
paginationProps.current = largestPage; paginationProps.current = largestPage;
} }
const { class: cls, style, onShowSizeChange = () => {}, ...restProps } = paginationProps; const { class: cls, style, ...restProps } = paginationProps;
const paginationContent = pagination ? ( const paginationContent = pagination ? (
<div class={`${prefixCls}-pagination`}> <div class={`${prefixCls}-pagination`}>
<Pagination <Pagination
@ -199,7 +217,10 @@ const List = {
props: omit(restProps, ['onChange']), props: omit(restProps, ['onChange']),
class: cls, class: cls,
style, style,
on: { change: this.defaultPaginationProps.onChange, showSizeChange: onShowSizeChange }, on: {
change: this.onPaginationChange,
showSizeChange: this.onPaginationShowSizeChange,
},
}} }}
/> />
</div> </div>
@ -225,7 +246,11 @@ const List = {
}), }),
); );
childrenContent = grid ? <Row gutter={grid.gutter}>{childrenList}</Row> : childrenList; childrenContent = grid ? (
<Row gutter={grid.gutter}>{childrenList}</Row>
) : (
<ul class={`${prefixCls}-items`}>{childrenList}</ul>
);
} else if (!children.length && !isLoading) { } else if (!children.length && !isLoading) {
const renderEmpty = this.configProvider.renderEmpty; const renderEmpty = this.configProvider.renderEmpty;
childrenContent = this.renderEmpty(prefixCls, renderEmpty); childrenContent = this.renderEmpty(prefixCls, renderEmpty);

31
components/list/index.zh-CN.md
View File

@ -2,21 +2,22 @@
### List ### List
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | | bordered | 是否展示边框 | boolean | false | |
| footer | 列表底部 | string\|slot | - | | footer | 列表底部 | string\|slot | - | |
| grid | 列表栅格配置 | object | - | | grid | 列表栅格配置 | object | - | |
| header | 列表头部 | string\|slot | - | | header | 列表头部 | string\|slot | - | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | | itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://www.antdv.com/components/spin-cn/#API) | false | | loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://www.antdv.com/components/spin-cn/#API) | false | |
| loadMore | 加载更多 | string\|slot | - | | loadMore | 加载更多 | string\|slot | - | |
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | | locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | |
| pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#API), 设置 `false` 不显示 | boolean\|object | false | | pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#API), 设置 `false` 不显示 | boolean\|object | false | |
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` | | size | list 的尺寸 | `default` \| `middle` \| `small` | `default` | |
| split | 是否展示分割线 | boolean | true | | split | 是否展示分割线 | boolean | true | |
| renderItem | 自定义`Item`函数，也可使用 slot="renderItem" 和 slot-scope="item, index" | (item, index) => vNode | | - | | dataSource | 列表数据源 | any[] | - | 1.5.0 |
| rowKey | 各项 key 的取值，可以是字符串或一个函数 | item => string\|number | | | renderItem | 自定义`Item`函数，也可使用 slot="renderItem" 和 slot-scope="item, index" | (item, index) => vNode | | - | |
| rowKey | 各项 key 的取值，可以是字符串或一个函数 | item => string\|number | | |
### pagination ### pagination