feat: update list & pagination

.gitignore

@@ -69,3 +69,4 @@ package-lock.json
 
 # 备份文件
 /components/test/*
+list.txt

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`] = `
+<div class="ant-collapse">
+  <div role="tablist" class="ant-collapse-item">
+    <div role="button" tabindex="0" class="ant-collapse-header"><i class="anticon anticon-right ant-collapse-arrow"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+        </svg></i>header</div>
+    <!---->
+  </div>
+</div>
+`;

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');

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 <div class={`${this.prefixCls}-empty-text`}>{locale.emptyText}</div>;
+    renderEmpty(prefixCls, renderEmpty) {
+      const locale = this;
+      return (
+        <div class={`${prefixCls}-empty-text`}>
+        {(locale && locale.emptyText) || renderEmpty(h, 'List')}
+        </div>
+      );
     },
   },
 
   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 ? <Row gutter={grid.gutter}>{childrenList}</Row> : childrenList;
     } else if (!children.length && !isLoading) {
-      childrenContent = (
-        <LocaleReceiver
-          componentName="Table"
-          defaultLocale={defaultLocale.Table}
-          scopedSlots={{ default: this.renderEmpty }}
-        />
-      );
+      const renderEmpty = (
+        this.configProvider.renderEmpty &&
+        this.configProvider.renderEmpty()
+      ) || ConfigConsumerProps.renderEmpty;
+      childrenContent = this.renderEmpty(prefixCls, renderEmpty);
     }
     const paginationPosition = paginationProps.position || 'bottom';
 

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';

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 = (
         <a class={`${prefixCls}-item-link`}>
           <Icon type="left" />
@@ -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,

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) | - |

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) | - |