Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Close Modals on Escape

This commit is contained in:
Adam Shiervani 2025-10-13 17:09:10 +02:00
parent 5e06625966
commit e38b087ff6
1 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
ui/src/components/ConfirmDialog.tsx
View File

@ -67,46 +67,55 @@ export function ConfirmDialog({
}: ConfirmDialogProps) { }: ConfirmDialogProps) {
const { icon: Icon, iconClass, iconBgClass, buttonTheme } = variantConfig[variant]; const { icon: Icon, iconClass, iconBgClass, buttonTheme } = variantConfig[variant];
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === "Escape") {
e.stopPropagation();
onClose();
}
};
return ( return (
<Modal open={open} onClose={onClose}> <div onKeyDown={handleKeyDown}>
<div className="mx-auto max-w-xl px-4 transition-all duration-300 ease-in-out"> <Modal open={open} onClose={onClose}>
<div className="pointer-events-auto relative w-full overflow-hidden rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-slate-800"> <div className="mx-auto max-w-xl px-4 transition-all duration-300 ease-in-out">
<div className="space-y-4"> <div className="pointer-events-auto relative w-full overflow-hidden rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-slate-800">
<div className="sm:flex sm:items-start"> <div className="space-y-4">
<div <div className="sm:flex sm:items-start">
className={cx( <div
"mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10", className={cx(
iconBgClass, "mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10",
)} iconBgClass,
> )}
<Icon aria-hidden="true" className={cx("size-6", iconClass)} /> >
</div> <Icon aria-hidden="true" className={cx("size-6", iconClass)} />
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> </div>
<h2 className="text-lg leading-tight font-bold text-black dark:text-white"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
{title} <h2 className="text-lg leading-tight font-bold text-black dark:text-white">
</h2> {title}
<div className="mt-2 text-sm leading-snug text-slate-600 dark:text-slate-400"> </h2>
{description} <div className="mt-2 text-sm leading-snug text-slate-600 dark:text-slate-400">
{description}
</div>
</div> </div>
</div> </div>
</div>
<div className="flex justify-end gap-x-2" autoFocus> <div className="flex justify-end gap-x-2" autoFocus>
{cancelText && ( {cancelText && (
<CloseButton as={Button} size="SM" theme="blank" text={cancelText} /> <CloseButton as={Button} size="SM" theme="blank" text={cancelText} />
)} )}
<Button <Button
size="SM" size="SM"
type="button" type="button"
theme={buttonTheme} theme={buttonTheme}
text={isConfirming ? `${confirmText}...` : confirmText} text={isConfirming ? `${confirmText}...` : confirmText}
onClick={onConfirm} onClick={onConfirm}
disabled={isConfirming} disabled={isConfirming}
/> />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </Modal>
</Modal> </div>
); );
} }