feat: add pagination disabled support

2020-02-22 17:31:19 +08:00 · 2020-02-22 17:31:19 +08:00 · 2200cf0a03
parent b95760b9cd
commit 2200cf0a03
20 changed files with 193 additions and 90 deletions
--- a/build/config.js
+++ b/build/config.js
@ -1,5 +1,5 @@
 module.exports = {
  dev: {
-    componentName: 'notification', // dev components
+    componentName: 'pagination', // dev components
  },
 };
--- a/components/pagination/Pagination.jsx
+++ b/components/pagination/Pagination.jsx
@ -11,6 +11,7 @@ import { ConfigConsumerProps } from '../config-provider';
 export const PaginationProps = () => ({
  total: PropTypes.number,
  defaultCurrent: PropTypes.number,
+  disabled: PropTypes.bool,
  current: PropTypes.number,
  defaultPageSize: PropTypes.number,
  pageSize: PropTypes.number,
@ -19,7 +20,7 @@ export const PaginationProps = () => ({
  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  buildOptionText: PropTypes.func,
  showSizeChange: PropTypes.func,
-  showQuickJumper: PropTypes.bool,
+  showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  showTotal: PropTypes.any,
  size: PropTypes.string,
  simple: PropTypes.bool,
@ -28,6 +29,7 @@ export const PaginationProps = () => ({
  selectPrefixCls: PropTypes.string,
  itemRender: PropTypes.any,
  role: PropTypes.string,
+  showLessItems: PropTypes.bool,
 });

 export const PaginationConfig = () => ({
--- a/components/pagination/tests/snapshots/demo.test.js.snap
+++ b/components/pagination/tests/snapshots/demo.test.js.snap
@ -47,7 +47,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
      </div>
    </li>
  </ul> <br>
-  <ul unselectable="unselectable" class="ant-pagination">
+  <ul unselectable="unselectable" class="ant-pagination ant-pagination-disabled">
    <li title="Previous Page" tabindex="0" class=" ant-pagination-prev"><a class="ant-pagination-item-link"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
            <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
          </svg></i></a></li>
@ -67,7 +67,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
          </svg></i></a></li>
    <li class="ant-pagination-options">
-      <div tabindex="0" class="ant-select ant-select-enabled ant-pagination-options-size-changer">
+      <div tabindex="-1" class="ant-select ant-select-disabled ant-pagination-options-size-changer">
        <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
          <div class="ant-select-selection__rendered">
            <div title="20 / page" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">20 / page</div>
@ -143,6 +143,7 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
 `;

 exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
+<div>
  <ul unselectable="unselectable" class="ant-pagination">
    <li title="Previous Page" tabindex="0" class=" ant-pagination-prev"><a class="ant-pagination-item-link"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
            <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
@ -164,7 +165,30 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
    <li class="ant-pagination-options">
      <div class="ant-pagination-options-quick-jumper">Go to<input type="text"></div>
    </li>
+  </ul> <br>
+  <ul unselectable="unselectable" class="ant-pagination ant-pagination-disabled">
+    <li title="Previous Page" tabindex="0" class=" ant-pagination-prev"><a class="ant-pagination-item-link"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+            <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
+          </svg></i></a></li>
+    <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1"><a>1</a></li>
+    <li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active"><a>2</a></li>
+    <li title="3" tabindex="0" class="ant-pagination-item ant-pagination-item-3"><a>3</a></li>
+    <li title="4" tabindex="0" class="ant-pagination-item ant-pagination-item-4"><a>4</a></li>
+    <li title="5" tabindex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"><a>5</a></li>
+    <li title="Next 5 Pages" tabindex="0" class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"><a class="ant-pagination-item-link">
+        <div class="ant-pagination-item-container"><i aria-label="icon: double-right" class="ant-pagination-item-link-icon anticon anticon-double-right"><svg viewBox="64 64 896 896" data-icon="double-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+              <path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path>
+            </svg></i><span class="ant-pagination-item-ellipsis">•••</span></div>
+      </a></li>
+    <li title="50" tabindex="0" class="ant-pagination-item ant-pagination-item-50"><a>50</a></li>
+    <li title="Next Page" tabindex="0" class=" ant-pagination-next"><a class="ant-pagination-item-link"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i></a></li>
+    <li class="ant-pagination-options">
+      <div class="ant-pagination-options-quick-jumper">Go to<input disabled="disabled" type="text"></div>
+    </li>
  </ul>
+</div>
 `;

 exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
--- a/components/pagination/tests/index.test.js
+++ b/components/pagination/tests/index.test.js
@ -0,0 +1,6 @@
+import Pagination from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Pagination', () => {
+  mountTest(Pagination);
+});
--- a/components/pagination/demo/basic.md
+++ b/components/pagination/demo/basic.md
@ -10,7 +10,7 @@ Basic pagination.

 ```tpl
 <template>
-  <a-pagination v-model="current" :total="50" />
+  <a-pagination v-model="current" :total="50" showLessItems />
 </template>
 <script>
  export default {
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@ -24,6 +24,7 @@ Change `pageSize`.
      @showSizeChange="onShowSizeChange"
      :total="500"
      v-model="current"
+      disabled
    />
  </div>
 </template>
--- a/components/pagination/demo/jump.md
+++ b/components/pagination/demo/jump.md
@ -10,7 +10,11 @@ Jump to a page directly.

 ```tpl
 <template>
+<div>
  <a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" />
+  <br/>
+  <a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" disabled showLessItems />
+</div>
 </template>
 <script>
  export default {
--- a/components/pagination/index.en-US.md
+++ b/components/pagination/index.en-US.md
@ -4,21 +4,24 @@
 <a-pagination @change="onChange" :total="50" />
 ```

-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| current(v-model) | current page number | number | - |
-| defaultCurrent | default initial page number | number | 1 |
-| defaultPageSize | default number of data items per page | number | 10 |
-| hideOnSinglePage | Whether to hide pager on single page | boolean | false |
-| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
-| pageSize(.sync) | number of data items per page | number | - |
-| pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] |
-| showQuickJumper | determine whether you can jump to pages directly | boolean | false |
-| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
-| showTotal | to display the total number and range | Function(total, range) | - |
-| simple | whether to use simple mode | boolean | - |
-| size | specify the size of `Pagination`, can be set to `small` | string | "" |
-| total | total number of data items | number | 0 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| current(v-model) | current page number | number | - |  |
+| defaultCurrent | default initial page number | number | 1 |  |
+| defaultPageSize | default number of data items per page | number | 10 |  |
+| disabled | Disable pagination | boolean | - | 1.5.0 |
+| hideOnSinglePage | Whether to hide pager on single page | boolean | false |  |
+| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |  |
+| pageSize(.sync) | number of data items per page | number | - |  |
+| pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] |  |
+| showLessItems | Show less page items | boolean | false | 1.5.0 |
+| showQuickJumper | determine whether you can jump to pages directly | boolean | false |  |
+| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |  |
+| showTitle | Show page item's title | boolean | true | 1.5.0 |
+| showTotal | to display the total number and range | Function(total, range) | - |  |
+| simple | whether to use simple mode | boolean | - |  |
+| size | specify the size of `Pagination`, can be set to `small` | string | "" |  |
+| total | total number of data items | number | 0 |  |

 ### events

--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@ -4,21 +4,23 @@
 <a-pagination @change="onChange" :total="50" />
 ```

-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| current(v-model) | 当前页数 | number | - |
-| defaultCurrent | 默认的当前页数 | number | 1 |
-| defaultPageSize | 默认的每页条数 | number | 10 |
-| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
-| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
-| pageSize(.sync) | 每页条数 | number | - |
-| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '30', '40'] |
-| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
-| showSizeChanger | 是否可以改变 pageSize | boolean | false |
-| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
-| simple | 当添加该属性时，显示为简单分页 | boolean | - |
-| size | 当为「small」时，是小尺寸分页 | string | "" |
-| total | 数据总数 | number | 0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| current(v-model) | 当前页数 | number | - |  |
+| defaultCurrent | 默认的当前页数 | number | 1 |  |
+| defaultPageSize | 默认的每页条数 | number | 10 |  |
+| disabled | 禁用分页 | boolean | - | 1.5.0 |
+| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |  |
+| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |  |
+| pageSize(.sync) | 每页条数 | number | - |  |
+| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '30', '40'] |  |
+| showLessItems | show less page items | boolean | false | 1.5.0 |
+| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |  |
+| showSizeChanger | 是否可以改变 pageSize | boolean | false |  |
+| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |  |
+| simple | 当添加该属性时，显示为简单分页 | boolean | - |  |
+| size | 当为「small」时，是小尺寸分页 | string | "" |  |
+| total | 数据总数 | number | 0 |  |

 ### 事件

--- a/components/vc-pagination/Options.jsx
+++ b/components/vc-pagination/Options.jsx
@ -26,7 +26,7 @@ export default {
  methods: {
    getValidValue() {
      const { goInputText, current } = this;
-      return isNaN(goInputText) ? current : Number(goInputText);
+      return !goInputText || isNaN(goInputText) ? current : Number(goInputText);
    },
    defaultBuildOptionText(opt) {
      return `${opt.value} ${this.locale.items_per_page}`;
@ -39,10 +39,17 @@ export default {
      });
    },
    handleBlur() {
-      const { goButton, quickGo } = this;
+      const { goButton, quickGo, rootPrefixCls } = this.$props;
      if (goButton) {
        return;
      }
+      if (
+        e.relatedTarget &&
+        (e.relatedTarget.className.indexOf(`${rootPrefixCls}-prev`) >= 0 ||
+          e.relatedTarget.className.indexOf(`${rootPrefixCls}-next`) >= 0)
+      ) {
+        return;
+      }
      quickGo(this.getValidValue());
    },
    go(e) {
--- a/components/vc-pagination/Pager.jsx
+++ b/components/vc-pagination/Pager.jsx
@ -1,4 +1,5 @@
 import PropTypes from '../_util/vue-types';
+import classNames from 'classnames';

 export default {
  name: 'Pager',
@ -14,16 +15,6 @@ export default {
      default: () => {},
    },
  },
-  computed: {
-    classes() {
-      const prefixCls = `${this.rootPrefixCls}-item`;
-      let cls = `${prefixCls} ${prefixCls}-${this.page}`;
-      if (this.active) {
-        cls = `${cls} ${prefixCls}-active`;
-      }
-      return cls;
-    },
-  },
  methods: {
    handleClick() {
      this.$emit('click', this.page);
@ -33,17 +24,12 @@ export default {
    },
  },
  render() {
-    const { rootPrefixCls, page, active } = this;
-    const prefixCls = `${rootPrefixCls}-item`;
-    let cls = `${prefixCls} ${prefixCls}-${page}`;
-
-    if (active) {
-      cls = `${cls} ${prefixCls}-active`;
-    }
-
-    if (!page) {
-      cls = `${cls} ${prefixCls}-disabled`;
-    }
+    const props = this.$props;
+    const prefixCls = `${props.rootPrefixCls}-item`;
+    const cls = classNames(prefixCls, `${prefixCls}-${props.page}`, {
+      [`${prefixCls}-active`]: props.active,
+      [`${prefixCls}-disabled`]: !props.page,
+    });

    return (
      <li
--- a/components/vc-pagination/Pagination.jsx
+++ b/components/vc-pagination/Pagination.jsx
@ -1,6 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-import { hasProp, getComponentFromProp } from '../_util/props-util';
+import { hasProp, getComponentFromProp, getOptionProps } from '../_util/props-util';
 import Pager from './Pager';
 import Options from './Options';
 import LOCALE from './locale/zh_CN';
@ -61,23 +61,26 @@ export default {
    jumpNextIcon: PropTypes.any,
  },
  data() {
+    const props = getOptionProps(this);
    const hasOnChange = this.onChange !== noop;
-    const hasCurrent = hasProp(this, 'current');
+    const hasCurrent = 'current' in props;
    if (hasCurrent && !hasOnChange) {
      console.warn(
        'Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.',
      ); // eslint-disable-line
    }
    let current = this.defaultCurrent;
-    if (hasCurrent) {
+    if ('current' in props) {
      current = this.current;
    }

    let pageSize = this.defaultPageSize;
-    if (hasProp(this, 'pageSize')) {
+    if ('pageSize' in props) {
      pageSize = this.pageSize;
    }

+    current = Math.min(current, calculatePage(pageSize, undefined, props));
+
    return {
      stateCurrent: current,
      stateCurrentInputValue: current,
@ -137,19 +140,22 @@ export default {
    },
    getValidValue(e) {
      const inputValue = e.target.value;
+      const allPages = calculatePage(undefined, this.$data, this.$props);
      const { stateCurrentInputValue } = this.$data;
      let value;
      if (inputValue === '') {
        value = inputValue;
      } else if (isNaN(Number(inputValue))) {
        value = stateCurrentInputValue;
+      } else if (inputValue >= allPages) {
+        value = allPages;
      } else {
        value = Number(inputValue);
      }
      return value;
    },
    isValid(page) {
-      return isInteger(page) && page >= 1 && page !== this.stateCurrent;
+      return isInteger(page) && page !== this.stateCurrent;
    },
    shouldDisplayQuickJumper() {
      const { showQuickJumper, pageSize, total } = this.$props;
@ -225,6 +231,8 @@ export default {
        const currentPage = calculatePage(undefined, this.$data, this.$props);
        if (page > currentPage) {
          page = currentPage;
+        } else if (page < 1) {
+          page = 1;
        }
        if (!hasProp(this, 'current')) {
          this.setState({
--- a/components/vc-pagination/index.js
+++ b/components/vc-pagination/index.js
@ -1,2 +1,2 @@
-// based on rc-pagination 1.20.5
+// based on rc-pagination 1.20.14
 export { default } from './Pagination';
--- a/components/vc-pagination/locale/az_AZ.js
+++ b/components/vc-pagination/locale/az_AZ.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ səhifə',
+  jump_to: 'Get',
+  jump_to_confirm: 'təsdiqlə',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Əvvəlki Səhifə',
+  next_page: 'Növbəti Səhifə',
+  prev_5: 'Əvvəlki 5 Səhifə',
+  next_5: 'Növbəti 5 Səhifə',
+  prev_3: 'Əvvəlki 3 Səhifə',
+  next_3: 'Növbəti 3 Səhifə',
+};
--- a/components/vc-pagination/locale/mk_MK.js
+++ b/components/vc-pagination/locale/mk_MK.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ стр',
+  jump_to: 'Оди на',
+  jump_to_confirm: 'потврди',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Претходна страница',
+  next_page: 'Наредна страница',
+  prev_5: 'Претходни 5 страници',
+  next_5: 'Наредни 5 страници',
+  prev_3: 'Претходни 3 страници',
+  next_3: 'Наредни 3 страници',
+};
--- a/components/vc-pagination/locale/pa_IN.js
+++ b/components/vc-pagination/locale/pa_IN.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ ਪੰਨਾ',
+  jump_to: 'Goto',
+  jump_to_confirm: 'ਪੁਸ਼ਟੀ ਕਰੋ',
+  page: 'ਪੰਨਾ',
+
+  // Pagination.jsx
+  prev_page: 'ਪਿਛਲਾ ਪੰਨਾ',
+  next_page: 'ਅਗਲਾ ਪੰਨਾ',
+  prev_5: 'ਪਿਛਲੇ 5 ਪੰਨੇ',
+  next_5: 'ਅਗਲੇ 5 ਪੰਨੇ',
+  prev_3: 'ਪਿਛਲੇ 3 ਪੰਨੇ',
+  next_3: 'ਅਗਲੇ 3 ਪੰਨੇ',
+};
--- a/components/vc-pagination/locale/pb_IN.js
+++ b/components/vc-pagination/locale/pb_IN.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ ਪੰਨਾ',
+  jump_to: 'Goto',
+  jump_to_confirm: 'ਪੁਸ਼ਟੀ ਕਰੋ',
+  page: 'ਪੰਨਾ',
+
+  // Pagination.jsx
+  prev_page: 'ਪਿਛਲਾ ਪੰਨਾ',
+  next_page: 'ਅਗਲਾ ਪੰਨਾ',
+  prev_5: 'ਪਿਛਲੇ 5 ਪੰਨੇ',
+  next_5: 'ਅਗਲੇ 5 ਪੰਨੇ',
+  prev_3: 'ਪਿਛਲੇ 3 ਪੰਨੇ',
+  next_3: 'ਅਗਲੇ 3 ਪੰਨੇ',
+};
--- a/types/pagination.d.ts
+++ b/types/pagination.d.ts
@ -65,7 +65,7 @@ export declare class Pagination extends AntdComponent {
   * @default false
   * @type boolean
   */
-  showQuickJumper?: boolean;
+  showQuickJumper?: boolean | object;

  /**
   * to display the total number and range