feat(module:pagination): add auto resize (NG-ZORRO#4863)

hsuanxyz · Mar 24, 2020 · a859f54 · a859f54
1 parent c4f4433
commit a859f54
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 6 deletions.
diff --git a/components/pagination/doc/index.en-US.md b/components/pagination/doc/index.en-US.md
@@ -34,6 +34,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 | `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` |
 | `[nzSimple]` | whether to use simple mode | `boolean` | - |
 | `[nzSize]` | specify the size of `nz-pagination`, can be set to `small` | `'small'` | `'default'` |
+| `[nzResponsive]` | `Pagination` would resize according to the width of the window | `boolean` | `false` |
 | `[nzPageSizeOptions]` | specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` |
 | `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - |
 | `[nzShowTotal]` | to display the total number and range | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - |

diff --git a/components/pagination/doc/index.zh-CN.md b/components/pagination/doc/index.zh-CN.md
@@ -35,6 +35,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 | `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` |
 | `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - |
 | `[nzSize]` | 当为「small」时，是小尺寸分页 | `'small'` | `'default'` |
+| `[nzResponsive]` | 当 `nzSize` 未指定时，根据屏幕宽度自动调整尺寸 | `boolean` | `false` |
 | `[nzPageSizeOptions]` | 指定每页可以显示多少条 | `number[]` | `[10, 20, 30, 40]` |
 | `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - |
 | `[nzShowTotal]` | 用于显示数据总量和当前数据范围，具体使用方式见代码演示部分 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - |

diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
@@ -20,12 +20,13 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
-
+import { gridResponsiveMap, NzBreakpointEnum, NzBreakpointService } from 'ng-zorro-antd/core/services';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { ReplaySubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+
 import { PaginationItemRenderContext } from './pagination.types';
 
 @Component({
@@ -52,7 +53,7 @@ import { PaginationItemRenderContext } from './pagination.types';
         *ngIf="!nzSimple"
         nz-pagination-default
         [class.ant-table-pagination]="nzInsideTable"
-        [nzSize]="nzSize"
+        [nzSize]="size"
         [itemRender]="nzItemRender"
         [showTotal]="nzShowTotal"
         [disabled]="nzDisabled"
@@ -82,11 +83,15 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
   @Input() @InputBoolean() nzHideOnSinglePage = false;
   @Input() @InputBoolean() nzShowQuickJumper = false;
   @Input() @InputBoolean() nzSimple = false;
+  @Input() @InputBoolean() nzResponsive = false;
   @Input() @InputNumber() nzTotal = 0;
   @Input() @InputNumber() nzPageIndex = 1;
   @Input() @InputNumber() nzPageSize = 10;
+
   showPagination = true;
   locale: NzSafeAny = {};
+  size: 'default' | 'small' = 'default';
+
   private destroy$ = new Subject<void>();
   private total$ = new ReplaySubject<number>(1);
 
@@ -129,16 +134,27 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
     return Math.ceil(total / pageSize);
   }
 
-  constructor(private i18n: NzI18nService, private cdr: ChangeDetectorRef) {}
+  constructor(private i18n: NzI18nService, private cdr: ChangeDetectorRef, private breakpointService: NzBreakpointService) {}
 
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.locale = this.i18n.getLocaleData('Pagination');
       this.cdr.markForCheck();
     });
+
     this.total$.pipe(takeUntil(this.destroy$)).subscribe(total => {
       this.onTotalChange(total);
     });
+
+    this.breakpointService
+      .subscribe(gridResponsiveMap)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(bp => {
+        if (this.nzResponsive) {
+          this.size = bp === NzBreakpointEnum.xs ? 'small' : 'default';
+          this.cdr.markForCheck();
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -147,12 +163,16 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzHideOnSinglePage, nzTotal, nzPageSize } = changes;
+    const { nzHideOnSinglePage, nzTotal, nzPageSize, nzSize } = changes;
     if (nzTotal) {
       this.total$.next(this.nzTotal);
     }
     if (nzHideOnSinglePage || nzTotal || nzPageSize) {
       this.showPagination = (this.nzHideOnSinglePage && this.nzTotal > this.nzPageSize) || (this.nzTotal > 0 && !this.nzHideOnSinglePage);
     }
+
+    if (nzSize) {
+      this.size = nzSize.currentValue;
+    }
   }
 }
diff --git a/components/pagination/pagination.spec.ts b/components/pagination/pagination.spec.ts
@@ -1,22 +1,30 @@
 import { ENTER } from '@angular/cdk/keycodes';
 import { Component, DebugElement, Injector, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { createKeyboardEvent, dispatchKeyboardEvent } from 'ng-zorro-antd/core/testing';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import en_US from '../i18n/languages/en_US';
 import { NzI18nService } from '../i18n/nz-i18n.service';
 import { NzPaginationComponent } from './pagination.component';
 import { NzPaginationModule } from './pagination.module';
 
+declare const viewport: NzSafeAny;
+
 describe('pagination', () => {
   let injector: Injector;
 
   beforeEach(async(() => {
     injector = TestBed.configureTestingModule({
       imports: [NzPaginationModule, NoopAnimationsModule],
-      declarations: [NzTestPaginationComponent, NzTestPaginationRenderComponent, NzTestPaginationTotalComponent]
+      declarations: [
+        NzTestPaginationComponent,
+        NzTestPaginationRenderComponent,
+        NzTestPaginationTotalComponent,
+        NzTestPaginationAutoResizeComponent
+      ]
     });
     TestBed.compileComponents();
   }));
@@ -26,13 +34,15 @@ describe('pagination', () => {
     let testComponent: NzTestPaginationComponent;
     let pagination: DebugElement;
     let paginationElement: HTMLElement;
+
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestPaginationComponent);
       testComponent = fixture.debugElement.componentInstance;
       pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
       fixture.detectChanges();
       paginationElement = pagination.nativeElement.firstElementChild;
     });
+
     describe('not simple mode', () => {
       it('should className correct', () => {
         fixture.detectChanges();
@@ -45,11 +55,13 @@ describe('pagination', () => {
         expect(array[0].classList.contains('ant-pagination-item-active')).toBe(true);
         expect(array.every((node: HTMLElement) => node.classList.contains('ant-pagination-item'))).toBe(true);
       });
+
       it('should small size className correct', () => {
         testComponent.size = 'small';
         fixture.detectChanges();
         expect(paginationElement.classList.contains('mini')).toBe(true);
       });
+
       it('should pageIndex change work', () => {
         testComponent.pageIndex = 2;
         fixture.detectChanges();
@@ -58,6 +70,7 @@ describe('pagination', () => {
         const array = Array.prototype.slice.call(paginationElement.children).slice(1, length - 1);
         expect(array[1].classList.contains('ant-pagination-item-active')).toBe(true);
       });
+
       it('should pageIndex change not trigger when same', () => {
         fixture.detectChanges();
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
@@ -68,6 +81,7 @@ describe('pagination', () => {
         fixture.detectChanges();
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
       });
+
       it('should change pageIndex change pages list', () => {
         fixture.detectChanges();
         testComponent.total = 500;
@@ -77,6 +91,7 @@ describe('pagination', () => {
         fixture.detectChanges();
         expect(paginationElement.children.length).toBe(11);
       });
+
       it('should pre button disabled', () => {
         fixture.detectChanges();
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
@@ -85,6 +100,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
         expect(testComponent.pageIndex).toBe(1);
       });
+
       it('should pre button work', () => {
         testComponent.pageIndex = 5;
         fixture.detectChanges();
@@ -94,6 +110,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
         expect(testComponent.pageIndex).toBe(4);
       });
+
       it('should next button disabled', () => {
         testComponent.pageIndex = 5;
         fixture.detectChanges();
@@ -103,6 +120,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
         expect(testComponent.pageIndex).toBe(5);
       });
+
       it('should next button work', () => {
         fixture.detectChanges();
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
@@ -111,6 +129,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndex).toBe(2);
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
       });
+
       it('should click pageIndex work', () => {
         fixture.detectChanges();
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
@@ -119,11 +138,13 @@ describe('pagination', () => {
         expect(testComponent.pageIndex).toBe(3);
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
       });
+
       it('should total change style work', () => {
         testComponent.total = 500;
         fixture.detectChanges();
         expect(paginationElement.children.length).toBe(9);
       });
+
       it('should next five work', () => {
         testComponent.total = 500;
         fixture.detectChanges();
@@ -135,6 +156,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
         expect(paginationElement.children.length).toBe(9);
       });
+
       it('should pre five work', () => {
         testComponent.total = 500;
         fixture.detectChanges();
@@ -147,6 +169,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
         expect(paginationElement.children.length).toBe(9);
       });
+
       it('should showSizeChanger work', async(() => {
         testComponent.total = 500;
         testComponent.pageIndex = 50;
@@ -157,6 +180,7 @@ describe('pagination', () => {
           expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-options')).toBe(true);
         });
       }));
+
       it('should change pageSize correct', () => {
         testComponent.pageIndex = 5;
         fixture.detectChanges();
@@ -165,6 +189,7 @@ describe('pagination', () => {
         expect(testComponent.pageIndex).toBe(3);
         expect(testComponent.pageSizeChange).toHaveBeenCalledTimes(1);
       });
+
       it('should showQuickJumper work', () => {
         testComponent.showQuickJumper = true;
         fixture.detectChanges();
@@ -199,13 +224,15 @@ describe('pagination', () => {
         expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
         expect(testComponent.pageIndex).toBe(5);
       });
+
       it('should nzDisabled work', () => {
         fixture.detectChanges();
         testComponent.disabled = true;
         fixture.detectChanges();
         expect(paginationElement.classList.contains('ant-pagination-disabled')).toBe(true);
       });
     });
+
     describe('simple mode', () => {
       beforeEach(() => {
         testComponent.simple = true;
@@ -253,6 +280,7 @@ describe('pagination', () => {
       expect(fixture.debugElement.nativeElement.querySelector('.ant-pagination')).toBeNull();
     });
   });
+
   describe('pagination render items', () => {
     let fixture: ComponentFixture<NzTestPaginationRenderComponent>;
     let pagination: DebugElement;
@@ -270,18 +298,21 @@ describe('pagination', () => {
       expect((paginationElement.children[1] as HTMLElement).innerText).toBe('2');
     });
   });
+
   describe('pagination total items', () => {
     let fixture: ComponentFixture<NzTestPaginationTotalComponent>;
     let testComponent: NzTestPaginationTotalComponent;
     let pagination: DebugElement;
     let paginationElement: HTMLElement;
+
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestPaginationTotalComponent);
       testComponent = fixture.debugElement.componentInstance;
       pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
       fixture.detectChanges();
       paginationElement = pagination.nativeElement.firstElementChild;
     });
+
     it('should render correct', () => {
       fixture.detectChanges();
       expect((paginationElement.firstElementChild as HTMLElement).innerText.trim()).toBe('1-20 of 85 items');
@@ -294,6 +325,25 @@ describe('pagination', () => {
     });
   });
 
+  it('should auto resize work', fakeAsync(() => {
+    const fixture = TestBed.createComponent(NzTestPaginationAutoResizeComponent);
+    const pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
+
+    viewport.set(1200, 350);
+    fixture.detectChanges();
+    let paginationElement = pagination.nativeElement.firstElementChild;
+    expect(paginationElement.classList).not.toContain('mini');
+
+    viewport.set(350, 350);
+    window.dispatchEvent(new Event('resize'));
+    fixture.detectChanges();
+    tick(1000);
+    fixture.detectChanges();
+    paginationElement = pagination.nativeElement.firstElementChild;
+    expect(paginationElement.classList).toContain('mini');
+    viewport.reset();
+  }));
+
   it('#i18n', () => {
     const fixture = TestBed.createComponent(NzTestPaginationComponent);
     const dl = fixture.debugElement;
@@ -363,3 +413,10 @@ export class NzTestPaginationRenderComponent {}
 export class NzTestPaginationTotalComponent {
   pageIndex = 1;
 }
+
+@Component({
+  template: `
+    <nz-pagination nzResponsive></nz-pagination>
+  `
+})
+export class NzTestPaginationAutoResizeComponent {}