Skip to content

Commit

Permalink
Merge branch 'master' of github.com:youzan/zent
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpylua
cpylua committed Mar 29, 2019
2 parents 85b8d75 + 2df9552 commit 96af7a8
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 104 deletions.
4 changes: 2 additions & 2 deletions packages/zent/assets/grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -278,7 +278,7 @@ $border-color: $theme-stroke-6;
}

&-tfoot {
margin-top: 10px;
margin-top: 16px;
overflow: hidden;

.zent-grid-tfoot-page {
Expand Down
2 changes: 1 addition & 1 deletion packages/zent/assets/table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ $orange: $theme-error-3;
}

.tfoot {
margin-top: 10px;
margin-top: 16px;
box-sizing: border-box;

&__batchcomponents {
Expand Down
32 changes: 26 additions & 6 deletions packages/zent/src/grid/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<any> {
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<IGridFooterProps> {
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)
Expand All @@ -27,20 +39,28 @@ class Footer extends PureComponent<any> {
: 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 (
<div className={`${prefix}-grid-tfoot`}>
<div className={classnames(`${prefix}-grid-tfoot-page`)}>
<Pagination {...curPageInfo} onChange={this.handlePageChange} />
{paginationType === 'default' && (
<Pagination {...curPageInfo} onChange={this.handlePageChange} />
)}
{paginationType === 'lite' && (
<LitePagination
{...curPageInfo}
onChange={this.handlePageChange}
/>
)}
</div>
</div>
);
Expand Down
21 changes: 14 additions & 7 deletions packages/zent/src/grid/Grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{}>;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -107,6 +112,7 @@ export class Grid extends PureComponent<IGridProps, any> {
columns: [],
loading: false,
pageInfo: false,
paginationType: 'default',
onChange: noop,
expandation: null,
selection: null,
Expand Down Expand Up @@ -801,7 +807,7 @@ export class Grid extends PureComponent<IGridProps, any> {
}

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);
Expand Down Expand Up @@ -829,6 +835,7 @@ export class Grid extends PureComponent<IGridProps, any> {
key="footer"
prefix={prefix}
pageInfo={pageInfo}
paginationType={paginationType}
onChange={this.onChange}
onPaginationChange={this.onPaginationChange}
/>,
Expand Down
73 changes: 37 additions & 36 deletions packages/zent/src/grid/README_en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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<any>, 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

Expand Down
Loading

0 comments on commit 96af7a8

Please sign in to comment.