From b3d3aab1d175bc95478efa7f0ebf3c3d50a66c37 Mon Sep 17 00:00:00 2001
From: MathewTheCoder <jmathew1201@live.com>
Date: Thu, 11 Feb 2021 23:20:45 +0530
Subject: [PATCH] fix: the issue of stroke overflowing when trailStrokeWidth is
 different from strokeWidth

---
 .../mobile/src/components/CountdownCircleTimer.jsx |  4 +++-
 .../CountdownCircleTimer.test.js.snap              | 14 +++++++-------
 .../web/src/components/CountdownCircleTimer.jsx    |  4 +++-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/mobile/src/components/CountdownCircleTimer.jsx b/packages/mobile/src/components/CountdownCircleTimer.jsx
index c4cb927..268995d 100644
--- 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
index decb424..a50f4af 100644
--- 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
index 9784ddf..2135848 100644
--- 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,