silverstripe-framework/admin/javascript/src/SilverStripeComponent.js

/**
 * @file Base component which all SilverStripe ReactJS components should extend from.
 */

import React, { PropTypes, Component } from 'react';
import $ from '../../../javascript/src/jQuery';

class SilverStripeComponent extends Component {

	/**
	 * @func componentDidMount
	 * @desc Bind event listeners which are triggered by legacy-land JavaScript.
	 * This lets us update the component when something happens in the outside world.
	 */
	componentDidMount() {
		if (typeof this.props.cmsEvents === 'undefined') {
			return;
		}

		// Save some props for later. When we come to unbind these listeners
		// there's no guarantee these props will be the same or even present.
		this.cmsEvents = this.props.cmsEvents;

		for (let cmsEvent in this.cmsEvents) {
			$(document).on(cmsEvent, this.cmsEvents[cmsEvent].bind(this));
		}
	}

	/**
	 * @func componentWillUnmount
	 * @desc Unbind the event listeners we added in componentDidMount.
	 */
	componentWillUnmount() {
		for (let cmsEvent in this.cmsEvents) {
			$(document).off(cmsEvent);
		}
	}

	/**
	 * @func emitCmsEvent
	 * @param string componentEvent - Namespace component event e.g. 'my-component.title-changed'.
	 * @param object|string|array|number [data] - Some data to pass with the event.
	 * @desc Notifies legacy-land something has changed within our component.
	 */
	emitCmsEvent(componentEvent, data) {
		$(document).trigger(componentEvent, data);
	}

}

SilverStripeComponent.propTypes = {
	'cmsEvents': React.PropTypes.object
};

export default SilverStripeComponent;