diff --git a/components/progress/demo/gradient.ts b/components/progress/demo/gradient.ts
index a8d267d65ab..ecd76e70297 100644
--- a/components/progress/demo/gradient.ts
+++ b/components/progress/demo/gradient.ts
@@ -12,7 +12,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
{
+describe('progress util functions', () => {
it('get correct line-gradient', () => {
expect(handleLinearGradient({ from: 'test', to: 'test' })).toBe('linear-gradient(to right, test, test)');
expect(handleLinearGradient({})).toBe('linear-gradient(to right, #1890ff, #1890ff)');
expect(handleLinearGradient({ from: 'test', to: 'test', '0%': 'test' })).toBe('linear-gradient(to right, test 0%)');
});
- it('sort gradients correctly', () => {
- expect(sortGradient({ '10%': 'test10', '30%': 'test30', '20%': 'test20' })).toBe(
- 'test10 10%, test20 20%, test30 30%'
- );
+ it('get correct circle gradient', () => {
+ const gradientOne = handleCircleGradient({ '10%': 'test10', '30%': 'test30', '20%': 'test20' });
+ expect(gradientOne[0].color).toBe('test10');
+ expect(gradientOne[0].offset).toBe('10%');
+ expect(gradientOne[1].color).toBe('test20');
+ expect(gradientOne[1].offset).toBe('20%');
});
});
diff --git a/components/progress/nz-progress-utils.ts b/components/progress/nz-progress-utils.ts
index 380b2dfc011..a077acaa698 100644
--- a/components/progress/nz-progress-utils.ts
+++ b/components/progress/nz-progress-utils.ts
@@ -8,17 +8,16 @@
import { NzProgressColorGradient, NzProgressGradientProgress } from './nz-progress.definitions';
+function stripPercentToNumber(percent: string): number {
+ return +percent.replace('%', '');
+}
+
export const sortGradient = (gradients: NzProgressGradientProgress) => {
let tempArr: Array<{ key: number; value: string }> = [];
- const keys = Object.keys(gradients);
-
- for (const key of keys) {
- if (!gradients.hasOwnProperty(key)) {
- return;
- }
+ Object.keys(gradients).forEach(key => {
const value = gradients[key];
- const formatKey = parseFloat(key.replace(/%/g, ''));
+ const formatKey = stripPercentToNumber(key);
if (isNaN(formatKey)) {
return {};
}
@@ -26,16 +25,24 @@ export const sortGradient = (gradients: NzProgressGradientProgress) => {
key: formatKey,
value
});
- }
+ });
tempArr = tempArr.sort((a, b) => a.key - b.key);
- return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
+ return tempArr;
+};
+
+export const handleCircleGradient = (
+ strokeColor: NzProgressGradientProgress
+): Array<{ offset: string; color: string }> => {
+ return sortGradient(strokeColor).map(({ key, value }) => ({ offset: `${key}%`, color: value }));
};
export const handleLinearGradient = (strokeColor: NzProgressColorGradient) => {
const { from = '#1890ff', to = '#1890ff', direction = 'to right', ...rest } = strokeColor;
if (Object.keys(rest).length !== 0) {
- const sortedGradients = sortGradient(rest as NzProgressGradientProgress);
+ const sortedGradients = sortGradient(rest as NzProgressGradientProgress)
+ .map(({ key, value }) => `${value} ${key}%`)
+ .join(', ');
return `linear-gradient(${direction}, ${sortedGradients})`;
}
return `linear-gradient(${direction}, ${from}, ${to})`;
diff --git a/components/progress/nz-progress.component.html b/components/progress/nz-progress.component.html
index fca0ee963e3..f121e5771d7 100644
--- a/components/progress/nz-progress.component.html
+++ b/components/progress/nz-progress.component.html
@@ -51,9 +51,9 @@
y1="0%"
x2="0%"
y2="0%">
-
+
`${p}%`;
-export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right';
-export type NzProgressStatusType = 'success' | 'exception' | 'active' | 'normal';
-export type NzProgressTypeType = 'line' | 'circle' | 'dashboard';
-export type NzProgressStrokeLinecapType = 'round' | 'square';
-
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
@@ -91,6 +85,8 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
/** Paths to rendered in the template. */
progressCirclePath: NzProgressCirclePath[] = [];
+ circleGradient: Array<{ offset: string; color: string }>;
+
trailPathStyle: NgStyleInterface;
pathString: string;
@@ -260,8 +256,11 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
const isGradient = (this.isGradient = !!color && typeof color !== 'string');
if (isGradient && !this.isCircleStyle) {
this.lineGradient = handleLinearGradient(color as NzProgressColorGradient);
+ } else if (isGradient && this.isCircleStyle) {
+ this.circleGradient = handleCircleGradient(this.nzStrokeColor as NzProgressGradientProgress);
} else {
this.lineGradient = null;
+ this.circleGradient = [];
}
}
}
diff --git a/components/progress/nz-progress.definitions.ts b/components/progress/nz-progress.definitions.ts
index 1c4be58f647..917118ccdce 100644
--- a/components/progress/nz-progress.definitions.ts
+++ b/components/progress/nz-progress.definitions.ts
@@ -8,20 +8,14 @@
import { NgStyleInterface } from 'ng-zorro-antd/core';
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right';
export type NzProgressStatusType = 'success' | 'exception' | 'active' | 'normal';
export type NzProgressTypeType = 'line' | 'circle' | 'dashboard';
+export type NzProgressStrokeLinecapType = 'round' | 'square';
+
export interface NzProgressGradientProgress {
[percent: string]: string;
}
@@ -35,8 +29,6 @@ export type NzProgressColorGradient = { direction?: string } & (NzProgressGradie
export type NzProgressStrokeColorType = string | NzProgressColorGradient;
-export type NzProgressStrokeLinecapType = 'round' | 'square';
-
export type NzProgressFormatter = (percent: number) => string;
export interface NzProgressCirclePath {
diff --git a/components/progress/public-api.ts b/components/progress/public-api.ts
index fb0a559a3ca..ddf5e0301e1 100644
--- a/components/progress/public-api.ts
+++ b/components/progress/public-api.ts
@@ -6,6 +6,6 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-progress.module';
+export { NzProgressModule } from './nz-progress.module';
export { NzProgressComponent } from './nz-progress.component';
export * from './nz-progress.definitions';