From edf0e9c015ea0b3a41e65123a3da74f0fdb6f977 Mon Sep 17 00:00:00 2001 From: Wendell Date: Mon, 6 Jan 2020 17:38:38 +0800 Subject: [PATCH] feat(module:progress): support TemplateRef for nzFormat (#4598) * feat(module:progress): support template ref for nzFormat close #4596 * docs: add docs * test: fix tests --- components/progress/doc/index.en-US.md | 2 +- components/progress/doc/index.zh-CN.md | 2 +- components/progress/nz-progress.component.html | 4 +++- components/progress/nz-progress.definitions.ts | 3 ++- components/progress/nz-progress.module.ts | 3 ++- components/progress/nz-progress.spec.ts | 16 +++++++++++----- 6 files changed, 20 insertions(+), 10 deletions(-) diff --git a/components/progress/doc/index.en-US.md b/components/progress/doc/index.en-US.md index 369c443f1a3..e312df16781 100644 --- a/components/progress/doc/index.en-US.md +++ b/components/progress/doc/index.en-US.md @@ -24,7 +24,7 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | `[nzType]` | to set the type | `'line' \| 'circle' \| 'dashboard'` | `'line'` | -| `[nzFormat]` | template function of the content | `(percent: number) => string` | `percent => percent + '%'` | +| `[nzFormat]` | template function of the content | `(percent: number) => string \| TemplateRef<{ $implicit: number }>` | `percent => percent + '%'` | | `[nzPercent]` | to set the completion percentage | `number` | `0` | | `[nzShowInfo]` | whether to display the progress value and the status icon | `boolean` | `true` | ✅ | | `[nzStatus]` | to set the status of the Progress | `'success' \| 'exception' \| 'active' \| 'normal'` | - | diff --git a/components/progress/doc/index.zh-CN.md b/components/progress/doc/index.zh-CN.md index 507a775987a..63b48bc2479 100644 --- a/components/progress/doc/index.zh-CN.md +++ b/components/progress/doc/index.zh-CN.md @@ -25,7 +25,7 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `[nzType]` | 类型 | `'line' \| 'circle' \| 'dashboard'` | `'line'` | -| `[nzFormat]` | 内容的模板函数 | `(percent: number) => string` | `percent => percent + '%'` | +| `[nzFormat]` | 内容的模板函数 | `(percent: number) => string \| TemplateRef<{ $implicit: number }>` | `percent => percent + '%'` | | `[nzPercent]` | 百分比 | `number` | `0` | | `[nzShowInfo]` | 是否显示进度数值或状态图标 | `boolean` | `true` | ✅ | | `[nzStatus]` | 状态 | `'success' \| 'exception' \| 'active' \| 'normal'` | - | diff --git a/components/progress/nz-progress.component.html b/components/progress/nz-progress.component.html index 590786f1452..ce387ac8677 100644 --- a/components/progress/nz-progress.component.html +++ b/components/progress/nz-progress.component.html @@ -6,7 +6,9 @@ - {{ formatter(nzPercent) }} + + {{ formatter(nzPercent) }} + diff --git a/components/progress/nz-progress.definitions.ts b/components/progress/nz-progress.definitions.ts index 917118ccdce..ef71b2f1a2a 100644 --- a/components/progress/nz-progress.definitions.ts +++ b/components/progress/nz-progress.definitions.ts @@ -6,6 +6,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { TemplateRef } from '@angular/core'; import { NgStyleInterface } from 'ng-zorro-antd/core'; export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right'; @@ -29,7 +30,7 @@ export type NzProgressColorGradient = { direction?: string } & (NzProgressGradie export type NzProgressStrokeColorType = string | NzProgressColorGradient; -export type NzProgressFormatter = (percent: number) => string; +export type NzProgressFormatter = ((percent: number) => string) | TemplateRef<{ $implicit: number }>; export interface NzProgressCirclePath { stroke: string | null; diff --git a/components/progress/nz-progress.module.ts b/components/progress/nz-progress.module.ts index a4a463ae0f6..3cb3ca310f4 100644 --- a/components/progress/nz-progress.module.ts +++ b/components/progress/nz-progress.module.ts @@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { NzAddOnModule } from 'ng-zorro-antd/core'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzProgressComponent } from './nz-progress.component'; @@ -15,6 +16,6 @@ import { NzProgressComponent } from './nz-progress.component'; @NgModule({ exports: [NzProgressComponent], declarations: [NzProgressComponent], - imports: [CommonModule, NzIconModule] + imports: [CommonModule, NzIconModule, NzAddOnModule] }) export class NzProgressModule {} diff --git a/components/progress/nz-progress.spec.ts b/components/progress/nz-progress.spec.ts index d16ab1bc25b..2d1eec25596 100644 --- a/components/progress/nz-progress.spec.ts +++ b/components/progress/nz-progress.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement } from '@angular/core'; +import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -79,13 +79,17 @@ describe('progress', () => { expect(progress.nativeElement.querySelector('.ant-progress')!.classList).not.toContain('ant-progress-status-success'); }); - it('should format work', () => { - testComponent.format = (percent: number) => `${percent} percent`; + it('should formatter work', () => { + testComponent.formatter = (percent: number) => `${percent} percent`; fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0 percent'); testComponent.percent = 100; fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('100 percent'); + + testComponent.formatter = testComponent.formatterTemplate; + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('100 / 100'); }); it('should status work', () => { @@ -373,7 +377,7 @@ describe('progress', () => { { [nzStrokeLinecap]="strokeLinecap" > + {{ percent }} / 100 ` }) export class NzTestProgressLineComponent { + @ViewChild('formatterTemplate') formatterTemplate: TemplateRef<{ $implicit: number }>; size: string; status: string; - format: NzProgressFormatter; + formatter: NzProgressFormatter; strokeWidth: number; percent = 0; successPercent = 0;