Pagination 优化 (#1706)

* 分页组件优化

* fix

* fix type

docs/zh-CN/components/pagination-wrapper.md

@@ -44,3 +44,16 @@ order: 59
     ]
 }
 ```
+
+## 属性表
+
+| 属性名        | 类型                                      | 默认值                 | 说明                                                                               |
+| ------------- | ----------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| type          | `string`                                  | `"pagination-wrapper"` | 指定为 Pagination-Wrapper 渲染器                                                   |
+| showPageInput | `boolean`                                 | `false`                | 是否显示快速跳转输入框                                                             |
+| maxButtons    | `number`                                  | `5`                    | 最多显示多少个分页按钮                                                             |
+| inputName     | `string`                                  | `"items"`              | 输入字段名                                                                         |
+| outputName    | `string`                                  | `"items"`              | 输出字段名                                                                         |
+| perPage       | `number`                                  | `10`                   | 每页显示多条数据                                                                   |
+| position      | `'top'` 或 `'bottom'` 或 `'none'`         | `"top"`                | 分页显示位置，如果配置为 none 则需要自己在内容区域配置 pagination 组件，否则不显示 |
+| body          | [SchemaNode](../../docs/types/schemanode) |                        | 内容区域                                                                           |

scss/components/_pagination.scss

@@ -1,6 +1,5 @@
 .#{$ns}Pagination {
   display: inline-block;
-  padding-left: 0;
   padding: 0;
   margin: 0 0 px2rem(-10px);
   border-radius: px2rem(4px);
@@ -88,27 +87,23 @@
   &-inputGroup {
     display: inline-flex;
     flex-wrap: nowrap;
+    align-items: center;
 
-    .#{$ns}Pagination-input {
+    input {
       width: px2rem(50px);
       height: var(--Pagination-height);
       border: var(--borderWidth) solid var(--borderColor);
-      border-top-left-radius: var(--borderRadius);
-      border-bottom-left-radius: var(--borderRadius);
+      border-radius: var(--borderRadius);
       padding: px2rem(5px) px2rem(10px);
+      margin: 0 px2rem(10px);
+      text-align: center;
 
-      &:focus {
+      &:focus,
+      &:hover {
         outline: none;
         border: var(--borderWidth) solid var(--primary);
       }
     }
-
-    .#{$ns}Button {
-      height: var(--Pagination-height);
-      margin-left: px2rem(-1px);
-      border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
-      padding: 0 px2rem(10px);
-    }
   }
 }
 

src/locale/en-US.ts

@@ -29,6 +29,9 @@ register('en-US', {
   'CRUD.loadMore': 'Load more',
   'CRUD.perPage': 'Per page',
   'CRUD.stat': '{{page}} of {{lastPage}} total: {{total}}.',
+  'CRUD.paginationGoText': 'Go to',
+  'CRUD.paginationPageText': 'page',
+  'PaginationWrapper.placeholder': 'please config body',
   'Date.daysago': '{{days}} day(s) ago',
   'Date.dayslater': '{{days}} day(s) later',
   'Date.endOfMonth': 'last day of the month',

src/locale/zh-CN.ts

@@ -29,6 +29,9 @@ register('zh-CN', {
   'CRUD.loadMore': '加载更多',
   'CRUD.perPage': '每页显示',
   'CRUD.stat': '{{page}}/{{lastPage}} 总共：{{total}} 项',
+  'CRUD.paginationGoText': '前往',
+  'CRUD.paginationPageText': '页',
+  'PaginationWrapper.placeholder': '请配置内容',
   'Date.daysago': '{{days}}天前',
   'Date.dayslater': '{{days}}天后',
   'Date.endOfMonth': '本月最后一天',
@@ -105,8 +108,8 @@ register('zh-CN', {
   'Image.sizeNotEqual': '请上传{{info}}的图片',
   'Image.width': '宽度 {{width}}px',
   'Image.zoomIn': '查看大图',
-  'Image.limitMax':'上传图片大于{{info}},请检查图片尺寸',
-  'Image.limitMin':'上传图片小于{{info}},请检查图片尺寸',
+  'Image.limitMax': '上传图片大于{{info}},请检查图片尺寸',
+  'Image.limitMin': '上传图片小于{{info}},请检查图片尺寸',
   'Log.mustHaveSource': '需要配置 Source',
   'link': '链接',
   'loading': '加载中',

src/renderers/CRUD.tsx

@@ -1607,7 +1607,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     ) : null;
   }
 
-  renderPagination() {
+  renderPagination(toolbar: SchemaNode) {
     const {store, render, classnames: cx, alwaysShowPagination} = this.props;
 
     const {page, lastPage} = store;
@@ -1620,6 +1620,12 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return null;
     }
 
+    const extraProps: any = {};
+    if (typeof toolbar !== 'string') {
+      extraProps.showPageInput = (toolbar as Schema).showPageInput;
+      extraProps.maxButtons = (toolbar as Schema).maxButtons;
+    }
+
     return (
       <div className={cx('Crud-pager')}>
         {render(
@@ -1628,6 +1634,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             type: 'pagination'
           },
           {
+            ...extraProps,
             activePage: page,
             lastPage: lastPage,
             hasNext: store.hasNext,
@@ -1782,7 +1789,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     if (type === 'bulkActions' || type === 'bulk-actions') {
       return this.renderBulkActions(childProps);
     } else if (type === 'pagination') {
-      return this.renderPagination();
+      return this.renderPagination(toolbar);
     } else if (type === 'statistics') {
       return this.renderStatistics();
     } else if (type === 'switch-per-page') {

src/renderers/Pagination.tsx

@@ -10,7 +10,7 @@ export interface PaginationSchema extends BaseSchema {
   className?: SchemaClassName;
 
   /**
-   * 是否显示跳转表单
+   * 是否显示快速跳转输入框
    */
   showPageInput?: boolean;
 
@@ -51,7 +51,7 @@ export default class Pagination extends React.Component<
     maxButtons: 5,
     mode: 'normal',
     hasNext: false,
-    showPageInput: true
+    showPageInput: false
   };
 
   state = {
@@ -123,7 +123,8 @@ export default class Pagination extends React.Component<
       onPageChange,
       classnames: cx,
       showPageInput,
-      className
+      className,
+      translate: __
     } = this.props;
     const pageNum = this.state.pageNum;
 
@@ -257,30 +258,20 @@ export default class Pagination extends React.Component<
       <div className={cx('Pagination-wrap', className)}>
         <ul className={cx('Pagination', 'Pagination--sm')}>{pageButtons}</ul>
 
-        {lastPage > 9 && showPageInput ? (
-          <div className="inline m-l-xs w-xs" key="toPage">
-            <span className={cx('Pagination-inputGroup')}>
-              <input
-                type="text"
-                className={cx('Pagination-input')}
-                onChange={this.handlePageChange}
-                onFocus={(e: any) => e.currentTarget.select()}
-                onKeyUp={(e: any) =>
-                  e.keyCode == 13 &&
-                  onPageChange(parseInt(e.currentTarget.value, 10))
-                }
-                value={pageNum}
-              />
-              <span>
-                <button
-                  onClick={() => onPageChange(parseInt(pageNum, 10))}
-                  type="submit"
-                  className={cx('Button', 'Button--default')}
-                >
-                  Go
-                </button>
-              </span>
-            </span>
+        {showPageInput === true || lastPage > 9 ? (
+          <div className={cx('Pagination-inputGroup')} key="toPage">
+            {__('CRUD.paginationGoText')}
+            <input
+              type="text"
+              onChange={this.handlePageChange}
+              onFocus={(e: any) => e.currentTarget.select()}
+              onKeyUp={(e: any) =>
+                e.keyCode == 13 &&
+                onPageChange(parseInt(e.currentTarget.value, 10))
+              }
+              value={pageNum}
+            />
+            {__('CRUD.paginationPageText')}
           </div>
         ) : null}
       </div>

src/renderers/PaginationWrapper.tsx

@@ -12,6 +12,18 @@ export interface PaginationWrapperSchema extends BaseSchema {
    */
   type: 'pagination-wrapper';
 
+  /**
+   * 是否显示快速跳转输入框
+   */
+  showPageInput?: boolean;
+
+  /**
+   * 最多显示多少个分页按钮。
+   *
+   * @default 5
+   */
+  maxButtons?: number;
+
   /**
    * 输入字段名
    *
@@ -81,7 +93,14 @@ export class PaginationWrapper extends React.Component<PaginationWrapProps> {
   }
 
   render() {
-    const {position, render, store, classnames: cx, body} = this.props;
+    const {
+      position,
+      render,
+      store,
+      classnames: cx,
+      body,
+      translate: __
+    } = this.props;
 
     const pagination =
       position !== 'none'
@@ -108,7 +127,7 @@ export class PaginationWrapper extends React.Component<PaginationWrapProps> {
             data: store.locals
           })
         ) : (
-          <span>请配置内容</span>
+          <span>{__('PaginationWrapper.placeholder')}</span>
         )}
         {position === 'bottom' ? pagination : null}
       </div>