2efd1c6df4
On save/delete success the parent flips loading false a beat before the dialog finishes its fade-out, so the button flashed back to 'Uložit změny'/'Smazat'. Both dialogs now freeze the loading flag (and the label props) while open, so the closing dialog keeps showing 'Ukládám…'/'Pracuji…'. Same derive-state-from-props pattern as the title freeze. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import Dialog from "@mui/material/Dialog";
|
|
import DialogTitle from "@mui/material/DialogTitle";
|
|
import DialogContent from "@mui/material/DialogContent";
|
|
import DialogActions from "@mui/material/DialogActions";
|
|
import Typography from "@mui/material/Typography";
|
|
import MuiButton from "@mui/material/Button";
|
|
import useDialogScrollLock from "./useDialogScrollLock";
|
|
|
|
export interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSubmit: () => void;
|
|
title: string;
|
|
subtitle?: string;
|
|
children: ReactNode;
|
|
loading?: boolean;
|
|
submitDisabled?: boolean;
|
|
submitText?: string;
|
|
cancelText?: string;
|
|
maxWidth?: "xs" | "sm" | "md" | "lg";
|
|
}
|
|
|
|
/** Form modal over MUI Dialog. Preserves the legacy FormModal prop shape. */
|
|
export default function Modal({
|
|
isOpen,
|
|
onClose,
|
|
onSubmit,
|
|
title,
|
|
subtitle,
|
|
children,
|
|
loading = false,
|
|
submitDisabled = false,
|
|
submitText = "Uložit",
|
|
cancelText = "Zrušit",
|
|
maxWidth = "sm",
|
|
}: ModalProps) {
|
|
useDialogScrollLock(isOpen);
|
|
// Freeze the shown title/subtitle/submitText while closing, so the fade-out
|
|
// never flashes the "create" variant when the caller clears `editingUser` on
|
|
// close (React derive-state-from-props: update only while open).
|
|
// Freeze label-affecting props (incl. `loading`) while open, so neither the
|
|
// title/submitText NOR the loading state flips during the close fade-out
|
|
// (e.g. on save, `loading` goes false a beat before the dialog finishes
|
|
// closing — without this the button would flash back to "Uložit změny").
|
|
const [shown, setShown] = useState({ title, subtitle, submitText, loading });
|
|
if (
|
|
isOpen &&
|
|
(shown.title !== title ||
|
|
shown.subtitle !== subtitle ||
|
|
shown.submitText !== submitText ||
|
|
shown.loading !== loading)
|
|
) {
|
|
setShown({ title, subtitle, submitText, loading });
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
open={isOpen}
|
|
onClose={shown.loading ? undefined : onClose}
|
|
fullWidth
|
|
maxWidth={maxWidth}
|
|
disableScrollLock
|
|
slotProps={{ paper: { sx: { borderRadius: 3 } } }}
|
|
>
|
|
<DialogTitle sx={{ pb: shown.subtitle ? 0.5 : 1.5 }}>
|
|
{shown.title}
|
|
{shown.subtitle && (
|
|
<Typography variant="body2" color="text.secondary">
|
|
{shown.subtitle}
|
|
</Typography>
|
|
)}
|
|
</DialogTitle>
|
|
<DialogContent>{children}</DialogContent>
|
|
<DialogActions sx={{ px: 3, pb: 2 }}>
|
|
<MuiButton onClick={onClose} color="inherit" disabled={shown.loading}>
|
|
{cancelText}
|
|
</MuiButton>
|
|
<MuiButton
|
|
onClick={onSubmit}
|
|
variant="contained"
|
|
disabled={shown.loading || submitDisabled}
|
|
>
|
|
{shown.loading ? "Ukládám…" : shown.submitText}
|
|
</MuiButton>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|