Convert React.createClass to es2015 classes to fix react deprecation warning

local-dev/main.js

@@ -3,19 +3,17 @@ var ReactDom = require('react-dom');
 var ProgressBar = require('../src/main.js');
 var Circle = ProgressBar.Circle;
 
-var App = React.createClass({
-    getInitialState: function() {
-        return {
-            progress: 0.1,
-            options: {}
-        };
-    },
+class App extends React.Component {
+    state = {
+        progress: 0.1,
+        options: {}
+    };
 
-    render: function() {
+    render() {
         return <Circle initialAnimate={this.state.initialAnimate} options={this.state.options} progress={this.state.progress} />;
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         var self = this;
         setTimeout(function() {
             console.log('setstate')
@@ -33,7 +31,7 @@ var App = React.createClass({
         }, 500);
 
     }
-});
+}
 
 ReactDom.render(
     <App />,

src/main.js

@@ -3,33 +3,29 @@ var ReactDom = require('react-dom');
 var isEqual = require('lodash.isequal');
 var ProgressBar = require('progressbar.js');
 
-var Shape = React.createClass({
-    getDefaultProps: function getDefaultProps() {
-        return {
-            ShapeClass: null,
-            options: {},
-            progress: 0,
-            text: null,
-            initialAnimate: false,
-            containerStyle: {},
-            containerClassName: '.progressbar-container'
-        };
-    },
-
-    getInitialState: function getInitialState() {
-        return {
-            shape: null
-        };
-    },
-
-    render: function render() {
+class Shape extends React.Component {
+    static defaultProps = {
+        ShapeClass: null,
+        options: {},
+        progress: 0,
+        text: null,
+        initialAnimate: false,
+        containerStyle: {},
+        containerClassName: '.progressbar-container'
+    };
+
+    state = {
+        shape: null
+    };
+
+    render() {
         var style = this.props.containerStyle;
         var className = this.props.containerClassName;
 
         return <div className={className} style={style} ref="progressBar"></div>;
-    },
+    }
 
-    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps) {
         if (!isEqual(this.props.options, nextProps.options)) {
             this._destroy();
             this._create(nextProps, this.props);
@@ -38,17 +34,17 @@ var Shape = React.createClass({
 
         this._animateProgress(nextProps.progress);
         this._setText(nextProps.text);
-    },
+    }
 
-    componentDidMount: function componentDidMount() {
+    componentDidMount() {
         this._create(this.props);
-    },
+    }
 
-    componentWillUnmount: function componentWillUnmount() {
+    componentWillUnmount() {
         this._destroy()
-    },
+    }
 
-    _create: function _create(props, oldProps) {
+    _create = (props, oldProps) => {
         if (this.state.shape !== null) {
             throw new Error('Progressbar is already created');
         }
@@ -72,47 +68,47 @@ var Shape = React.createClass({
         }
 
         this._setText(props.text);
-    },
+    };
 
-    _destroy: function _destroy() {
+    _destroy = () => {
         if (this.state.shape) {
             this.state.shape.destroy();
             this.state.shape = null;
         }
-    },
+    };
 
-    _animateProgress: function _animateProgress(progress) {
+    _animateProgress = (progress) => {
         this.state.shape.animate(progress);
-    },
+    };
 
-    _setProgress: function _setProgress(progress) {
+    _setProgress = (progress) => {
         this.state.shape.set(progress);
-    },
+    };
 
-    _setText: function _setText(text) {
+    _setText = (text) => {
         if (text) {
             this.state.shape.setText(text);
         }
-    }
-});
+    };
+}
 
-var Line = React.createClass({
+class Line extends React.Component {
     render() {
         return <Shape {...this.props} ShapeClass={ProgressBar.Line} />;
     }
-});
+}
 
-var Circle = React.createClass({
+class Circle extends React.Component {
     render() {
         return <Shape {...this.props} ShapeClass={ProgressBar.Circle} />;
     }
-});
+}
 
-var SemiCircle = React.createClass({
+class SemiCircle extends React.Component {
     render() {
         return <Shape {...this.props} ShapeClass={ProgressBar.SemiCircle} />;
     }
-});
+}
 
 module.exports = {
     Line: Line,