feat(module:spin): support global indicator (#4221)

close #2792

components/core/config/config.ts

@@ -33,11 +33,12 @@ export interface NzConfig {
   form?: FormConfig;
   grid?: GridConfig;
   icon?: IconConfig;
-  modal?: ModalConfig;
   message?: MessageConfig;
+  modal?: ModalConfig;
   notification?: NotificationConfig;
   progress?: ProgressConfig;
   rate?: RateConfig;
+  spin?: SpinConfig;
   switch?: SwitchConfig;
   table?: TableConfig;
   tabs?: TabsConfig;
@@ -179,6 +180,10 @@ export interface RateConfig {
   nzAllowHalf?: boolean;
 }
 
+export interface SpinConfig {
+  nzIndicator?: TemplateRef<void>;
+}
+
 export interface SwitchConfig {
   nzSize: NzSizeDSType;
 }

components/spin/doc/index.en-US.md

@@ -22,10 +22,10 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 ### nz-spin
 
-| Property | Description | Type | Default Value |
-| -------- | ----------- | ---- | ------------- |
+| Property | Description | Type | Default Value | Global Config |
+| -------- | ----------- | ---- | ------------- | ------------- |
 | `[nzDelay]` | specifies a delay in milliseconds for loading state (prevent flush), unit: milliseconds | `number` | - |
-| `[nzIndicator]` | the spinning indicator | `TemplateRef<void>` | - |
+| `[nzIndicator]` | the spinning indicator | `TemplateRef<void>` | - | ✅ |
 | `[nzSize]` | size of Spin | `'large' \| 'small' \| 'default'` | `'default'` |
 | `[nzSpinning]` | whether Spin is spinning | `boolean` | `true` |
 | `[nzSimple]` | whether Spin has no children | `boolean` | `false` |

components/spin/doc/index.zh-CN.md

@@ -23,10 +23,10 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 ### nz-spin
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
+| --- | --- | --- | --- | --- |
 | `[nzDelay]` | 延迟显示加载效果的时间（防止闪烁），单位：毫秒 | `number` | - |
-| `[nzIndicator]` | 加载指示符 | `TemplateRef<void>` | - |
+| `[nzIndicator]` | 加载指示符 | `TemplateRef<void>` | - | ✅ |
 | `[nzSize]` | 组件大小 | `'large' \| 'small' \| 'default'` | `'default'` |
 | `[nzSpinning]` | 是否旋转 | `boolean` | `true` |
 | `[nzSimple]` | 是否包裹元素 | `boolean` | `false` |

components/spin/nz-spin.component.ts

@@ -18,10 +18,17 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
-import { InputBoolean, InputNumber, NzSizeLDSType } from 'ng-zorro-antd/core';
+import {
+  trimComponentName,
+  InputBoolean,
+  InputNumber,
+  NzConfigService,
+  NzSizeLDSType,
+  WithConfig
+} from 'ng-zorro-antd/core';
 
 @Component({
   selector: 'nz-spin',
@@ -42,13 +49,14 @@ import { InputBoolean, InputNumber, NzSizeLDSType } from 'ng-zorro-antd/core';
   ]
 })
 export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
-  @Input() nzIndicator: TemplateRef<void>;
+  @Input() @WithConfig() nzIndicator: TemplateRef<void>;
   @Input() nzSize: NzSizeLDSType = 'default';
   @Input() nzTip: string;
   @Input() @InputNumber() nzDelay = 0;
   @Input() @InputBoolean() nzSimple = false;
   @Input() @InputBoolean() nzSpinning = true;
   loading = true;
+  private destroy$ = new Subject<void>();
   private spinning$ = new BehaviorSubject(this.nzSpinning);
   private loading$: Observable<boolean> = this.spinning$.pipe(debounceTime(this.nzDelay));
   private loading_: Subscription | null;
@@ -68,10 +76,15 @@ export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     this.subscribeLoading();
+
+    this.nzConfigService
+      .getConfigChangeEventForComponent(trimComponentName(this.constructor.name))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => this.cdr.markForCheck());
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -88,6 +101,8 @@ export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
     this.unsubscribeLoading();
   }
 }

