89 lines
2.2 KiB
TypeScript
89 lines
2.2 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
|
||
|
|
) => 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 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) => {
|
||
|
|
setTitle(title);
|
||
|
|
setMessage(message);
|
||
|
|
setConfirmButton(confirmButton);
|
||
|
|
setOpen(true);
|
||
|
|
|
||
|
|
return new Promise((res) => {
|
||
|
|
cb.current = res;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const keyUp = (e: React.KeyboardEvent) => {
|
||
|
|
if (e.code === "Enter") handleClose(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
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"
|
||
|
|
onKeyUp={keyUp}
|
||
|
|
>
|
||
|
|
{title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
|
||
|
|
<DialogContent>
|
||
|
|
<DialogContentText id="alert-dialog-description">
|
||
|
|
{message}
|
||
|
|
</DialogContentText>
|
||
|
|
</DialogContent>
|
||
|
|
<DialogActions>
|
||
|
|
<Button onClick={() => handleClose(false)} autoFocus>
|
||
|
|
Annuler
|
||
|
|
</Button>
|
||
|
|
<Button onClick={() => handleClose(true)} color="error">
|
||
|
|
{confirmButton ?? "Confirmer"}
|
||
|
|
</Button>
|
||
|
|
</DialogActions>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function useConfirm(): ConfirmContext {
|
||
|
|
return React.useContext(ConfirmContextK)!;
|
||
|
|
}
|