Merge pull request #36 from nanawang/dev

add callback function: onChange
JeromeLin · Jul 6, 2018 · 4b70976 · 4b70976
2 parents 96ddadf + 37b87fc
commit 4b70976
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 6 deletions.
diff --git a/components/Pagination/PropsType.tsx b/components/Pagination/PropsType.tsx
@@ -17,4 +17,5 @@ export default interface PropsType {
   addonAfter?: React.ReactNode;
   onPageChange: (value: number) => void;
   onPageSizeChange: (value: number) => void;
+  onChange: (pageInfo:{ currentPage: number, pageSize: number }) => void;
 }
diff --git a/components/Pagination/index.tsx b/components/Pagination/index.tsx
@@ -5,6 +5,7 @@ import Input from '../Input';
 import Icon from '../Icon';
 import PropsType from './PropsType';
 
+const noop = () => {};
 class Pagination extends Component<PropsType, any> {
   static defaultProps = {
     prefixCls: 'ui-pagination',
@@ -16,8 +17,9 @@ class Pagination extends Component<PropsType, any> {
     showTotal: false,
     showJumper: false,
     showPageSizeSelector: false,
-    onPageChange: () => {},
-    onPageSizeChange: () => {},
+    onPageChange: noop,
+    onPageSizeChange: noop,
+    onChange: noop,
   };
 
   constructor(props) {
@@ -183,10 +185,18 @@ class Pagination extends Component<PropsType, any> {
   }
 
   _onPagerClick(value) {
+    const { pageSize, onPageChange, onChange } = this.props;
     this.setState({
       value,
     });
-    this.props.onPageChange(value);
+    if (onPageChange !== noop) {
+      onPageChange(value);
+      return;
+    }
+    onChange({
+      pageSize,
+      currentPage: value,
+    });
   }
 
   renderPager = (i, current) => {
@@ -236,7 +246,7 @@ class Pagination extends Component<PropsType, any> {
   }
 
   renderPageSizeSelector = () => {
-    const { radius, prefixCls } = this.props;
+    const { radius, prefixCls, pageSize, onPageSizeChange, onChange } = this.props;
     return (
       <div className={`${prefixCls}-size`}>
         <Select
@@ -245,7 +255,17 @@ class Pagination extends Component<PropsType, any> {
           defaultValue={10}
           // tslint:disable-next-line:jsx-no-multiline-js
           onChange={({ value }) => {
-            this.props.onPageSizeChange(value);
+            if (value === pageSize) {
+              return;
+            }
+            if (onPageSizeChange !== noop) {
+              onPageSizeChange(value);
+              return;
+            }
+            onChange({
+              currentPage: 1,
+              pageSize: value,
+            });
           }}
         >
           <Select.Option value={10}>每页 10 条</Select.Option>

diff --git a/examples/docs/pagination.md b/examples/docs/pagination.md
@@ -108,6 +108,45 @@
 ```
 :::
 
+### 事件回调
+
+通过`onChange`兼容`onPageSizeChange`与`onPageChange`，监听翻页和跳转以及每页条数变更事件。
+
+
+:::demo
+
+```js
+  constructor(props) {
+    super(props);
+    this.state = {
+      pageSize: 10,
+      currentPage: 1,
+    }
+  }
+  render() {
+    const { pageSize, currentPage } = this.state;
+    return (
+      <div>
+        <Pagination
+          total={100}
+          value={currentPage}
+          pageSize={pageSize}
+          showJumper
+          showPageSizeSelector
+          onChange={({pageSize, currentPage}) => {
+            alert('每页展示：' + pageSize + ',且当前页是' + currentPage);
+            this.setState({
+              pageSize,
+              currentPage,
+            });
+          }}
+        />
+      </div>
+    )
+  }
+```
+:::
+
 ### 更多设置
 
 通过`radius`，`bordered`设置样式。
@@ -149,4 +188,5 @@
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
 | onPageChange | 翻页或跳转触发的事件 | page |
-| onPageSizeChange | 每页展示条数变更触发的事件 | pageSize |
+| onPageSizeChange | 每页展示条数变更触发的事件 | pageSize |
+| onChange |监听翻页和跳转以及每页条数变更事件。 | {pageSize, currentPage} |