feat(module:pagination): support pagination nzDisabled

NG-ZORRO · Jun 21, 2019 · 141bef8 · 141bef8
1 parent 67f6fa2
commit 141bef8
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 49 deletions.
diff --git a/components/pagination/demo/changer.ts b/components/pagination/demo/changer.ts
@@ -4,6 +4,8 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-pagination-changer',
   template: `
     <nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10"></nz-pagination>
+    <br />
+    <nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10" nzDisabled></nz-pagination>
   `,
   styles: []
 })

diff --git a/components/pagination/demo/jump.ts b/components/pagination/demo/jump.ts
@@ -4,6 +4,8 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-pagination-jump',
   template: `
     <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper></nz-pagination>
+    <br />
+    <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper nzDisabled></nz-pagination>
   `,
   styles: []
 })

diff --git a/components/pagination/doc/index.en-US.md b/components/pagination/doc/index.en-US.md
@@ -33,6 +33,7 @@ import { NzPaginationModule } from 'ng-zorro-antd';
 | `[nzTotal]` | total number of data items | `number` | `0` |
 | `[nzPageIndex]` | current page number，double binding | `number` | `1` |
 | `[nzPageSize]` | number of data items per page, double binding | `number` | `10`|
+| `[nzDisabled]` | disable pagination | `boolean` | `false`|
 | `[nzShowQuickJumper]` | determine whether you can jump to pages directly | `boolean` | `false` |
 | `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` |
 | `[nzSimple]` | whether to use simple mode | `boolean` | - |

diff --git a/components/pagination/doc/index.zh-CN.md b/components/pagination/doc/index.zh-CN.md
@@ -34,6 +34,7 @@ import { NzPaginationModule } from 'ng-zorro-antd';
 | `[nzTotal]` | 数据总数 | `number` | - |
 | `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` |
 | `[nzPageSize]` | 每页条数 ，可双向绑定| `number` | `10`|
