fix: strokeColor cannot update by state

close ant-design/ant-design#30552

Author: afc163

src/Circle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
-import { ProgressProps, GapPositionType } from './interface';
+import type { ProgressProps, GapPositionType } from './interface';
 
 let gradientSeed = 0;
 
@@ -51,7 +51,7 @@ function getPathStyles(
   const len = Math.PI * 2 * radius;
 
   const pathStyle = {
-    stroke: strokeColor,
+    stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
     strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
     strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
     transition:
@@ -93,7 +93,7 @@ const Circle: React.FC<ProgressProps> = ({
   const percentList = toArray(percent);
   const strokeColorList = toArray(strokeColor);
   const gradient = strokeColorList.find(
-    color => Object.prototype.toString.call(color) === '[object Object]',
+    (color) => Object.prototype.toString.call(color) === '[object Object]',
   );
 
   const [paths] = useTransitionDuration(percentList);

tests/index.spec.js

@@ -30,14 +30,14 @@ describe('Progress', () => {
     const wrapper = mount(
       <>
         <Line percent={20} strokeLinecap="butt" />
-        <br/>
+        <br />
         <Line percent={20} strokeLinecap="round" />
-        <br/>
+        <br />
         <Line percent={20} strokeLinecap="square" />
-      </>
+      </>,
     );
     expect(wrapper).toMatchSnapshot();
-  })
+  });
 
   describe('Circle', () => {
     it('change with animation', () => {
@@ -129,16 +129,31 @@ describe('Progress', () => {
             strokeWidth="6"
             strokeLinecap="round"
           />
-          <Circle
-            percent={30}
-            gapDegree={70}
-            gapPosition="top"
-            strokeWidth="6"
-          />
+          <Circle percent={30} gapDegree={70} gapPosition="top" strokeWidth="6" />
         </>,
       );
 
       expect(wrapper).toMatchSnapshot();
     });
+
+    // https://github.com/ant-design/ant-design/issues/30552
+    it('should change strokeColor between gradient and color string correctly', () => {
+      const gradientColor = {
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      };
+      const wrapper = mount(<Circle strokeColor={gradientColor} />);
+      expect(wrapper.find('.rc-progress-circle-path').getDOMNode().style.cssText).not.toContain(
+        'stroke:',
+      );
+      wrapper.setProps({ strokeColor: '#eeeeee' });
+      expect(wrapper.find('.rc-progress-circle-path').getDOMNode().style.cssText).toContain(
+        'stroke: #eeeeee',
+      );
+      wrapper.setProps({ strokeColor: gradientColor });
+      expect(wrapper.find('.rc-progress-circle-path').getDOMNode().style.cssText).not.toContain(
+        'stroke:',
+      );
+    });
   });
 });