Version 0.2.3

Author: Minh Tran

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-progress-bar-plus",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Progress bar component for ReactJS.",
   "main": ["dist/progress-bar.css", "dist/react-progress-bar-plus.js"],
   "keywords": [

dist/react-progress-bar-plus.js

@@ -4,7 +4,6 @@ import ProgressBar from 'react-progress-bar-plus';
 class Example1 extends React.Component {
   state = {
     percent: -1,
-    autoIncrement: false,
     intervalTime: 200
   };
 
@@ -19,7 +18,6 @@ class Example1 extends React.Component {
   start = () => {
     this.setState({
       percent: 0,
-      autoIncrement: true,
       intervalTime: (Math.random() * 1000)
     });
   };
@@ -28,7 +26,7 @@ class Example1 extends React.Component {
     return (
       <div>
         <ProgressBar percent={this.state.percent}
-          autoIncrement={this.state.autoIncrement}
+          autoIncrement={true}
           intervalTime={this.state.intervalTime}/>
 
         <div className='text-center'>

example/app/components/pages/Example1/Example1.js

@@ -44,28 +44,12 @@ var ProgressBar = (function (_React$Component) {
       });
     };
 
-    this.componentWillUnmount = function () {
-      if (_this.interval) {
-        clearInterval(_this.interval);
-      }
-      if (_this.timeout) {
-        clearTimeout(_this.timeout);
+    this.handleProps = function (props) {
+      if (props.autoIncrement && props.percent >= 0 && props.percent < 99) {
+        _this.interval = setInterval(_this.increment, props.intervalTime);
       }
-    };
 
-    this.componentWillReceiveProps = function (nextProps) {
-      if (_this.interval) {
-        clearInterval(_this.interval);
-      }
-      if (_this.timeout) {
-        clearTimeout(_this.timeout);
-      }
-
-      if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) {
-        _this.interval = setInterval(_this.increment, nextProps.intervalTime);
-      }
-
-      if (nextProps.percent >= 100) {
+      if (props.percent >= 100) {
         _this.setState({
           percent: 99.9
         }, function () {
@@ -77,10 +61,33 @@ var ProgressBar = (function (_React$Component) {
         });
       } else {
         _this.setState({
-          percent: nextProps.percent
+          percent: props.percent
         });
       }
     };
+
+    this.componentDidMount = function () {
+      _this.handleProps(_this.props);
+    };
+
+    this.componentWillReceiveProps = function (nextProps) {
+      if (_this.interval) {
+        clearInterval(_this.interval);
+      }
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+      _this.handleProps(nextProps);
+    };
+
+    this.componentWillUnmount = function () {
+      if (_this.interval) {
+        clearInterval(_this.interval);
+      }
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+    };
   }
 
   _createClass(ProgressBar, [{

lib/ProgressBar.js

@@ -1,6 +1,6 @@
 {
   "name": "react-progress-bar-plus",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Progress bar component for ReactJS.",
   "main": "lib/index.js",
   "scripts": {

package.json

@@ -28,28 +28,12 @@ class ProgressBar extends React.Component {
     });
   };
 
-  componentWillUnmount = () => {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-    if (this.timeout) {
-      clearTimeout(this.timeout);
+  handleProps = (props) => {
+    if (props.autoIncrement && props.percent >= 0 && props.percent < 99) {
+      this.interval = setInterval(this.increment, props.intervalTime);
     }
-  };
 
-  componentWillReceiveProps = (nextProps) => {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-
-    if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) {
-      this.interval = setInterval(this.increment, nextProps.intervalTime);
-    }
-
-    if (nextProps.percent >= 100) {
+    if (props.percent >= 100) {
       this.setState({
         percent: 99.9
       }, () => {
@@ -61,11 +45,34 @@ class ProgressBar extends React.Component {
       });
     } else {
       this.setState({
-        percent: nextProps.percent
+        percent: props.percent
       });
     }
   };
 
+  componentDidMount = () => {
+    this.handleProps(this.props);
+  };
+
+  componentWillReceiveProps = (nextProps) => {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.handleProps(nextProps);
+  };
+
+  componentWillUnmount = () => {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  };
+
   render() {
     let className = ClassNames({
       'react-progress-bar': true,