Skip to content

Commit

Permalink
refactor(module:pagination): refactor control flow component (#8416)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nicoss54
Nicoss54 authored Feb 29, 2024
1 parent fdfc816 commit 2576612
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 116 deletions.
24 changes: 17 additions & 7 deletions components/pagination/demo/item-render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,23 @@ import { Component } from '@angular/core';
template: `
<nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzItemRender]="renderItemTemplate"></nz-pagination>
<ng-template #renderItemTemplate let-type let-page="page">
<ng-container [ngSwitch]="type">
<a *ngSwitchCase="'page'">{{ page }}</a>
<a *ngSwitchCase="'prev'">Previous</a>
<a *ngSwitchCase="'next'">Next</a>
<a *ngSwitchCase="'prev_5'"><<</a>
<a *ngSwitchCase="'next_5'">>></a>
</ng-container>
@switch (type) {
@case ('page') {
<a>{{ page }}</a>
}
@case ('prev') {
<a>Previous</a>
}
@case ('next') {
<a>Next</a>
}
@case ('prev_5') {
<a><<</a>
}
@case ('next_5') {
<a>>></a>
}
}
</ng-template>
`
})
Expand Down
78 changes: 42 additions & 36 deletions components/pagination/pagination-default.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { Direction, Directionality } from '@angular/cdk/bidi';
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand Down Expand Up @@ -41,44 +41,50 @@ import { PaginationItemRenderContext } from './pagination.types';
template: `
<ng-template #containerTemplate>
<ul>
<li class="ant-pagination-total-text" *ngIf="showTotal">
<ng-template
[ngTemplateOutlet]="showTotal"
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
></ng-template>
</li>
<li
*ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
nz-pagination-item
[locale]="locale"
[type]="page.type"
[index]="page.index"
[disabled]="!!page.disabled"
[itemRender]="itemRender"
[active]="pageIndex === page.index"
(gotoIndex)="jumpPage($event)"
(diffIndex)="jumpDiff($event)"
[direction]="dir"
></li>
<li
nz-pagination-options
*ngIf="showQuickJumper || showSizeChanger"
[total]="total"
[locale]="locale"
[disabled]="disabled"
[nzSize]="nzSize"
[showSizeChanger]="showSizeChanger"
[showQuickJumper]="showQuickJumper"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(pageIndexChange)="onPageIndexChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
></li>
@if (showTotal) {
<li class="ant-pagination-total-text">
<ng-template
[ngTemplateOutlet]="showTotal"
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
/>
</li>
}
@for (page of listOfPageItem; track trackByPageItem) {
<li
nz-pagination-item
[locale]="locale"
[type]="page.type"
[index]="page.index"
[disabled]="!!page.disabled"
[itemRender]="itemRender"
[active]="pageIndex === page.index"
(gotoIndex)="jumpPage($event)"
(diffIndex)="jumpDiff($event)"
[direction]="dir"
></li>
}
@if (showQuickJumper || showSizeChanger) {
<li
nz-pagination-options
[total]="total"
[locale]="locale"
[disabled]="disabled"
[nzSize]="nzSize"
[showSizeChanger]="showSizeChanger"
[showQuickJumper]="showQuickJumper"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(pageIndexChange)="onPageIndexChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
></li>
}
</ul>
</ng-template>
`,
imports: [NgTemplateOutlet, NgForOf, NgIf, NzPaginationItemComponent, NzPaginationOptionsComponent],
imports: [NgTemplateOutlet, NzPaginationItemComponent, NzPaginationOptionsComponent],
standalone: true
})
export class NzPaginationDefaultComponent implements OnChanges, OnDestroy, OnInit {
Expand Down
90 changes: 52 additions & 38 deletions components/pagination/pagination-item.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
import { PaginationItemRenderContext, PaginationItemType } from './pagination.types';
import { NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';

@Component({
Expand All @@ -28,48 +28,62 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template #renderItemTemplate let-type let-page="page">
<ng-container [ngSwitch]="type">
<a *ngSwitchCase="'page'">{{ page }}</a>
<button type="button" [disabled]="disabled" class="ant-pagination-item-link" *ngSwitchCase="'prev'">
<ng-container [ngSwitch]="direction">
<span *ngSwitchCase="'rtl'" nz-icon nzType="right"></span>
<span *ngSwitchDefault nz-icon nzType="left"></span>
</ng-container>
</button>
<button type="button" [disabled]="disabled" class="ant-pagination-item-link" *ngSwitchCase="'next'">
<ng-container [ngSwitch]="direction">
<span *ngSwitchCase="'rtl'" nz-icon nzType="left"></span>
<span *ngSwitchDefault nz-icon nzType="right"></span>
</ng-container>
</button>
<ng-container *ngSwitchDefault>
<a class="ant-pagination-item-link" [ngSwitch]="type">
<div class="ant-pagination-item-container" *ngSwitchDefault>
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'prev_5'" [ngSwitch]="direction">
<span
*ngSwitchCase="'rtl'"
nz-icon
nzType="double-right"
class="ant-pagination-item-link-icon"
></span>
<span *ngSwitchDefault nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
</ng-container>
<ng-container *ngSwitchCase="'next_5'" [ngSwitch]="direction">
<span *ngSwitchCase="'rtl'" nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
<span *ngSwitchDefault nz-icon nzType="double-right" class="ant-pagination-item-link-icon"></span>
</ng-container>
</ng-container>
@switch (type) {
@case ('page') {
<a>{{ page }}</a>
}
@case ('prev') {
<button type="button" [disabled]="disabled" class="ant-pagination-item-link">
@if (direction === 'rtl') {
<span nz-icon nzType="right"></span>
} @else {
<span nz-icon nzType="left"></span>
}
</button>
}
@case ('next') {
<button type="button" [disabled]="disabled" class="ant-pagination-item-link">
@if (direction === 'rtl') {
<span nz-icon nzType="left"></span>
} @else {
<span nz-icon nzType="right"></span>
}
</button>
}
@default {
<a class="ant-pagination-item-link">
<div class="ant-pagination-item-container">
@switch (type) {
@case ('prev_5') {
@if (direction === 'rtl') {
<span
nz-icon
nzType="double-right"
class="ant-pagination-item-link-icon"
></span>
} @else {
<span nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
}
}
@case ('next_5') {
@if (direction === 'rtl') {
<span nz-icon nzType="double-left"
class="ant-pagination-item-link-icon"></span>
} @else {
<span nz-icon nzType="double-right" class="ant-pagination-item-link-icon"></span>
}
}
}
<span class="ant-pagination-item-ellipsis">•••</span>
</div>
</a>
</ng-container>
</ng-container>
}
}
</ng-template>
<ng-template
[ngTemplateOutlet]="itemRender || renderItemTemplate"
[ngTemplateOutletContext]="{ $implicit: type, page: index }"
></ng-template>
/>
`,
host: {
'[class.ant-pagination-prev]': `type === 'prev'`,
Expand All @@ -84,7 +98,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
'[attr.title]': 'title',
'(click)': 'clickItem()'
},
imports: [NgSwitch, NgSwitchCase, NzIconModule, NgSwitchDefault, NgTemplateOutlet],
imports: [NzIconModule, NgTemplateOutlet],
standalone: true
})
export class NzPaginationItemComponent implements OnChanges {
Expand Down Expand Up @@ -122,7 +136,7 @@ export class NzPaginationItemComponent implements OnChanges {
}

ngOnChanges(changes: SimpleChanges): void {
const { locale, index, type } = changes;
const {locale, index, type} = changes;
if (locale || index || type) {
this.title = (
{
Expand Down
47 changes: 22 additions & 25 deletions components/pagination/pagination-options.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { NgForOf, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
Expand All @@ -26,28 +25,30 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<nz-select
class="ant-pagination-options-size-changer"
*ngIf="showSizeChanger"
[nzDisabled]="disabled"
[nzSize]="nzSize"
[ngModel]="pageSize"
(ngModelChange)="onPageSizeChange($event)"
>
<nz-option
*ngFor="let option of listOfPageSizeOption; trackBy: trackByOption"
[nzLabel]="option.label"
[nzValue]="option.value"
></nz-option>
</nz-select>
<div class="ant-pagination-options-quick-jumper" *ngIf="showQuickJumper">
{{ locale.jump_to }}
<input [disabled]="disabled" (keydown.enter)="jumpToPageViaInput($event)" />
{{ locale.page }}
</div>
@if (showSizeChanger) {
<nz-select
class="ant-pagination-options-size-changer"
[nzDisabled]="disabled"
[nzSize]="nzSize"
[ngModel]="pageSize"
(ngModelChange)="onPageSizeChange($event)"
>
@for (option of listOfPageSizeOption; track option.value) {
<nz-option [nzLabel]="option.label" [nzValue]="option.value" />
}
</nz-select>
}
@if (showQuickJumper) {
<div class="ant-pagination-options-quick-jumper">
{{ locale.jump_to }}
<input [disabled]="disabled" (keydown.enter)="jumpToPageViaInput($event)" />
{{ locale.page }}
</div>
}
`,
host: { class: 'ant-pagination-options' },
imports: [NzSelectModule, NgIf, FormsModule, NgForOf],
imports: [NzSelectModule, FormsModule],
standalone: true
})
export class NzPaginationOptionsComponent implements OnChanges {
Expand Down Expand Up @@ -79,10 +80,6 @@ export class NzPaginationOptionsComponent implements OnChanges {
target.value = '';
}

trackByOption(_: number, option: { value: number; label: string }): number {
return option.value;
}

ngOnChanges(changes: SimpleChanges): void {
const { pageSize, pageSizeOptions, locale } = changes;
if (pageSize || pageSizeOptions || locale) {
Expand Down
17 changes: 10 additions & 7 deletions components/pagination/pagination.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { Direction, Directionality } from '@angular/cdk/bidi';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand Down Expand Up @@ -42,11 +42,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container *ngIf="showPagination">
<ng-container *ngIf="nzSimple; else defaultPagination.template">
<ng-template [ngTemplateOutlet]="simplePagination.template"></ng-template>
</ng-container>
</ng-container>
@if (showPagination) {
@if (nzSimple) {
<ng-template [ngTemplateOutlet]="simplePagination.template" />
} @else {
<ng-template [ngTemplateOutlet]="defaultPagination.template" />
}
}
<nz-pagination-simple
#simplePagination
[disabled]="nzDisabled"
Expand Down Expand Up @@ -81,7 +84,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
'[class.mini]': `!nzSimple && size === 'small'`,
'[class.ant-pagination-rtl]': `dir === 'rtl'`
},
imports: [NgIf, NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent],
imports: [NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent],
standalone: true
})
export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
Expand Down
14 changes: 11 additions & 3 deletions components/pagination/pagination.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,9 +457,17 @@ export class NzTestPaginationComponent {
template: `
<nz-pagination [nzPageIndex]="1" [nzTotal]="50" [nzItemRender]="renderItemTemplate"></nz-pagination>
<ng-template #renderItemTemplate let-type let-page="page">
<a *ngIf="type === 'prev'">Previous</a>
<a *ngIf="type === 'next'">Next</a>
<a *ngIf="type === 'page'">{{ page * 2 }}</a>
@switch (type) {
@case ('prev') {
<a>Previous</a>
}
@case ('next') {
<a>Next</a>
}
@case ('page') {
<a>{{ page * 2 }}</a>
}
}
</ng-template>
`
})
Expand Down

0 comments on commit 2576612

Please sign in to comment.