365 lines
12 KiB
Java
365 lines
12 KiB
Java
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.ListProps = exports.ListSize = exports.ListGridType = exports.ColumnType = exports.ColumnCount = exports.ListItemMetaProps = exports.ListItemProps = undefined;
|
||
|
|
|
||
|
|
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
|
||
|
|
|
||
|
|
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
|
||
|
|
|
||
|
|
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
|
||
|
|
|
||
|
|
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
|
||
|
|
|
||
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
||
|
|
|
||
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
||
|
|
|
||
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
||
|
|
|
||
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
||
|
|
|
||
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
||
|
|
|
||
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
||
|
|
|
||
|
|
var _typeof2 = require('babel-runtime/helpers/typeof');
|
||
|
|
|
||
|
|
var _typeof3 = _interopRequireDefault(_typeof2);
|
||
|
|
|
||
|
|
var _Item = require('./Item');
|
||
|
|
|
||
|
|
Object.defineProperty(exports, 'ListItemProps', {
|
||
|
|
enumerable: true,
|
||
|
|
get: function get() {
|
||
|
|
return _Item.ListItemProps;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
Object.defineProperty(exports, 'ListItemMetaProps', {
|
||
|
|
enumerable: true,
|
||
|
|
get: function get() {
|
||
|
|
return _Item.ListItemMetaProps;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var _vueTypes = require('../_util/vue-types');
|
||
|
|
|
||
|
|
var _vueTypes2 = _interopRequireDefault(_vueTypes);
|
||
|
|
|
||
|
|
var _classnames = require('classnames');
|
||
|
|
|
||
|
|
var _classnames2 = _interopRequireDefault(_classnames);
|
||
|
|
|
||
|
|
var _omit = require('omit.js');
|
||
|
|
|
||
|
|
var _omit2 = _interopRequireDefault(_omit);
|
||
|
|
|
||
|
|
var _configConsumerProps = require('../config-provider/configConsumerProps');
|
||
|
|
|
||
|
|
var _spin = require('../spin');
|
||
|
|
|
||
|
|
var _spin2 = _interopRequireDefault(_spin);
|
||
|
|
|
||
|
|
var _pagination = require('../pagination');
|
||
|
|
|
||
|
|
var _pagination2 = _interopRequireDefault(_pagination);
|
||
|
|
|
||
|
|
var _grid = require('../grid');
|
||
|
|
|
||
|
|
var _Item2 = _interopRequireDefault(_Item);
|
||
|
|
|
||
|
|
var _propsUtil = require('../_util/props-util');
|
||
|
|
|
||
|
|
var _vnode = require('../_util/vnode');
|
||
|
|
|
||
|
|
var _base = require('../base');
|
||
|
|
|
||
|
|
var _base2 = _interopRequireDefault(_base);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||
|
|
|
||
|
|
var ColumnCount = exports.ColumnCount = ['', 1, 2, 3, 4, 6, 8, 12, 24];
|
||
|
|
|
||
|
|
var ColumnType = exports.ColumnType = ['gutter', 'column', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
||
|
|
|
||
|
|
var ListGridType = exports.ListGridType = {
|
||
|
|
gutter: _vueTypes2['default'].number,
|
||
|
|
column: _vueTypes2['default'].oneOf(ColumnCount),
|
||
|
|
xs: _vueTypes2['default'].oneOf(ColumnCount),
|
||
|
|
sm: _vueTypes2['default'].oneOf(ColumnCount),
|
||
|
|
md: _vueTypes2['default'].oneOf(ColumnCount),
|
||
|
|
lg: _vueTypes2['default'].oneOf(ColumnCount),
|
||
|
|
xl: _vueTypes2['default'].oneOf(ColumnCount),
|
||
|
|
xxl: _vueTypes2['default'].oneOf(ColumnCount)
|
||
|
|
};
|
||
|
|
|
||
|
|
var ListSize = exports.ListSize = ['small', 'default', 'large'];
|
||
|
|
|
||
|
|
var ListProps = exports.ListProps = function ListProps() {
|
||
|
|
return {
|
||
|
|
bordered: _vueTypes2['default'].bool,
|
||
|
|
dataSource: _vueTypes2['default'].array,
|
||
|
|
extra: _vueTypes2['default'].any,
|
||
|
|
grid: _vueTypes2['default'].shape(ListGridType).loose,
|
||
|
|
itemLayout: _vueTypes2['default'].string,
|
||
|
|
loading: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
|
||
|
|
loadMore: _vueTypes2['default'].any,
|
||
|
|
pagination: _vueTypes2['default'].oneOfType([_vueTypes2['default'].shape((0, _pagination.PaginationConfig)()).loose, _vueTypes2['default'].bool]),
|
||
|
|
prefixCls: _vueTypes2['default'].string,
|
||
|
|
rowKey: _vueTypes2['default'].any,
|
||
|
|
renderItem: _vueTypes2['default'].any,
|
||
|
|
size: _vueTypes2['default'].oneOf(ListSize),
|
||
|
|
split: _vueTypes2['default'].bool,
|
||
|
|
header: _vueTypes2['default'].any,
|
||
|
|
footer: _vueTypes2['default'].any,
|
||
|
|
locale: _vueTypes2['default'].object
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
var List = {
|
||
|
|
Item: _Item2['default'],
|
||
|
|
name: 'AList',
|
||
|
|
props: (0, _propsUtil.initDefaultProps)(ListProps(), {
|
||
|
|
dataSource: [],
|
||
|
|
bordered: false,
|
||
|
|
split: true,
|
||
|
|
loading: false,
|
||
|
|
pagination: false
|
||
|
|
}),
|
||
|
|
provide: function provide() {
|
||
|
|
return {
|
||
|
|
listContext: this
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
inject: {
|
||
|
|
configProvider: { 'default': function _default() {
|
||
|
|
return _configConsumerProps.ConfigConsumerProps;
|
||
|
|
} }
|
||
|
|
},
|
||
|
|
data: function data() {
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
this.keys = [];
|
||
|
|
this.defaultPaginationProps = {
|
||
|
|
current: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
onChange: function onChange(page, pageSize) {
|
||
|
|
var pagination = _this.pagination;
|
||
|
|
|
||
|
|
_this.paginationCurrent = page;
|
||
|
|
if (pagination && pagination.onChange) {
|
||
|
|
pagination.onChange(page, pageSize);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
total: 0
|
||
|
|
};
|
||
|
|
this.onPaginationChange = this.triggerPaginationEvent('onChange');
|
||
|
|
this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
|
||
|
|
var pagination = this.$props.pagination;
|
||
|
|
|
||
|
|
var paginationObj = pagination && (typeof pagination === 'undefined' ? 'undefined' : (0, _typeof3['default'])(pagination)) === 'object' ? pagination : {};
|
||
|
|
return {
|
||
|
|
paginationCurrent: paginationObj.defaultCurrent || 1,
|
||
|
|
paginationSize: paginationObj.defaultPageSize || 10
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
triggerPaginationEvent: function triggerPaginationEvent(eventName) {
|
||
|
|
var _this2 = this;
|
||
|
|
|
||
|
|
return function (page, pageSize) {
|
||
|
|
var pagination = _this2.$props.pagination;
|
||
|
|
|
||
|
|
_this2.paginationCurrent = page;
|
||
|
|
_this2.paginationSize = pageSize;
|
||
|
|
if (pagination && pagination[eventName]) {
|
||
|
|
pagination[eventName](page, pageSize);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
renderItem2: function renderItem2(item, index) {
|
||
|
|
var $scopedSlots = this.$scopedSlots,
|
||
|
|
rowKey = this.rowKey;
|
||
|
|
|
||
|
|
var renderItem = this.renderItem || $scopedSlots.renderItem;
|
||
|
|
if (!renderItem) return null;
|
||
|
|
var key = void 0;
|
||
|
|
if (typeof rowKey === 'function') {
|
||
|
|
key = rowKey(item);
|
||
|
|
} else if (typeof rowKey === 'string') {
|
||
|
|
key = item[rowKey];
|
||
|
|
} else {
|
||
|
|
key = item.key;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!key) {
|
||
|
|
key = 'list-item-' + index;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.keys[index] = key;
|
||
|
|
|
||
|
|
return renderItem(item, index);
|
||
|
|
},
|
||
|
|
isSomethingAfterLastItem: function isSomethingAfterLastItem() {
|
||
|
|
var pagination = this.pagination;
|
||
|
|
|
||
|
|
var loadMore = (0, _propsUtil.getComponentFromProp)(this, 'loadMore');
|
||
|
|
var footer = (0, _propsUtil.getComponentFromProp)(this, 'footer');
|
||
|
|
return !!(loadMore || pagination || footer);
|
||
|
|
},
|
||
|
|
renderEmpty: function renderEmpty(prefixCls, _renderEmpty) {
|
||
|
|
var h = this.$createElement;
|
||
|
|
var locale = this.locale;
|
||
|
|
|
||
|
|
return h(
|
||
|
|
'div',
|
||
|
|
{ 'class': prefixCls + '-empty-text' },
|
||
|
|
[locale && locale.emptyText || _renderEmpty(h, 'List')]
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function render() {
|
||
|
|
var _classNames,
|
||
|
|
_this3 = this;
|
||
|
|
|
||
|
|
var h = arguments[0];
|
||
|
|
var customizePrefixCls = this.prefixCls,
|
||
|
|
bordered = this.bordered,
|
||
|
|
split = this.split,
|
||
|
|
itemLayout = this.itemLayout,
|
||
|
|
pagination = this.pagination,
|
||
|
|
grid = this.grid,
|
||
|
|
_dataSource = this.dataSource,
|
||
|
|
dataSource = _dataSource === undefined ? [] : _dataSource,
|
||
|
|
size = this.size,
|
||
|
|
loading = this.loading,
|
||
|
|
$slots = this.$slots,
|
||
|
|
paginationCurrent = this.paginationCurrent,
|
||
|
|
paginationSize = this.paginationSize;
|
||
|
|
|
||
|
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
||
|
|
var prefixCls = getPrefixCls('list', customizePrefixCls);
|
||
|
|
|
||
|
|
var loadMore = (0, _propsUtil.getComponentFromProp)(this, 'loadMore');
|
||
|
|
var footer = (0, _propsUtil.getComponentFromProp)(this, 'footer');
|
||
|
|
var header = (0, _propsUtil.getComponentFromProp)(this, 'header');
|
||
|
|
var children = (0, _propsUtil.filterEmpty)($slots['default'] || []);
|
||
|
|
var loadingProp = loading;
|
||
|
|
if (typeof loadingProp === 'boolean') {
|
||
|
|
loadingProp = {
|
||
|
|
spinning: loadingProp
|
||
|
|
};
|
||
|
|
}
|
||
|
|
var isLoading = loadingProp && loadingProp.spinning;
|
||
|
|
|
||
|
|
// large => lg
|
||
|
|
// small => sm
|
||
|
|
var sizeCls = '';
|
||
|
|
switch (size) {
|
||
|
|
case 'large':
|
||
|
|
sizeCls = 'lg';
|
||
|
|
break;
|
||
|
|
case 'small':
|
||
|
|
sizeCls = 'sm';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var classString = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-vertical', itemLayout === 'vertical'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + sizeCls, sizeCls), (0, _defineProperty3['default'])(_classNames, prefixCls + '-split', split), (0, _defineProperty3['default'])(_classNames, prefixCls + '-bordered', bordered), (0, _defineProperty3['default'])(_classNames, prefixCls + '-loading', isLoading), (0, _defineProperty3['default'])(_classNames, prefixCls + '-grid', grid), (0, _defineProperty3['default'])(_classNames, prefixCls + '-something-after-last-item', this.isSomethingAfterLastItem()), _classNames));
|
||
|
|
var paginationProps = (0, _extends3['default'])({}, this.defaultPaginationProps, {
|
||
|
|
total: dataSource.length,
|
||
|
|
current: paginationCurrent,
|
||
|
|
pageSize: paginationSize
|
||
|
|
}, pagination || {});
|
||
|
|
var largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
|
||
|
|
if (paginationProps.current > largestPage) {
|
||
|
|
paginationProps.current = largestPage;
|
||
|
|
}
|
||
|
|
var cls = paginationProps['class'],
|
||
|
|
style = paginationProps.style,
|
||
|
|
restProps = (0, _objectWithoutProperties3['default'])(paginationProps, ['class', 'style']);
|
||
|
|
|
||
|
|
var paginationContent = pagination ? h(
|
||
|
|
'div',
|
||
|
|
{ 'class': prefixCls + '-pagination' },
|
||
|
|
[h(_pagination2['default'], {
|
||
|
|
props: (0, _omit2['default'])(restProps, ['onChange']),
|
||
|
|
'class': cls,
|
||
|
|
style: style,
|
||
|
|
on: {
|
||
|
|
change: this.onPaginationChange,
|
||
|
|
showSizeChange: this.onPaginationShowSizeChange
|
||
|
|
}
|
||
|
|
})]
|
||
|
|
) : null;
|
||
|
|
|
||
|
|
var splitDataSource = [].concat((0, _toConsumableArray3['default'])(dataSource));
|
||
|
|
if (pagination) {
|
||
|
|
if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
|
||
|
|
splitDataSource = [].concat((0, _toConsumableArray3['default'])(dataSource)).splice((paginationProps.current - 1) * paginationProps.pageSize, paginationProps.pageSize);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var childrenContent = void 0;
|
||
|
|
childrenContent = isLoading && h('div', { style: { minHeight: 53 } });
|
||
|
|
if (splitDataSource.length > 0) {
|
||
|
|
var items = splitDataSource.map(function (item, index) {
|
||
|
|
return _this3.renderItem2(item, index);
|
||
|
|
});
|
||
|
|
var childrenList = items.map(function (child, index) {
|
||
|
|
return (0, _vnode.cloneElement)(child, {
|
||
|
|
key: _this3.keys[index]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
childrenContent = grid ? h(
|
||
|
|
_grid.Row,
|
||
|
|
{
|
||
|
|
attrs: { gutter: grid.gutter }
|
||
|
|
},
|
||
|
|
[childrenList]
|
||
|
|
) : h(
|
||
|
|
'ul',
|
||
|
|
{ 'class': prefixCls + '-items' },
|
||
|
|
[childrenList]
|
||
|
|
);
|
||
|
|
} else if (!children.length && !isLoading) {
|
||
|
|
var renderEmpty = this.configProvider.renderEmpty;
|
||
|
|
childrenContent = this.renderEmpty(prefixCls, renderEmpty);
|
||
|
|
}
|
||
|
|
var paginationPosition = paginationProps.position || 'bottom';
|
||
|
|
|
||
|
|
return h(
|
||
|
|
'div',
|
||
|
|
(0, _babelHelperVueJsxMergeProps2['default'])([{ 'class': classString }, { on: (0, _propsUtil.getListeners)(this) }]),
|
||
|
|
[(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent, header && h(
|
||
|
|
'div',
|
||
|
|
{ 'class': prefixCls + '-header' },
|
||
|
|
[header]
|
||
|
|
), h(
|
||
|
|
_spin2['default'],
|
||
|
|
{ props: loadingProp },
|
||
|
|
[childrenContent, children]
|
||
|
|
), footer && h(
|
||
|
|
'div',
|
||
|
|
{ 'class': prefixCls + '-footer' },
|
||
|
|
[footer]
|
||
|
|
), loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent]
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/* istanbul ignore next */
|
||
|
|
List.install = function (Vue) {
|
||
|
|
Vue.use(_base2['default']);
|
||
|
|
Vue.component(List.name, List);
|
||
|
|
Vue.component(List.Item.name, List.Item);
|
||
|
|
Vue.component(List.Item.Meta.name, List.Item.Meta);
|
||
|
|
};
|
||
|
|
|
||
|
|
exports['default'] = List;
|