modal / dialog

Dialog.jsx

var cn = require('classnames'),
  React = require('react/addons'),
  hotkey = require('react-hotkey'),
  PureRenderMixin = React.addons.PureRenderMixin

var Dialog = React.createClass({
  mixins: [
    PureRenderMixin,
    hotkey.Mixin('_handleHotkey')
  ],

  propTypes: {
    onClose: React.PropTypes.func.isRequired
  },

  render: function () {
    var {children, className, ...other} = this.props
    return (
      <div className={cn('dialog-wrapper', className)} {...other}>
        <div className='dialog-overlay'></div>
        <div className='dialog-container' onClick={this._onClick}>
          <div className='dialog'>
            {children}
          </div>
        </div>
      </div>
    )
  },

  _onClick: function (e) {
    if (e.target.classList.contains('dialog-container'))
      this.props.onClose()
  },

  _handleHotkey: function (e) {
    if (e.key === 'Escape') {
      this.props.onClose()
      e.stopPropagation()
    }
  }

})

module.exports = Dialog

DialogPart.jsx

var cn = require('classnames')
var React = require('react/addons')
var PureRenderMixin = React.addons.PureRenderMixin

var DialogPart = React.createClass({
  mixins: [PureRenderMixin],

  propTypes: {
    type: React.PropTypes.oneOf(['header', 'body', 'footer']).isRequired,
    className: React.PropTypes.string
  },

  render: function () {
    return (
      <div className={cn(`dialog-${this.props.type}`, this.props.className)}>
        {this.props.children}
      </div>
    )
  }
})

module.exports = DialogPart

styles.less

.dialog-wrapper {
  .dialog-overlay {
    z-index: @z-index-fullscreen-overlay - 1;
    background-color: @black;
    position: absolute;
    opacity: 0.9;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }

  .dialog-container {
    .flexbox;
    .align-items(center);
    .justify-content(center);
    z-index: @z-index-fullscreen-overlay;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }

}

.dialog {
  .flexbox;
  .flex-direction(column);
  .justify-content(space-between);
  background-color: @card-color;
  border-radius: 2px;
  max-height: 1280px;
  min-height: 256px;
  overflow: auto;
  width: 768px;

  .dialog-header {
    .inline-flexbox;
    .align-items(center);
    font-weight: @title-font-weight;
    font-size: @title-font-size;
    padding: 24px 24px 0;
    min-height: 48px;
  }

  .dialog-body {
    padding: 24px 24px 0;
    overflow-y: auto;
    height: 100%;
  }

  .dialog-footer {
    .inline-flexbox;
    .justify-content(flex-end);
    margin: 16px 12px 8px;
    min-height: 48px;
  }
}