Merge pull request #17315 from hengkx/feature-circle-gradient

feat: progress circle add support gradient

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<CircleProps> = 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 (
-    <div className={`${prefixCls}-inner`} style={circleStyle}>
+    <div className={wrapperClassName} style={circleStyle}>
       <RCCircle
         percent={getPercentage(props)}
         strokeWidth={circleWidth}
         trailWidth={circleWidth}
-        strokeColor={getStrokeColor(props) as string}
+        strokeColor={strokeColor}
         strokeLinecap={strokeLinecap}
         trailColor={trailColor}
         prefixCls={prefixCls}

components/progress/__tests__/__snapshots__/demo.test.js.snap

@@ -30,6 +30,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -71,6 +72,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#ff5500;stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -129,6 +131,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#87d068;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -192,6 +195,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="0"
           style="stroke:#108ee9;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -293,6 +297,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -334,6 +339,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#ff5500;stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -392,6 +398,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#87d068;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -454,6 +461,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94"
         fill-opacity="0"
+        stroke=""
         stroke-linecap="round"
         stroke-width="6"
         style="stroke:#108ee9;stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -583,6 +591,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -624,6 +633,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#87d068;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -690,6 +700,143 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
       </span>
     </div>
   </div>
+  <div
+    class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+  >
+    <div
+      class="ant-progress-inner ant-progress-circle-gradient"
+      style="width:120px;height:120px;font-size:24px"
+    >
+      <svg
+        class="ant-progress-circle "
+        viewBox="0 0 100 100"
+      >
+        <defs>
+          <linearGradient
+            id="gradient"
+            x1="100%"
+            x2="0%"
+            y1="0%"
+            y2="0%"
+          >
+            <stop
+              offset="0%"
+              stop-color="#108ee9"
+            />
+            <stop
+              offset="100%"
+              stop-color="#87d068"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          class="ant-progress-circle-trail"
+          d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+          fill-opacity="0"
+          stroke="#f3f3f3"
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke:#f3f3f3;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+        <path
+          class="ant-progress-circle-path"
+          d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+          fill-opacity="0"
+          stroke="url(#gradient)"
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke:[object Object];stroke-dasharray:265.77873849369655px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+      </svg>
+      <span
+        class="ant-progress-text"
+        title="90%"
+      >
+        90%
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
+  >
+    <div
+      class="ant-progress-inner ant-progress-circle-gradient"
+      style="width:120px;height:120px;font-size:24px"
+    >
+      <svg
+        class="ant-progress-circle "
+        viewBox="0 0 100 100"
+      >
+        <defs>
+          <linearGradient
+            id="gradient"
+            x1="100%"
+            x2="0%"
+            y1="0%"
+            y2="0%"
+          >
+            <stop
+              offset="0%"
+              stop-color="#108ee9"
+            />
+            <stop
+              offset="100%"
+              stop-color="#87d068"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          class="ant-progress-circle-trail"
+          d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+          fill-opacity="0"
+          stroke="#f3f3f3"
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke:#f3f3f3;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+        <path
+          class="ant-progress-circle-path"
+          d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+          fill-opacity="0"
+          stroke="url(#gradient)"
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke:[object Object];stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+      </svg>
+      <span
+        class="ant-progress-text"
+      >
+        <i
+          aria-label="icon: check"
+          class="anticon anticon-check"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="check"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+            />
+          </svg>
+        </i>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 
@@ -1037,6 +1184,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="square"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -1078,6 +1226,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="square"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -1152,6 +1301,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-88.59291283123217px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -1162,6 +1312,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#87d068;stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -1203,6 +1354,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#108ee9;stroke-dasharray:66.09291283123217px 295.3097094374406px;stroke-dashoffset:-103.59291283123217px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@@ -1213,6 +1365,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
    a 47,47 0 1 1 0,-94
    a 47,47 0 1 1 0,94"
           fill-opacity="0"
+          stroke=""
           stroke-linecap="round"
           stroke-width="6"
           style="stroke:#87d068;stroke-dasharray:66.09291283123217px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -233,6 +233,7 @@ exports[`Progress render strokeColor 1`] = `
    a 47,47 0 1 1 0,94
    a 47,47 0 1 1 0,-94"
         fill-opacity="0"
+        stroke=""
         stroke-linecap="round"
         stroke-width="6"
         style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"

components/progress/demo/gradient-line.md

@@ -33,6 +33,22 @@ const Demo = () => (
       percent={99.9}
       status="active"
     />
+    <Progress
+      type="circle"
+      strokeColor={{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }}
+      percent={90}
+    />
+    <Progress
+      type="circle"
+      strokeColor={{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }}
+      percent={100}
+    />
   </div>
 );
 

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

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

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

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