From 6664fb3506b1ea4af712fa849bd7c761a06c9843 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Aug 2023 23:56:13 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/Dialog.tsx         |  4 +-
 FrontEnd/src/components/dialog/FullPageDialog.css | 28 ++------
 FrontEnd/src/components/dialog/FullPageDialog.tsx | 80 +++++++++++------------
 FrontEnd/src/components/hooks/responsive.ts       |  4 +-
 4 files changed, 50 insertions(+), 66 deletions(-)

(limited to 'FrontEnd/src/components')

diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 85e8ca46..043a8eec 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useRef } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 
-import { ThemeColor } from "../common";
+import { ThemeColor, UiLogicError } from "../common";
 
 import { useCloseDialog } from "./DialogProvider";
 
@@ -10,7 +10,7 @@ import "./Dialog.css";
 
 const optionalPortalElement = document.getElementById("portal");
 if (optionalPortalElement == null) {
-  throw new Error("Portal element not found");
+  throw new UiLogicError();
 }
 const portalElement = optionalPortalElement;
 
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.css b/FrontEnd/src/components/dialog/FullPageDialog.css
index 2f1fc636..ce07c6ac 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.css
+++ b/FrontEnd/src/components/dialog/FullPageDialog.css
@@ -1,44 +1,30 @@
-.cru-full-page {
+.cru-dialog-full-page {
   position: fixed;
   z-index: 1030;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: white;
+  background-color: var(--cru-background-color);
   padding-top: 56px;
 }
 
-.cru-full-page-top-bar {
+.cru-dialog-full-page-top-bar {
   height: 56px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1;
-  background-color: var(--cru-primary-color);
+  background-color: var(--cru-theme-color);
   display: flex;
   align-items: center;
 }
 
-.cru-full-page-content-container {
+.cru-dialog-full-page-content-container {
   overflow: scroll;
 }
 
-.cru-full-page-back-button {
-  color: var(--cru-primary-t-color);
-}
-
-.cru-full-page-enter {
-  transform: translate(100%, 0);
-}
-
-.cru-full-page-enter-active {
-  transform: none;
-  transition: transform 0.3s;
-}
-
-.cru-full-page-exit-active {
-  transition: transform 0.3s;
-  transform: translate(100%, 0);
+.cru-dialog-full-page-back-button {
+  margin-left: 0.5em;
 }
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index cba57e21..d18bcf73 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -1,53 +1,51 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { createPortal } from "react-dom";
-import classnames from "classnames";
-import { CSSTransition } from "react-transition-group";
+import classNames from "classnames";
+
+import { ThemeColor, UiLogicError } from "../common";
+import { IconButton } from "../button";
+
+import { useCloseDialog } from "./DialogProvider";
 
 import "./FullPageDialog.css";
-import IconButton from "../button/IconButton";
 
-export interface FullPageDialogProps {
-  show: boolean;
-  onBack: () => void;
+const optionalPortalElement = document.getElementById("portal");
+if (optionalPortalElement == null) {
+  throw new UiLogicError();
+}
+const portalElement = optionalPortalElement;
+
+interface FullPageDialogProps {
+  color?: ThemeColor;
   contentContainerClassName?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-const FullPageDialog: React.FC<FullPageDialogProps> = ({
-  show,
-  onBack,
+export default function FullPageDialog({
+  color,
   children,
   contentContainerClassName,
-}) => {
+}: FullPageDialogProps) {
+  const closeDialog = useCloseDialog();
+
   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 className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}>
+      <div className="cru-dialog-full-page-top-bar">
+        <IconButton
+          icon="arrow-left"
+          className="cru-dialog-full-page-back-button"
+          onClick={closeDialog}
+        />
+      </div>
+      <div
+        className={classNames(
+          "cru-dialog-full-page-content-container",
+          contentContainerClassName,
+        )}
+      >
+        {children}
       </div>
-    </CSSTransition>,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    document.getElementById("portal")!,
+    </div>,
+    portalElement,
   );
-};
-
-export default FullPageDialog;
+}
diff --git a/FrontEnd/src/components/hooks/responsive.ts b/FrontEnd/src/components/hooks/responsive.ts
index 6bcce96c..42c134ef 100644
--- a/FrontEnd/src/components/hooks/responsive.ts
+++ b/FrontEnd/src/components/hooks/responsive.ts
@@ -2,6 +2,6 @@ import { useMediaQuery } from "react-responsive";
 
 import { breakpoints } from "../breakpoints";
 
-export function useMobile(): boolean {
-  return useMediaQuery({ maxWidth: breakpoints.sm });
+export function useMobile(onChange?: (mobile: boolean) => void): boolean {
+  return useMediaQuery({ maxWidth: breakpoints.sm }, undefined, onChange);
 }
-- 
cgit v1.2.3