feat(module:progress): support steps (#4637)

* feat(module:progress): support steps

* test: add test
* chore: remove console

close #4635

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.

components/progress/demo/step.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-progress-step',
+  template: `
+    <nz-progress [nzPercent]="50" [nzSteps]="3" nzStrokeColor="#1890ff"></nz-progress>
+    <nz-progress [nzPercent]="30" [nzSteps]="5" nzStrokeColor="#1890ff"></nz-progress>
+    <nz-progress [nzPercent]="100" [nzSteps]="5" nzStrokeColor="#1890ff" nzSize="small"></nz-progress>
+  `
+})
+export class NzDemoProgressStepComponent {}

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"`
 

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"`
 

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"
 >
   <!-- line progress -->
   <div *ngIf="nzType === 'line'">
-    <div class="ant-progress-outer">
-      <div class="ant-progress-inner">
-        <div
-          class="ant-progress-bg"
-          [style.width.%]="nzPercent"
-          [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
-          [style.background]="!isGradient ? nzStrokeColor : null"
-          [style.background-image]="isGradient ? lineGradient : null"
-          [style.height.px]="strokeWidth"
-        ></div>
-        <div
-          *ngIf="nzSuccessPercent || nzSuccessPercent === 0"
-          class="ant-progress-success-bg"
-          [style.width.%]="nzSuccessPercent"
-          [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
-          [style.height.px]="strokeWidth"
-        ></div>
+    <ng-container *ngIf="!isSteps">
+      <div class="ant-progress-outer" *ngIf="!isSteps">
+        <div class="ant-progress-inner">
+          <div
+            class="ant-progress-bg"
+            [style.width.%]="nzPercent"
+            [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
+            [style.background]="!isGradient ? nzStrokeColor : null"
+            [style.background-image]="isGradient ? lineGradient : null"
+            [style.height.px]="strokeWidth"
+          ></div>
+          <div
+            *ngIf="nzSuccessPercent || nzSuccessPercent === 0"
+            class="ant-progress-success-bg"
+            [style.width.%]="nzSuccessPercent"
+            [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
+            [style.height.px]="strokeWidth"
+          ></div>
+        </div>
       </div>
+      <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
+    </ng-container>
+    <!-- Step style progress -->
+    <div class="ant-progress-steps-outer" *ngIf="isSteps">
+      <div
+        *ngFor="let step of steps; let i = index"
+        class="ant-progress-steps-item"
+        [ngStyle]="step"
+      ></div>
+      <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
     </div>
-    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
   </div>
 
   <!-- circle / dashboard progress -->

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 `<linearGradient>`.
@@ -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.
    */

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;
+}

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"
     >
     </nz-progress>
     <ng-template #formatterTemplate let-percent> {{ percent }} / 100 </ng-template>
@@ -399,6 +413,7 @@ export class NzTestProgressLineComponent {
   successPercent = 0;
   showInfo = true;
   strokeLinecap = 'round';
+  steps?: number;
   strokeColor: NzProgressStrokeColorType;
 }