Açıklama Yok

index.js 4.8KB

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