@evg-b/evg-ui/dist/Modal/Modal.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import { createPortal } from 'react-dom';

var styles = {
  base: {
    position: 'fixed',
    zIndex: 9999,
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    overscrollBehavior: 'contain'
  }
};
/**
 * Это окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет. 
 * Подходит для создания диалогов и лайтбоксов.
*/

var Modal = /*#__PURE__*/React.forwardRef(function Modal(props, ref) {
  var classes = props.classes,
      className = props.className,
      children = props.children,
      _props$component = props.component,
      Component = _props$component === void 0 ? 'div' : _props$component,
      open = props.open,
      onClose = props.onClose,
      isEsc = props.isEsc,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "component", "open", "onClose", "isEsc"]);

  var Close = function Close(e) {
    if (e.target === e.currentTarget && open) {
      onClose && onClose();
    }
  };

  var CloseESC = function CloseESC(e) {
    e.preventDefault();

    if (isEsc && 'Escape' === e.key && open) {
      onClose && onClose();
    }
  };

  useEffect(function () {
    window.addEventListener('keyup', CloseESC);
    return function () {
      return window.removeEventListener('keyup', CloseESC);
    };
  });
  return open ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Component, _extends({
    ref: ref,
    className: classNames(classes.base, className),
    onClick: Close
  }, otherProps), children), document.body) : null;
});
Modal.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Корневой узел. Это HTML элемент или компонент.
  */
  component: PropTypes.elementType,

  /**
   * Если true, modal открыт.
  */
  open: PropTypes.bool,

  /**
   * onClose() вызывается при попытки закрыть modal.
  */
  onClose: PropTypes.func,

  /**
   * Если true, modal закрывается клавишей Esc.
  */
  isEsc: PropTypes.bool
};
Modal.defaultProps = {
  open: false,
  component: 'div',
  isEsc: true
};
Modal.displayName = 'ModalEVG';
var Modal$1 = withStyles(styles)(Modal);

export default Modal$1;