71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { PrefixDialog } from "@/app/admin/prefixes/prefix-dialog";
|
|
import {
|
|
confirmUnsavedNavigation,
|
|
useUnsavedChanges,
|
|
} from "@/hooks/use-unsaved-changes";
|
|
export function UnsavedHarness() {
|
|
const [value, setValue] = useState("");
|
|
const [open, setOpen] = useState(false);
|
|
const [failSave, setFailSave] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
const [navigated, setNavigated] = useState(false);
|
|
const guard = useUnsavedChanges(value !== "", "Discard unsaved changes?");
|
|
return (
|
|
<>
|
|
<label>
|
|
Working value
|
|
<input
|
|
aria-label="Working value"
|
|
value={value}
|
|
onChange={(event) => setValue(event.target.value)}
|
|
/>
|
|
</label>
|
|
<a href="/admin/unsaved-destination">Leave editor</a>
|
|
<a href="#same-page">Same page</a>
|
|
<a href="mailto:[email protected]">Email</a>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (confirmUnsavedNavigation()) setNavigated(true);
|
|
}}
|
|
>
|
|
Programmatic navigation
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
guard.markSaved();
|
|
setValue("");
|
|
setSaved(true);
|
|
}}
|
|
>
|
|
Save working value
|
|
</button>
|
|
{saved && <p>Working value saved</p>}
|
|
{navigated && <p>Navigation allowed</p>}
|
|
<button type="button" onClick={() => setOpen(true)}>
|
|
Open prefix
|
|
</button>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={failSave}
|
|
onChange={(event) => setFailSave(event.target.checked)}
|
|
/>
|
|
Fail prefix save
|
|
</label>
|
|
<PrefixDialog
|
|
isOpen={open}
|
|
onClose={() => setOpen(false)}
|
|
editPrefix={null}
|
|
onSave={async () => {
|
|
if (failSave) return false;
|
|
setSaved(true);
|
|
return true;
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|