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 = {
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() !== ''));
}
export function isStringElement(c) {
return !c.tag;
}
export function filterEmpty(children = []) {
return children.filter(c => !isEmptyElement(c));
}

115
components/list/Item.jsx
View File

@ -3,12 +3,14 @@ import classNames from 'classnames';
import {
getSlotOptions,
getComponentFromProp,
isEmptyElement,
isStringElement,
getListeners,
isEmptyElement,
} from '../_util/props-util';
import { Col } from '../grid';
import { ConfigConsumerProps } from '../config-provider';
import { ListGridType } from './index';
import { cloneElement } from '../_util/vnode';
export const ListItemProps = {
prefixCls: PropTypes.string,
@ -68,59 +70,68 @@ export default {
listContext: { default: () => ({}) },
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() {
const { grid } = this.listContext;
const { grid, itemLayout } = this.listContext;
const { prefixCls: customizePrefixCls, $slots } = this;
const listeners = getListeners(this);
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('list', customizePrefixCls);
const classString = `${prefixCls}-item`;
const extra = getComponentFromProp(this, 'extra');
const actions = getComponentFromProp(this, 'actions');
const metaContent = [];
const otherContent = [];
($slots.default || []).forEach(element => {
if (!isEmptyElement(element)) {
if (getSlotOptions(element).__ANT_LIST_ITEM_META) {
metaContent.push(element);
} else {
otherContent.push(element);
}
}
});
const actionsContent = actions && actions.length > 0 && (
<ul class={`${prefixCls}-item-action`} key="actions">
{actions.map((action, i) => (
<li key={`${prefixCls}-item-action-${i}`}>
{action}
{i !== actions.length - 1 && <em class={`${prefixCls}-item-action-split`} />}
</li>
))}
</ul>
);
const contentClassString = classNames(`${prefixCls}-item-content`, {
[`${prefixCls}-item-content-single`]: metaContent.length < 1,
});
const content =
otherContent.length > 0 ? <div class={contentClassString}>{otherContent}</div> : null;
let actionsContent;
if (actions && actions.length > 0) {
const actionsContentItem = (action, i) => (
<li key={`${prefixCls}-item-action-${i}`}>
{action}
{i !== actions.length - 1 && <em class={`${prefixCls}-item-action-split`} />}
</li>
);
actionsContent = (
<ul class={`${prefixCls}-item-action`}>
{actions.map((action, i) => actionsContentItem(action, i))}
</ul>
);
}
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 Tag = grid ? 'div' : 'li';
const itemChildren = (
<Tag
{...{ on: listeners }}
class={classNames(`${prefixCls}-item`, {
[`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
})}
>
{itemLayout === 'vertical' && extra
? [
<div class={`${prefixCls}-item-main`} key="content">
{$slots.default}
{actionsContent}
</div>,
<div class={`${prefixCls}-item-extra`} key="extra">
{extra}
</div>,
]
: [$slots.default, actionsContent, cloneElement(extra, { key: 'extra' })]}
</Tag>
);
const mainContent = grid ? (
@ -133,20 +144,10 @@ export default {
xl={getGrid(grid, 'xl')}
xxl={getGrid(grid, 'xxl')}
>
<div {...{ on: listeners }} class={classString}>
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
{itemChildren}
</Col>
) : (
<div {...{ on: listeners }} class={classString}>
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
itemChildren
);
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-spin-nested-loading">
<div class="ant-spin-container">
<div class="ant-list-item">
<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-content">
<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>
<ul class="ant-list-items">
<li class="ant-list-item">
<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-content">
<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>
<div class="ant-list-item">
<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-content">
<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>
</li>
<li class="ant-list-item">
<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-content">
<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>
</div>
</div>
</div>
<div class="ant-list-item">
<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-content">
<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>
</li>
<li class="ant-list-item">
<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-content">
<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>
</div>
</div>
</div>
<div class="ant-list-item">
<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-content">
<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>
</li>
<li class="ant-list-item">
<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-content">
<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>
</div>
</div>
</div>
</li>
</ul>
</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-container">
<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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-list-empty-text">
<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>
</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="ant-spin-nested-loading">
<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 class="ant-spin-container ant-spin-blur">
<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-container">
<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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</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-content ant-list-item-content-single">
<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 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 class="ant-card-body">Card content</div>
</div>
<div class="ant-card-body">Card content</div>
</div>
</div>
</div>
@ -262,21 +252,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
<div class="ant-spin-nested-loading">
<div class="ant-spin-container">
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div>
</div>
<div class="ant-list-item">
<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>
<ul class="ant-list-items">
<li class="ant-list-item">Racing car sprays burning fuel into crowd.</li>
<li class="ant-list-item">Japanese princess to wed commoner.</li>
<li class="ant-list-item">Australian walks 100km after outback crash.</li>
<li class="ant-list-item">Man charged over missing wedding girl.</li>
<li class="ant-list-item">Los Angeles battles huge wildfires.</li>
</ul>
</div>
</div>
<div class="ant-list-footer">
@ -290,21 +272,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
<div class="ant-spin-nested-loading">
<div class="ant-spin-container">
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div>
</div>
<div class="ant-list-item">
<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>
<ul class="ant-list-items">
<li class="ant-list-item">Racing car sprays burning fuel into crowd.</li>
<li class="ant-list-item">Japanese princess to wed commoner.</li>
<li class="ant-list-item">Australian walks 100km after outback crash.</li>
<li class="ant-list-item">Man charged over missing wedding girl.</li>
<li class="ant-list-item">Los Angeles battles huge wildfires.</li>
</ul>
</div>
</div>
<div class="ant-list-footer">
@ -318,21 +292,13 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
<div class="ant-spin-nested-loading">
<div class="ant-spin-container">
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Racing car sprays burning fuel into crowd.</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-content ant-list-item-content-single">Japanese princess to wed commoner.</div>
</div>
<div class="ant-list-item">
<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>
<ul class="ant-list-items">
<li class="ant-list-item">Racing car sprays burning fuel into crowd.</li>
<li class="ant-list-item">Japanese princess to wed commoner.</li>
<li class="ant-list-item">Australian walks 100km after outback crash.</li>
<li class="ant-list-item">Man charged over missing wedding girl.</li>
<li class="ant-list-item">Los Angeles battles huge wildfires.</li>
</ul>
</div>
</div>
<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-spin-nested-loading">
<div class="ant-spin-container">
<div class="ant-list-item">
<div class="ant-list-item-extra-wrap">
<ul class="ant-list-items">
<li class="ant-list-item">
<div class="ant-list-item-main">
<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>
@ -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>
</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.
</div>
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.
<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>
156
@ -372,10 +336,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</ul>
</div>
<div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div>
</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-extra-wrap">
</li>
<li class="ant-list-item">
<div class="ant-list-item-main">
<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>
@ -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>
</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.
</div>
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.
<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>
156
@ -400,10 +360,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</ul>
</div>
<div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div>
</div>
</div>
<div class="ant-list-item">
<div class="ant-list-item-extra-wrap">
</li>
<li class="ant-list-item">
<div class="ant-list-item-main">
<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>
@ -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>
</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.
</div>
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.
<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>
156
@ -428,8 +384,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</ul>
</div>
<div class="ant-list-item-extra"><img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
<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-list-empty-text">
<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>
</div>
</div>

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

@ -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(

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

@ -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' <br> |
| 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' <br> | |
| 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

39
components/list/index.jsx
View File

@ -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 ? (
<div class={`${prefixCls}-pagination`}>
<Pagination
@ -199,7 +217,10 @@ const List = {
props: omit(restProps, ['onChange']),
class: cls,
style,
on: { change: this.defaultPaginationProps.onChange, showSizeChange: onShowSizeChange },
on: {
change: this.onPaginationChange,
showSizeChange: this.onPaginationShowSizeChange,
},
}}
/>
</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) {
const renderEmpty = this.configProvider.renderEmpty;
childrenContent = this.renderEmpty(prefixCls, renderEmpty);

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

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