mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-04 11:45:38 +08:00
fix(git-panel): add keyboard handling for Escape key for confirm action modal
This commit is contained in:
@@ -1,3 +1,4 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
import { Check, Download, Trash2, Upload } from 'lucide-react';
|
import { Check, Download, Trash2, Upload } from 'lucide-react';
|
||||||
import {
|
import {
|
||||||
CONFIRMATION_ACTION_LABELS,
|
CONFIRMATION_ACTION_LABELS,
|
||||||
@@ -30,6 +31,25 @@ function renderConfirmActionIcon(actionType: ConfirmationRequest['type']) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
|
export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
|
||||||
|
const titleId = action ? `confirmation-title-${action.type}` : undefined;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!action) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
onCancel();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, [action, onCancel]);
|
||||||
|
|
||||||
if (!action) {
|
if (!action) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@@ -37,13 +57,20 @@ export default function ConfirmActionModal({ action, onCancel, onConfirm }: Conf
|
|||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
|
||||||
<div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
|
<div
|
||||||
|
className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby={titleId}
|
||||||
|
>
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<div className="flex items-center mb-4">
|
<div className="flex items-center mb-4">
|
||||||
<div className={`p-2 rounded-full mr-3 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
|
<div className={`p-2 rounded-full mr-3 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
|
||||||
{renderConfirmActionIcon(action.type)}
|
{renderConfirmActionIcon(action.type)}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-foreground">{CONFIRMATION_TITLES[action.type]}</h3>
|
<h3 id={titleId} className="text-lg font-semibold text-foreground">
|
||||||
|
{CONFIRMATION_TITLES[action.type]}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground mb-6">{action.message}</p>
|
<p className="text-sm text-muted-foreground mb-6">{action.message}</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user