99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
import {
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogBody,
|
|
DialogContent,
|
|
DialogSurface,
|
|
DialogTitle,
|
|
} from "@fluentui/react-components";
|
|
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}
|
|
onOpenChange={(_event, data) => {
|
|
if (!data.open) setOpen(false);
|
|
}}
|
|
>
|
|
<DialogSurface>
|
|
<DialogBody>
|
|
{title && <DialogTitle>{title}</DialogTitle>}
|
|
<DialogContent>{message}</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
onClick={() => handleClose(false)}
|
|
autoFocus
|
|
appearance="secondary"
|
|
>
|
|
{cancelButton ?? "Cancel"}
|
|
</Button>
|
|
<Button onClick={() => handleClose(true)} appearance="primary">
|
|
{confirmButton ?? "Confirm"}
|
|
</Button>
|
|
</DialogActions>
|
|
</DialogBody>
|
|
</DialogSurface>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function useConfirm(): ConfirmContext {
|
|
return React.useContext(ConfirmContextK)!;
|
|
}
|