Add position config for List pagination (#10581)

components/list/__tests__/pagination.test.js

@@ -126,4 +126,15 @@ describe('List.pagination', () => {
         .hasClass('ant-pagination-item-active')
     ).toBe(true);
   });
+
+  it('specify the position of pagination', () => {
+    const wrapper = mount(createList({ pagination: { position: 'top' } }));
+    expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1);
+    wrapper.setProps({ pagination: { position: 'bottom' } });
+    expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1);
+    wrapper.setProps({ pagination: { position: 'both' } });
+    expect(wrapper.find('.ant-pagination')).toHaveLength(2);
+    expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1);
+    expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1);
+  });
 });

components/list/index.en-US.md

@@ -1,7 +1,7 @@
 ---
 category: Components
 type: Data Display
-title: List 
+title: List
 cols: 1
 ---
 
@@ -28,6 +28,16 @@ A list can be used to display content related to a single subject. The content c
 | pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false |
 | split | Toggles rendering of the split under the list item | boolean | true |
 
+### pagination
+
+Properties for pagination.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |
+
+More about pagination, please check [`Pagination`](/components/pagination/).
+
 ### List grid props
 
 | Property | Description | Type | Default |

components/list/index.tsx

@@ -6,7 +6,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 
 import Spin from '../spin';
-import Pagination from '../pagination';
+import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
 
 import Item from './Item';
@@ -49,7 +49,7 @@ export interface ListProps {
   itemLayout?: string;
   loading?: boolean | SpinProps;
   loadMore?: React.ReactNode;
-  pagination?: any;
+  pagination?: PaginationConfig;
   prefixCls?: string;
   rowKey?: any;
   renderItem: any;
@@ -200,8 +200,9 @@ export default class List extends React.Component<ListProps> {
       ...this.defaultPaginationProps,
       total: dataSource.length,
       current: paginationCurrent,
-      ...pagination,
+      ...pagination || {},
     };
+
     const largestPage = Math.ceil(
       paginationProps.total / paginationProps.pageSize,
     );
@@ -258,15 +259,18 @@ export default class List extends React.Component<ListProps> {
       );
     }
 
+    const paginationPosition = paginationProps.position || 'bottom';
+
     return (
       <div className={classString} {...rest}>
+        {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
         {header && <div className={`${prefixCls}-header`}>{header}</div>}
         <Spin {...loadingProp}>
           {childrenContent}
           {children}
         </Spin>
         {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
-        {loadMore || paginationContent}
+        {loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent}
       </div>
     );
   }

components/list/index.zh-CN.md

@@ -1,7 +1,7 @@
 ---
 category: Components
 type: Data Display
-title: List 
+title: List
 subtitle: 列表
 cols: 1
 ---
@@ -30,6 +30,16 @@ cols: 1
 | size | list 的尺寸 | `default` \| `middle` \| `small` | `default` |
 | split | 是否展示分割线 | boolean | true |
 
+### pagination
+
+分页的配置项。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' |
+
+更多配置项，请查看 [`Pagination`](/components/pagination/)。
+
 ### List grid props
 
 | 参数 | 说明 | 类型 | 默认值 |

components/pagination/Pagination.tsx

@@ -29,6 +29,10 @@ export interface PaginationProps {
   itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next') => React.ReactNode;
 }
 
+export interface PaginationConfig extends PaginationProps {
+  position?: 'top' | 'bottom' | 'both';
+}
+
 export type PaginationLocale = any;
 
 export default class Pagination extends React.Component<PaginationProps, {}> {

components/pagination/index.tsx

@@ -1,4 +1,4 @@
 import Pagination from './Pagination';
 
-export { PaginationProps } from './Pagination';
+export { PaginationProps, PaginationConfig } from './Pagination';
 export default Pagination;

components/table/Table.tsx

@@ -29,9 +29,9 @@ import {
   TableStateFilters,
   SelectionItemSelectFn,
   SelectionInfo,
-  TablePaginationConfig,
   TableSelectWay,
   TableRowSelection,
+  PaginationConfig,
 } from './interface';
 import { RadioChangeEvent } from '../radio';
 import { CheckboxChangeEvent } from '../checkbox';
@@ -156,7 +156,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
   }
 
   getDefaultPagination(props: TableProps<T>) {
-    const pagination: TablePaginationConfig = props.pagination || {};
+    const pagination: PaginationConfig = props.pagination || {};
     return this.hasPagination(props) ?
       {
         ...defaultPagination,

components/table/interface.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { PaginationProps } from '../pagination';
 import { SpinProps } from '../spin';
 import { Store } from './createStore';
 import { RadioChangeEvent } from '../radio';
 import { CheckboxChangeEvent } from '../checkbox';
+import { PaginationConfig } from '../pagination';
+export { PaginationConfig } from '../pagination';
 
 export type CompareFn<T> = ((a: T, b: T, sortOrder?: 'ascend' | 'descend') => number);
 export type ColumnFilterItem = { text: string; value: string, children?: ColumnFilterItem[] };
@@ -61,10 +62,6 @@ export interface TableLocale {
 export type RowSelectionType = 'checkbox' | 'radio';
 export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any;
 
-export interface TablePaginationConfig extends PaginationProps {
-  position?: 'top' | 'bottom' | 'both';
-}
-
 export type TableSelectWay = 'onSelect' | 'onSelectAll' | 'onSelectInvert';
 
 export interface TableRowSelection<T> {
@@ -85,7 +82,7 @@ export interface TableProps<T> {
   prefixCls?: string;
   dropdownPrefixCls?: string;
   rowSelection?: TableRowSelection<T>;
-  pagination?: TablePaginationConfig | false;
+  pagination?: PaginationConfig | false;
   size?: 'default' | 'middle' | 'small';
   dataSource?: T[];
   components?: TableComponents;
@@ -101,7 +98,7 @@ export interface TableProps<T> {
   expandRowByClick?: boolean;
   onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void;
   onExpand?: (expanded: boolean, record: T) => void;
-  onChange?: (pagination: TablePaginationConfig | boolean, filters: string[], sorter: Object) => any;
+  onChange?: (pagination: PaginationConfig | boolean, filters: string[], sorter: Object) => any;
   loading?: boolean | SpinProps;
   locale?: Object;
   indentSize?: number;
@@ -126,7 +123,7 @@ export interface TableStateFilters {
 }
 
 export interface TableState<T> {
-  pagination: TablePaginationConfig;
+  pagination: PaginationConfig;
   filters: TableStateFilters;
   sortColumn: ColumnProps<T> | null;
   sortOrder: 'ascend' | 'descend' | undefined;