From ffe0ef6dc532f5bf0226e074f95a351b36c5abbd Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 21 Sep 2023 17:45:06 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/Dialog.tsx         | 60 ++++++++++++-----------
 FrontEnd/src/components/dialog/FullPageDialog.tsx | 55 +++++++++++----------
 2 files changed, 61 insertions(+), 54 deletions(-)

(limited to 'FrontEnd/src/components/dialog')

diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 15c898f1..2d0b34db 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -4,6 +4,8 @@ import { CSSTransition } from "react-transition-group";
 
 import { ThemeColor } from "../common";
 
+import InPortal from "../InPortal";
+
 import "./Dialog.css";
 
 interface DialogProps {
@@ -25,35 +27,37 @@ export default function Dialog({
   const lastPointerDownIdRef = useRef<number | null>(null);
 
   return (
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in={open}
-      timeout={300}
-      classNames="cru-dialog"
-    >
-      <div
-        ref={nodeRef}
-        className={classNames(
-          `cru-theme-${color ?? "primary"}`,
-          "cru-dialog-overlay",
-        )}
+    <InPortal>
+      <CSSTransition
+        nodeRef={nodeRef}
+        mountOnEnter
+        unmountOnExit
+        in={open}
+        timeout={300}
+        classNames="cru-dialog"
       >
         <div
-          className="cru-dialog-background"
-          onPointerDown={(e) => {
-            lastPointerDownIdRef.current = e.pointerId;
-          }}
-          onPointerUp={(e) => {
-            if (lastPointerDownIdRef.current === e.pointerId) {
-              if (!disableCloseOnClickOnOverlay) onClose();
-            }
-            lastPointerDownIdRef.current = null;
-          }}
-        />
-        <div className="cru-dialog-container">{children}</div>
-      </div>
-    </CSSTransition>
+          ref={nodeRef}
+          className={classNames(
+            `cru-theme-${color ?? "primary"}`,
+            "cru-dialog-overlay",
+          )}
+        >
+          <div
+            className="cru-dialog-background"
+            onPointerDown={(e) => {
+              lastPointerDownIdRef.current = e.pointerId;
+            }}
+            onPointerUp={(e) => {
+              if (lastPointerDownIdRef.current === e.pointerId) {
+                if (!disableCloseOnClickOnOverlay) onClose();
+              }
+              lastPointerDownIdRef.current = null;
+            }}
+          />
+          <div className="cru-dialog-container">{children}</div>
+        </div>
+      </CSSTransition>
+    </InPortal>
   );
 }
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index ad5abfde..b0a39ee3 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -4,6 +4,7 @@ import { CSSTransition } from "react-transition-group";
 
 import { ThemeColor } from "../common";
 import { IconButton } from "../button";
+import InPortal from "../InPortal";
 
 import "./FullPageDialog.css";
 
@@ -25,35 +26,37 @@ export default function FullPageDialog({
   const nodeRef = useRef(null);
 
   return (
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in={open}
-      timeout={300}
-      classNames="cru-dialog-full-page"
-    >
-      <div
-        ref={nodeRef}
-        className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
+    <InPortal>
+      <CSSTransition
+        nodeRef={nodeRef}
+        mountOnEnter
+        unmountOnExit
+        in={open}
+        timeout={300}
+        classNames="cru-dialog-full-page"
       >
-        <div className="cru-dialog-full-page-top-bar">
-          <IconButton
-            icon="arrow-left"
-            color="light"
-            className="cru-dialog-full-page-back-button"
-            onClick={onClose}
-          />
-        </div>
         <div
-          className={classNames(
-            "cru-dialog-full-page-content-container",
-            contentContainerClassName,
-          )}
+          ref={nodeRef}
+          className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
         >
-          {children}
+          <div className="cru-dialog-full-page-top-bar">
+            <IconButton
+              icon="arrow-left"
+              color="light"
+              className="cru-dialog-full-page-back-button"
+              onClick={onClose}
+            />
+          </div>
+          <div
+            className={classNames(
+              "cru-dialog-full-page-content-container",
+              contentContainerClassName,
+            )}
+          >
+            {children}
+          </div>
         </div>
-      </div>
-    </CSSTransition>
+      </CSSTransition>
+    </InPortal>
   );
 }
-- 
cgit v1.2.3