From c7d2545ec7bbcdba30b775453d53df5a359410bd Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 21 Sep 2023 15:35:27 +0800
Subject: Revert dialog.

---
 FrontEnd/src/components/dialog/ConfirmDialog.tsx   | 13 +--
 FrontEnd/src/components/dialog/Dialog.css          | 32 ++++++++
 FrontEnd/src/components/dialog/Dialog.tsx          | 68 ++++++++--------
 FrontEnd/src/components/dialog/DialogProvider.tsx  | 95 ----------------------
 FrontEnd/src/components/dialog/FullPageDialog.css  | 15 ++++
 FrontEnd/src/components/dialog/FullPageDialog.tsx  | 65 ++++++++-------
 FrontEnd/src/components/dialog/OperationDialog.tsx | 15 ++--
 FrontEnd/src/components/dialog/index.tsx           | 65 +++++++++++++--
 FrontEnd/src/components/menu/PopupMenu.tsx         | 40 ++++-----
 9 files changed, 209 insertions(+), 199 deletions(-)
 delete mode 100644 FrontEnd/src/components/dialog/DialogProvider.tsx

(limited to 'FrontEnd/src/components')

diff --git a/FrontEnd/src/components/dialog/ConfirmDialog.tsx b/FrontEnd/src/components/dialog/ConfirmDialog.tsx
index 8b0a4219..4ee0ec03 100644
--- a/FrontEnd/src/components/dialog/ConfirmDialog.tsx
+++ b/FrontEnd/src/components/dialog/ConfirmDialog.tsx
@@ -2,14 +2,17 @@ import { useC, Text, ThemeColor } from "../common";
 
 import Dialog from "./Dialog";
 import DialogContainer from "./DialogContainer";
