Spaces:
Running
Running
File size: 3,867 Bytes
5f3e9f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | /**
* Promise-based confirmation dialog (replacement for `window.confirm`).
*
* Use the imperative `useConfirm()` hook to show a dialog and await the
* user's choice. Internally rendered through a portal so it works above
* any other content.
*/
import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react'
import type { ReactNode } from 'react'
import { createPortal } from 'react-dom'
import { useFocusTrap } from '../hooks/useFocusTrap'
interface ConfirmOptions {
title: string
message?: ReactNode
confirmLabel?: string
cancelLabel?: string
variant?: 'default' | 'danger'
}
type Resolver = (value: boolean) => void
interface ConfirmContextValue {
confirm: (opts: ConfirmOptions) => Promise<boolean>
}
const ConfirmContext = createContext<ConfirmContextValue | null>(null)
// eslint-disable-next-line react-refresh/only-export-components
export function useConfirm(): (opts: ConfirmOptions) => Promise<boolean> {
const ctx = useContext(ConfirmContext)
if (!ctx) throw new Error('useConfirm must be used inside <ConfirmProvider>')
return ctx.confirm
}
export function ConfirmProvider({ children }: { children: ReactNode }) {
const [opts, setOpts] = useState<ConfirmOptions | null>(null)
const resolverRef = useRef<Resolver | null>(null)
const dialogRef = useFocusTrap<HTMLDivElement>(opts !== null)
const confirm = useCallback((options: ConfirmOptions) => {
return new Promise<boolean>((resolve) => {
resolverRef.current = resolve
setOpts(options)
})
}, [])
const close = (result: boolean) => {
resolverRef.current?.(result)
resolverRef.current = null
setOpts(null)
}
const value = useMemo<ConfirmContextValue>(() => ({ confirm }), [confirm])
return (
<ConfirmContext.Provider value={value}>
{children}
{opts !== null &&
createPortal(
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4">
<div
className="absolute inset-0 bg-slate-950/40 backdrop-blur-sm"
onClick={() => close(false)}
aria-hidden
/>
<div
ref={dialogRef}
role="alertdialog"
aria-modal="true"
aria-labelledby="confirm-title"
tabIndex={-1}
className="relative w-full max-w-sm rounded-xl border border-slate-200 bg-white p-5 shadow-lg dark:border-white/10 dark:bg-slate-900"
onKeyDown={(e) => {
if (e.key === 'Escape') close(false)
if (e.key === 'Enter') close(true)
}}
>
<h2
id="confirm-title"
className="font-display text-base font-semibold text-slate-900 dark:text-slate-50"
>
{opts.title}
</h2>
{opts.message && (
<div className="mt-2 text-sm text-slate-600 dark:text-slate-400">
{opts.message}
</div>
)}
<div className="mt-5 flex items-center justify-end gap-2">
<button type="button" className="btn-secondary" onClick={() => close(false)}>
{opts.cancelLabel ?? 'Cancel'}
</button>
<button
type="button"
className={
opts.variant === 'danger'
? 'btn-primary !bg-rose-600 hover:!bg-rose-700 focus:!ring-rose-500'
: 'btn-primary'
}
onClick={() => close(true)}
autoFocus
>
{opts.confirmLabel ?? 'Confirm'}
</button>
</div>
</div>
</div>,
document.body,
)}
</ConfirmContext.Provider>
)
}
|