Clément Fiere
23 lines
778 B
TypeScript
23 lines
778 B
TypeScript
import { useEffect } from "react";
|
|
|
|
function isEditableTarget(target: EventTarget | null): boolean {
|
|
if (!(target instanceof HTMLElement)) return false;
|
|
const tag = target.tagName;
|
|
if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
|
|
return target.isContentEditable;
|
|
}
|
|
|
|
export function useQueuePanelEscape(open: boolean, onClose: () => void): void {
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (event: KeyboardEvent) => {
|
|
if (event.key !== "Escape" || isEditableTarget(event.target)) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onClose();
|
|
};
|
|
window.addEventListener("keydown", onKey, true);
|
|
return () => window.removeEventListener("keydown", onKey, true);
|
|
}, [open, onClose]);
|
|
}
|