Skip to content

Commit

Permalink
feat(module:pagination): add auto resize (NG-ZORRO#4863)
Browse files Browse the repository at this point in the history
  • Loading branch information
Wendell authored Mar 24, 2020
1 parent c4f4433 commit a859f54
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 6 deletions.
1 change: 1 addition & 0 deletions components/pagination/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] }>` | - |
Expand Down
1 change: 1 addition & 0 deletions components/pagination/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] }>` | - |
Expand Down
28 changes: 24 additions & 4 deletions components/pagination/pagination.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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"
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
}
61 changes: 59 additions & 2 deletions components/pagination/pagination.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
}));
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand All @@ -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;
Expand Down Expand Up @@ -363,3 +413,10 @@ export class NzTestPaginationRenderComponent {}
export class NzTestPaginationTotalComponent {
pageIndex = 1;
}

@Component({
template: `
<nz-pagination nzResponsive></nz-pagination>
`
})
export class NzTestPaginationAutoResizeComponent {}

0 comments on commit a859f54

Please sign in to comment.