Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

close modal with esc

Browse Source
This commit is contained in:
Martti Malmi
2023-10-05 14:40:13 +03:00
parent 38b647938e
commit 7587db9c8b
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/Element/Modal.tsx
View File

@ -4,14 +4,25 @@ import { ReactNode, useEffect } from "react";
export interface ModalProps { export interface ModalProps {
id: string; id: string;
className?: string; className?: string;
onClose?: (e: React.MouseEvent) => void; onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
children: ReactNode; children: ReactNode;
} }
export default function Modal(props: ModalProps) { export default function Modal(props: ModalProps) {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" && props.onClose) {
props.onClose(e);
}
};
useEffect(() => { useEffect(() => {
document.body.classList.add("scroll-lock"); document.body.classList.add("scroll-lock");
return () => document.body.classList.remove("scroll-lock"); document.addEventListener("keydown", handleKeyDown);
return () => {
document.body.classList.remove("scroll-lock");
document.removeEventListener("keydown", handleKeyDown);
};
}, []); }, []);
return ( return (