diff --git a/components/entity-dialog/dirty-close-guard.tsx b/components/entity-dialog/dirty-close-guard.tsx new file mode 100644 index 0000000..eedd362 --- /dev/null +++ b/components/entity-dialog/dirty-close-guard.tsx @@ -0,0 +1,58 @@ +'use client' + +import { useState } from 'react' +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)} + + + + Wijzigingen niet opgeslagen + + Wil je de wijzigingen weggooien? + + + + setOpen(false)}> + Blijven + + { setOpen(false); onConfirm() }} + > + Weggooien + + + + + + ) +}