coreui/lib/components/Modal/Modal.js

Platform Core UI

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ModalDialog = require('./ModalDialog');

var _ModalDialog2 = _interopRequireDefault(_ModalDialog);

var _Shared = require('../../Shared');

var _Shared2 = _interopRequireDefault(_Shared);

var _Modal = require('../../theme/components/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Modal3 = require('coreui-deps/lib/react-overlays/lib/Modal');

var _Modal4 = _interopRequireDefault(_Modal3);

var _compose = require('recompose/compose');

var _compose2 = _interopRequireDefault(_compose);

var _dedupe = require('classnames/dedupe');

var _dedupe2 = _interopRequireDefault(_dedupe);

var _mapProps = require('recompose/mapProps');

var _mapProps2 = _interopRequireDefault(_mapProps);

var _withContext = require('recompose/withContext');

var _withContext2 = _interopRequireDefault(_withContext);

var _withHandlers = require('recompose/withHandlers');

var _withHandlers2 = _interopRequireDefault(_withHandlers);

var _ramda = require('ramda');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var modalStyle = {
  bottom: 0,
  left: 0,
  position: 'fixed',
  right: 0,
  top: 0,
  zIndex: 1040
};

var systemStyles = {
  backdrop: _extends({}, modalStyle, {
    backgroundColor: '#000',
    opacity: 0.4,
    zIndex: 'auto'
  }),
  modal: modalStyle
};

var modalProps = function modalProps(props) {
  var backdrop = props.backdrop,
      buttons = props.buttons,
      className = props.className,
      headerContent = props.headerContent,
      onCancelClick = props.onCancelClick,
      sheet = props.sheet,
      style = props.style,
      theme = props.theme;


  return (0, _ramda.merge)(props, {
    backdrop: !!backdrop,
    backdropClassName: (0, _dedupe2.default)(sheet.classes.backdrop, theme.classes.backdrop, className),
    backdropStyle: theme.styles.backdrop,
    className: (0, _dedupe2.default)(sheet.classes.modal, theme.classes.modal, className),
    dialogProps: { buttons: buttons, headerContent: headerContent, onCancelClick: onCancelClick, sheet: sheet, theme: theme },
    show: true,
    style: (0, _ramda.merge)(theme.styles.modal, style)
  });
};

var ModalBase = function ModalBase(_ref) {
  var children = _ref.children,
      dialogProps = _ref.dialogProps,
      rest = _objectWithoutProperties(_ref, ['children', 'dialogProps']);

  return _react2.default.createElement(
    _Modal4.default,
    rest,
    _react2.default.createElement(
      _ModalDialog2.default,
      dialogProps,
      children
    )
  );
};

ModalBase.propTypes = { children: _react.PropTypes.node, dialogProps: _react.PropTypes.object };

var ModalContainer = (0, _compose2.default)((0, _withHandlers2.default)({
  onCancelClick: function onCancelClick(props) {
    return props.onBackdropClick || props.onEscapeKeyUp || props.onHide;
  }
}), (0, _withContext2.default)({ coreuiModalContext: _react.PropTypes.object }, function (props) {
  return { coreuiModalContext: { onHide: props.onCancelClick } };
}), (0, _mapProps2.default)(modalProps))(ModalBase);

var StyledModal = _Shared2.default.injectSheet(systemStyles)(ModalContainer);

var Modal = function Modal(props) {
  return _react2.default.createElement(
    StyledModal,
    props,
    props.children
  );
};

var classes = _Modal2.default.classes;
var options = _Modal2.default.options;
var styles = _Modal2.default.styles;

Modal.defaultProps = {
  backdrop: true,

  theme: { classes: classes, options: options, styles: styles }
};

Modal.displayName = 'Modal';

Modal.propTypes = {
  /**
   * When `true` The modal will automatically shift focus to itself when it opens, and
   * replace it to the last focused element when it closes. This also
   * works correctly with any Modal children that have the `autoFocus` prop.
   *
   * Generally this should never be set to `false` as it makes the Modal less
   * accessible to assistive technologies, like screen readers.
   */
  autoFocus: _react.PropTypes.bool,

  /**
   * Include a backdrop component.
   */
  backdrop: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.oneOf(['static'])]),

  /**
   * The `timeout` of the backdrop transition if specified. This number is used to
   * ensure that transition callbacks are always fired, even if browser transition events are canceled.
   *
   * See the Transition `timeout` prop for more infomation.
   */
  backdropTransitionTimeout: _react.PropTypes.number,

  children: _react.PropTypes.node,

  /**
   * A Node, Component instance, or function that returns either. The Modal is appended to it's container element.
   *
   * For the sake of assistive technologies, the container should usually be the document body, so that the rest of the
   * page content can be placed behind a virtual backdrop as well as a visual one.
   */
  container: _react.PropTypes.any,

  /**
   * The `timeout` of the dialog transition if specified. This number is used to ensure that
   * transition callbacks are always fired, even if browser transition events are canceled.
   *
   * See the Transition `timeout` prop for more infomation.
   */
  dialogTransitionTimeout: _react.PropTypes.number,

  /**
   * When `true` The modal will prevent focus from leaving the Modal while open.
   *
   * Generally this should never be set to `false` as it makes the Modal less
   * accessible to assistive technologies, like screen readers.
   */
  enforceFocus: _react.PropTypes.bool,

  /**
   * Close the modal when escape key is pressed
   */
  keyboard: _react.PropTypes.bool,

  /**
   * A callback fired when the backdrop, if specified, is clicked.
   */
  onBackdropClick: _react.PropTypes.func,

  /**
   * Callback fired before the Modal transitions in
   */
  onEnter: _react.PropTypes.func,

  /**
   * Callback fired after the Modal finishes transitioning in
   */
  onEntered: _react.PropTypes.func,

  /**
   * Callback fired as the Modal begins to transition in
   */
  onEntering: _react.PropTypes.func,

  /**
   * A callback fired when the escape key, if specified in `keyboard`, is pressed.
   */
  onEscapeKeyUp: _react.PropTypes.func,

  /**
   * Callback fired right before the Modal transitions out
   */
  onExit: _react.PropTypes.func,

  /**
   * Callback fired after the Modal finishes transitioning out
   */
  onExited: _react.PropTypes.func,

  /**
   * Callback fired as the Modal begins to transition out
   */
  onExiting: _react.PropTypes.func,

  /**
   * A callback fired when either the backdrop is clicked, or the escape key is pressed.
   *
   * The `onHide` callback only signals intent from the Modal,
   * you must actually set the `show` prop to `false` for the Modal to close.
   */
  onHide: _react.PropTypes.func,

  /**
   * A callback fired when the Modal is opening.
   */
  onShow: _react.PropTypes.func,

  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object]),

  /**
   * A `<Transition/>` component to use for the dialog and backdrop components.
   */
  transition: _react.PropTypes.element
};

_Shared2.default.registerComponent('Modal', Modal);

exports.default = Modal;