use React Component and prop-types lib to suppress deprication warnings

nygardk · Apr 14, 2017 · fe9e446 · fe9e446
1 parent 7b8fc88
commit fe9e446
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 60 deletions.
diff --git a/demos/demo0/Demo.jsx b/demos/demo0/Demo.jsx
@@ -1,29 +1,26 @@
-import React from 'react';
+import React, { Component } from 'react';
 import Loader from 'react-loader-advanced';
 
-
 const contentBoxStyle = {
   backgroundColor: 'white',
   position: 'relative',
   padding: 20,
   border: '1px solid lightgrey',
 };
 
-const Demo = React.createClass({
-  getInitialState() {
-    return {
-      loader1: false,
-      loader2: false,
-      loader3: false,
-      loader4: false,
-    };
-  },
+class Demo extends Component {
+  state = {
+    loader1: false,
+    loader2: false,
+    loader3: false,
+    loader4: false,
+  }
 
   componentDidMount() {
     this.load();
-  },
+  }
 
-  load() {
+  load = () => {
     this.setState({
       loader1: true,
       loader2: true,
@@ -46,7 +43,7 @@ const Demo = React.createClass({
     setTimeout(() => {
       this.setState({ loader4: false });
     }, 6000);
-  },
+  }
 
   render() {
     const {
@@ -87,7 +84,7 @@ const Demo = React.createClass({
         </Loader>
       </div>
     );
-  },
-});
+  }
+}
 
 export default Demo;
diff --git a/demos/demo1/Demo.jsx b/demos/demo1/Demo.jsx
@@ -1,12 +1,12 @@
 /* eslint-disable react/jsx-boolean-value */
-import React from 'react';
+import React, { Component } from 'react';
 import Loader from 'react-loader-advanced';
 
 const customMessageElement = (
   <div>custom message element</div>
 );
 
-const Demo = React.createClass({
+class Demo extends Component {
   render() {
     return (
       <div>
@@ -17,7 +17,7 @@ const Demo = React.createClass({
         </Loader>
       </div>
     );
-  },
-});
+  }
+}
 
 export default Demo;
diff --git a/package.json b/package.json
@@ -64,7 +64,8 @@
     "webpack-dev-server": "1.16.3"
   },
   "dependencies": {
-    "babel-runtime": "6.6.1"
+    "babel-runtime": "6.6.1",
+    "prop-types": "15.5.8"
   },
   "peerDependencies": {
     "react": "^0.13.0 || ^0.14.0 || ^15.0.0"

diff --git a/src/react-loader-advanced.jsx b/src/react-loader-advanced.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable prefer-template, quote-props */
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { EventEmitter } from 'events';
 
 function uid() {
@@ -79,59 +80,60 @@ const loaderStack = {
   },
 };
 
-const Loader = React.createClass({
-  propTypes: {
-    backgroundStyle: React.PropTypes.object,
+class Loader extends Component {
+  static propTypes = {
+    backgroundStyle: PropTypes.object,
 
-    children: React.PropTypes.node,
+    children: PropTypes.node,
 
-    className: React.PropTypes.string,
+    className: PropTypes.string,
 
     // blur loader content while loading
-    contentBlur: React.PropTypes.number,
+    contentBlur: PropTypes.number,
 
-    contentStyle: React.PropTypes.object,
+    contentStyle: PropTypes.object,
 
     // disables all default styles if true
-    disableDefaultStyles: React.PropTypes.bool,
+    disableDefaultStyles: PropTypes.bool,
 
-    foregroundStyle: React.PropTypes.object,
+    foregroundStyle: PropTypes.object,
 
-    hideContentOnLoad: React.PropTypes.bool,
+    hideContentOnLoad: PropTypes.bool,
 
     // loader message or element
-    message: React.PropTypes.node,
+    message: PropTypes.node,
 
-    messageStyle: React.PropTypes.object,
+    messageStyle: PropTypes.object,
 
     // stack priority
-    priority: React.PropTypes.number,
+    priority: PropTypes.number,
 
-    show: React.PropTypes.bool.isRequired,
+    show: PropTypes.bool.isRequired,
 
-    style: React.PropTypes.object,
-  },
+    style: PropTypes.object,
+  }
 
-  getDefaultProps() {
-    return { priority: 0 };
-  },
+  static defaultProps = {
+    message: 'loading...',
+    priority: 0,
+  }
 
-  getInitialState() {
-    return { active: false };
-  },
+  state = {
+    active: false,
+  }
 
   componentWillMount() {
     this._stackId = uid();
-  },
+  }
 
   componentDidMount() {
     loaderStack.addChangeListener(this.onStackChange);
     this.initialize(this.props);
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     this.initialize(nextProps);
-  },
+  }
 
   componentWillUnmount() {
     loaderStack.removeChangeListener(this.onStackChange);
@@ -143,23 +145,23 @@ const Loader = React.createClass({
     setTimeout(() => {
       loaderStack.removeLoader(this._stackId);
     });
-  },
+  }
 
-  onStackChange() {
-    if (this.isMounted()) {
-      this.setState({
-        active: loaderStack.getMaxPriority() === this.props.priority,
-      });
-    }
-  },
+  onStackChange = () => {
+    // if (this.isMounted()) {
+    this.setState({
+      active: loaderStack.getMaxPriority() === this.props.priority,
+    });
+    // }
+  }
 
-  initialize(props) {
+  initialize = (props) => {
     if (props.show) {
       loaderStack.addLoader(this._stackId, props.priority);
     } else {
       loaderStack.removeLoader(this._stackId);
     }
-  },
+  }
 
   render() {
     const {
@@ -222,14 +224,14 @@ const Loader = React.createClass({
           <div className="Loader__background" style={bgStyle}>
             <div className="Loader__foreground" style={fgStyle}>
               <div className="Loader__message" style={msgStyle}>
-                {message || 'loading...'}
+                {message}
               </div>
             </div>
           </div>
         )}
       </div>
     );
-  },
-});
+  }
+}
 
 export default Loader;