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 ReactDOM, { 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;
var ModalCMD =
/*#__PURE__*/
function () {
  function ModalCMD() {
    _classCallCheck(this, ModalCMD);

    ModalCMD.currentModal = [];
  }

  _createClass(ModalCMD, null, [{
    key: "recordModal",
    value: function recordModal(record) {
      ModalCMD.currentModal.push(record);
    }
  }, {
    key: "delModal",
    value: function delModal() {
      return ModalCMD.currentModal.pop();
    }
  }, {
    key: "show",
    value: function show(_ref) {
      var children = _ref.children,
          container = _ref.container;
      var modalInstance = document.createElement("div");
      var targetMountDom = container ? container : document.body;
      targetMountDom.appendChild(modalInstance);
      ReactDOM.render(React.createElement(React.Fragment, null, React.createElement("div", {
        style: {
          position: "fixed",
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          zIndex: 1000
        }
      }, React.createElement("div", {
        style: {
          position: "absolute",
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          background: "rgba(0,0,0,1)",
          opacity: 0.6,
          zIndex: -1
        },
        onClick: function onClick() {
          ModalCMD.hide(ModalCMD.currentModal.length);
        }
      }), React.createElement("div", {
        style: {
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)"
        }
      }, children))), modalInstance);
      this.recordModal({
        modalInstance: modalInstance
      });
    }
  }, {
    key: "hide",
    value: function hide(targetId) {
      var popModalRecord = this.delModal();

      if (popModalRecord && popModalRecord.modalInstance) {
        ReactDOM.unmountComponentAtNode(popModalRecord.modalInstance);
        var parentNode = popModalRecord.modalInstance.parentNode;
        parentNode && parentNode.removeChild(popModalRecord.modalInstance);
      }
    }
  }]);

  return ModalCMD;
}();
ModalCMD.currentModal = [];

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