sprint-asia-custom-component 0.1.181 → 0.1.182

package/dist/index.js

@@ -29092,50 +29092,60 @@
 
   var img$7 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARGSURBVHgB1ZpRbttGEIb/ofRgoyniG5S5gdwoQJWgKJULJD1B5RPEN7B1A/cEVU5Q9wIWjSBWASe1blD2BHWAIMmDxMnM0rQpiqQocRmL34vEpZbe37M7uzNDQg1ceZ29z2h5Idh1QC7BeZi8zwg/yL2A4UwfYDbd96fXsAzBEm+8rtcCvyTCC3msi7XgQNT6M9Drn/13PixQSZha5gvar5j4kEB7sEIkEpgPe/40wIZsJKweQRkwjzYVuLawC697COKjWgUtwEHIPHzm/zNap1dpYTdW+lN6eLgP1rReKWETr+OCWuP1nYJtdP3N+2XErRT21ut0SER9u6lXDAPXzNR/5l9Oi35XKGzbRMWUEZcrTKcfU+tq20TFqDji2X7etHSyGuM1ta2iFLHIno5RnVrW/UxhjNbx/TuKMpBrPHUGS8Leej8OiOg3NAXZfszeutScYHvc+nroetvl2aPkYdpZ/EFTpuAiut4+oX2YaouIrNX+Fw0lbTXn7oZaq7mkrXYrTOKoX9BwRMOr+LsRNpEg0craIgxDDg+YcFq2i0yhc9NHgkxURK32xmgB2tHDeUBVg2miUe/s8vjmanTRfzySZxZuG/J3Xz8dvx/EfSbPuxpkHqECGsXLh+9EY6o+DcNwfp681gHrwPN+nxJ184wwQEWi1IRMReMNQS4q4sBZsk6euCxRZlAOvUBlyNVjllis7cIGcgKYPH/8R7o5LS5PlPYlppewgGbIHFm8HdiCaVAkrkiU9oU1yBXnwa7FLFwsDr2z9wfJ5ixBin1RZhCSz4RjPzTJsVyaekSpmZyHDupihbi6RMXUJwyaWMqf40X3bFCbsDxHEbNqn6uKCAutFwRWiYqpS5wWPUQYBbBIkUsvs8/ZgQLHJCEtsXKfWrHPwRJzYOrsYu7DAnqiL7X5FoiTDx8W0JqboxGn/Lf+Q0U4DP9Kt+W69BxxEr5YsBoFqinyilw+fsrHcZNXK/epDHES5nioCkVWN3uJCTQJY1RFKiJSgj03J/2SVRmdwmpt6fOD9DlGRWaMvlZFbzfJi373f5NdbTQU9MaXj/RbMufxO5oO3TmfW2E74exEU1hoMmFrGH+9FaaepNFW05yL/3cQXy6cFZtrNTk9JaylLAgz/p8xRNOQMSetpWSGDpN+V12/hyYQpf0O0s2ZYcsOz361fTiuh+UpGJMpzCT2udXf5vVmxiZjTE/BmNxAUztoAXsbxcXF9TxRSonXIZ50iHi8LacSK69DxEy8n6R2Nh9Hqbr7RNZUwfRLUirnYR5k1lz1isimaFVmh7/bLyNKWTtTNPGeDKTX0beynlnjUp56evbuZJ1+G6XAdGoyzY8JXNvbBeYFFTni7YQPTvZ9f20HVim3dydQy1B2LFhVUIy1pKUGq0w02ESkSU2wcyoz4LS3Da/O5nHleXtf8LETVXLIxfJWcR1lxzjYxfd+Fcvk8RW++zEUFiaVEwAAAABJRU5ErkJggg==";
 
