Skip to content
Permalink
Browse files

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

  • Loading branch information...
wendzhue committed Aug 9, 2019
1 parent 07e86a5 commit 9ea40da0191a2abad30d8956ae8eead4823b0b7b
@@ -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

@@ -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

@@ -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();
}
}
}
@@ -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);
}));
});
});
@@ -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';
}

0 comments on commit 9ea40da

Please sign in to comment.
You can’t perform that action at this time.