55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { useCallback } from "react";
|
|
import { useBeforeUnload, useBlocker } from "react-router-dom";
|
|
|
|
import { Button } from "../components/ui/button.jsx";
|
|
import { Dialog } from "../components/ui/dialog.jsx";
|
|
|
|
export function useDirtyNavigationGuard(when: boolean) {
|
|
const blocker = useBlocker(when);
|
|
|
|
useBeforeUnload(
|
|
useCallback(
|
|
(event) => {
|
|
if (!when) return;
|
|
event.preventDefault();
|
|
event.returnValue = "";
|
|
},
|
|
[when],
|
|
),
|
|
{ capture: true },
|
|
);
|
|
|
|
return Object.freeze({
|
|
blocked: blocker.state === "blocked",
|
|
stay() {
|
|
blocker.reset?.();
|
|
},
|
|
leave() {
|
|
blocker.proceed?.();
|
|
},
|
|
});
|
|
}
|
|
|
|
export function DirtyNavigationDialog(props: Readonly<{
|
|
guard: ReturnType<typeof useDirtyNavigationGuard>;
|
|
}>) {
|
|
return (
|
|
<Dialog
|
|
open={props.guard.blocked}
|
|
onClose={props.guard.stay}
|
|
title="저장하지 않은 변경이 있습니다."
|
|
description="이 화면을 떠나면 입력한 내용이 사라집니다."
|
|
actions={
|
|
<>
|
|
<Button variant="secondary" onClick={props.guard.stay}>
|
|
계속 작성
|
|
</Button>
|
|
<Button variant="danger" onClick={props.guard.leave}>
|
|
변경 버리고 이동
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|