From 78f0934815a87573289c8e52af2666ea38c93251 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 11 Jul 2023 18:45:25 +0800
Subject: Fix dialog typo.

---
 FrontEnd/src/views/common/dialog/Dialog.tsx | 46 +++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 FrontEnd/src/views/common/dialog/Dialog.tsx

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

diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx
new file mode 100644
index 00000000..c755950d
--- /dev/null
+++ b/FrontEnd/src/views/common/dialog/Dialog.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { CSSTransition } from "react-transition-group";
+
+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, disableCloseOnClickOnOverlay } = props;
+
+  return ReactDOM.createPortal(
+    <CSSTransition
+      mountOnEnter
+      unmountOnExit
+      in={open}
+      timeout={300}
+      classNames="cru-dialog"
+    >
+      <div
+        className="cru-dialog-overlay"
+        onClick={
+          disableCloseOnClickOnOverlay
+            ? undefined
+            : () => {
+                onClose();
+              }
+        }
+      >
+        <div
+          className="cru-dialog-container"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </div>
+    </CSSTransition>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
+  );
+}
-- 
cgit v1.2.3