fix: Circle should not rotate when gapDegree=0

Author: afc163

docs/examples/simple.tsx

@@ -5,7 +5,7 @@ class Example extends React.Component<ProgressProps, any> {
   constructor(props) {
     super(props);
     this.state = {
-      percent: 96,
+      percent: 9,
       color: '#3FC7FA',
     };
     this.changeState = this.changeState.bind(this);

src/Circle.tsx

@@ -30,12 +30,15 @@ const getCircleStyle = (
   const perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
   const offsetDeg = (offset / 100) * 360 * ((360 - gapDegree) / 360);
 
-  const positionDeg = {
-    bottom: 0,
-    top: 180,
-    left: 90,
-    right: -90,
-  }[gapPosition];
+  const positionDeg =
+    gapDegree === 0
+      ? 0
+      : {
+          bottom: 0,
+          top: 180,
+          left: 90,
+          right: -90,
+        }[gapPosition];
 
   let strokeDashoffset = ((100 - percent) / 100) * perimeterWithoutGap;
   // Fix percent accuracy when strokeLinecap is round
@@ -52,7 +55,7 @@ const getCircleStyle = (
     stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
     strokeDasharray: `${perimeterWithoutGap}px ${perimeter}`,
     strokeDashoffset,
-    transform: `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
+    transform: percent === 100 ? undefined : `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
     transformOrigin: '50% 50%',
     transition:
       'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',

tests/__snapshots__/index.spec.js.snap

@@ -114,7 +114,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
       stroke="#D9D9D9"
       stroke-linecap="round"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -158,7 +158,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
       stroke="#D9D9D9"
       stroke-linecap="round"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -189,7 +189,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
       stroke="#D9D9D9"
       stroke-linecap="square"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -214,7 +214,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
       stroke="#D9D9D9"
       stroke-linecap="square"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -239,7 +239,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
       stroke="#D9D9D9"
       stroke-linecap="square"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -264,7 +264,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
       stroke="#D9D9D9"
       stroke-linecap="square"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -289,7 +289,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
       stroke="#D9D9D9"
       stroke-linecap="round"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"
@@ -314,7 +314,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
       stroke="#D9D9D9"
       stroke-linecap="round"
       stroke-width="1"
-      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+      style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <circle
       class="rc-progress-circle-path"