30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useSchedulesStore } from "../state/schedulesStore";
|
|
|
|
/**
|
|
* 监听全局 pointerdown / blur / resize / scroll / Escape，关闭当前打开的右键菜单。
|
|
* 菜单的 open/close 生命周期归菜单自己管——页面不再持有这段 effect。
|
|
*/
|
|
export function useContextMenuDismiss(): void {
|
|
const contextMenu = useSchedulesStore((s) => s.contextMenu);
|
|
const setContextMenu = useSchedulesStore((s) => s.setContextMenu);
|
|
useEffect(() => {
|
|
if (!contextMenu) return undefined;
|
|
const close = (): void => setContextMenu(null);
|
|
const onKeyDown = (event: KeyboardEvent): void => {
|
|
if (event.key === "Escape") close();
|
|
};
|
|
window.addEventListener("pointerdown", close);
|
|
window.addEventListener("blur", close);
|
|
window.addEventListener("resize", close);
|
|
window.addEventListener("scroll", close, true);
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => {
|
|
window.removeEventListener("pointerdown", close);
|
|
window.removeEventListener("blur", close);
|
|
window.removeEventListener("resize", close);
|
|
window.removeEventListener("scroll", close, true);
|
|
window.removeEventListener("keydown", onKeyDown);
|
|
};
|
|
}, [contextMenu, setContextMenu]);
|
|
} |