From 69f5487fd152185a09fcdc2a1dee4bb3b9490d37 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Tue, 19 Mar 2019 10:02:14 +0800 Subject: [PATCH] feat: update list & pagination --- .gitignore | 1 + .../__snapshots__/index.test.js.snap | 12 ++++++ components/list/Item.jsx | 19 +++++++-- components/list/index.jsx | 40 +++++++++++-------- components/list/style/index.js | 1 + components/pagination/Pagination.jsx | 26 +++++++++--- components/pagination/index.en-US.md | 2 +- components/pagination/index.zh-CN.md | 2 +- 8 files changed, 75 insertions(+), 28 deletions(-) create mode 100644 components/collapse/__tests__/__snapshots__/index.test.js.snap diff --git a/.gitignore b/.gitignore index d58ce6544..c3526b6bf 100644 --- a/.gitignore +++ b/.gitignore @@ -69,3 +69,4 @@ package-lock.json # 备份文件 /components/test/* +list.txt diff --git a/components/collapse/__tests__/__snapshots__/index.test.js.snap b/components/collapse/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..539bab00b --- /dev/null +++ b/components/collapse/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Collapse should support remove expandIcon 1`] = ` +
+
+
header
+ +
+
+`; diff --git a/components/list/Item.jsx b/components/list/Item.jsx index c72962032..a828a3727 100644 --- a/components/list/Item.jsx +++ b/components/list/Item.jsx @@ -2,8 +2,10 @@ import PropTypes from '../_util/vue-types'; import classNames from 'classnames'; import { getSlotOptions, getComponentFromProp, isEmptyElement } from '../_util/props-util'; import { Col } from '../grid'; +import { ConfigConsumerProps } from '../config-provider'; import { ListGridType } from './index'; + export const ListItemProps = { prefixCls: PropTypes.string, extra: PropTypes.any, @@ -22,10 +24,16 @@ export const Meta = { functional: true, name: 'AListItemMeta', __ANT_LIST_ITEM_META: true, + inject: { + configProvider: { default: () => ({}) }, + }, render(h, context) { - const { props, slots, listeners } = context; + const { props, slots, listeners, injections } = context; const slotsMap = slots(); - const { prefixCls = 'ant-list' } = props; + const getPrefixCls = injections.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const { prefixCls: customizePrefixCls } = props; + const prefixCls = getPrefixCls('list', customizePrefixCls); + const avatar = props.avatar || slotsMap.avatar; const title = props.title || slotsMap.title; const description = props.description || slotsMap.description; @@ -54,11 +62,14 @@ export default { props: ListItemProps, inject: { listContext: { default: () => ({}) }, + configProvider: { default: () =>({}) }, }, - render() { const { grid } = this.listContext; - const { prefixCls = 'ant-list', $slots, $listeners } = this; + const { prefixCls: customizePrefixCls, $slots, $listeners } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('list', customizePrefixCls); + const classString = `${prefixCls}-item`; const extra = getComponentFromProp(this, 'extra'); const actions = getComponentFromProp(this, 'actions'); diff --git a/components/list/index.jsx b/components/list/index.jsx index ab94b8b23..bb3d7dc1d 100644 --- a/components/list/index.jsx +++ b/components/list/index.jsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import omit from 'omit.js'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale-provider/default'; +import { ConfigConsumerProps } from '../config-provider'; import Spin from '../spin'; import Pagination, { PaginationConfig } from '../pagination'; @@ -55,7 +56,6 @@ const List = { name: 'AList', props: initDefaultProps(ListProps(), { dataSource: [], - prefixCls: 'ant-list', bordered: false, split: true, loading: false, @@ -66,6 +66,9 @@ const List = { listContext: this, }; }, + inject: { + configProvider: { default: () => ({}) }, + }, data() { this.keys = []; this.defaultPaginationProps = { @@ -86,15 +89,15 @@ const List = { }, methods: { renderItem2(item, index) { - const { dataSource, $scopedSlots, rowKey } = this; + const { $scopedSlots, rowKey } = this; let key; const renderItem = this.renderItem || $scopedSlots.renderItem; if (typeof rowKey === 'function') { - key = rowKey(dataSource[index]); + key = rowKey(item); } else if (typeof rowKey === 'string') { - key = dataSource[rowKey]; + key = item[rowKey]; } else { - key = dataSource.key; + key = item.key; } if (!key) { @@ -113,19 +116,23 @@ const List = { return !!(loadMore || pagination || footer); }, - renderEmpty(contextLocale) { - const locale = { ...contextLocale, ...this.locale }; - return
{locale.emptyText}
; + renderEmpty(prefixCls, renderEmpty) { + const locale = this; + return ( +
+ {(locale && locale.emptyText) || renderEmpty(h, 'List')} +
+ ); }, }, render() { const { + prefixCls: customizePrefixCls, bordered, split, itemLayout, pagination, - prefixCls, grid, dataSource, size, @@ -134,6 +141,9 @@ const List = { $slots, paginationCurrent, } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('list', customizePrefixCls); + const loadMore = getComponentFromProp(this, 'loadMore'); const footer = getComponentFromProp(this, 'footer'); const header = getComponentFromProp(this, 'header'); @@ -214,13 +224,11 @@ const List = { childrenContent = grid ? {childrenList} : childrenList; } else if (!children.length && !isLoading) { - childrenContent = ( - - ); + const renderEmpty = ( + this.configProvider.renderEmpty && + this.configProvider.renderEmpty() + ) || ConfigConsumerProps.renderEmpty; + childrenContent = this.renderEmpty(prefixCls, renderEmpty); } const paginationPosition = paginationProps.position || 'bottom'; diff --git a/components/list/style/index.js b/components/list/style/index.js index 0ccbb22c9..294babf36 100644 --- a/components/list/style/index.js +++ b/components/list/style/index.js @@ -2,6 +2,7 @@ import '../../style/index.less'; import './index.less'; // style dependencies +import '../../empty/style'; import '../../spin/style'; import '../../pagination/style'; import '../../grid/style'; diff --git a/components/pagination/Pagination.jsx b/components/pagination/Pagination.jsx index c6891726a..5fde3fd08 100644 --- a/components/pagination/Pagination.jsx +++ b/components/pagination/Pagination.jsx @@ -5,6 +5,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { getOptionProps } from '../_util/props-util'; import VcPagination from '../vc-pagination'; import Icon from '../icon'; +import { ConfigConsumerProps } from '../config-provider'; export const PaginationProps = () => ({ total: PropTypes.number, @@ -41,12 +42,12 @@ export default { }, props: { ...PaginationProps(), - prefixCls: PropTypes.string.def('ant-pagination'), - selectPrefixCls: PropTypes.string.def('ant-select'), + }, + inject: { + configProvider: { default: () => ({}) }, }, methods: { - getIconsProps() { - const { prefixCls } = this.$props; + getIconsProps(prefixCls) { const prevIcon = ( @@ -83,12 +84,25 @@ export default { }; }, renderPagination(contextLocale) { - const { buildOptionText, size, locale: customLocale, ...restProps } = getOptionProps(this); + const { + prefixCls: customizePrefixCls, + selectPrefixCls: customizeSelectPrefixCls, + buildOptionText, + size, + locale: customLocale, + ...restProps + } = getOptionProps(this); + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('pagination', customizePrefixCls); + const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls); + const isSmall = size === 'small'; const paginationProps = { props: { + prefixCls, + selectPrefixCls, ...restProps, - ...this.getIconsProps(), + ...this.getIconsProps(prefixCls), selectComponentClass: isSmall ? MiniSelect : VcSelect, locale: { ...contextLocale, ...customLocale }, buildOptionText: buildOptionText || this.$scopedSlots.buildOptionText, diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md index 948bffec5..e7eebf5eb 100644 --- a/components/pagination/index.en-US.md +++ b/components/pagination/index.en-US.md @@ -12,7 +12,7 @@ | hideOnSinglePage | Whether to hide pager on single page | boolean | false | | itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - | | pageSize(.sync) | number of data items per page | number | - | -| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] | +| pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] | | showQuickJumper | determine whether you can jump to pages directly | boolean | false | | showSizeChanger | determine whether `pageSize` can be changed | boolean | false | | showTotal | to display the total number and range | Function(total, range) | - | diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index b24d34b04..e1f9d5f67 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -12,7 +12,7 @@ | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | | itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - | | pageSize(.sync) | 每页条数 | number | - | -| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] | +| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '30', '40'] | | showQuickJumper | 是否可以快速跳转至某页 | boolean | false | | showSizeChanger | 是否可以改变 pageSize | boolean | false | | showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |