react-conventions/lib/components/Modal/Modal.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

var _Overlay = require('./Overlay');

var _Overlay2 = _interopRequireDefault(_Overlay);

var _RenderToLayer = require('../internal/RenderToLayer');

var _RenderToLayer2 = _interopRequireDefault(_RenderToLayer);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * The Modal component.
 */
var Modal = function (_React$Component) {
  _inherits(Modal, _React$Component);

  function Modal(props) {
    _classCallCheck(this, Modal);

    var _this = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props));

    _this.handleKeyUp = function (event) {
      // When Esc is pressed
      if (event.keyCode === 27) {
        _this.requestClose(false);
      }
    };

    _this.handleClick = function (event) {
      event.persist();
      if (typeof event.target.className === 'string' && event.target.className.indexOf('modal-scroll-container') !== -1) {
        _this.handleCloseClick();
      }
    };

    _this.handleCloseClick = function () {
      _this.requestClose(false);
    };

    _this.requestClose = function (buttonClicked) {
      if (!buttonClicked && _this.props.closeOnAction) {
        return;
      }

      if (_this.props.onRequestClose) {
        _this.props.onRequestClose(!!buttonClicked);
      }
    };

    _this.setKeyupListener = function () {
      if (_this.props.open) {
        window.addEventListener('keyup', _this.handleKeyUp);
      } else {
        window.removeEventListener('keyup', _this.handleKeyUp);
      }
    };

    _this.renderModal = function () {
      var cx = _bind2.default.bind(_style2.default);
      var modalOpenClass = _this.props.open ? _style2.default['modal-open'] : '';
      var modalSizeClass = _this.props.size ? _style2.default['modal-' + _this.props.size] : '';
      var modalClass = cx(_style2.default['modal-component'], _this.props.optClass, modalOpenClass);
      var modalContentClass = cx(_style2.default['modal-content'], modalSizeClass);

      var actionsContainer = _react2.default.Children.count(_this.props.actions) > 0 && _react2.default.createElement(
        'div',
        { className: _style2.default['modal-actions'] },
        _react2.default.Children.toArray(_this.props.actions)
      );

      _this.setKeyupListener();

      return _react2.default.createElement(
        'div',
        { className: modalClass },
        _react2.default.createElement(
          'div',
          { className: _style2.default['modal-scroll-container'], onClick: _this.handleClick },
          _react2.default.createElement(_Overlay2.default, {
            show: _this.props.open,
            onClick: _this.handleCloseClick
          }),
          _react2.default.createElement(
            'div',
            { className: modalContentClass },
            _react2.default.createElement(
              'div',
              { className: _style2.default['modal-header'] },
              !_this.props.closeOnAction ? _react2.default.createElement(
                'div',
                { className: _style2.default['modal-close'] },
                _react2.default.createElement(_Icon2.default, { name: 'icon-delete-1', width: '12', height: '12', onClick: _this.handleCloseClick })
              ) : null,
              _this.props.title ? _react2.default.createElement(
                'h1',
                null,
                _this.props.title
              ) : null
            ),
            _react2.default.createElement(
              'div',
              { className: _style2.default['modal-body'] },
              _this.props.children
            ),
            _react2.default.createElement(
              'div',
              { className: _style2.default['modal-footer'] },
              actionsContainer
            )
          )
        )
      );
    };

    return _this;
  }

  _createClass(Modal, [{
    key: 'render',
    value: function render() {
      return (
        // Render the modal inside a div at the bottom of the document body
        _react2.default.createElement(_RenderToLayer2.default, { render: this.renderModal, open: true })
      );
    }
  }]);

  return Modal;
}(_react2.default.Component);

Modal.defaultProps = {
  open: false,
  closeOnAction: false
};
Modal.propTypes = {
  /**
   * Action buttons to display below the Modal content (`children`).
   * This property accepts either a React element, or an array of React elements.
   */
  actions: _react2.default.PropTypes.node,
  /**
   * Controls whether the Modal is opened or not.
   */
  open: _react2.default.PropTypes.bool.isRequired,
  /**
   * When set to true it will force the user to use one of the actions in the `Modal`.
   * Clicking outside the `Modal` will not trigger the `onRequestClose` in that case.
   */
  closeOnAction: _react2.default.PropTypes.bool,
  /**
   * Fired when the `Modal` is requested to be closed by a click outside the `Modal` or on the buttons.
   *
   * @param {bool} buttonClicked Determines whether a button click triggered this request.
   */
  onRequestClose: _react2.default.PropTypes.func,
  /**
   * The title to display on the `Modal`. Could be number, string, element or an array containing these types.
   */
  title: _react2.default.PropTypes.node,
  /**
   * Optional styles to add to the modal.
   */
  optClass: _react2.default.PropTypes.string,
  /**
   * The size of the modal. The default is 'md' (medium).
   */
  size: _react2.default.PropTypes.oneOf(['sm', 'md', 'lg'])
};
exports.default = Modal;