feat(module:pagination): support global config (#6043)

close #6042
NG-ZORRO · Nov 21, 2020 · 3c55b7c · 3c55b7c
1 parent caab8be
commit 3c55b7c
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 41 deletions.
diff --git a/components/core/config/config.ts b/components/core/config/config.ts
@@ -35,6 +35,7 @@ export interface NzConfig {
   modal?: ModalConfig;
   notification?: NotificationConfig;
   pageHeader?: PageHeaderConfig;
+  pagination?: PaginationConfig;
   progress?: ProgressConfig;
   rate?: RateConfig;
   space?: SpaceConfig;
@@ -187,6 +188,14 @@ export interface PageHeaderConfig {
   nzGhost: boolean;
 }
 
+export interface PaginationConfig {
+  nzSize?: 'default' | 'small';
+  nzPageSizeOptions?: number[];
+  nzShowSizeChanger?: boolean;
+  nzShowQuickJumper?: boolean;
+  nzSimple?: boolean;
+}
+
 export interface ProgressConfig {
   nzGapDegree?: number;
   nzGapPosition?: 'top' | 'right' | 'bottom' | 'left';

diff --git a/components/pagination/doc/index.en-US.md b/components/pagination/doc/index.en-US.md
@@ -25,20 +25,20 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 
 ### nz-pagination
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[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` | - |
-| `[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 ] }>` | - |
-| `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` |
-| `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - |
-| `(nzPageSizeChange)` | number of data items per page change callback | `EventEmitter<number>` | - |
+| Property | Description | Type | Default | Global Config |
+| -------- | ----------- | ---- | ------- | ------------- |
+| `[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` | - | ✅ |
+| `[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 ] }>` | - | - |
+| `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | - |
+| `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - | - |
+| `(nzPageSizeChange)` | number of data items per page change callback | `EventEmitter<number>` | - | - |
diff --git a/components/pagination/doc/index.zh-CN.md b/components/pagination/doc/index.zh-CN.md
@@ -26,20 +26,20 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 
 ### nz-pagination
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzTotal]` | 数据总数 | `number` | - |
-| `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` |
-| `[nzPageSize]` | 每页条数 ，可双向绑定| `number` | `10`|
-| `[nzDisabled]` | 是否禁用 | `boolean` | `false`|
-| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` |
-| `[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 ] }>` | - |
-| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` |
-| `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - |
-| `(nzPageSizeChange)` | 每页条数改变的回调 | `EventEmitter<number>` | - |
+| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
+| --- | --- | --- | --- | --- |
+| `[nzTotal]` | 数据总数 | `number` | - | - |
+| `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` | - |
+| `[nzPageSize]` | 每页条数 ，可双向绑定| `number` | `10`| - |
+| `[nzDisabled]` | 是否禁用 | `boolean` | `false`| - |
+| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ |
+| `[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 ] }>` | - | - |
+| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | - |
+| `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - | - |
+| `(nzPageSizeChange)` | 每页条数改变的回调 | `EventEmitter<number>` | - | - |
diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
@@ -17,6 +17,7 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
+import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { gridResponsiveMap, NzBreakpointEnum, NzBreakpointService } from 'ng-zorro-antd/core/services';
 import { BooleanInput, NumberInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
@@ -26,6 +27,8 @@ import { takeUntil } from 'rxjs/operators';
 
 import { PaginationItemRenderContext } from './pagination.types';
 
+const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
+
 @Component({
   selector: 'nz-pagination',
   exportAs: 'nzPagination',
@@ -73,6 +76,8 @@ import { PaginationItemRenderContext } from './pagination.types';
   }
 })
 export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
+  readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
+
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzShowSizeChanger: BooleanInput;
   static ngAcceptInputType_nzHideOnSinglePage: BooleanInput;
@@ -86,15 +91,15 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
   @Output() readonly nzPageSizeChange: EventEmitter<number> = new EventEmitter();
   @Output() readonly nzPageIndexChange: EventEmitter<number> = new EventEmitter();
   @Input() nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }> | null = null;
-  @Input() nzSize: 'default' | 'small' = 'default';
-  @Input() nzPageSizeOptions = [10, 20, 30, 40];
   @Input() nzItemRender: TemplateRef<PaginationItemRenderContext> | null = null;
+  @Input() @WithConfig() nzSize: 'default' | 'small' = 'default';
+  @Input() @WithConfig() nzPageSizeOptions: number[] = [10, 20, 30, 40];
+  @Input() @WithConfig() @InputBoolean() nzShowSizeChanger = false;
+  @Input() @WithConfig() @InputBoolean() nzShowQuickJumper = false;
+  @Input() @WithConfig() @InputBoolean() nzSimple = false;
   @Input() @InputBoolean() nzDisabled = false;
-  @Input() @InputBoolean() nzShowSizeChanger = false;
-  @Input() @InputBoolean() nzHideOnSinglePage = false;
-  @Input() @InputBoolean() nzShowQuickJumper = false;
-  @Input() @InputBoolean() nzSimple = false;
   @Input() @InputBoolean() nzResponsive = false;
+  @Input() @InputBoolean() nzHideOnSinglePage = false;
   @Input() @InputNumber() nzTotal = 0;
   @Input() @InputNumber() nzPageIndex = 1;
   @Input() @InputNumber() nzPageSize = 10;
@@ -145,7 +150,12 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
     return Math.ceil(total / pageSize);
   }
 
-  constructor(private i18n: NzI18nService, private cdr: ChangeDetectorRef, private breakpointService: NzBreakpointService) {}
+  constructor(
+    private i18n: NzI18nService,
+    private cdr: ChangeDetectorRef,
+    private breakpointService: NzBreakpointService,
+    protected nzConfigService: NzConfigService
+  ) {}
 
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {