diff --git a/lib/components/TinyMCE.js b/lib/components/TinyMCE.js index eb778e9..9b49f1c 100644 --- 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;