React modal for buffer

ReactModal.jsx

/* globals React */
/** @jsx React.DOM */
/**
 * ReactModal
 * Create your own React modal within a react component:

 *   render: function() {
 *     return (
 *       <ReactModal isOpen={this.props.isOpen}>
 *         <ReactModalHeader>
 *           A Modal title
 *         </ReactModalHeader>
 *         <p>Some modal content</p>
 *         <ReactModalActions>
 *           <Button onClick={this.close}>Cancel</Button>
 *           <Button onClick={this.submitForm}>Submit</Button>
 *         </ReactModalActions>
 *       </ReactModal>
 *     )
 *   }
 *
 */

buffer.View.ReactModal = module.exports = React.createClass({

  getInitialState: function() {
    return {
      open: this.props.isOpen === true
    };
  },

  open: function() {
    this.setState({ open: true });
  },

  close: function() {
    this.setState({ open: false });
  },

  handleOverlayClick: function() {
    this.close();
  },

  handleCloseClick: function() {
    this.close();
  },

  render: function() {
    return (
      <div className="modal-container">
        <div className="modal-mask" onClick="this.handleOverlayClick"></div>
        <div className="modal clearfix">
          <div className="modal-close" onClick={this.handleCloseClick}>
            <i className="ss-delete"></i>
          </div>
          {this.props.children}
        </div>
      </div>
    );
  }
});

ReactModalActions.jsx

buffer.View.ReactModalActions = module.exports = React.createClass({
  render: function() {
    return (
      <div className="modal-footer">
        {this.props.children}
      </div>
    );
  }
});

ReactModalHeader.jsx

buffer.View.ReactModalHeader = module.exports = React.createClass({
  render: function() {
    return (
      <h1 className="modal-header">
        {this.props.children}
      </h1>
    );
  }
});