Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/modal: allow closing modals with escape

Browse source
This commit is contained in:
Tulir Asokan 2024-10-27 02:19:43 +03:00
parent 90e251dc18
commit c407eb5c7d
1 changed files with 6 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/ui/modal/Modal.tsx
View file

@ -40,12 +40,18 @@ export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
} }
setState(null) setState(null)
}, []) }, [])
const onKeyWrapper = useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {
if (evt.key === "Escape") {
setState(null)
}
}, [])
return <> return <>
<ModalContext value={setState}> <ModalContext value={setState}>
{children} {children}
{state && <div {state && <div
className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`} className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`}
onClick={onClickWrapper} onClick={onClickWrapper}
onKeyDown={onKeyWrapper}
> >
<ModalCloseContext value={onClickWrapper}> <ModalCloseContext value={onClickWrapper}>
{state.content} {state.content}