From 873a7b431956dc431d1a091981f4ac176078e9b7 Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Thu, 28 Mar 2019 16:39:47 +0800 Subject: [PATCH 1/2] feat: support pagination type in Table and Grid (#1042) --- packages/zent/src/grid/Footer.tsx | 32 ++++++-- packages/zent/src/grid/Grid.tsx | 21 ++++-- packages/zent/src/grid/README_en-US.md | 73 ++++++++++--------- packages/zent/src/grid/README_zh-CN.md | 73 ++++++++++--------- packages/zent/src/grid/demos/selection.md | 1 + packages/zent/src/table/Table.tsx | 27 ++++--- packages/zent/src/table/demos/batch.md | 2 +- .../zent/src/table/demos/indeterminate.md | 2 +- packages/zent/src/table/demos/selection.md | 3 +- packages/zent/src/table/modules/Foot.tsx | 39 +++++++++- 10 files changed, 172 insertions(+), 101 deletions(-) diff --git a/packages/zent/src/grid/Footer.tsx b/packages/zent/src/grid/Footer.tsx index b8d9271aff..65b5955d58 100644 --- a/packages/zent/src/grid/Footer.tsx +++ b/packages/zent/src/grid/Footer.tsx @@ -3,19 +3,31 @@ import { PureComponent } from 'react'; import classnames from 'classnames'; import size from 'lodash-es/size'; import Pagination from '../pagination'; +import LitePagination from '../pagination/LitePagination'; +import { IGridPageInfo, GridPaginationType } from './Grid'; +import { IGridOnChangeConfig } from './types'; +import { PaginationChangeHandler } from '../pagination/impl/BasePagination'; const defaultPageInfo = { current: 1, pageSize: 10, }; -class Footer extends PureComponent { - hasPagination(props) { +export interface IGridFooterProps { + prefix: string; + pageInfo: IGridPageInfo; + paginationType: GridPaginationType; + onChange: (conf: IGridOnChangeConfig) => any; + onPaginationChange: (pageSize: number, current: number) => any; +} + +class Footer extends PureComponent { + hasPagination(props: IGridFooterProps) { const { pageInfo } = props || this.props; return pageInfo && size(pageInfo); } - getDefaultPagination(props?: any) { + getDefaultPagination(props?: IGridFooterProps) { const { pageInfo } = props || this.props; return this.hasPagination(props) @@ -27,20 +39,28 @@ class Footer extends PureComponent { : null; } - handlePageChange = ({ pageSize, current }) => { + handlePageChange: PaginationChangeHandler = ({ pageSize, current }) => { const { onPaginationChange } = this.props; onPaginationChange && onPaginationChange(pageSize, current); }; render() { - const { prefix } = this.props; + const { prefix, paginationType } = this.props; const curPageInfo = this.getDefaultPagination(); if (curPageInfo) { return (
- + {paginationType === 'default' && ( + + )} + {paginationType === 'lite' && ( + + )}
); diff --git a/packages/zent/src/grid/Grid.tsx b/packages/zent/src/grid/Grid.tsx index 7b5d439302..be80f9b7c3 100644 --- a/packages/zent/src/grid/Grid.tsx +++ b/packages/zent/src/grid/Grid.tsx @@ -44,6 +44,15 @@ function stopPropagation(e) { } } +export type GridPaginationType = 'default' | 'lite'; + +export interface IGridPageInfo { + current?: number; + total?: number; + pageSize?: number; + pageSizeOptions?: PaginationPageSizeOption[]; +} + export interface IGridProps { columns: IGridColumn[]; datasets: Array<{}>; @@ -74,12 +83,8 @@ export interface IGridProps { className?: string; rowClassName?: GridRowClassNameType; prefix?: string; - pageInfo?: { - current?: number; - total?: number; - pageSize?: number; - pageSizeOptions?: PaginationPageSizeOption[]; - }; + pageInfo?: IGridPageInfo; + paginationType?: GridPaginationType; onRowClick?: ( data: any, index: number, @@ -107,6 +112,7 @@ export class Grid extends PureComponent { columns: [], loading: false, pageInfo: false, + paginationType: 'default', onChange: noop, expandation: null, selection: null, @@ -801,7 +807,7 @@ export class Grid extends PureComponent { } render() { - const { prefix, loading, pageInfo, bordered } = this.props; + const { prefix, loading, pageInfo, paginationType, bordered } = this.props; let className = `${prefix}-grid`; const borderedClassName = bordered ? `${prefix}-grid-bordered` : ''; className = classnames(className, this.props.className, borderedClassName); @@ -829,6 +835,7 @@ export class Grid extends PureComponent { key="footer" prefix={prefix} pageInfo={pageInfo} + paginationType={paginationType} onChange={this.onChange} onPaginationChange={this.onPaginationChange} />, diff --git a/packages/zent/src/grid/README_en-US.md b/packages/zent/src/grid/README_en-US.md index 29d468634c..4ee7f39942 100644 --- a/packages/zent/src/grid/README_en-US.md +++ b/packages/zent/src/grid/README_en-US.md @@ -10,29 +10,30 @@ The function of the component is similar to the function of [Table](table) compo ### API -| Property | Descripition | Type | Default | Required | -| ------------ | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------- | -------- | -| columns | columns | array | | Yes | -| datasets | data to be displayed | array | | Yes | -| rowKey | key for each row | string | `id` | No | -| onChange | callback fires when columns change, filtering and sorting included | (conf: any) => any | `noop` | No | -| scroll | can be scrolled in x/y direction, x or y can be a number that indicates the width and height of table body | { x?: number, y?: number } | | No | -| sortBy | the field which rows are sorted accoring to, should be one of keys for columns | string | '' | No | -| sortType | The way to sort | string | '' | No | -| emptyLabel | Text to be displayed when there's no data | string | `'No data'` | No | -| selection | the configuration for selection | object | | No | -| expandation | Expand configuration | object | | | no | -| loading | determines whether data is being loaded or not | bool | `false` | No | -| className | extra custom class name | string | `''` | No | -| rowClassName | class name for row | string \| (data: object, rowIndex: number) => string | '' | No | -| prefix | custom prefix | string | `'zent'` | No | -| pageInfo | pagination information | object | null | No | -| onRowClick | callback fires when a row is clicked | (data: any, index: number, event: Event) => any | | No | -| ellipsis | whether ellipsis should be displayed when content overflows (nowrap of columns needs to be set) | bool | false | No | -| onExpand | callback fires when the row expand icon is clicked | (data: {expanded: boolean, data: any, event: Event, index: number}) => any | | No | -| components | custom table element | object { row?: ReactNode } | | No| -| rowProps | custom row props | (data: any, index: number) => object | | No | -| bordered | whether to display the outer border and column border | bool | `false` | No | +| Property | Descripition | Type | Default | Required | +| -------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -------- | +| columns | columns | array | | Yes | +| datasets | data to be displayed | array | | Yes | +| rowKey | key for each row | string | `id` | No | +| onChange | callback fires when columns change, filtering and sorting included | (conf: any) => any | `noop` | No | +| scroll | can be scrolled in x/y direction, x or y can be a number that indicates the width and height of table body | { x?: number, y?: number } | | No | +| sortBy | the field which rows are sorted accoring to, should be one of keys for columns | string | '' | No | +| sortType | The way to sort | string | '' | No | +| emptyLabel | Text to be displayed when there's no data | string | `'No data'` | No | +| selection | the configuration for selection | object | | No | +| expandation | Expand configuration | object | | | no | +| loading | determines whether data is being loaded or not | bool | `false` | No | +| className | extra custom class name | string | `''` | No | +| rowClassName | class name for row | string \| (data: object, rowIndex: number) => string | '' | No | +| prefix | custom prefix | string | `'zent'` | No | +| pageInfo | pagination information | object | null | No | +| paginationType | Pagination type, `'default'` \| `'lite'` | string | `'default'` | No | +| onRowClick | callback fires when a row is clicked | (data: any, index: number, event: Event) => any | | No | +| ellipsis | whether ellipsis should be displayed when content overflows (nowrap of columns needs to be set) | bool | false | No | +| onExpand | callback fires when the row expand icon is clicked | (data: {expanded: boolean, data: any, event: Event, index: number}) => any | | No | +| components | custom table element | object { row?: ReactNode } | | No | +| rowProps | custom row props | (data: any, index: number) => object | | No | +| bordered | whether to display the outer border and column border | bool | `false` | No | #### onChange function declaration @@ -59,28 +60,28 @@ onChange will throw an object, which includes parameters about the change part o | needSort | whether to support sorting | bool | No | | colSpan | span of columns. It won't be rendered if the value is set to 0 | number | No | | fixed | whether columns fixed or not. The value can be `left` `right` `true` (`true` is same to `left`) | bool \| strig | No | -| onCellClick | callback fires when a cell is clicked | (data: any, event: Event) => any | No | +| onCellClick | callback fires when a cell is clicked | (data: any, event: Event) => any | No | | textAlign | Text alignment | string | No | | nowrap | whether to wrap, true by default | bool | No | -| defaultText | default display text | ReactNode | No | -| children | render grouping table headers | array | No | +| defaultText | default display text | ReactNode | No | +| children | render grouping table headers | array | No | #### selection -| Property | Description | Type | Required | -| ---------------- | ------------------------------------------ | ---------------------------------------------------------------------------- | -------- | -| selectedRowKeys | keys of selected rows by default | array | No | +| Property | Description | Type | Required | +| ---------------- | ------------------------------------------ | --------------------------------------------------------------------------- | -------- | +| selectedRowKeys | keys of selected rows by default | array | No | | onSelect | callback fires when a check changes | (selectedkeys: string, selectedRows: Array, currentRow: number) => any | No | -| getCheckboxProps | function to get properties of the checkbox | (data: object) => { disabled?: boolean } | No | +| getCheckboxProps | function to get properties of the checkbox | (data: object) => { disabled?: boolean } | No | #### pageInfo -| Property | Description | Type | Required | -| --------- | ---------------------------------------- | ------ | -------- | -| total | Total number of items | number | No | -| pageSize | Number of items to be displayed per page | number | No | -| pageSizeOptions | Page size options | number[] | No | -| current | current page | number | No | +| Property | Description | Type | Required | +| --------------- | ---------------------------------------- | -------- | -------- | +| total | Total number of items | number | No | +| pageSize | Number of items to be displayed per page | number | No | +| pageSizeOptions | Page size options | number[] | No | +| current | current page | number | No | ### expandation diff --git a/packages/zent/src/grid/README_zh-CN.md b/packages/zent/src/grid/README_zh-CN.md index 97b1e7c426..a92e3e0850 100644 --- a/packages/zent/src/grid/README_zh-CN.md +++ b/packages/zent/src/grid/README_zh-CN.md @@ -11,29 +11,30 @@ group: 导航 ### API -| 参数 | 说明 | 类型 | 默认值 | 是否必须 | -| ------------ | ------------------------------------------------------------- | ---------------------------------------------------- | ------------------ | -------- | -| columns | 表格列配置 | array | | 是 | -| datasets | 需要展示的数据 | array | | 是 | -| rowKey | 每一行的 key | string | `id` | 否 | -| onChange | 列表发生变化时自动触发的函数，页面筛选、排序均会触发 | (conf: any) => any | `noop` | 否 | -| scroll | 横向或纵向指定滚动区域的宽高度 | { x?: number, y?: number } | | 否 | -| sortBy | 根据哪一个字段排序, 应该等于 columns 中某一个元素的`key`字段 | string | '' | 否 | -| sortType | 排序方式 | string | '' | 否 | -| emptyLabel | 列表为空时的提示文案 | string | `'没有更多数据了'` | 否 | -| selection | 表格的选择功能配置 | object | | 否 | -| expandation | 展开配置 | object | | | 否 | -| loading | 表格是否处于 loading 状态 | bool | `false` | 否 | -| className | 自定义额外类名 | string | `''` | 否 | -| rowClassName | 表格行的类名 | string \| (data: object, rowIndex: number) => string | '' | 否 | -| prefix | 自定义前缀 | string | `'zent'` | 否 | -| pageInfo | table 对应的分页信息 | object | null | 否 | -| onRowClick | 点击行时触发 | (data: any, index: number, event: Event) => any | | 否 | -| ellipsis | 是否需要文字超出宽度后省略号显示 (需配置 columns 中的 nowrap) | bool | false | 否 | -| onExpand | 点击展开图标时触发 | (data: {expanded: boolean, data: any, event: Event, index: number}) => any | | 否 | -| components | 自定义 table 内的组件 | object { row?: ReactNode } | | 否| -| rowProps | 自定义传入 row 的属性 | (data: any, index: number) => object | | 否 | -| bordered | 是否展示外边框和列边框 | bool | `false` | 否 | +| 参数 | 说明 | 类型 | 默认值 | 是否必须 | +| -------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------ | -------- | +| columns | 表格列配置 | array | | 是 | +| datasets | 需要展示的数据 | array | | 是 | +| rowKey | 每一行的 key | string | `id` | 否 | +| onChange | 列表发生变化时自动触发的函数，页面筛选、排序均会触发 | (conf: any) => any | `noop` | 否 | +| scroll | 横向或纵向指定滚动区域的宽高度 | { x?: number, y?: number } | | 否 | +| sortBy | 根据哪一个字段排序, 应该等于 columns 中某一个元素的`key`字段 | string | '' | 否 | +| sortType | 排序方式 | string | '' | 否 | +| emptyLabel | 列表为空时的提示文案 | string | `'没有更多数据了'` | 否 | +| selection | 表格的选择功能配置 | object | | 否 | +| expandation | 展开配置 | object | | | 否 | +| loading | 表格是否处于 loading 状态 | bool | `false` | 否 | +| className | 自定义额外类名 | string | `''` | 否 | +| rowClassName | 表格行的类名 | string \| (data: object, rowIndex: number) => string | '' | 否 | +| prefix | 自定义前缀 | string | `'zent'` | 否 | +| pageInfo | table 对应的分页信息 | object | null | 否 | +| paginationType | 分页器类型，可选 `'lite'` | string | `'default'` | 否 | +| onRowClick | 点击行时触发 | (data: any, index: number, event: Event) => any | | 否 | +| ellipsis | 是否需要文字超出宽度后省略号显示 (需配置 columns 中的 nowrap) | bool | false | 否 | +| onExpand | 点击展开图标时触发 | (data: {expanded: boolean, data: any, event: Event, index: number}) => any | | 否 | +| components | 自定义 table 内的组件 | object { row?: ReactNode } | | 否 | +| rowProps | 自定义传入 row 的属性 | (data: any, index: number) => object | | 否 | +| bordered | 是否展示外边框和列边框 | bool | `false` | 否 | #### onChange 函数声明 @@ -60,28 +61,28 @@ onChange 会抛出一个对象，这个对象包含分页变化的参数： | needSort | 是否支持排序 (使用此功能 请设置 name) | bool | 否 | | colSpan | 列合并 当为 0 时不渲染 | number | 否 | | fixed | 是否固定列 可选值为 `left` `right` `true` (`true` 与 `left` 等效) | bool \| strig | 否 | -| onCellClick | 点击单元格回调 | (data: any, event: Event) => any | 否 | +| onCellClick | 点击单元格回调 | (data: any, event: Event) => any | 否 | | textAlign | 文本对齐方式 | string | 否 | | nowrap | 是否换行 默认换行 | bool | 否 | -| defaultText | 默认显示文字 | ReactNode | 否 | -| children | 渲染分组表头 | array | 否 | +| defaultText | 默认显示文字 | ReactNode | 否 | +| children | 渲染分组表头 | array | 否 | #### selection -| 参数 | 说明 | 类型 | 是否必须 | -| ---------------- | ------------------------------------ | ---------------------------------------------------------------------------- | -------- | -| selectedRowKeys | 默认选中 | array | 否 | +| 参数 | 说明 | 类型 | 是否必须 | +| ---------------- | ------------------------------------ | --------------------------------------------------------------------------- | -------- | +| selectedRowKeys | 默认选中 | array | 否 | | onSelect | 每次 check 的时候触发的函数 | (selectedkeys: string, selectedRows: Array, currentRow: number) => any | 否 | -| getCheckboxProps | 选择框属性配置 (当前仅支持 disabled) | (data: object) => { disabled?: boolean } | 否 | +| getCheckboxProps | 选择框属性配置 (当前仅支持 disabled) | (data: object) => { disabled?: boolean } | 否 | #### pageInfo -| 参数 | 说明 | 类型 | 是否必须 | -| --------- | ---------- | ------ | -------- | -| total | 总条目个数 | number | 否 | -| pageSize | 每页个数 | number | 否 | -| pageSizeOptions | 分页选项 | number[] | 否 | -| current | 当前页码 | number | 否 | +| 参数 | 说明 | 类型 | 是否必须 | +| --------------- | ---------- | -------- | -------- | +| total | 总条目个数 | number | 否 | +| pageSize | 每页个数 | number | 否 | +| pageSizeOptions | 分页选项 | number[] | 否 | +| current | 当前页码 | number | 否 | ### expandation diff --git a/packages/zent/src/grid/demos/selection.md b/packages/zent/src/grid/demos/selection.md index eb5581c4e4..cd927a96d7 100644 --- a/packages/zent/src/grid/demos/selection.md +++ b/packages/zent/src/grid/demos/selection.md @@ -81,6 +81,7 @@ class Selection extends React.Component { total: totalItem, current: this.state.current, }} + paginationType="lite" selection={{ selectedRowKeys: this.state.selectedRowKeys, onSelect: (selectedRowKeys, selectedRows, currentRow) => { diff --git a/packages/zent/src/table/Table.tsx b/packages/zent/src/table/Table.tsx index c7321995ec..aa6188391d 100644 --- a/packages/zent/src/table/Table.tsx +++ b/packages/zent/src/table/Table.tsx @@ -20,6 +20,19 @@ import Foot from './modules/Foot'; import helper from './helper'; import { PaginationPageSizeOption } from '../pagination/components/PageSizeChanger'; +export type TablePaginationType = 'default' | 'lite'; + +export interface ITablePageInfo { + current?: number; + total?: number; + /** @deprecated use total */ + totalItem?: number; + pageSize?: number; + /** @deprecated use pageSize */ + limit?: number; + pageSizeOptions?: PaginationPageSizeOption[]; +} + export interface ITableColumn { title: string; name: string; @@ -72,18 +85,14 @@ export interface ITableProps { autoScroll?: boolean; className?: string; prefix?: string; - pageInfo?: { - current?: number; - totalItem?: number; - pageSize?: number; - pageSizeOptions?: PaginationPageSizeOption[]; - }; + pageInfo?: ITablePageInfo; + paginationType: TablePaginationType; } export class Table extends PureComponent { static defaultProps = { prefix: 'zent', - pageSize: 10, + paginationType: 'default', className: '', datasets: [], columns: [], @@ -443,6 +452,7 @@ export class Table extends PureComponent { datasets, rowKey, pageInfo, + paginationType, emptyLabel, getRowConf = () => { return { canSelect: true, rowClass: '' }; @@ -549,6 +559,7 @@ export class Table extends PureComponent { ref={c => (this.foot = c)} batchComponents={batchComponents} pageInfo={pageInfo} + paginationType={paginationType} batchComponentsFixed={this.state.batchComponentsFixed} selection={{ needSelect, @@ -560,8 +571,6 @@ export class Table extends PureComponent { }} current={this.state.current} onPageChange={this.onPageChange} - // WTF - // onPageSizeChange={this.onPageSizeChange} /> )} diff --git a/packages/zent/src/table/demos/batch.md b/packages/zent/src/table/demos/batch.md index 77477f46ee..77d7808709 100644 --- a/packages/zent/src/table/demos/batch.md +++ b/packages/zent/src/table/demos/batch.md @@ -93,7 +93,7 @@ class BatchCompsClass extends React.Component { datasets, page: { pageSize: 3, - current: 0, + current: 1, totalItem: 6, }, selectedRowKeys: [] diff --git a/packages/zent/src/table/demos/indeterminate.md b/packages/zent/src/table/demos/indeterminate.md index 1cf292f4fa..b3abb7bce4 100644 --- a/packages/zent/src/table/demos/indeterminate.md +++ b/packages/zent/src/table/demos/indeterminate.md @@ -65,7 +65,7 @@ class Indeterminate extends React.Component { state = { page: { pageSize: 3, - current: 0, + current: 1, total: 3, }, datasets, diff --git a/packages/zent/src/table/demos/selection.md b/packages/zent/src/table/demos/selection.md index 702ac964f4..490768adae 100644 --- a/packages/zent/src/table/demos/selection.md +++ b/packages/zent/src/table/demos/selection.md @@ -93,7 +93,7 @@ class Selection extends React.Component { this.state = { page: { pageSize: 3, - current: 0, + current: 1, totalItem: 6, }, datasets: datasets, @@ -138,6 +138,7 @@ class Selection extends React.Component { rowKey="item_id" getRowConf={this.getRowConf} pageInfo={this.state.page} + paginationType="lite" onChange={conf => { this.onChange(conf); }} diff --git a/packages/zent/src/table/modules/Foot.tsx b/packages/zent/src/table/modules/Foot.tsx index c5167b2203..6be6c9709c 100644 --- a/packages/zent/src/table/modules/Foot.tsx +++ b/packages/zent/src/table/modules/Foot.tsx @@ -7,8 +7,28 @@ import isNil from 'lodash-es/isNil'; import helper from '../helper'; import Pagination from '../../pagination'; import Checkbox from '../../checkbox'; +import { TablePaginationType, ITablePageInfo } from '../Table'; +import { PaginationChangeHandler } from '../../pagination/impl/BasePagination'; +import LitePagination from '../../pagination/LitePagination'; -export default class Foot extends PureComponent { +export interface ITableFootProps { + pageInfo: ITablePageInfo; + paginationType: TablePaginationType; + batchComponentsFixed: boolean; + onPageChange: PaginationChangeHandler; + selection: { + needSelect: boolean; + isSingleSelection: boolean; + onSelectAll: (isSelectAll: boolean) => any; + selectedRows: any[]; + isSelectAll: boolean; + isSelectPart: boolean; + }; + batchComponents: any[]; + current: number; +} + +export default class Foot extends PureComponent { footStyleFixed: React.CSSProperties; batch: HTMLDivElement | null = null; @@ -55,9 +75,17 @@ export default class Foot extends PureComponent { }; render() { - const { onPageChange, batchComponents, selection, current } = this.props; + const { + onPageChange, + paginationType, + batchComponents, + selection, + current, + } = this.props; const pageInfo = this.props.pageInfo || {}; + + // tslint:disable-next-line:deprecation const { totalItem, pageSize, total, limit, pageSizeOptions } = pageInfo; const { needSelect, selectedRows } = selection; @@ -74,6 +102,9 @@ export default class Foot extends PureComponent { batchClassName += ' tfoot__batchcomponents--fixed'; } + const PaginationComp = + paginationType === 'lite' ? LitePagination : Pagination; + return ( shouldRenderFoot && (
@@ -92,9 +123,9 @@ export default class Foot extends PureComponent {
{Object.keys(pageInfo).length > 0 && ( - Date: Fri, 29 Mar 2019 09:33:06 +0800 Subject: [PATCH 2/2] fix: grid & table footer margin (#1043) --- packages/zent/assets/grid.scss | 4 ++-- packages/zent/assets/table.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/zent/assets/grid.scss b/packages/zent/assets/grid.scss index 29d71d0eb7..19136bf2e1 100644 --- a/packages/zent/assets/grid.scss +++ b/packages/zent/assets/grid.scss @@ -55,7 +55,7 @@ $border-color: $theme-stroke-6; th, td { - border: 1px solid $border-color; + box-shadow: inset 1px -1px 0 0 $theme-stroke-6; } .zent-grid-header th { @@ -278,7 +278,7 @@ $border-color: $theme-stroke-6; } &-tfoot { - margin-top: 10px; + margin-top: 16px; overflow: hidden; .zent-grid-tfoot-page { diff --git a/packages/zent/assets/table.scss b/packages/zent/assets/table.scss index 34c741d6bb..298b3bbeb1 100644 --- a/packages/zent/assets/table.scss +++ b/packages/zent/assets/table.scss @@ -168,7 +168,7 @@ $orange: $theme-error-3; } .tfoot { - margin-top: 10px; + margin-top: 16px; box-sizing: border-box; &__batchcomponents {