From e2fa517fdf82656a3ac343a7f78684fb219e3ffa Mon Sep 17 00:00:00 2001
From: Kevin Qi <kqi@amino.com>
Date: Sat, 20 Apr 2019 20:04:55 -0700
Subject: [PATCH] add react types and define proptypes in TS

---
 package.json  |  1 +
 src/index.tsx | 82 +++++++++++++++++++++++++++++----------------------
 yarn.lock     | 18 +++++++++++
 3 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 07110e8..9e7deba 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "prepare": "npm run clean && npm run build"
   },
   "devDependencies": {
+    "@types/react": "^16.8.14",
     "babel-core": "^6.3.15",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.0.0",
diff --git a/src/index.tsx b/src/index.tsx
index 6010755..0af6a0b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,8 +9,33 @@ const FULL_RADIUS = 50;
 const CENTER_X = 50;
 const CENTER_Y = 50;
 
-class CircularProgressbar extends React.Component {
-  constructor(props) {
+type CircularProgressbarProps = {
+  percentage: number;
+  className?: string;
+  text?: string;
+  classes?: {
+    root?: string;
+    trail?: string;
+    path?: string;
+    text?: string;
+    background?: string;
+  };
+  styles?: {
+    root?: object;
+    trail?: object;
+    path?: object;
+    text?: object;
+    background?: object;
+  };
+  strokeWidth?: number;
+  background?: boolean;
+  backgroundPadding?: number;
+  initialAnimation?: boolean;
+  counterClockwise?: boolean;
+};
+
+class CircularProgressbar extends React.Component<CircularProgressbarProps> {
+  constructor(props: CircularProgressbarProps) {
     super(props);
 
     this.state = {
@@ -72,7 +97,10 @@ class CircularProgressbar extends React.Component {
 
   getPathStyles() {
     const diameter = Math.PI * 2 * this.getPathRadius();
-    const truncatedPercentage = Math.min(Math.max(this.state.percentage, MIN_PERCENTAGE), MAX_PERCENTAGE);
+    const truncatedPercentage = Math.min(
+      Math.max(this.state.percentage, MIN_PERCENTAGE),
+      MAX_PERCENTAGE,
+    );
     const dashoffset = ((100 - truncatedPercentage) / 100) * diameter;
 
     return {
@@ -84,18 +112,11 @@ class CircularProgressbar extends React.Component {
   getPathRadius() {
     // the radius of the path is defined to be in the middle, so in order for the path to
     // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
-    return FULL_RADIUS - (this.props.strokeWidth / 2) - this.getBackgroundPadding();
+    return FULL_RADIUS - this.props.strokeWidth / 2 - this.getBackgroundPadding();
   }
 
   render() {
-    const {
-      percentage,
-      className,
-      classes,
-      styles,
-      strokeWidth,
-      text,
-    } = this.props;
+    const { percentage, className, classes, styles, strokeWidth, text } = this.props;
     const pathDescription = this.getPathDescription();
 
     return (
@@ -104,17 +125,15 @@ class CircularProgressbar extends React.Component {
         style={styles.root}
         viewBox={`0 0 ${MAX_X} ${MAX_Y}`}
       >
-        {
-          this.props.background ? (
-            <circle
-              className={classes.background}
-              style={styles.background}
-              cx={CENTER_X}
-              cy={CENTER_Y}
-              r={FULL_RADIUS}
-            />
-          ) : null
-        }
+        {this.props.background ? (
+          <circle
+            className={classes.background}
+            style={styles.background}
+            cx={CENTER_X}
+            cy={CENTER_Y}
+            r={FULL_RADIUS}
+          />
+        ) : null}
 
         <path
           className={classes.trail}
@@ -132,18 +151,11 @@ class CircularProgressbar extends React.Component {
           style={Object.assign({}, styles.path, this.getPathStyles())}
         />
 
-        {
-          text ? (
-            <text
-              className={classes.text}
-              style={styles.text}
-              x={CENTER_X}
-              y={CENTER_Y}
-            >
-              {text}
-            </text>
-          ) : null
-        }
+        {text ? (
+          <text className={classes.text} style={styles.text} x={CENTER_X} y={CENTER_Y}>
+            {text}
+          </text>
+        ) : null}
       </svg>
     );
   }
diff --git a/yarn.lock b/yarn.lock
index f7fb944..107cc11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,19 @@
 # yarn lockfile v1
 
 
+"@types/prop-types@*":
+  version "15.7.1"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
+  integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
+
+"@types/react@^16.8.14":
+  version "16.8.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.14.tgz#b561bfabeb8f60d12e6d4766367e7a9ae927aa18"
+  integrity sha512-26tFVJ1omGmzIdFTFmnC5zhz1GTaqCjxgUxV4KzWvsybF42P7/j4RBn6UeO3KbHPXqKWZszMXMoI65xIWm954A==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -1374,6 +1387,11 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
+  integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"