aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/components/dialog
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/components/dialog')
-rw-r--r--FrontEnd/src/components/dialog/ConfirmDialog.tsx13
-rw-r--r--FrontEnd/src/components/dialog/Dialog.css32
-rw-r--r--FrontEnd/src/components/dialog/Dialog.tsx68
-rw-r--r--FrontEnd/src/components/dialog/DialogProvider.tsx95
-rw-r--r--FrontEnd/src/components/dialog/FullPageDialog.css15
-rw-r--r--FrontEnd/src/components/dialog/FullPageDialog.tsx65
-rw-r--r--FrontEnd/src/components/dialog/OperationDialog.tsx15
-rw-r--r--FrontEnd/src/components/dialog/index.tsx65
8 files changed, 191 insertions, 177 deletions
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),
+ };
+}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 21:00:07 +0000