From af4775625e41a7c19c78a121fe238bc050ea3eb0 Mon Sep 17 00:00:00 2001
From: Kevin Qi <kqi@amino.com>
Date: Sat, 11 May 2019 14:55:21 -0700
Subject: [PATCH] set value boundaries in CircularProgressbar, instead of in
 Path

---
 src/CircularProgressbar.tsx       | 3 ++-
 src/Path.tsx                      | 5 +----
 test/CircularProgressbar.test.tsx | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/CircularProgressbar.tsx b/src/CircularProgressbar.tsx
index 73147cd..93fd46d 100644
--- a/src/CircularProgressbar.tsx
+++ b/src/CircularProgressbar.tsx
@@ -71,7 +71,8 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
     } = this.props;
 
     const pathRadius = this.getPathRadius();
-    const pathRatio = value / (maxValue - minValue);
+    const boundedValue = Math.min(Math.max(value, minValue), maxValue);
+    const pathRatio = boundedValue / (maxValue - minValue);
 
     return (
       <svg
diff --git a/src/Path.tsx b/src/Path.tsx
index a4a972c..6764d49 100644
--- a/src/Path.tsx
+++ b/src/Path.tsx
@@ -63,10 +63,7 @@ function getDashStyle({
   pathRadius: number;
 }) {
   const diameter = Math.PI * 2 * pathRadius;
-
-  // Keep dashRatio between [0, 1]
-  const boundedDashRatio = Math.min(Math.max(dashRatio, 0), 1);
-  const gapLength = (1 - boundedDashRatio) * diameter;
+  const gapLength = (1 - dashRatio) * diameter;
 
   return {
     // Have dash be full diameter, and gap be full diameter
diff --git a/test/CircularProgressbar.test.tsx b/test/CircularProgressbar.test.tsx
index 889e598..e2db339 100644
--- a/test/CircularProgressbar.test.tsx
+++ b/test/CircularProgressbar.test.tsx
@@ -44,7 +44,7 @@ describe('<CircularProgressbar />', () => {
       expect(wrapper.find('.CircularProgressbar-text').text()).toEqual('50%');
     });
   });
-  describe('props.percentage', () => {
+  describe('props.value', () => {
     test('Renders correct path', () => {
       const percentage = 30;
       const wrapper = mount(