diff --git a/lib/components/TinyMCE.js b/lib/components/TinyMCE.js index eb778e9..6c18768 100644 --- a/lib/components/TinyMCE.js +++ b/lib/components/TinyMCE.js @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { Component } 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,32 @@ const HANDLER_NAMES = EVENTS.map((event) => { return 'on' + ucFirst(event); }); -const TinyMCE = React.createClass({ - displayName: 'TinyMCE', - - propTypes: { - config: React.PropTypes.object, - content: React.PropTypes.string, - id: React.PropTypes.string, - className: React.PropTypes.string - }, +class TinyMCE extends Component { + static defaultProps = { + config: {}, + content: '' + }; + + static propTypes = { + config: PropTypes.object, + content: PropTypes.string, + id: PropTypes.string, + className: PropTypes.string + } - getDefaultProps() { - return { - config: {}, - content: '' - }; - }, + constructor(props) { + super(props); + this.displayName = 'TinyMCE'; + } 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,34 +64,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 ? ( -
- ) : ( - - ); - }, + } _init(config, content) { if (this._isInit) { @@ -129,17 +115,33 @@ const TinyMCE = React.createClass({ findDOMNode(this).style.hidden = ''; this._isInit = true; - }, + } _remove() { tinymce.EditorManager.execCommand('mceRemoveEditor', true, this.id); this._isInit = false; } -}); + + render() { + return this.props.config.inline ? ( + + ) : ( + + ); + } +} // add handler propTypes HANDLER_NAMES.forEach((name) => { - TinyMCE.propTypes[name] = React.PropTypes.func; + TinyMCE.propTypes[name] = PropTypes.func; }); module.exports = TinyMCE;