bilingo-ui/eslib/Modal/index.js

import { _ as _typeof, a as _inherits, b as _classCallCheck, c as _possibleConstructorReturn, d as _getPrototypeOf, e as _createClass } from '../inherits-6cb67931.js';
import React from 'react';
import { createPortal } from 'react-dom';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';

function isBrowser() {
  return !((typeof window === "undefined" ? "undefined" : _typeof(window)) === undefined);
}

var css = ".Modal_wrapper__2hzaC {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n}\n.Modal_overlay__3iNdm {\n  width: 100vw;\n  height: 100vh;\n  background: #000;\n  animation: Modal_overlayer__1zSH9 0.3s forwards;\n}\n.Modal_container__2veos {\n  position: absolute;\n  top: 20%;\n  left: 50%;\n  animation: Modal_container__2veos 0.3s forwards;\n}\n@keyframes Modal_overlayer__1zSH9 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.3;\n  }\n}\n@keyframes Modal_container__2veos {\n  from {\n    transform: translateX(-50%) scale(0, 0);\n  }\n  to {\n    transform: translateX(-50%) scale(1, 1);\n  }\n}\n";
var styles = {
  "wrapper": "Modal_wrapper__2hzaC",
  "overlay": "Modal_overlay__3iNdm",
  "overlayer": "Modal_overlayer__1zSH9",
  "container": "Modal_container__2veos"
};
styleInject(css);

var Modal =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Modal, _React$PureComponent);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(Modal).apply(this, arguments));
  }

  _createClass(Modal, [{
    key: "render",
    value: function render() {
      if (!isBrowser()) return null;
      var DEFAULT_CONTAINER = document.getElementById("container");
      var _this$props = this.props,
          children = _this$props.children,
          visible = _this$props.visible,
          onCancel = _this$props.onCancel,
          container = _this$props.container;
      var finalMountContainer;

      if (!container) {
        if (!DEFAULT_CONTAINER) {
          if (!Modal.hasShowWarning) {
            Modal.hasShowWarning = true;
          }

          finalMountContainer = document.body;
        } else {
          if (!Modal.hasShowWarning) {
            Modal.hasShowWarning = true;
          }

          finalMountContainer = DEFAULT_CONTAINER;
        }
      } else {
        finalMountContainer = container;
      }

      return visible && createPortal(React.createElement("div", {
        className: styles.wrapper
      }, React.createElement("div", {
        className: styles.overlay,
        onClick: onCancel
      }), React.createElement("div", {
        className: styles.container
      }, children)), finalMountContainer);
    }
  }]);

  return Modal;
}(React.PureComponent);
Modal.hasShowWarning = false;

export default Modal;
export { Modal };
//# sourceMappingURL=index.js.map