From 59fe98a1944097c500116e3f1283a68095269b5a Mon Sep 17 00:00:00 2001 From: Zheeeng Date: Mon, 21 May 2018 21:52:18 +0800 Subject: [PATCH] Add position config for List pagination (#10581) --- components/list/__tests__/pagination.test.js | 11 +++++++++++ components/list/index.en-US.md | 12 +++++++++++- components/list/index.tsx | 12 ++++++++---- components/list/index.zh-CN.md | 12 +++++++++++- components/pagination/Pagination.tsx | 4 ++++ components/pagination/index.tsx | 2 +- components/table/Table.tsx | 4 ++-- components/table/interface.tsx | 13 +++++-------- 8 files changed, 53 insertions(+), 17 deletions(-) diff --git a/components/list/__tests__/pagination.test.js b/components/list/__tests__/pagination.test.js index 2858e2baee..cf10379e9b 100644 --- a/components/list/__tests__/pagination.test.js +++ b/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); + }); }); diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index ae94067219..32dd7c1c38 100644 --- a/components/list/index.en-US.md +++ b/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 | diff --git a/components/list/index.tsx b/components/list/index.tsx index 947bf45b71..93d36303ed 100644 --- a/components/list/index.tsx +++ b/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 { ...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 { ); } + const paginationPosition = paginationProps.position || 'bottom'; + return (
+ {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent} {header &&
{header}
} {childrenContent} {children} {footer &&
{footer}
} - {loadMore || paginationContent} + {loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent}
); } diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index 1241c322c0..257294c176 100644 --- a/components/list/index.zh-CN.md +++ b/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 | 参数 | 说明 | 类型 | 默认值 | diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 916efcd30f..b72ea0fe94 100644 --- a/components/pagination/Pagination.tsx +++ b/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 { diff --git a/components/pagination/index.tsx b/components/pagination/index.tsx index 864565605a..73955965bc 100644 --- a/components/pagination/index.tsx +++ b/components/pagination/index.tsx @@ -1,4 +1,4 @@ import Pagination from './Pagination'; -export { PaginationProps } from './Pagination'; +export { PaginationProps, PaginationConfig } from './Pagination'; export default Pagination; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index b1c322dccd..f0367a3524 100755 --- a/components/table/Table.tsx +++ b/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 extends React.Component, TableState< } getDefaultPagination(props: TableProps) { - const pagination: TablePaginationConfig = props.pagination || {}; + const pagination: PaginationConfig = props.pagination || {}; return this.hasPagination(props) ? { ...defaultPagination, diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 26509c9286..c54de95696 100644 --- a/components/table/interface.tsx +++ b/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 = ((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 = (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 { @@ -85,7 +82,7 @@ export interface TableProps { prefixCls?: string; dropdownPrefixCls?: string; rowSelection?: TableRowSelection; - pagination?: TablePaginationConfig | false; + pagination?: PaginationConfig | false; size?: 'default' | 'middle' | 'small'; dataSource?: T[]; components?: TableComponents; @@ -101,7 +98,7 @@ export interface TableProps { 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 { - pagination: TablePaginationConfig; + pagination: PaginationConfig; filters: TableStateFilters; sortColumn: ColumnProps | null; sortOrder: 'ascend' | 'descend' | undefined;