From 2a42432c10dc0b4ce0aa5f18529d9a291326a8bf Mon Sep 17 00:00:00 2001 From: hengkx Date: Wed, 26 Jun 2019 17:31:54 +0800 Subject: [PATCH 1/2] Progress Circle support gradient --- components/progress/Circle.tsx | 13 ++- .../__tests__/__snapshots__/demo.test.js.snap | 81 +++++++++++++++++++ .../__snapshots__/index.test.js.snap | 1 + components/progress/demo/gradient-circle.md | 34 ++++++++ components/progress/index.en-US.md | 1 + components/progress/index.zh-CN.md | 1 + components/progress/style/index.less | 6 ++ package.json | 2 +- 8 files changed, 135 insertions(+), 4 deletions(-) create mode 100644 components/progress/demo/gradient-circle.md diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx index bf6b7865dc..d63df082c5 100644 --- a/components/progress/Circle.tsx +++ b/components/progress/Circle.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Circle as RCCircle } from 'rc-progress'; +import classNames from 'classnames'; import { validProgress } from './utils'; import { ProgressProps } from './progress'; @@ -53,15 +54,21 @@ const Circle: React.SFC = props => { }; const circleWidth = strokeWidth || 6; const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top'; - const gapDeg = gapDegree ? gapDegree : (type === 'dashboard' ? 75 : 0); + const gapDeg = gapDegree || (type === 'dashboard' ? 75 : undefined); + const strokeColor = getStrokeColor(props); + const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]'; + + const wrapperClassName = classNames(`${prefixCls}-inner`, { + [`${prefixCls}-circle-gradient`]: isGradient, + }); return ( -
+
`; +exports[`renders ./components/progress/demo/gradient-circle.md correctly 1`] = ` +
+
+
+ + + + + + + + + + + + 90% + +
+
+
+`; + exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
( +
+ +
+); + +ReactDOM.render(, mountNode); +``` diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index 0184fc7c2f..8fbea9b0df 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -41,6 +41,7 @@ Properties that shared by all types. | --- | --- | --- | --- | | width | to set the canvas width of the circular progress, unit: `px` | number | 132 | | strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 | +| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - | ### `type="dashboard"` diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 26924df2dc..3ca52fcd00 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -42,6 +42,7 @@ title: Progress | ----------- | ------------------------------------------------ | ------ | ------ | | width | 圆形进度条画布宽度，单位 px | number | 132 | | strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | +| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | ### `type="dashboard"` diff --git a/components/progress/style/index.less b/components/progress/style/index.less index 7ea5ed9eeb..d56ef16fac 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -151,6 +151,12 @@ color: @success-color; } } + + &-circle-gradient { + .@{progress-prefix-cls}-circle-path { + stroke: url(#gradient); + } + } } @keyframes ~"@{ant-prefix}-progress-active" { diff --git a/package.json b/package.json index a8975554d3..04d1f4e804 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "rc-menu": "~7.4.23", "rc-notification": "~3.3.1", "rc-pagination": "~1.20.1", - "rc-progress": "~2.4.1", + "rc-progress": "~2.5.0", "rc-rate": "~2.5.0", "rc-select": "~9.1.4", "rc-slider": "~8.6.11", From c1a21724c1380e14c0379f2b9d35953d9d2fa03f Mon Sep 17 00:00:00 2001 From: hengkx Date: Wed, 26 Jun 2019 18:13:45 +0800 Subject: [PATCH 2/2] Progress merge demo --- .../__tests__/__snapshots__/demo.test.js.snap | 160 +++++++++++++----- components/progress/demo/gradient-circle.md | 34 ---- components/progress/demo/gradient-line.md | 16 ++ 3 files changed, 132 insertions(+), 78 deletions(-) delete mode 100644 components/progress/demo/gradient-circle.md diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index bb2d65a2b9..2a46083d21 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -650,8 +650,56 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
`; -exports[`renders ./components/progress/demo/gradient-circle.md correctly 1`] = ` +exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
+
+
+
+
+
+
+
+ + 99.9% + +
+
+
+
+
+
+
+
+
+ + 99.9% + +
+
@@ -712,56 +760,80 @@ exports[`renders ./components/progress/demo/gradient-circle.md correctly 1`] = `
-
-`; - -exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = ` -
-
-
+ -
-
-
-
+ + + + + + + + + - 99.9% - -
-
-
-
-
-
-
-
-
- - 99.9% + +
diff --git a/components/progress/demo/gradient-circle.md b/components/progress/demo/gradient-circle.md deleted file mode 100644 index 50a8bbc3be..0000000000 --- a/components/progress/demo/gradient-circle.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -order: 12 -title: - zh-CN: 自定义进度圈渐变色 - en-US: Custom circle gradient ---- - -## zh-CN - -`linear-gradient` 的封装。 - -## en-US - -A package of `linear-gradient`. - -```jsx -import { Progress } from 'antd'; - -const Demo = () => ( -
- -
-); - -ReactDOM.render(, mountNode); -``` diff --git a/components/progress/demo/gradient-line.md b/components/progress/demo/gradient-line.md index c53de4f662..47dbcc4694 100644 --- a/components/progress/demo/gradient-line.md +++ b/components/progress/demo/gradient-line.md @@ -33,6 +33,22 @@ const Demo = () => ( percent={99.9} status="active" /> + +
);