fix: the issue of stroke overflowing when trailStrokeWidth is differe…

…nt from strokeWidth
vydimitrov · Feb 11, 2021 · b3d3aab · b3d3aab
1 parent ce12b54
commit b3d3aab
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/packages/mobile/src/components/CountdownCircleTimer.jsx b/packages/mobile/src/components/CountdownCircleTimer.jsx
@@ -45,7 +45,9 @@ const CountdownCircleTimer = (props) => {
     isPlaying,
     duration,
     size,
-    strokeWidth,
+    // https://github.com/vydimitrov/react-countdown-circle-timer/pull/82#issuecomment-774961578
+    // Find the larger strokeWidth and calculate the path.
+    strokeWidth: Math.max(strokeWidth, trailStrokeWidth ?? 0),
     colors,
     initialRemainingTime,
     onComplete,

diff --git a/packages/web/__tests__/__snapshots__/CountdownCircleTimer.test.js.snap b/packages/web/__tests__/__snapshots__/CountdownCircleTimer.test.js.snap
@@ -56,20 +56,20 @@ exports[`snapshot tests renders with different trail stroke width 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="m 90,6
-          a 84,84 0 1,0 0,168
-          a 84,84 0 1,0 0,-168"
+      d="m 90,8
+          a 82,82 0 1,0 0,164
+          a 82,82 0 1,0 0,-164"
       fill="none"
       stroke="#d9d9d9"
       strokeWidth={16}
     />
     <path
-      d="m 90,6
-          a 84,84 0 1,0 0,168
-          a 84,84 0 1,0 0,-168"
+      d="m 90,8
+          a 82,82 0 1,0 0,164
+          a 82,82 0 1,0 0,-164"
       fill="none"
       stroke="rgba(0, 71, 119, 1)"
-      strokeDasharray={527.7875658030853}
+      strokeDasharray={515.221195188726}
       strokeDashoffset={0}
       strokeLinecap="round"
       strokeWidth={12}

diff --git a/packages/web/src/components/CountdownCircleTimer.jsx b/packages/web/src/components/CountdownCircleTimer.jsx
@@ -35,7 +35,9 @@ const CountdownCircleTimer = ({
   } = useCountdown({
     isPlaying,
     size,
-    strokeWidth,
+    // https://github.com/vydimitrov/react-countdown-circle-timer/pull/82#issuecomment-774961578
+    // Find the larger strokeWidth and calculate the path.
+    strokeWidth: Math.max(strokeWidth, trailStrokeWidth ?? 0),
     duration,
     initialRemainingTime,
     colors,