74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
|
|
type Props = {
|
|
open: boolean
|
|
title: string
|
|
message: string
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
danger?: boolean
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Bestätigen',
|
|
cancelLabel = 'Abbrechen',
|
|
danger,
|
|
onConfirm,
|
|
onCancel,
|
|
}: Props) {
|
|
const confirmRef = useRef<HTMLButtonElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!open) return
|
|
|
|
confirmRef.current?.focus()
|
|
|
|
function handleKeyDown(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') onCancel()
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
|
}, [open, onCancel])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="confirm-dialog-backdrop" onClick={onCancel}>
|
|
<div
|
|
className="confirm-dialog"
|
|
role="alertdialog"
|
|
aria-modal="true"
|
|
aria-labelledby="confirm-dialog-title"
|
|
aria-describedby="confirm-dialog-message"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<h2 id="confirm-dialog-title" className="confirm-dialog-title">
|
|
{title}
|
|
</h2>
|
|
<p id="confirm-dialog-message" className="confirm-dialog-message">
|
|
{message}
|
|
</p>
|
|
<div className="confirm-dialog-actions">
|
|
<button type="button" className="btn btn-secondary" onClick={onCancel}>
|
|
{cancelLabel}
|
|
</button>
|
|
<button
|
|
ref={confirmRef}
|
|
type="button"
|
|
className={danger ? 'btn btn-danger' : 'btn btn-primary'}
|
|
onClick={onConfirm}
|
|
>
|
|
{confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|