bilingo-ui/lib/Modal/index.js

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var inherits = require('../inherits-c86d64c1.js');
var React = require('react');
var React__default = _interopDefault(React);
var ReactDOM = require('react-dom');
var ReactDOM__default = _interopDefault(ReactDOM);
var styleInject_es = require('../style-inject.es-dcee06b6.js');

function isBrowser() {
  return !((typeof window === "undefined" ? "undefined" : inherits._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_es.styleInject(css);

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

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

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

  inherits._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 && ReactDOM.createPortal(React__default.createElement("div", {
        className: styles.wrapper
      }, React__default.createElement("div", {
        className: styles.overlay,
        onClick: onCancel
      }), React__default.createElement("div", {
        className: styles.container
      }, children)), finalMountContainer);
    }
  }]);

  return Modal;
}(React__default.PureComponent);
Modal.hasShowWarning = false;
var ModalCMD =
/*#__PURE__*/
function () {
  function ModalCMD() {
    inherits._classCallCheck(this, ModalCMD);

    ModalCMD.currentModal = [];
  }

  inherits._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__default.render(React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
        style: {
          position: "fixed",
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          zIndex: 1000
        }
      }, React__default.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__default.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__default.unmountComponentAtNode(popModalRecord.modalInstance);
        var parentNode = popModalRecord.modalInstance.parentNode;
        parentNode && parentNode.removeChild(popModalRecord.modalInstance);
      }
    }
  }]);

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

exports.Modal = Modal;
exports.ModalCMD = ModalCMD;
exports.default = Modal;
//# sourceMappingURL=index.js.map