+| `[nzDisabled]` | 是否禁用 | `boolean` | `false`|
 | `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` |
 | `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` |
 | `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - |

diff --git a/components/pagination/nz-pagination.component.html b/components/pagination/nz-pagination.component.html
@@ -1,52 +1,63 @@
 <ng-template #renderItemTemplate let-type let-page="page">
-  <a class="ant-pagination-item-link" *ngIf="type==='pre'"><i nz-icon type="left"></i></a>
-  <a class="ant-pagination-item-link" *ngIf="type==='next'"><i nz-icon type="right"></i></a>
+  <a class="ant-pagination-item-link" *ngIf="type==='pre'">
+    <i nz-icon type="left"></i>
+  </a>
+  <a class="ant-pagination-item-link" *ngIf="type==='next'">
+    <i nz-icon type="right"></i>
+  </a>
   <a *ngIf="type=='page'">{{ page }}</a>
 </ng-template>
 <ng-container *ngIf="nzHideOnSinglePage && (nzTotal > nzPageSize) || !nzHideOnSinglePage">
   <ul class="ant-pagination"
-    [class.ant-table-pagination]="nzInTable"
-    [class.ant-pagination-simple]="nzSimple"
-    [class.mini]="(nzSize === 'small') && !nzSimple">
+      [class.ant-table-pagination]="nzInTable"
+      [class.ant-pagination-simple]="nzSimple"
+      [class.ant-pagination-disabled]="nzDisabled"
+      [class.mini]="(nzSize === 'small') && !nzSimple">
     <ng-container *ngIf="nzSimple; else normalTemplate">
       <li class="ant-pagination-prev"
-        [attr.title]="locale.prev_page"
-        [class.ant-pagination-disabled]="isFirstIndex"
-        (click)="jumpDiff(-1)">
+          [attr.title]="locale.prev_page"
+          [class.ant-pagination-disabled]="isFirstIndex"
+          (click)="jumpDiff(-1)">
         <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'pre'}"></ng-template>
       </li>
       <li [attr.title]="nzPageIndex+'/'+lastIndex" class="ant-pagination-simple-pager">
-        <input #simplePagerInput [value]="nzPageIndex" (keydown.enter)="handleKeyDown($event,simplePagerInput,false)" size="3">
+        <input #simplePagerInput
+               [disabled]="nzDisabled"
+               [value]="nzPageIndex"
+               (keydown.enter)="handleKeyDown($event,simplePagerInput,false)"
+               size="3">
         <span class="ant-pagination-slash">／</span>
         {{ lastIndex }}
       </li>
       <li class="ant-pagination-next"
-        [attr.title]="locale.next_page"
-        [class.ant-pagination-disabled]="isLastIndex"
-        (click)="jumpDiff(1)">
+          [attr.title]="locale.next_page"
+          [class.ant-pagination-disabled]="isLastIndex"
+          (click)="jumpDiff(1)">
         <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'next'}"></ng-template>
       </li>
     </ng-container>
     <ng-template #normalTemplate>
       <li class="ant-pagination-total-text" *ngIf="nzShowTotal">
-        <ng-template [ngTemplateOutlet]="nzShowTotal" [ngTemplateOutletContext]="{ $implicit: nzTotal,range:ranges }"></ng-template>
+        <ng-template [ngTemplateOutlet]="nzShowTotal"
+                     [ngTemplateOutletContext]="{ $implicit: nzTotal,range:ranges }"></ng-template>
       </li>
       <li class="ant-pagination-prev"
-        [attr.title]="locale.prev_page"
-        [class.ant-pagination-disabled]="isFirstIndex"
-        (click)="jumpDiff(-1)">
+          [attr.title]="locale.prev_page"
+          [class.ant-pagination-disabled]="isFirstIndex"
+          (click)="jumpDiff(-1)">
         <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'pre'}"></ng-template>
       </li>
       <li class="ant-pagination-item"
-        [attr.title]="firstIndex"
-        [class.ant-pagination-item-active]="isFirstIndex"
-        (click)="jumpPage(firstIndex)">
-        <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: firstIndex }"></ng-template>
+          [attr.title]="firstIndex"
+          [class.ant-pagination-item-active]="isFirstIndex"
+          (click)="jumpPage(firstIndex)">
+        <ng-template [ngTemplateOutlet]="nzItemRender"
+                     [ngTemplateOutletContext]="{ $implicit: 'page',page: firstIndex }"></ng-template>
       </li>
       <li class="ant-pagination-jump-prev"
-        *ngIf="(lastIndex > 9) && (nzPageIndex - 3 > firstIndex)"
-        [attr.title]="locale.prev_5"
-        (click)="jumpDiff(-5)">
+          *ngIf="(lastIndex > 9) && (nzPageIndex - 3 > firstIndex)"
+          [attr.title]="locale.prev_5"
+          (click)="jumpDiff(-5)">
         <a class="ant-pagination-item-link">
           <div class="ant-pagination-item-container">
             <i nz-icon type="double-left" class="ant-pagination-item-link-icon"></i>
@@ -55,16 +66,17 @@
         </a>
       </li>
       <li class="ant-pagination-item"
-        *ngFor="let page of pages"
-        [attr.title]="page"
-        [class.ant-pagination-item-active]="nzPageIndex === page"
-        (click)="jumpPage(page)">
-        <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: page }"></ng-template>
+          *ngFor="let page of pages"
+          [attr.title]="page"
+          [class.ant-pagination-item-active]="nzPageIndex === page"
+          (click)="jumpPage(page)">
+        <ng-template [ngTemplateOutlet]="nzItemRender"
+                     [ngTemplateOutletContext]="{ $implicit: 'page',page: page }"></ng-template>
       </li>
       <li class="ant-pagination-jump-next ant-pagination-item-link-icon"
-        [attr.title]="locale.next_5"
-        (click)="jumpDiff(5)"
-        *ngIf="(lastIndex > 9) && (nzPageIndex + 3 < lastIndex)">
+          [attr.title]="locale.next_5"
+          (click)="jumpDiff(5)"
+          *ngIf="(lastIndex > 9) && (nzPageIndex + 3 < lastIndex)">
         <a class="ant-pagination-item-link">
           <div class="ant-pagination-item-container">
             <i nz-icon type="double-right" class="ant-pagination-item-link-icon"></i>
@@ -73,36 +85,40 @@
         </a>
       </li>
       <li class="ant-pagination-item"
-        [attr.title]="lastIndex"
-        (click)="jumpPage(lastIndex)"
-        *ngIf="(lastIndex > 0) && (lastIndex !== firstIndex)"
-        [class.ant-pagination-item-active]="isLastIndex">
-        <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: lastIndex }"></ng-template>
+          [attr.title]="lastIndex"
+          (click)="jumpPage(lastIndex)"
+          *ngIf="(lastIndex > 0) && (lastIndex !== firstIndex)"
+          [class.ant-pagination-item-active]="isLastIndex">
+        <ng-template [ngTemplateOutlet]="nzItemRender"
+                     [ngTemplateOutletContext]="{ $implicit: 'page',page: lastIndex }"></ng-template>
       </li>
       <li class="ant-pagination-next"
-        [title]="locale.next_page"
-        [class.ant-pagination-disabled]="isLastIndex"
-        (click)="jumpDiff(1)">
+          [title]="locale.next_page"
+          [class.ant-pagination-disabled]="isLastIndex"
+          (click)="jumpDiff(1)">
         <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'next'}"></ng-template>
       </li>
       <div class="ant-pagination-options" *ngIf="nzShowQuickJumper || nzShowSizeChanger">
         <nz-select class="ant-pagination-options-size-changer"
-          *ngIf="nzShowSizeChanger"
-          [nzSize]="nzSize"
-          [ngModel]="nzPageSize"
-          (ngModelChange)="onPageSizeChange($event)">
+                   *ngIf="nzShowSizeChanger"
+                   [nzDisabled]="nzDisabled"
+                   [nzSize]="nzSize"
+                   [ngModel]="nzPageSize"
+                   (ngModelChange)="onPageSizeChange($event)">
           <nz-option *ngFor="let option of nzPageSizeOptions"
-            [nzLabel]="option + locale.items_per_page"
-            [nzValue]="option">
+                     [nzLabel]="option + locale.items_per_page"
+                     [nzValue]="option">
           </nz-option>
           <nz-option *ngIf="showAddOption"
-            [nzLabel]="nzPageSize + locale.items_per_page"
-            [nzValue]="nzPageSize">
+                     [nzLabel]="nzPageSize + locale.items_per_page"
+                     [nzValue]="nzPageSize">
           </nz-option>
         </nz-select>
         <div class="ant-pagination-options-quick-jumper" *ngIf="nzShowQuickJumper">
           {{ locale.jump_to }}
-          <input #quickJumperInput (keydown.enter)="handleKeyDown($event,quickJumperInput,true)">
+          <input #quickJumperInput
+                 [disabled]="nzDisabled"
+                 (keydown.enter)="handleKeyDown($event,quickJumperInput,true)">
           {{ locale.page }}
         </div>
       </div>

diff --git a/components/pagination/nz-pagination.component.ts b/components/pagination/nz-pagination.component.ts
@@ -51,6 +51,7 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
     $implicit: 'page' | 'prev' | 'next';
     page: number;
   }>;
+  @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzShowSizeChanger = false;
   @Input() @InputBoolean() nzHideOnSinglePage = false;
   @Input() @InputBoolean() nzShowQuickJumper = false;
@@ -80,7 +81,7 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   jumpPage(index: number): void {
-    if (index !== this.nzPageIndex) {
+    if (index !== this.nzPageIndex && !this.nzDisabled) {
       const pageIndex = this.validatePageIndex(index);
       if (pageIndex !== this.nzPageIndex) {
         this.updatePageIndexValue(pageIndex);

diff --git a/components/pagination/nz-pagination.spec.ts b/components/pagination/nz-pagination.spec.ts
@@ -198,6 +198,13 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
         expect(testComponent.pageIndex).toBe(5);
       });
+      it('should nzDisabled work', () => {
+        fixture.detectChanges();
+        testComponent.disabled = true;
+        fixture.detectChanges();
+        console.log(paginationElement.classList);
+        expect(paginationElement.classList.contains('ant-pagination-disabled')).toBe(true);
+      });
     });
     describe('simple mode', () => {
       beforeEach(() => {
@@ -303,6 +310,7 @@ describe('pagination', () => {
     <nz-pagination
       [nzSimple]="simple"
       [(nzPageIndex)]="pageIndex"
+      [nzDisabled]="disabled"
       (nzPageIndexChange)="pageIndexChange($event)"
       [(nzPageSize)]="pageSize"
       (nzPageSizeChange)="pageSizeChange($event)"
@@ -321,6 +329,7 @@ export class NzTestPaginationComponent {
   pageIndex = 1;
   pageSize = 10;
   total = 50;
+  disabled = false;
   pageIndexChange = jasmine.createSpy('pageIndexChange callback');
   pageSizeChange = jasmine.createSpy('pageSizeChange callback');
   showQuickJumper = false;