remove the error demos

Author: lingengyan

README.md

@@ -140,7 +140,7 @@ export default () => (
       <td>dot</td>
       <td>Boolean | Object</td>
       <td>false</td>
-      <td>within dot or not, value: true, false, { size: Number }</td>
+      <td>within dot or not, value: true, false, { size: Number }, if the size is not a number, it will be the strokeWidth as default</td>
     </tr>
   </tbody>
 </table>

docs/examples/gap.tsx

@@ -41,6 +41,7 @@ class Example extends React.Component<ProgressProps, any> {
             Change State [{percent}]
           </button>
         </p>
+        <h3>within dot</h3>
         <div style={circleContainerStyle}>
           <Circle
             percent={percent}
@@ -65,6 +66,7 @@ class Example extends React.Component<ProgressProps, any> {
           />
         </div>
 
+        <h3>without dot</h3>
         <div style={circleContainerStyle}>
           <Circle
             percent={percent}
@@ -73,7 +75,6 @@ class Example extends React.Component<ProgressProps, any> {
             strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
-            dot={{ size: 'p' }}
           />
         </div>
         <div style={circleContainerStyle}>
@@ -84,7 +85,6 @@ class Example extends React.Component<ProgressProps, any> {
             strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
-            dot={{ size: [] }}
           />
         </div>
       </div>

docs/examples/gradient-circle.tsx

@@ -10,7 +10,7 @@ const Example = () => {
 
   return (
     <div>
-      <h3>Circle Progress {90}%</h3>
+      <h3>Circle Progress {90}% (within dot)</h3>
       <div style={circleContainerStyle}>
         <Circle
           percent={90}
@@ -20,7 +20,7 @@ const Example = () => {
             '0%': '#108ee9',
             '100%': '#87d068',
           }}
-          dot={{ size: '10' }}
+          dot={true}
         />
       </div>
       <h3>Circle Progress {100}%</h3>
@@ -33,7 +33,6 @@ const Example = () => {
             '100%': '#108ee9',
             '0%': '#87d068',
           }}
-          dot={{}}
         />
       </div>
       <h3>Circle With Success Percent {65}%</h3>

src/Circle.tsx

@@ -115,13 +115,18 @@ const Circle: React.FC<ProgressProps> = ({
 
         path.setAttribute('d', pathDom.props.d);
         const dotPoint = path.getPointAtLength(strokeLength);
+
         return (
           <circle
             key={index + 10}
             className={`${prefixCls}-circle-dot`}
             cx={dotPoint.x}
             cy={dotPoint.y}
-            r={typeof dot === 'object' ? dot.size : strokeWidth}
+            r={
+              typeof dot === 'object' && dot.size && typeof dot.size === 'number'
+                ? dot.size
+                : strokeWidth
+            }
             fill={pathDom.props.stroke ? pathDom.props.stroke : pathDom.props.style.stroke}
           />
         );

tests/index.spec.js

@@ -156,4 +156,28 @@ describe('Progress', () => {
       );
     });
   });
+
+  describe('dot', () => {
+    it('the size of dot must be a number', () => {
+      const wrapper = mount(
+        <Circle percent={30} gapDegree={70} dot={{ size: '10' }} strokeWidth="6" />,
+      );
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe(
+        wrapper.find('.rc-progress-circle-dot').getDOMNode().strokeWidth,
+      );
+
+      wrapper.setProps({ dot: { size: 10 } });
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe('10');
+
+      wrapper.setProps({ dot: true });
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe(
+        wrapper.find('.rc-progress-circle-dot').getDOMNode().strokeWidth,
+      );
+
+      wrapper.setProps({ dot: [] });
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe(
+        wrapper.find('.rc-progress-circle-dot').getDOMNode().strokeWidth,
+      );
+    });
+  });
 });