feat(module:statistics): countdown support finish event (#3902)

NG-ZORRO · Aug 9, 2019 · 9ea40da · 9ea40da
1 parent 07e86a5
commit 9ea40da
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 38 deletions.
diff --git a/components/statistic/doc/index.en-US.md b/components/statistic/doc/index.en-US.md
@@ -42,6 +42,7 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic';
 | `[nzTitle]` | Title | `string \| TemplateRef<void>` | - |
 | `[nzValue]` | Target time in timestamp form | `string \| number` | - |
 | `[nzValueTemplate]` | Custom template to render a time | `TemplateRef<{ $implicit: number }>` | - |
+| `(nzCountdownFinish)` | Emit when countdown finishes | `void` | - |
 
 ### nzFormat
 

diff --git a/components/statistic/doc/index.zh-CN.md b/components/statistic/doc/index.zh-CN.md
@@ -43,6 +43,7 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic';
 | `[nzTitle]` | 数值的标题 | `string \| TemplateRef<void>` | - |
 | `[nzValue]` | 时间戳格式的目标时间 | `string \| number` | - |
 | `[nzValueTemplate]` | 自定义时间展示 | `TemplateRef<{ $implicit: number }>` | - |
+| `(nzCountdownFinish)` | 当倒计时完成时发出事件 | `void` | - |
 
 ### nzFormat
 

diff --git a/components/statistic/nz-countdown.component.ts b/components/statistic/nz-countdown.component.ts
@@ -11,11 +11,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
   NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
+  Output,
   SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
@@ -34,6 +36,7 @@ import { NzStatisticComponent } from './nz-statistic.component';
 export class NzCountdownComponent extends NzStatisticComponent implements OnInit, OnChanges, OnDestroy {
   /** @override */
   @Input() nzFormat: string = 'HH:mm:ss';
+  @Output() readonly nzCountdownFinish = new EventEmitter<void>();
 
   diff: number;
 
@@ -97,6 +100,7 @@ export class NzCountdownComponent extends NzStatisticComponent implements OnInit
 
     if (this.diff === 0) {
       this.stopTimer();
+      this.nzCountdownFinish.next();
     }
   }
 }
diff --git a/components/statistic/nz-countdown.spec.ts b/components/statistic/nz-countdown.spec.ts
@@ -5,6 +5,45 @@ import { By } from '@angular/platform-browser';
 import { NzCountdownComponent } from './nz-countdown.component';
 import { NzStatisticModule } from './nz-statistic.module';
 
+@Component({
+  template: `
+    <nz-countdown
+      [nzTitle]="'Countdown'"
+      [nzValue]="value"
+      [nzFormat]="format"
+      [nzValueTemplate]="template"
+      (nzCountdownFinish)="onFinish()"
+    >
+    </nz-countdown>
+    <ng-template #tpl let-diff>
+      {{ diff }}
+    </ng-template>
+  `
+})
+export class NzTestCountdownComponent {
+  @ViewChild(NzCountdownComponent, { static: true }) countdown: NzCountdownComponent;
+  @ViewChild('tpl', { static: true }) tpl: TemplateRef<number>;
+
+  format: string;
+  value: number;
+  template: TemplateRef<number>;
+  finished = 0;
+
+  resetTimerWithFormat(format: string): void {
+    this.format = format;
+    this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
+  }
+
+  resetWithTemplate(): void {
+    this.template = this.tpl;
+    this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
+  }
+
+  onFinish(): void {
+    this.finished += 1;
+  }
+}
+
 describe('nz-countdown', () => {
   let fixture: ComponentFixture<NzTestCountdownComponent>;
   let testComponent: NzTestCountdownComponent;
@@ -54,33 +93,15 @@ describe('nz-countdown', () => {
       expect(countdownEl.nativeElement.querySelector('.ant-statistic-content-value').innerText).toBe('172829900');
       testComponent.countdown.stopTimer();
     }));
-  });
-});
 
-@Component({
-  template: `
-    <nz-countdown [nzTitle]="'Countdown'" [nzValue]="value" [nzFormat]="format" [nzValueTemplate]="template">
-    </nz-countdown>
-    <ng-template #tpl let-diff>
-      {{ diff }}
-    </ng-template>
-  `
-})
-export class NzTestCountdownComponent {
-  @ViewChild(NzCountdownComponent, { static: true }) countdown: NzCountdownComponent;
-  @ViewChild('tpl', { static: true }) tpl: TemplateRef<number>;
-
-  format: string;
-  value: number;
-  template: TemplateRef<number>;
+    it('should stop timer and emit event', fakeAsync(() => {
+      const nearTime = new Date().getTime() + 1000 * 2;
+      testComponent.value = nearTime;
 
-  resetTimerWithFormat(format: string): void {
-    this.format = format;
-    this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
-  }
-
-  resetWithTemplate(): void {
-    this.template = this.tpl;
-    this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
-  }
-}
+      fixture.detectChanges();
+      tick(3000);
+      fixture.detectChanges();
+      expect(testComponent.finished).toBe(1);
+    }));
+  });
+});
diff --git a/components/statistic/nz-time-range.spec.ts b/components/statistic/nz-time-range.spec.ts
@@ -3,6 +3,16 @@ import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NzStatisticModule } from './nz-statistic.module';
 
+@Component({
+  template: `
+    {{ diff | nzTimeRange: format }}
+  `
+})
+export class NzTestTimeRangeComponent {
+  diff = 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
+  format = 'HH:mm:ss';
+}
+
 describe('nz time range pipeline', () => {
   let fixture: ComponentFixture<NzTestTimeRangeComponent>;
   let testComponent: NzTestTimeRangeComponent;
@@ -46,13 +56,3 @@ describe('nz time range pipeline', () => {
     });
   });
 });
-
-@Component({
-  template: `
-    {{ diff | nzTimeRange: format }}
-  `
-})
-export class NzTestTimeRangeComponent {
-  diff = 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
-  format = 'HH:mm:ss';
-}