From fe8b4696e7843a936c1458d52b07ba3098cb316d Mon Sep 17 00:00:00 2001 From: Wendell Date: Wed, 8 Jan 2020 19:09:05 +0800 Subject: [PATCH] feat(module:progress): support steps (#4637) * feat(module:progress): support steps * test: add test * chore: remove console close #4635 --- components/progress/demo/step.md | 15 ++++++ components/progress/demo/step.ts | 11 +++++ components/progress/doc/index.en-US.md | 1 + components/progress/doc/index.zh-CN.md | 1 + .../progress/nz-progress.component.html | 48 ++++++++++++------- components/progress/nz-progress.component.ts | 36 +++++++++++++- .../progress/nz-progress.definitions.ts | 6 +++ components/progress/nz-progress.spec.ts | 15 ++++++ 8 files changed, 114 insertions(+), 19 deletions(-) create mode 100644 components/progress/demo/step.md create mode 100644 components/progress/demo/step.ts diff --git a/components/progress/demo/step.md b/components/progress/demo/step.md new file mode 100644 index 00000000000..97d6e14b8d6 --- /dev/null +++ b/components/progress/demo/step.md @@ -0,0 +1,15 @@ +--- +order: 11 +title: + zh-CN: 步骤进度条 + en-US: Progress bar with steps + +--- + +## zh-CN + +带步骤的进度条。 + +## en-US + +A progress bar with steps. diff --git a/components/progress/demo/step.ts b/components/progress/demo/step.ts new file mode 100644 index 00000000000..bc5e22be0e3 --- /dev/null +++ b/components/progress/demo/step.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-progress-step', + template: ` + + + + ` +}) +export class NzDemoProgressStepComponent {} diff --git a/components/progress/doc/index.en-US.md b/components/progress/doc/index.en-US.md index e312df16781..3814887ac9e 100644 --- a/components/progress/doc/index.en-US.md +++ b/components/progress/doc/index.en-US.md @@ -37,6 +37,7 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | `[nzStrokeWidth]` | to set the width of the progress bar, unit: `px` | `number` | `8` | +| `[nzSteps]` | the total step count | `number` | - | ### `nzType="circle"` diff --git a/components/progress/doc/index.zh-CN.md b/components/progress/doc/index.zh-CN.md index 63b48bc2479..4dd8c27ccf7 100644 --- a/components/progress/doc/index.zh-CN.md +++ b/components/progress/doc/index.zh-CN.md @@ -38,6 +38,7 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `[nzStrokeWidth]` | 进度条线的宽度，单位 px | `number` | `8` | +| `[nzSteps]` | 进度条总共步数 | `number` | - | ### `nzType="circle"` diff --git a/components/progress/nz-progress.component.html b/components/progress/nz-progress.component.html index 84f0e383fed..a669e51f692 100644 --- a/components/progress/nz-progress.component.html +++ b/components/progress/nz-progress.component.html @@ -19,29 +19,41 @@ [class.ant-progress-small]="nzSize == 'small'" [class.ant-progress-show-info]="nzShowInfo" [class.ant-progress-circle]="isCircleStyle" + [class.ant-progress-steps]="isSteps" >
-
-
-
-
+ +
+
+
+
+
+ + + +
+
+
-
diff --git a/components/progress/nz-progress.component.ts b/components/progress/nz-progress.component.ts index fd95c80c684..8e966f7889a 100644 --- a/components/progress/nz-progress.component.ts +++ b/components/progress/nz-progress.component.ts @@ -20,6 +20,7 @@ import { NzProgressGapPositionType, NzProgressGradientProgress, NzProgressStatusType, + NzProgressStepItem, NzProgressStrokeColorType, NzProgressStrokeLinecapType, NzProgressTypeType @@ -62,12 +63,19 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy { @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'top') nzGapPosition: NzProgressGapPositionType; @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'round') nzStrokeLinecap: NzProgressStrokeLinecapType; + @Input() @InputNumber() nzSteps?: number; + + steps: NzProgressStepItem[] = []; + /** Gradient style when `nzType` is `line`. */ lineGradient: string | null = null; /** If user uses gradient color. */ isGradient = false; + /** If the linear progress is a step progress. */ + isSteps = false; + /** * Each progress whose `nzType` is circle or dashboard should have unique id to * define ``. @@ -110,7 +118,7 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy { constructor(public nzConfigService: NzConfigService) {} ngOnChanges(changes: SimpleChanges): void { - const { nzGapPosition, nzStrokeLinecap, nzStrokeColor, nzGapDegree, nzType, nzStatus, nzPercent, nzSuccessPercent } = changes; + const { nzSteps, nzGapPosition, nzStrokeLinecap, nzStrokeColor, nzGapDegree, nzType, nzStatus, nzPercent, nzSuccessPercent } = changes; if (nzStatus) { this.cachedStatus = this.nzStatus || this.cachedStatus; @@ -138,6 +146,11 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy { if (nzGapPosition || nzStrokeLinecap || nzGapDegree || nzType || nzPercent || nzStrokeColor) { this.getCirclePaths(); } + + if (nzSteps) { + this.isSteps = isNotNil(nzSteps.currentValue); + this.getSteps(); + } } ngOnInit(): void { @@ -161,6 +174,27 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy { this.icon = ret ? ret + (this.isCircleStyle ? '-o' : '-circle-fill') : ''; } + /** + * Calculate step render configs. + */ + private getSteps(): void { + const current = Math.floor(this.nzSteps! * (this.nzPercent / 100)); + const stepWidth = this.nzSize === 'small' ? 2 : 14; + + for (let i = 0; i < this.nzSteps!; i++) { + let color; + if (i <= current - 1) { + color = this.nzStrokeColor; + } + const stepStyle = { + backgroundColor: `${color}`, + width: `${stepWidth}px`, + height: `${this.strokeWidth}px` + }; + this.steps.push(stepStyle); + } + } + /** * Calculate paths when the type is circle or dashboard. */ diff --git a/components/progress/nz-progress.definitions.ts b/components/progress/nz-progress.definitions.ts index ef71b2f1a2a..290cfccdf1c 100644 --- a/components/progress/nz-progress.definitions.ts +++ b/components/progress/nz-progress.definitions.ts @@ -36,3 +36,9 @@ export interface NzProgressCirclePath { stroke: string | null; strokePathStyle: NgStyleInterface; } + +export interface NzProgressStepItem { + backgroundColor: string; + width: string; + height: string; +} diff --git a/components/progress/nz-progress.spec.ts b/components/progress/nz-progress.spec.ts index 2d1eec25596..e08b2473ba3 100644 --- a/components/progress/nz-progress.spec.ts +++ b/components/progress/nz-progress.spec.ts @@ -167,6 +167,19 @@ describe('progress', () => { expect(progressBar.style.background).toBe(''); expect(progressBar.style.backgroundImage).toBe('linear-gradient(to right, rgb(16, 142, 233) 0%, rgb(135, 208, 104) 100%)'); }); + + it('should support steps mode', () => { + testComponent.steps = 5; + testComponent.percent = 50; + testComponent.strokeColor = '#108ee9'; + fixture.detectChanges(); + + const steps = progress.nativeElement.querySelectorAll('.ant-progress-steps-item'); + + expect(steps.length).toBe(5); + expect((steps[0] as HTMLDivElement).style.backgroundColor).toBe('rgb(16, 142, 233)'); + expect((steps[4] as HTMLDivElement).style.backgroundColor).toBeFalsy(); + }); }); describe('progress dashboard', () => { @@ -384,6 +397,7 @@ describe('progress', () => { [nzPercent]="percent" [nzStrokeColor]="strokeColor" [nzStrokeLinecap]="strokeLinecap" + [nzSteps]="steps" > {{ percent }} / 100 @@ -399,6 +413,7 @@ export class NzTestProgressLineComponent { successPercent = 0; showInfo = true; strokeLinecap = 'round'; + steps?: number; strokeColor: NzProgressStrokeColorType; }