98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
|
import { Modal } from '../Modal/Modal'
|
|
import { Button } from '../../primitives/Button/Button'
|
|
import styles from './ConfirmDialog.module.css'
|
|
|
|
export interface ConfirmDialogProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
onConfirm: () => void
|
|
title?: string
|
|
message: string
|
|
confirmText: string
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
variant?: 'danger' | 'warning' | 'info'
|
|
loading?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
onClose,
|
|
onConfirm,
|
|
title = 'Confirm Deletion',
|
|
message,
|
|
confirmText,
|
|
confirmLabel = 'Delete',
|
|
cancelLabel = 'Cancel',
|
|
variant = 'danger',
|
|
loading = false,
|
|
className,
|
|
}: ConfirmDialogProps) {
|
|
const [input, setInput] = useState('')
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const matches = input === confirmText
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setInput('')
|
|
const id = setTimeout(() => inputRef.current?.focus(), 0)
|
|
return () => clearTimeout(id)
|
|
}
|
|
}, [open])
|
|
|
|
function handleKeyDown(e: React.KeyboardEvent) {
|
|
if (e.key === 'Enter' && matches && !loading) {
|
|
e.preventDefault()
|
|
onConfirm()
|
|
}
|
|
}
|
|
|
|
const confirmButtonVariant = variant === 'danger' ? 'danger' : 'primary'
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} size="sm" className={className}>
|
|
<div className={styles.content}>
|
|
<h2 className={styles.title}>{title}</h2>
|
|
<p className={styles.message}>{message}</p>
|
|
|
|
<div className={styles.inputGroup}>
|
|
<label className={styles.label} htmlFor="confirm-input">
|
|
{`Type "${confirmText}" to confirm`}
|
|
</label>
|
|
<input
|
|
ref={inputRef}
|
|
id="confirm-input"
|
|
className={styles.input}
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.buttonRow}>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onClose}
|
|
disabled={loading}
|
|
type="button"
|
|
>
|
|
{cancelLabel}
|
|
</Button>
|
|
<Button
|
|
variant={confirmButtonVariant}
|
|
onClick={onConfirm}
|
|
loading={loading}
|
|
disabled={!matches || loading}
|
|
type="button"
|
|
>
|
|
{confirmLabel}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|