-  const ModalResult = props => {
-    const cancelButtonRef = React.useRef(null);
-    function handleBackgroundClick(e) {
-      e.stopPropagation();
-    }
-    return /*#__PURE__*/React__default["default"].createElement(qe.Root, {
-      show: props.isOpen,
-      as: React.Fragment
-    }, /*#__PURE__*/React__default["default"].createElement(_t, {
-      as: "div",
-      className: "relative",
-      initialFocus: cancelButtonRef,
-      onClose: () => props.onClose(),
-      static: true,
+  const Modal = ({
+    open,
+    onClose = () => {},
+    children
+  }) => {
+    const [visible, setVisible] = React.useState(open);
+    const [animate, setAnimate] = React.useState(false);
+    React.useEffect(() => {
+      if (open) {
+        setVisible(true);
+        requestAnimationFrame(() => setAnimate(true));
+        document.body.style.overflow = "hidden";
+      } else {
+        setAnimate(false);
+        const t = setTimeout(() => setVisible(false), 200);
+        document.body.style.overflow = "";
+        return () => clearTimeout(t);
+      }
+    }, [open]);
+    if (!visible) return null;
+    const modalRoot = document.getElementById("modal-root");
+    if (!modalRoot) return null;
+    return /*#__PURE__*/reactDomExports.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "fixed inset-0",
       style: {
         zIndex: 1001
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(qe.Child, {
-      as: React.Fragment,
-      enter: "ease-out duration-300",
-      enterFrom: "opacity-0",
-      enterTo: "opacity-100",
-      leave: "ease-in duration-200",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0"
+      },
+      onClick: onClose
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "fixed inset-0 bg-black bg-opacity-25 transition-opacity",
-      onClick: handleBackgroundClick
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "fixed inset-0 z-10 w-screen overflow-y-auto"
+      className: `absolute inset-0 bg-black transition-opacity duration-200 ${animate ? "opacity-40" : "opacity-0"}`,
+      onClick: onClose
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "relative z-10 h-full overflow-y-auto"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "min-h-full flex items-center justify-center p-4 sm:p-8"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `
+            inline-block
+            bg-white rounded-lg shadow-xl
+            transform transition-all duration-200
+            ${animate ? "opacity-100 scale-100" : "opacity-0 scale-95"}
+          `,
+      onClick: e => e.stopPropagation()
+    }, children)))), modalRoot);
+  };
+
+  const ModalResult = props => {
+    return /*#__PURE__*/React__default["default"].createElement(Modal, {
+      open: props.isOpen,
+      onClose: props.onClose
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0"
-    }, /*#__PURE__*/React__default["default"].createElement(qe.Child, {
-      as: React.Fragment,
-      enter: "ease-out duration-300",
-      enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-      enterTo: "opacity-100 translate-y-0 sm:scale-100",
-      leave: "ease-in duration-200",
-      leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
-      leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-    }, /*#__PURE__*/React__default["default"].createElement(_t.Panel, {
       className: "relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all w-80"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "bg-white px-4 pb-4 pt-5 sm:p-4 text-center"
+      className: "bg-white px-4 pb-4 pt-4 sm:p-4 text-center"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex justify-center items-center my-3"
     }, props.type == "success" ? /*#__PURE__*/React__default["default"].createElement("img", {
@@ -29148,7 +29158,7 @@
       className: "text-xl text-black font-semibold mt-2"
     }, props.type == "success" ? "Success" : "Failed"), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black mb-2"
-    }, props.subtitle))))))));
+    }, props.subtitle))));
   };
 
   const formatNumber = val => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.181",
+  "version": "0.1.182",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/modal/modal/index.js

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+const Modal = ({ open, onClose = () => {}, children }) => {
+  const [visible, setVisible] = useState(open);
+  const [animate, setAnimate] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      requestAnimationFrame(() => setAnimate(true));
+      document.body.style.overflow = "hidden";
+    } else {
+      setAnimate(false);
+      const t = setTimeout(() => setVisible(false), 200);
+      document.body.style.overflow = "";
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+
+  if (!visible) return null;
+
+  const modalRoot = document.getElementById("modal-root");
+  if (!modalRoot) return null;
+
+  return createPortal(
+    <div className="fixed inset-0" style={{ zIndex: 1001 }} onClick={onClose}>
+      {/* Backdrop */}
+      <div
+        className={`absolute inset-0 bg-black transition-opacity duration-200 ${animate ? "opacity-40" : "opacity-0"}`}
+        onClick={onClose}
+      />
+
+      {/* Scroll container (THIS scrolls) */}
+      <div className="relative z-10 h-full overflow-y-auto">
+        {/* Centering wrapper */}
+        <div className="min-h-full flex items-center justify-center p-4 sm:p-8">
+          {/* Modal panel */}
+          <div
+            className={`
+            inline-block
+            bg-white rounded-lg shadow-xl
+            transform transition-all duration-200
+            ${animate ? "opacity-100 scale-100" : "opacity-0 scale-95"}
+          `}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>,
+    modalRoot
+  );
+};
+
+export default Modal;

package/src/components/modal/modalResult/index.js

@@ -1,70 +1,26 @@
 import React from "react";
-import { Fragment, useRef } from "react";
-import { Dialog, Transition } from "@headlessui/react";
 import LogoSuccess from "../../../assets/images/logo_success.png";
 import LogoFailed from "../../../assets/images/logo_failed.png";
+import Modal from "../modal";
 
 const ModalResult = (props) => {
-  const cancelButtonRef = useRef(null);
-
-  function handleBackgroundClick(e) {
-    e.stopPropagation();
-  }
-
   return (
-    <Transition.Root show={props.isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative"
-        initialFocus={cancelButtonRef}
-        onClose={() => props.onClose()}
-        static={true}
-        style={{ zIndex: 1001 }}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black bg-opacity-25 transition-opacity" onClick={handleBackgroundClick} />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all w-80">
-                <div className="bg-white px-4 pb-4 pt-5 sm:p-4 text-center">
-                  <div className="flex justify-center items-center my-3">
-                    {props.type == "success" ? (
-                      <img src={LogoSuccess} className="w-14 h-14" />
-                    ) : (
-                      <img src={LogoFailed} className="w-14 h-14" />
-                    )}
-                  </div>
-                  <p className="text-xl text-black font-semibold mt-2">
-                    {props.type == "success" ? "Success" : "Failed"}
-                  </p>
-                  <p className="text-sm text-black mb-2">{props.subtitle}</p>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <Modal open={props.isOpen} onClose={props.onClose}>
+      <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all w-80">
+        <div className="bg-white px-4 pb-4 pt-4 sm:p-4 text-center">
+          <div className="flex justify-center items-center my-3">
+            {props.type == "success" ? (
+              <img src={LogoSuccess} className="w-14 h-14" />
+            ) : (
+              <img src={LogoFailed} className="w-14 h-14" />
+            )}
           </div>
+          <p className="text-xl text-black font-semibold mt-2">{props.type == "success" ? "Success" : "Failed"}</p>
+          <p className="text-sm text-black mb-2">{props.subtitle}</p>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </Modal>
   );
 };
 
-export default ModalResult;
+export default ModalResult;