components/spin/nz-spin.spec.ts

@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
 
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
+import { NzConfigService } from 'ng-zorro-antd/core';
 import { NzSpinComponent } from './nz-spin.component';
 import { NzSpinModule } from './nz-spin.module';
 
@@ -15,23 +16,27 @@ describe('spin', () => {
     });
     TestBed.compileComponents();
   }));
+
   describe('spin basic', () => {
     let fixture: ComponentFixture<NzTestSpinBasicComponent>;
     let testComponent: NzTestSpinBasicComponent;
     let spin: DebugElement;
+
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestSpinBasicComponent);
       fixture.detectChanges();
       testComponent = fixture.debugElement.componentInstance;
       spin = fixture.debugElement.query(By.directive(NzSpinComponent));
     });
+
     it('should className correct', fakeAsync(() => {
       fixture.detectChanges();
       tick(1000);
       fixture.detectChanges();
       console.log(spin.nativeElement);
       expect(spin.nativeElement.querySelector('.ant-spin').firstElementChild!.classList).toContain('ant-spin-dot');
     }));
+
     it('should size work', fakeAsync(() => {
       fixture.detectChanges();
       tick();
@@ -43,6 +48,7 @@ describe('spin', () => {
       fixture.detectChanges();
       expect(spin.nativeElement.querySelector('.ant-spin').classList).toContain('ant-spin-lg');
     }));
+
     it('should spinning work', fakeAsync(() => {
       fixture.detectChanges();
       tick();
@@ -58,14 +64,27 @@ describe('spin', () => {
       fixture.detectChanges();
       expect(spin.nativeElement.querySelector('.ant-spin')).toBeDefined();
     }));
+
     it('should indicator work', () => {
       fixture.detectChanges();
       expect(spin.nativeElement.querySelector('.ant-spin-dot')).toBeDefined();
+
       testComponent.indicator = testComponent.indicatorTemplate;
       fixture.detectChanges();
       expect(spin.nativeElement.querySelector('.ant-spin-dot')).toBeNull();
       expect(spin.nativeElement.querySelector('.anticon-loading')).toBeDefined();
     });
+
+    it('should global config indicator work', () => {
+      fixture.detectChanges();
+      expect(spin.nativeElement.querySelector('.ant-spin-dot')).toBeDefined();
+
+      testComponent.nzConfigService.set('spin', { nzIndicator: testComponent.indicatorTemplate });
+      fixture.detectChanges();
+      expect(spin.nativeElement.querySelector('.ant-spin-dot')).toBeNull();
+      expect(spin.nativeElement.querySelector('.anticon-loading')).toBeDefined();
+    })
+
     it('should delay work', fakeAsync(() => {
       fixture.detectChanges();
       tick();
@@ -81,6 +100,7 @@ describe('spin', () => {
       fixture.detectChanges();
       expect(spin.nativeElement.querySelector('.ant-spin')).toBeNull();
     }));
+
     it('should wrapper work', fakeAsync(() => {
       fixture.detectChanges();
       tick();
@@ -91,6 +111,7 @@ describe('spin', () => {
       fixture.detectChanges();
       expect(spin.nativeElement.querySelector('.ant-spin-container')).toBeNull();
     }));
+
     it('should tip work', fakeAsync(() => {
       fixture.detectChanges();
       tick();
@@ -120,10 +141,13 @@ describe('spin', () => {
 })
 export class NzTestSpinBasicComponent {
   @ViewChild('indicatorTemplate', { static: false }) indicatorTemplate: TemplateRef<void>;
+
   size = 'default';
   delay = 0;
   spinning = true;
   indicator: TemplateRef<void>;
   tip: string;
   simple = false;
+
+  constructor(public nzConfigService: NzConfigService) {}
 }