60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { debugProps } from '@/lib/debug'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
} from '@/components/ui/alert-dialog'
|
|
|
|
interface DirtyCloseGuardProps {
|
|
isDirty: boolean
|
|
onConfirm: () => void
|
|
children: (attemptClose: () => void) => React.ReactNode
|
|
}
|
|
|
|
export function DirtyCloseGuard({ isDirty, onConfirm, children }: DirtyCloseGuardProps) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
function attemptClose() {
|
|
if (isDirty) {
|
|
setOpen(true)
|
|
} else {
|
|
onConfirm()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{children(attemptClose)}
|
|
<AlertDialog open={open} onOpenChange={setOpen}>
|
|
<AlertDialogContent size="sm" {...debugProps('dirty-close-guard', 'DirtyCloseGuard', 'components/entity-dialog/dirty-close-guard.tsx')}>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Wijzigingen niet opgeslagen</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Wil je de wijzigingen weggooien?
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel data-debug-id="dirty-close-guard__cancel" onClick={() => setOpen(false)}>
|
|
Blijven
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
variant="destructive"
|
|
data-debug-id="dirty-close-guard__confirm"
|
|
onClick={() => { setOpen(false); onConfirm() }}
|
|
>
|
|
Weggooien
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
)
|
|
}
|