From 72b2c6f23a27677bc974ab497ada8d849d8bb2df Mon Sep 17 00:00:00 2001
From: Kevin Qi <iqnivek@gmail.com>
Date: Mon, 30 May 2016 17:08:05 -0400
Subject: [PATCH] Add option to animate to percentage upon mounting

---
 demo/demo.jsx | 41 ++++++++++++++++++++++++++++-------------
 src/index.jsx | 23 ++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/demo/demo.jsx b/demo/demo.jsx
index ab48015..1aa6e8d 100644
--- a/demo/demo.jsx
+++ b/demo/demo.jsx
@@ -20,6 +20,17 @@ const DemoItem = (props) => (
   </div>
 );
 
+const Example = (props) => (
+  <div className="col-xs-12 col-md-4">
+    <div className="row">
+      <div className="col-xs-6 offset-xs-3">
+        {props.children}
+      </div>
+    </div>
+    <p>{props.description}</p>
+  </div>
+);
+
 class ChangingProgressbar extends React.Component {
   constructor(props) {
     super(props);
@@ -73,20 +84,24 @@ class Demo extends React.Component {
         </div>
 
         <hr />
+
         <div className="row">
-          <div className="col-xs-12 col-md-4">
-            <div className="row">
-              <div className="col-xs-6 offset-xs-3">
-                <ChangingProgressbar
-                  percentages={[75, 100]}
-                  classForPercentage={(percentage) => {
-                    return percentage === 100 ? 'complete' : 'incomplete';
-                  }}
-                />
-              </div>
-            </div>
-            <p>Configure color/styling based on percentage using plain old CSS classes.</p>
-          </div>
+          <Example
+            description="Configure color/styling based on percentage using plain old CSS classes."
+          >
+            <ChangingProgressbar
+              percentages={[75, 100]}
+              classForPercentage={(percentage) => {
+                return percentage === 100 ? 'complete' : 'incomplete';
+              }}
+            />
+          </Example>
+
+          <Example
+            description="Show animation upon mounting"
+          >
+            <CircularProgressbar percentage={100} initialAnimation={true} />
+          </Example>
         </div>
 
         <hr />
diff --git a/src/index.jsx b/src/index.jsx
index 7bd74cf..649f8ee 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,6 +3,26 @@ import React, { PropTypes } from 'react';
 class CircularProgressbar extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      percentage: props.initialAnimation ? 0 : props.percentage,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.initialAnimation) {
+      setTimeout(() => {
+        this.setState({
+          percentage: this.props.percentage,
+        });
+      }, 10);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      percentage: this.props.percentage,
+    });
   }
 
   render() {
@@ -16,7 +36,7 @@ class CircularProgressbar extends React.Component {
     const diameter = Math.PI * 2 * radius;
     const progressStyle = {
       strokeDasharray: `${diameter}px ${diameter}px`,
-      strokeDashoffset: `${((100 - this.props.percentage) / 100 * diameter)}px`,
+      strokeDashoffset: `${((100 - this.state.percentage) / 100 * diameter)}px`,
     };
 
     return (
@@ -58,6 +78,7 @@ CircularProgressbar.propTypes = {
 CircularProgressbar.defaultProps = {
   strokeWidth: 8,
   textForPercentage: (percentage) => `${percentage}%`,
+  initialAnimation: false,
 };
 
 export default CircularProgressbar;