Modal.jsx

import React, { Component, PropTypes } from 'react'
import { Gateway } from 'react-gateway'
import Button from '../Button'
import { bind } from '../../utils'

class Modal extends Component {
  constructor(props) {
    super(props)

    bind.apply(this, [
      'handleCancel',
      'handleConfirm',
      'handleHidden'
    ])
  }

  // The following two methods are the only places we need to
  // integrate Bootstrap or jQuery with the components lifecycle methods.
  componentDidMount() {
    // When the component is added, turn it into a modal
    $(this.refs.root).modal({
      backdrop: 'static',
      keyboard: false,
      show: false
    })
  }

  componentWillUnmount() {
    $(this.refs.root).off('hidden', this.handleHidden)
  }

  close() {
    $(this.refs.root).modal('hide')
  }

  open() {
    $(this.refs.root).modal('show')
  }

  handleCancel() {
    if (this.props.onCancel) {
      this.props.onCancel()
    }
  }

  handleConfirm() {
    if (this.props.onConfirm) {
      this.props.onConfirm()
    }
  }

  handleHidden() {
    if (this.props.onHidden) {
      this.props.onHidden()
    }
  }

  render() {
    let confirmButton = null
    let cancelButton = null

    if (this.props.confirm) {
      confirmButton = (
        <Button
          onClick={this.handleConfirm}
          className="btn-link modal-action">
          {this.props.confirm}
        </Button>
      )
    }

    if (this.props.cancel) {
      cancelButton = (
        <Button
          onClick={this.handleCancel}
          className="btn-link modal-action">
          {this.props.cancel}
        </Button>
      )
    }

    return (
      <Gateway into="modal">
        <div className="modal fade" ref="root">
          <div className={`modal-dialog modal-${this.props.size || 'sm'}`}>
            <div className="modal-content">
              <div className="modal-header">
                <h4 className="modal-title">{this.props.title}</h4>
              </div>
              <div className="modal-body">
                {this.props.children}
              </div>
              <div className="modal-actions">
                {cancelButton}
                {confirmButton}
              </div>
            </div>
          </div>
        </div>
      </Gateway>
    )
  }
}

export default Modal