-import { useCloseDialog } from "./DialogProvider";
 
 export default function ConfirmDialog({
+  open,
+  onClose,
   onConfirm,
   title,
   body,
   color,
 }: {
+  open: boolean;
+  onClose: () => void;
   onConfirm: () => void;
   title: Text;
   body: Text;
@@ -18,10 +21,8 @@ export default function ConfirmDialog({
 }) {
   const c = useC();
 
-  const closeDialog = useCloseDialog();
-
   return (
-    <Dialog color={color ?? "danger"}>
+    <Dialog open={open} onClose={onClose} color={color ?? "danger"}>
       <DialogContainer
         title={title}
         titleColor={color ?? "danger"}
@@ -32,7 +33,7 @@ export default function ConfirmDialog({
             action: "minor",
 
             text: "operationDialog.cancel",
-            onClick: closeDialog,
+            onClick: onClose,
           },
           {
             key: "confirm",
@@ -42,7 +43,7 @@ export default function ConfirmDialog({
             color: "danger",
             onClick: () => {
               onConfirm();
-              closeDialog();
+              onClose();
             },
           },
         ]}
diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index 23b663db..6b34091a 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -7,6 +7,7 @@
   bottom: 0;
   overflow: auto;
   padding: 20vh 1em;
+  user-select: none;
 }
 
 .cru-dialog-background {
@@ -30,6 +31,7 @@
   border-radius: 5px;
   padding: 1.5em;
   background-color: var(--cru-dialog-container-background-color);
+  user-select: unset;
 }
 
 @media (min-width: 576px) {
@@ -37,3 +39,33 @@
     max-width: 800px;
   }
 }
+
+.cru-dialog-enter .cru-dialog-container {
+  opacity: 0;
+  transform: scale(0, 0);
+  transform-origin: center;
+}
+
+.cru-dialog-enter-active .cru-dialog-container {
+  opacity: 1;
+  transform: scale(1, 1);
+  transform-origin: center;
+  transition:
+    transform 0.3s,
+    opacity 0.3s;
+}
+
+.cru-dialog-exit .cru-dialog-container {
+  opacity: 1;
+  transform: scale(1, 1);
+  transform-origin: center;
+}
+
+.cru-dialog-exit-active .cru-dialog-container {
+  opacity: 0;
+  transform: scale(0, 0);
+  transform-origin: center;
+  transition:
+    transform 0.3s,
+    opacity 0.3s;
+}
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 043a8eec..15c898f1 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,55 +1,59 @@
 import { ReactNode, useRef } from "react";
-import ReactDOM from "react-dom";
 import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
 
-import { ThemeColor, UiLogicError } from "../common";
-
-import { useCloseDialog } from "./DialogProvider";
+import { ThemeColor } from "../common";
 
 import "./Dialog.css";
 
-const optionalPortalElement = document.getElementById("portal");
-if (optionalPortalElement == null) {
-  throw new UiLogicError();
-}
-const portalElement = optionalPortalElement;
-
 interface DialogProps {
+  open: boolean;
+  onClose: () => void;
   color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog({
+  open,
+  onClose,
   color,
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
-  const closeDialog = useCloseDialog();
-
+  const nodeRef = useRef(null);
   const lastPointerDownIdRef = useRef<number | null>(null);
 
-  return ReactDOM.createPortal(
-    <div
-      className={classNames(
-        `cru-theme-${color ?? "primary"}`,
-        "cru-dialog-overlay",
-      )}
+  return (
+    <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) closeDialog();
-          }
-          lastPointerDownIdRef.current = null;
-        }}
-      />
-      <div className="cru-dialog-container">{children}</div>
-    </div>,
-    portalElement,
+        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>
   );
 }
diff --git a/FrontEnd/src/components/dialog/DialogProvider.tsx b/FrontEnd/src/components/dialog/DialogProvider.tsx
deleted file mode 100644
index bb85e4cf..00000000
--- a/FrontEnd/src/components/dialog/DialogProvider.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useState, useContext, createContext, ReactNode } from "react";
-
-import { UiLogicError } from "../common";
-
-type DialogMap<D extends string> = {
-  [K in D]: ReactNode;
-};
-
-interface DialogController<D extends string> {
-  currentDialog: D | null;
-  currentDialogReactNode: ReactNode;
-  canSwitchDialog: boolean;
-  switchDialog: (newDialog: D | null) => void;
-  setCanSwitchDialog: (enable: boolean) => void;
-  closeDialog: () => void;
-  forceSwitchDialog: (newDialog: D | null) => void;
-  forceCloseDialog: () => void;
-}
-
-export function useDialog<D extends string>(
-  dialogs: DialogMap<D>,
-  options?: {
-    initDialog?: D | null;
-    onClose?: {
-      [K in D]?: () => void;
-    };
-  },
-): {
-  controller: DialogController<D>;
-  switchDialog: (newDialog: D | null) => void;
-  forceSwitchDialog: (newDialog: D | null) => void;
-  createDialogSwitch: (newDialog: D | null) => () => void;
-} {
-  const [canSwitchDialog, setCanSwitchDialog] = useState<boolean>(true);
-  const [dialog, setDialog] = useState<D | null>(options?.initDialog ?? null);
-
-  const forceSwitchDialog = (newDialog: D | null) => {
-    if (dialog != null) {
-      options?.onClose?.[dialog]?.();
-    }
-    setDialog(newDialog);
-    setCanSwitchDialog(true);
-  };
-
-  const switchDialog = (newDialog: D | null) => {
-    if (canSwitchDialog) {
-      forceSwitchDialog(newDialog);
-    }
-  };
-
-  const controller: DialogController<D> = {
-    currentDialog: dialog,
-    currentDialogReactNode: dialog == null ? null : dialogs[dialog],
-    canSwitchDialog,
-    switchDialog,
-    setCanSwitchDialog,
-    closeDialog: () => switchDialog(null),
-    forceSwitchDialog,
-    forceCloseDialog: () => forceSwitchDialog(null),
-  };
-
-  return {
-    controller,
-    switchDialog,
-    forceSwitchDialog,
-    createDialogSwitch: (newDialog: D | null) => () => switchDialog(newDialog),
-  };
-}
-
-const DialogControllerContext = createContext<DialogController<string> | null>(
-  null,
-);
-
-export function useDialogController(): DialogController<string> {
-  const controller = useContext(DialogControllerContext);
-  if (controller == null) throw new UiLogicError("not in dialog provider");
-  return controller;
-}
-
-export function useCloseDialog(): () => void {
-  const controller = useDialogController();
-  return controller.closeDialog;
-}
-
-export function DialogProvider<D extends string>({
-  controller,
-}: {
-  controller: DialogController<D>;
-}) {
-  return (
-    <DialogControllerContext.Provider value={controller as never}>
-      {controller.currentDialogReactNode}
-    </DialogControllerContext.Provider>
-  );
-}
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.css b/FrontEnd/src/components/dialog/FullPageDialog.css
index ce07c6ac..3ba8ba15 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.css
+++ b/FrontEnd/src/components/dialog/FullPageDialog.css
@@ -28,3 +28,18 @@
 .cru-dialog-full-page-back-button {
   margin-left: 0.5em;
 }
+
+.cru-dialog-full-page-enter {
+  transform: translate(100%, 0);
+}
+
+.cru-dialog-full-page-enter-active {
+  transform: none;
+  transition: transform 0.3s;
+}
+
+.cru-dialog-full-page-exit-active {
+  transition: transform 0.3s;
+  transform: translate(100%, 0);
+}
+
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index 575abf7f..ad5abfde 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -1,52 +1,59 @@
-import { ReactNode } from "react";
-import { createPortal } from "react-dom";
+import { ReactNode, useRef } from "react";
 import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
 
-import { ThemeColor, UiLogicError } from "../common";
+import { ThemeColor } from "../common";
 import { IconButton } from "../button";
 
-import { useCloseDialog } from "./DialogProvider";
-
 import "./FullPageDialog.css";
 
-const optionalPortalElement = document.getElementById("portal");
-if (optionalPortalElement == null) {
-  throw new UiLogicError();
-}
-const portalElement = optionalPortalElement;
-
 interface FullPageDialogProps {
+  open: boolean;
+  onClose: () => void;
   color?: ThemeColor;
   contentContainerClassName?: string;
   children: ReactNode;
 }
 
 export default function FullPageDialog({
+  open,
+  onClose,
   color,
   children,
   contentContainerClassName,
 }: FullPageDialogProps) {
-  const closeDialog = useCloseDialog();
+  const nodeRef = useRef(null);
 
-  return createPortal(
-    <div className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}>
-      <div className="cru-dialog-full-page-top-bar">
-        <IconButton
-          icon="arrow-left"
-          color="light"
-          className="cru-dialog-full-page-back-button"
-          onClick={closeDialog}
-        />
-      </div>
+  return (
+    <CSSTransition
+      nodeRef={nodeRef}
+      mountOnEnter
+      unmountOnExit
+      in={open}
+      timeout={300}
+      classNames="cru-dialog-full-page"
+    >
       <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>,
-    portalElement,
+    </CSSTransition>
   );
 }
diff --git a/FrontEnd/src/components/dialog/OperationDialog.tsx b/FrontEnd/src/components/dialog/OperationDialog.tsx
index 6ca4d0a0..feaf5c79 100644
--- a/FrontEnd/src/components/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/components/dialog/OperationDialog.tsx
@@ -11,7 +11,6 @@ import {
 import { ButtonRowV2 } from "../button";
 import Dialog from "./Dialog";
 import DialogContainer from "./DialogContainer";
-import { useDialogController } from "./DialogProvider";
 
 import "./OperationDialog.css";
 
@@ -36,6 +35,8 @@ function OperationDialogPrompt(props: OperationDialogPromptProps) {
 }
 
 export interface OperationDialogProps<TData> {
+  open: boolean;
+  onClose: () => void;
   color?: ThemeColor;
   inputColor?: ThemeColor;
   title: Text;
@@ -54,6 +55,8 @@ export interface OperationDialogProps<TData> {
 
 function OperationDialog<TData>(props: OperationDialogProps<TData>) {
   const {
+    open,
+    onClose,
     color,
     inputColor,
     title,
@@ -92,8 +95,6 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
         data: unknown;
       };
 
-  const dialogController = useDialogController();
-
   const [step, setStep] = useState<Step>({ type: "input" });
 
   const { inputGroupProps, hasErrorAndDirty, setAllDisabled, confirm } =
@@ -103,7 +104,7 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
 
   function close() {
     if (step.type !== "process") {
-      dialogController.closeDialog();
+      onClose();
       if (step.type === "success" && onSuccessAndClose) {
         onSuccessAndClose?.(step.data);
       }
@@ -116,7 +117,6 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
     const result = confirm();
     if (result.type === "ok") {
       setStep({ type: "process" });
-      dialogController.setCanSwitchDialog(false);
       setAllDisabled(true);
       onProcess(result.values)
         .then(
@@ -133,9 +133,6 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
             });
           },
         )
-        .finally(() => {
-          dialogController.setCanSwitchDialog(true);
-        });
     }
   }
 
@@ -210,7 +207,7 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
   }
 
   return (
-    <Dialog color={color}>
+    <Dialog open={open} onClose={close} color={color}>
       <DialogContainer title={title} titleColor={color} buttonsV2={buttons}>
         {body}
       </DialogContainer>
diff --git a/FrontEnd/src/components/dialog/index.tsx b/FrontEnd/src/components/dialog/index.tsx
index 9ca06de2..17db8fd0 100644
--- a/FrontEnd/src/components/dialog/index.tsx
+++ b/FrontEnd/src/components/dialog/index.tsx
@@ -1,12 +1,65 @@
+import { useState } from "react";
+
 export { default as Dialog } from "./Dialog";
 export { default as FullPageDialog } from "./FullPageDialog";
 export { default as OperationDialog } from "./OperationDialog";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as DialogContainer } from "./DialogContainer";
 
-export {
-  useDialog,
-  useDialogController,
-  useCloseDialog,
-  DialogProvider,
-} from "./DialogProvider";
+type DialogMap<D extends string, V> = {
+  [K in D]: V;
+};
+
+type DialogKeyMap<D extends string> = DialogMap<D, number>;
+
+type DialogPropsMap<D extends string> = DialogMap<
+  D,
+  { key: number | string; open: boolean; onClose: () => void }
+>;
+
+export function useDialog<D extends string>(
+  dialogs: D[],
+  options?: {
+    initDialog?: D | null;
+    onClose?: {
+      [K in D]?: () => void;
+    };
+  },
+): {
+  dialog: D | null;
+  switchDialog: (newDialog: D | null) => void;
+  dialogPropsMap: DialogPropsMap<D>;
+  createDialogSwitch: (newDialog: D | null) => () => void;
+} {
+  const [dialog, setDialog] = useState<D | null>(options?.initDialog ?? null);
+
+  const [dialogKeys, setDialogKeys] = useState<DialogKeyMap<D>>(
+    () => Object.fromEntries(dialogs.map((d) => [d, 0])) as DialogKeyMap<D>,
+  );
+
+  const switchDialog = (newDialog: D | null) => {
+    if (dialog !== null) {
+      setDialogKeys({ ...dialogKeys, [dialog]: dialogKeys[dialog] + 1 });
+    }
+    setDialog(newDialog);
+  };
+
+  return {
+    dialog,
+    switchDialog,
+    dialogPropsMap: Object.fromEntries(
+      dialogs.map((d) => [
+        d,
+        {
+          key: `${d}-${dialogKeys[d]}`,
+          open: dialog === d,
+          onClose: () => {
+            switchDialog(null);
+            options?.onClose?.[d]?.();
+          },
+        },
+      ]),
+    ) as DialogPropsMap<D>,
+    createDialogSwitch: (newDialog: D | null) => () => switchDialog(newDialog),
+  };
+}
diff --git a/FrontEnd/src/components/menu/PopupMenu.tsx b/FrontEnd/src/components/menu/PopupMenu.tsx
index 7ac2abfe..b00bc2ed 100644
--- a/FrontEnd/src/components/menu/PopupMenu.tsx
+++ b/FrontEnd/src/components/menu/PopupMenu.tsx
@@ -1,6 +1,5 @@
 import { useState, CSSProperties, ReactNode } from "react";
 import classNames from "classnames";
-import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
 import { ThemeColor } from "../common";
@@ -46,27 +45,24 @@ export default function PopupMenu({
       onClick={() => setShow(true)}
     >
       {children}
-      {show &&
-        createPortal(
-          <div
-            ref={setPopperElement}
-            className={`cru-popup-menu-menu-container cru-clickable-${
-              color ?? "primary"
-            }`}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <Menu
-              items={items}
-              onItemClick={(e) => {
-                setShow(false);
-                e.stopPropagation();
-              }}
-            />
-          </div>,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          document.getElementById("portal")!,
-        )}
+      {show && (
+        <div
+          ref={setPopperElement}
+          className={`cru-popup-menu-menu-container cru-clickable-${
+            color ?? "primary"
+          }`}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <Menu
+            items={items}
+            onItemClick={(e) => {
+              setShow(false);
+              e.stopPropagation();
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 }
-- 
cgit v1.2.3