60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
// https://github.com/remix-run/react-router/blob/main/examples/navigation-blocking/src/app.tsx
|
|
// https://stackoverflow.com/questions/75135147/react-router-dom-v6-useblocker
|
|
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
|
|
import { unstable_useBlocker as useBlocker } from "react-router-dom";
|
|
|
|
export function ConfirmLeaveWithoutSaveDialog(p: {
|
|
shouldBlock: boolean;
|
|
}): React.ReactElement {
|
|
let blocker = useBlocker(p.shouldBlock);
|
|
|
|
React.useEffect(() => {
|
|
if (blocker.state === "blocked" && !p.shouldBlock) {
|
|
blocker.proceed();
|
|
}
|
|
}, [blocker, p.shouldBlock]);
|
|
|
|
const cancelNavigation = () => {
|
|
blocker.reset?.();
|
|
};
|
|
|
|
const confirmNavigation = () => {
|
|
blocker.proceed?.();
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={blocker.state === "blocked"}
|
|
onClose={cancelNavigation}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
>
|
|
<DialogTitle id="alert-dialog-title">
|
|
Quitter sans enregistrer ?
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
Voulez-vous vraiment quitter cette page sans enregistrer vos
|
|
modifications ?
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={confirmNavigation as any}>Quitter la page</Button>
|
|
<Button onClick={cancelNavigation as any} autoFocus>
|
|
Rester sur la page
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|