94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import {
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
} from "@mui/material";
|
|
import React, { PropsWithChildren } from "react";
|
|
|
|
type ConfirmContext = (
|
|
message: string,
|
|
title?: string,
|
|
confirmButton?: string,
|
|
cancelButton?: string
|
|
) => Promise<boolean>;
|
|
|
|
const ConfirmContextK = React.createContext<ConfirmContext | null>(null);
|
|
|
|
export function ConfirmDialogProvider(
|
|
p: PropsWithChildren
|
|
): React.ReactElement {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
const [title, setTitle] = React.useState<string | undefined>(undefined);
|
|
const [message, setMessage] = React.useState("");
|
|
const [confirmButton, setConfirmButton] = React.useState<string | undefined>(
|
|
undefined
|
|
);
|
|
const [cancelButton, setCancelButton] = React.useState<string | undefined>(
|
|
undefined
|
|
);
|
|
|
|
const cb = React.useRef<null | ((a: boolean) => void)>(null);
|
|
|
|
const handleClose = (confirm: boolean) => {
|
|
setOpen(false);
|
|
|
|
if (cb.current !== null) cb.current(confirm);
|
|
cb.current = null;
|
|
};
|
|
|
|
const hook: ConfirmContext = (
|
|
message,
|
|
title,
|
|
confirmButton,
|
|
cancelButton
|
|
) => {
|
|
setTitle(title);
|
|
setMessage(message);
|
|
setConfirmButton(confirmButton);
|
|
setCancelButton(cancelButton);
|
|
setOpen(true);
|
|
|
|
return new Promise((res) => {
|
|
cb.current = res;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ConfirmContextK.Provider value={hook}>
|
|
{p.children}
|
|
</ConfirmContextK.Provider>
|
|
|
|
<Dialog
|
|
open={open}
|
|
onClose={() => handleClose(false)}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
>
|
|
{title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
{message}
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => handleClose(false)} autoFocus>
|
|
{cancelButton ?? "Cancel"}
|
|
</Button>
|
|
<Button onClick={() => handleClose(true)} color="error">
|
|
{confirmButton ?? "Confirm"}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function useConfirm(): ConfirmContext {
|
|
return React.useContext(ConfirmContextK)!;
|
|
}
|