From de7df0e4fb38863b830a104a5a38d0e5247679f8 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 29 Jun 2021 23:50:55 +0800
Subject: ...

---
 FrontEnd/src/views/common/dailog/Dialog.tsx | 30 +++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

(limited to 'FrontEnd/src/views/common/dailog/Dialog.tsx')

diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
index 5a3902c4..ee58080f 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -1,13 +1,39 @@
 import React from "react";
+import ReactDOM from "react-dom";
+
+import "./Dialog.css";
 
 export interface DialogProps {
   onClose: () => void;
   open?: boolean;
   children?: React.ReactNode;
+  disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog(props: DialogProps): React.ReactElement | null {
-  const { open, onClose, children } = props;
+  const { open, onClose, children, disableCloseOnClickOnOverlay } = props;
 
-  return <div>{children}</div>;
+  return open
+    ? ReactDOM.createPortal(
+        <div
+          className="cru-dialog-overlay"
+          onClick={
+            disableCloseOnClickOnOverlay
+              ? undefined
+              : () => {
+                  onClose();
+                }
+          }
+        >
+          <div
+            className="cru-dialog-container"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
+        </div>,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        document.getElementById("portal")!
+      )
+    : null;
 }
-- 
cgit v1.2.3