Brak opisu

index.js 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  4. var inherits = require('../inherits-c86d64c1.js');
  5. var React = require('react');
  6. var React__default = _interopDefault(React);
  7. var ReactDOM = require('react-dom');
  8. var ReactDOM__default = _interopDefault(ReactDOM);
  9. var styleInject_es = require('../style-inject.es-dcee06b6.js');
  10. function isBrowser() {
  11. return !((typeof window === "undefined" ? "undefined" : inherits._typeof(window)) === undefined);
  12. }
  13. 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";
  14. var styles = {
  15. "wrapper": "Modal_wrapper__2hzaC",
  16. "overlay": "Modal_overlay__3iNdm",
  17. "overlayer": "Modal_overlayer__1zSH9",
  18. "container": "Modal_container__2veos"
  19. };
  20. styleInject_es.styleInject(css);
  21. var Modal =
  22. /*#__PURE__*/
  23. function (_React$PureComponent) {
  24. inherits._inherits(Modal, _React$PureComponent);
  25. function Modal() {
  26. inherits._classCallCheck(this, Modal);
  27. return inherits._possibleConstructorReturn(this, inherits._getPrototypeOf(Modal).apply(this, arguments));
  28. }
  29. inherits._createClass(Modal, [{
  30. key: "render",
  31. value: function render() {
  32. if (!isBrowser()) return null;
  33. var DEFAULT_CONTAINER = document.getElementById("container");
  34. var _this$props = this.props,
  35. children = _this$props.children,
  36. visible = _this$props.visible,
  37. onCancel = _this$props.onCancel,
  38. container = _this$props.container;
  39. var finalMountContainer;
  40. if (!container) {
  41. if (!DEFAULT_CONTAINER) {
  42. if (!Modal.hasShowWarning) {
  43. Modal.hasShowWarning = true;
  44. }
  45. finalMountContainer = document.body;
  46. } else {
  47. if (!Modal.hasShowWarning) {
  48. Modal.hasShowWarning = true;
  49. }
  50. finalMountContainer = DEFAULT_CONTAINER;
  51. }
  52. } else {
  53. finalMountContainer = container;
  54. }
  55. return visible && ReactDOM.createPortal(React__default.createElement("div", {
  56. className: styles.wrapper
  57. }, React__default.createElement("div", {
  58. className: styles.overlay,
  59. onClick: onCancel
  60. }), React__default.createElement("div", {
  61. className: styles.container
  62. }, children)), finalMountContainer);
  63. }
  64. }]);
  65. return Modal;
  66. }(React__default.PureComponent);
  67. Modal.hasShowWarning = false;
  68. var ModalCMD =
  69. /*#__PURE__*/
  70. function () {
  71. function ModalCMD() {
  72. inherits._classCallCheck(this, ModalCMD);
  73. ModalCMD.currentModal = [];
  74. }
  75. inherits._createClass(ModalCMD, null, [{
  76. key: "recordModal",
  77. value: function recordModal(record) {
  78. ModalCMD.currentModal.push(record);
  79. }
  80. }, {
  81. key: "delModal",
  82. value: function delModal() {
  83. return ModalCMD.currentModal.pop();
  84. }
  85. }, {
  86. key: "show",
  87. value: function show(_ref) {
  88. var children = _ref.children,
  89. container = _ref.container;
  90. var modalInstance = document.createElement("div");
  91. var targetMountDom = container ? container : document.body;
  92. targetMountDom.appendChild(modalInstance);
  93. ReactDOM__default.render(React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
  94. style: {
  95. position: "fixed",
  96. top: 0,
  97. bottom: 0,
  98. left: 0,
  99. right: 0,
  100. zIndex: 1000
  101. }
  102. }, React__default.createElement("div", {
  103. style: {
  104. position: "absolute",
  105. top: 0,
  106. bottom: 0,
  107. left: 0,
  108. right: 0,
  109. background: "rgba(0,0,0,1)",
  110. opacity: 0.6,
  111. zIndex: -1
  112. },
  113. onClick: function onClick() {
  114. ModalCMD.hide(ModalCMD.currentModal.length);
  115. }
  116. }), React__default.createElement("div", {
  117. style: {
  118. position: "absolute",
  119. top: "50%",
  120. left: "50%",
  121. transform: "translate(-50%, -50%)"
  122. }
  123. }, children))), modalInstance);
  124. this.recordModal({
  125. modalInstance: modalInstance
  126. });
  127. }
  128. }, {
  129. key: "hide",
  130. value: function hide(targetId) {
  131. var popModalRecord = this.delModal();
  132. if (popModalRecord && popModalRecord.modalInstance) {
  133. ReactDOM__default.unmountComponentAtNode(popModalRecord.modalInstance);
  134. var parentNode = popModalRecord.modalInstance.parentNode;
  135. parentNode && parentNode.removeChild(popModalRecord.modalInstance);
  136. }
  137. }
  138. }]);
  139. return ModalCMD;
  140. }();
  141. ModalCMD.currentModal = [];
  142. exports.Modal = Modal;
  143. exports.ModalCMD = ModalCMD;
  144. exports.default = Modal;
  145. //# sourceMappingURL=index.js.map