Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-19 02:03:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

web/modal: allow non-dismissable modals

Browse source
This commit is contained in:
Tulir Asokan 2025-03-08 16:37:27 +02:00
parent fbad48129b
commit 0db18f1e94
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,7 +29,7 @@ const ModalWrapper = ({ children, ContextType, historyStateKey }: ModalWrapperPr
return newState return newState
}, null) }, null)
const onClickWrapper = useCallback((evt?: React.MouseEvent) => { const onClickWrapper = useCallback((evt?: React.MouseEvent) => {
if (evt && evt.target !== evt.currentTarget) { if (evt && (evt.target !== evt.currentTarget || state?.noDismiss)) {
return return
} }
evt?.stopPropagation() evt?.stopPropagation()
@ -37,9 +37,9 @@ const ModalWrapper = ({ children, ContextType, historyStateKey }: ModalWrapperPr
if (history.state?.[historyStateKey]) { if (history.state?.[historyStateKey]) {
history.back() history.back()
} }
}, [historyStateKey]) }, [historyStateKey, state])
const onKeyWrapper = (evt: React.KeyboardEvent<HTMLDivElement>) => { const onKeyWrapper = (evt: React.KeyboardEvent<HTMLDivElement>) => {
if (evt.key === "Escape") { if (evt.key === "Escape" && !state?.noDismiss) {
setState(null) setState(null)
if (history.state?.[historyStateKey]) { if (history.state?.[historyStateKey]) {
history.back() history.back()
@ -55,12 +55,17 @@ const ModalWrapper = ({ children, ContextType, historyStateKey }: ModalWrapperPr
}, [historyStateKey]) }, [historyStateKey])
const wrapperRef = useRef<HTMLDivElement>(null) const wrapperRef = useRef<HTMLDivElement>(null)
useLayoutEffect(() => { useLayoutEffect(() => {
window.closeModal = onClickWrapper
if (historyStateKey === "nestable_modal") {
window.openNestableModal = openModal
} else {
window.openModal = openModal
}
if (wrapperRef.current && (!document.activeElement || !wrapperRef.current.contains(document.activeElement))) { if (wrapperRef.current && (!document.activeElement || !wrapperRef.current.contains(document.activeElement))) {
wrapperRef.current.focus() wrapperRef.current.focus()
} }
}, [state]) }, [state, onClickWrapper, historyStateKey, openModal])
useEffect(() => { useEffect(() => {
window.closeModal = onClickWrapper
const listener = (evt: PopStateEvent) => { const listener = (evt: PopStateEvent) => {
if (!evt.state?.[historyStateKey]) { if (!evt.state?.[historyStateKey]) {
setState(null) setState(null)
@ -68,7 +73,7 @@ const ModalWrapper = ({ children, ContextType, historyStateKey }: ModalWrapperPr
} }
window.addEventListener("popstate", listener) window.addEventListener("popstate", listener)
return () => window.removeEventListener("popstate", listener) return () => window.removeEventListener("popstate", listener)
}, [historyStateKey, onClickWrapper]) }, [historyStateKey])
let modal: JSX.Element | null = null let modal: JSX.Element | null = null
if (state) { if (state) {
let content = <ModalCloseContext value={onClickWrapper}> let content = <ModalCloseContext value={onClickWrapper}>
@ -97,9 +102,6 @@ const ModalWrapper = ({ children, ContextType, historyStateKey }: ModalWrapperPr
modal = content modal = content
} }
} }
if (historyStateKey === "nestable_modal") {
window.openNestableModal = openModal
}
return <ContextType value={openModal}> return <ContextType value={openModal}>
{children} {children}
{modal} {modal}

1
web/src/ui/modal/contexts.ts
View file

@ -33,6 +33,7 @@ export interface ModalState {
innerBoxClass?: string innerBoxClass?: string
onClose?: () => void onClose?: () => void
captureInput?: boolean captureInput?: boolean
noDismiss?: boolean
} }
export type openModal = (state: ModalState) => void export type openModal = (state: ModalState) => void

1
web/src/vite-env.d.ts vendored
View file

@ -17,6 +17,7 @@ declare global {
gcSettings: GCSettings gcSettings: GCSettings
hackyOpenEventContextMenu?: string hackyOpenEventContextMenu?: string
closeModal: () => void closeModal: () => void
openModal: openModal
openNestableModal: openModal openNestableModal: openModal
gomuksAndroid?: true gomuksAndroid?: true
} }