From f5dfd52f6efece2f4cad227044ecf4dd66301bbc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Aug 2023 21:36:58 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/FullPageDialog.tsx | 53 +++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 FrontEnd/src/components/dialog/FullPageDialog.tsx

(limited to 'FrontEnd/src/components/dialog/FullPageDialog.tsx')

diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
new file mode 100644
index 00000000..6368fc0a
--- /dev/null
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+import classnames from "classnames";
+import { CSSTransition } from "react-transition-group";
+
+import "./FullPageDialog.css";
+import IconButton from "../button/IconButton";
+
+export interface FullPageDialogProps {
+  show: boolean;
+  onBack: () => void;
+  contentContainerClassName?: string;
+  children: React.ReactNode;
+}
+
+const FullPageDialog: React.FC<FullPageDialogProps> = ({
+  show,
+  onBack,
+  children,
+  contentContainerClassName,
+}) => {
+  return createPortal(
+    <CSSTransition
+      mountOnEnter
+      unmountOnExit
+      in={show}
+      timeout={300}
+      classNames="cru-full-page"
+    >
+      <div className="cru-full-page">
+        <div className="cru-full-page-top-bar">
+          <IconButton
+            icon="arrow-left"
+            className="ms-3 cru-full-page-back-button"
+            onClick={onBack}
+          />
+        </div>
+        <div
+          className={classnames(
+            "cru-full-page-content-container",
+            contentContainerClassName
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </CSSTransition>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
+  );
+};
+
+export default FullPageDialog;
-- 
cgit v1.2.3