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';