react-mf-modal/themes/bootstrap/simple-modal.js

A markup free modal component for React

'use strict';

var _get = require('babel-runtime/helpers/get')['default'];

var _inherits = require('babel-runtime/helpers/inherits')['default'];

var _createClass = require('babel-runtime/helpers/create-class')['default'];

var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

Object.defineProperty(exports, '__esModule', {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

/**
 * SimpleModal is the basic dialog window with a primary and a cancel button.
 */

var SimpleBootstrapModal = (function (_React$Component) {
  _inherits(SimpleBootstrapModal, _React$Component);

  function SimpleBootstrapModal() {
    var _this = this;

    _classCallCheck(this, SimpleBootstrapModal);

    _get(Object.getPrototypeOf(SimpleBootstrapModal.prototype), 'constructor', this).apply(this, arguments);

    this.bubblePrevent = function (evt) {
      evt.stopPropagation();
    };

    this.handleClose = function () {
      _this.props.dismiss('closed');
    };
  }

  _createClass(SimpleBootstrapModal, [{
    key: 'render',
    value: function render() {
      return _react2['default'].createElement(
        'div',
        { className: 'modal fade in', style: { display: 'block', overflow: 'auto' }, onClick: this.handleClose },
        _react2['default'].createElement(
          'div',
          { className: 'modal-dialog', role: 'document', onClick: this.bubblePrevent },
          _react2['default'].createElement(
            'div',
            { className: 'modal-content' },
            _react2['default'].createElement(
              'div',
              { className: 'modal-header' },
              _react2['default'].createElement(
                'button',
                { type: 'button', className: 'close', 'aria-label': 'Close', onClick: this.props.dismiss.bind(this, 'closed') },
                _react2['default'].createElement(
                  'span',
                  { 'aria-hidden': 'true' },
                  '×'
                ),
                _react2['default'].createElement(
                  'span',
                  { className: 'sr-only' },
                  'Close'
                )
              ),
              _react2['default'].createElement(
                'h3',
                { className: 'modal-title' },
                this.props.title
              )
            ),
            _react2['default'].createElement(
              'div',
              { className: 'modal-body' },
              this.props.children
            ),
            _react2['default'].createElement(
              'div',
              { className: 'modal-footer' },
              _react2['default'].createElement(
                'button',
                { type: 'button', className: 'btn btn-default', onClick: this.handleClose },
                'Close'
              ),
              _react2['default'].createElement(
                'button',
                { type: 'button', className: 'btn btn-primary', onClick: this.props.onSubmitClick },
                this.props.submitLabel
              )
            )
          )
        )
      );
    }
  }], [{
    key: 'propTypes',
    value: {
      /**
       * Title of the modal dialog
       */
      title: _react2['default'].PropTypes.string.isRequired,
      /**
       * Label for the submit button
       */
      submitLabel: _react2['default'].PropTypes.string.isRequired,
      /**
       * Submit button handler function
       */
      onSubmitClick: _react2['default'].PropTypes.func.isRequired,
      /**
       * You HAVE TO pass dismiss function injected by the service
       */
      dismiss: _react2['default'].PropTypes.func.isRequired,
      /**
       * You HAVE TO pass resolve function injected by the service
       */
      resolve: _react2['default'].PropTypes.func.isRequired
    },
    enumerable: true
  }, {
    key: 'defaultProps',
    value: {
      submitLabel: 'OK'
    },
    enumerable: true
  }]);

  return SimpleBootstrapModal;
})(_react2['default'].Component);

exports['default'] = SimpleBootstrapModal;
module.exports = exports['default'];