Bugfix: update Table and Grid docs & demos (#1041)

* fix: add missing types for table and grid

* fix: babel plugin doc

* fix: grid and table docs/demos

packages/babel-plugin-zent/README_en-US.md

@@ -34,13 +34,15 @@ In your component Javascript files, use zent like this: `import { Button, Dialog
 ### Options
 
 - `noModuleRewrite`: disable JavaScript module import rewrite，use with bundle tool's tree-shaking feature.
+- `useESM`: Rewrite `import` using esm
 - `automaticStyleImport`: `true` to enable styles imports for component.
 - `useRawStyle`: should be used with `automaticStyleImport`, imports postcss source files if set to `true`. **Requires Zent >= 3.8.1**
 
 ```js
 // defaults
 {
 	noModuleRewrite: false,
+	useESM: false,
 	automaticStyleImport: false,
 	useRawStyle: false
 }

packages/babel-plugin-zent/README_zh-CN.md

@@ -32,6 +32,7 @@
 ### 配置
 
 - `noModuleRewrite`: 关闭 JavaScript 模块重写，一般配合打包工具的 tree-shaking 使用。
+- `useESM`: 使用 esm 版本的代码重写 `import`
 - `automaticStyleImport`: 设置为 `true` 启用样式自动引入。
 - `useRawStyle`: 配合 `automaticStyleImport` 使用, 设置为 `true` 自动引入样式源文件(PostCSS). **需要 Zent >= 3.8.1**
 

packages/zent/RELEASE_NEXT.md

@@ -23,6 +23,10 @@
 - `pageSize` 不再耦合当前页码和页码选项，拆开成两个独立参数：`pageSize` 和 `pageSizeOptions`。分页选项配置也和原来的不一致，接受数字或者 `{value: number, text: node}`。
 - CSS 类名和 HTML 结果有变化，有样式复写的需要确认样式是否正常。
 
+#### `Grid 和 `Table`
+
+因为这两个组件的 `pageInfo` 参数依赖 `Pagination`，所以 `Pagination` 的改动对这个参数一样有影响。
+
 #### `Loading`
 
 `Loading` 拆分成了 3 种子类型，`import { BlockLoading, InlineLoading, FullScreenLoading } from 'zent'`，`InlineLoading` 是新增的能力，不涉及迁移问题。新增了一种样式和描述文案支持。

packages/zent/src/grid/Grid.tsx

@@ -35,6 +35,7 @@ import {
   GridSortType,
   GridRowClassNameType,
 } from './types';
+import { PaginationPageSizeOption } from '../pagination/components/PageSizeChanger';
 
 function stopPropagation(e) {
   e.stopPropagation();
@@ -77,6 +78,7 @@ export interface IGridProps {
     current?: number;
     total?: number;
     pageSize?: number;
+    pageSizeOptions?: PaginationPageSizeOption[];
   };
   onRowClick?: (
     data: any,

packages/zent/src/grid/README_en-US.md

@@ -79,6 +79,7 @@ onChange will throw an object, which includes parameters about the change part o
 | --------- | ---------------------------------------- | ------ | -------- |
 | 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

packages/zent/src/grid/README_zh-CN.md

@@ -80,6 +80,7 @@ onChange 会抛出一个对象，这个对象包含分页变化的参数：
 | --------- | ---------- | ------ | -------- |
 | total | 总条目个数 | number | 否       |
 | pageSize  | 每页个数   | number | 否       |
+| pageSizeOptions | 分页选项 | number[] | 否 |
 | current   | 当前页码   | number | 否       |
 
 ### expandation

packages/zent/src/grid/demos/pagination.md

@@ -20,7 +20,6 @@ en-US:
 ---
 
 ```jsx
-
 import { Grid } from 'zent';
 
 const columns = [
@@ -31,14 +30,16 @@ const columns = [
 		nowrap: true,
 		onCellClick: data => {
 			console.log(data, 'data');
-		}
-	}, {
+		},
+	},
+	{
 		title: '{i18n.uv}',
-		name: 'uv'
-	}, {
+		name: 'uv',
+	},
+	{
 		title: '{i18n.uv}',
-		name: 'stock'
-	}
+		name: 'stock',
+	},
 ];
 
 // const pageSize = 5;
@@ -52,30 +53,30 @@ for (let i = 0; i < 5; i++) {
 		id: `f-${i}`,
 		name: `{i18n.babyProducts} ${i}`,
 		uv: 20,
-		stock: 5
-	})
+		stock: 5,
+	});
 	datasets2.push({
 		id: `s-${i}`,
 		name: `{i18n.petProducts} ${i}`,
 		uv: 20,
-		stock: 5
-	})
+		stock: 5,
+	});
 }
 
 class PageInfo extends React.Component {
 	state = {
 		current: 1,
 		pageSize: 5,
 		total: 10,
-		datasets
-	}
+		datasets,
+	};
 
 	onChange = ({ current, pageSize }) => {
 		this.setState({
 			current,
 			pageSize,
-		})
-	}
+		});
+	};
 
 	render() {
 		const { current, pageSize, total } = this.state;
@@ -87,18 +88,14 @@ class PageInfo extends React.Component {
 					current: current,
 					pageSize: pageSize,
 					total: total,
-					pageSizeOptions: [ 5, 10 ]
+					pageSizeOptions: [5, 10],
 				}}
 				onChange={this.onChange}
 				ellipsis
 			/>
 		);
 	}
-};
-
-ReactDOM.render(
-		<PageInfo />
-	, mountNode
-);
+}
 
+ReactDOM.render(<PageInfo />, mountNode);
 ```

packages/zent/src/grid/demos/selection.md

@@ -19,20 +19,21 @@ en-US:
 ---
 
 ```jsx
-
 import { Grid, Notify } from 'zent';
 
 const columns = [
 	{
 		title: '{i18n.productName}',
-		name: 'name'
-	}, {
+		name: 'name',
+	},
+	{
 		title: '{i18n.uv}',
-		name: 'uv'
-	}, {
+		name: 'uv',
+	},
+	{
 		title: '{i18n.stock}',
-		name: 'stock'
-	}
+		name: 'stock',
+	},
 ];
 
 const pageSize = 5;
@@ -46,29 +47,29 @@ for (let i = 0; i < 5; i++) {
 		id: `f-${i}`,
 		name: `{i18n.babyProducts} ${i}`,
 		uv: 20,
-		stock: 5
-	})
+		stock: 5,
+	});
 	datasets2.push({
 		id: `s-${i}`,
 		name: `{i18n.petProducts} ${i}`,
 		uv: 20,
-		stock: 5
-	})
+		stock: 5,
+	});
 }
 
 class Selection extends React.Component {
 	state = {
-		selectedRowKeys: [ 'f-0' ],
+		selectedRowKeys: ['f-0'],
 		datasets,
-		current: 1
-	}
+		current: 1,
+	};
 
 	onChange = ({ current }) => {
 		this.setState({
 			current,
-			datasets: current === 1 ? datasets : datasets2
-		})
-	}
+			datasets: current === 1 ? datasets : datasets2,
+		});
+	};
 
 	render() {
 		return (
@@ -77,37 +78,33 @@ class Selection extends React.Component {
 				datasets={this.state.datasets}
 				pageInfo={{
 					pageSize: pageSize,
-					totalItem: totalItem,
-					current: this.state.current
+					total: totalItem,
+					current: this.state.current,
 				}}
 				selection={{
 					selectedRowKeys: this.state.selectedRowKeys,
 					onSelect: (selectedRowKeys, selectedRows, currentRow) => {
-            if (selectedRowKeys.length > 2) {
-              Notify.error('你最多选择两个')
-              this.setState({
-                selectedRowKeys: [].concat(this.state.selectedRowKeys)
-              })
-            } else {
-              this.setState({
-                selectedRowKeys
-              });
-            }
+						if (selectedRowKeys.length > 2) {
+							Notify.error('你最多选择两个');
+							this.setState({
+								selectedRowKeys: [].concat(this.state.selectedRowKeys),
+							});
+						} else {
+							this.setState({
+								selectedRowKeys,
+							});
+						}
 					},
-					getCheckboxProps: (data) => ({
-							disabled: data.name === '{i18n.babyProducts} 1'
-					})
+					getCheckboxProps: data => ({
+						disabled: data.name === '{i18n.babyProducts} 1',
+					}),
 				}}
 				rowKey="id"
 				onChange={this.onChange}
 			/>
 		);
 	}
-};
-
-ReactDOM.render(
-		<Selection />
-	, mountNode
-);
+}
 
+ReactDOM.render(<Selection />, mountNode);
 ```