fix(component): fixed react warnings

* fixed React PropTypes warning * fixed React creatClass warning
janstuemmel · Jun 13, 2017 · c01162f · c01162f
1 parent edf674e
commit c01162f
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/lib/components/TinyMCE.js b/lib/components/TinyMCE.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import isEqual from 'lodash/lang/isEqual';
 import clone from 'lodash/lang/clone';
@@ -29,31 +30,24 @@ const HANDLER_NAMES = EVENTS.map((event) => {
   return 'on' + ucFirst(event);
 });
 
-const TinyMCE = React.createClass({
-  displayName: 'TinyMCE',
+class TinyMCE extends React.Component {
 
-  propTypes: {
-    config: React.PropTypes.object,
-    content: React.PropTypes.string,
-    id: React.PropTypes.string,
-    className: React.PropTypes.string
-  },
-
-  getDefaultProps() {
-    return {
+  constructor() {
+    super();
+    this.state = {
       config: {},
       content: ''
     };
-  },
+  }
 
   componentWillMount() {
     this.id = this.id || this.props.id || uuid();
-  },
+  }
 
   componentDidMount() {
     const config = clone(this.props.config);
     this._init(config);
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     if (!isEqual(this.props.config, nextProps.config)) {
@@ -62,18 +56,18 @@ const TinyMCE = React.createClass({
     if (!isEqual(this.props.id, nextProps.id)) {
       this.id = nextProps.id;
     }
-  },
+  }
 
   shouldComponentUpdate(nextProps) {
     return (
       !isEqual(this.props.content, nextProps.content) ||
       !isEqual(this.props.config, nextProps.config)
     );
-  },
+  }
 
   componentWillUnmount() {
     this._remove();
-  },
+  }
 
   render() {
     return this.props.config.inline ? (
@@ -89,7 +83,7 @@ const TinyMCE = React.createClass({
         defaultValue={this.props.content}
       />
     );
-  },
+  }
 
   _init(config, content) {
     if (this._isInit) {
@@ -129,17 +123,26 @@ const TinyMCE = React.createClass({
     findDOMNode(this).style.hidden = '';
 
     this._isInit = true;
-  },
+  }
 
   _remove() {
     tinymce.EditorManager.execCommand('mceRemoveEditor', true, this.id);
     this._isInit = false;
   }
-});
+}
+
+TinyMCE.displayName = 'TinyMCE',
+
+TinyMCE.propTypes = {
+  config: PropTypes.object,
+  content: PropTypes.string,
+  id: PropTypes.string,
+  className: PropTypes.string
+},
 
 // add handler propTypes
 HANDLER_NAMES.forEach((name) => {
-  TinyMCE.propTypes[name] = React.PropTypes.func;
+  TinyMCE.propTypes[name] = PropTypes.func;
 });
 
 module.exports = TinyMCE;