61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { useEffect, type RefObject } from 'react'
|
|
|
|
type MenuRef = RefObject<HTMLElement | null>
|
|
|
|
type UseWorkspaceContextMenusOptions = {
|
|
tabOpen: boolean
|
|
tabRef: MenuRef
|
|
closeTab: () => void
|
|
moduleTabOpen: boolean
|
|
moduleTabRef: MenuRef
|
|
closeModuleTab: () => void
|
|
treeOpen: boolean
|
|
treeRef: MenuRef
|
|
closeTree: () => void
|
|
terminalOpen: boolean
|
|
terminalRef: MenuRef
|
|
closeTerminal: () => void
|
|
gitFileOpen: boolean
|
|
gitFileRef: MenuRef
|
|
closeGitFile: () => void
|
|
}
|
|
|
|
function useCloseOnOutsideClick(open: boolean, ref: MenuRef, close: () => void): void {
|
|
useEffect(() => {
|
|
if (!open) return
|
|
|
|
const closeOnOutsideClick = (event: MouseEvent): void => {
|
|
if (!ref.current?.contains(event.target as Node)) {
|
|
close()
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', closeOnOutsideClick)
|
|
return () => document.removeEventListener('mousedown', closeOnOutsideClick)
|
|
}, [open, ref, close])
|
|
}
|
|
|
|
export function useWorkspaceContextMenus({
|
|
tabOpen,
|
|
tabRef,
|
|
closeTab,
|
|
moduleTabOpen,
|
|
moduleTabRef,
|
|
closeModuleTab,
|
|
treeOpen,
|
|
treeRef,
|
|
closeTree,
|
|
terminalOpen,
|
|
terminalRef,
|
|
closeTerminal,
|
|
gitFileOpen,
|
|
gitFileRef,
|
|
closeGitFile
|
|
}: UseWorkspaceContextMenusOptions): void {
|
|
useCloseOnOutsideClick(tabOpen, tabRef, closeTab)
|
|
useCloseOnOutsideClick(moduleTabOpen, moduleTabRef, closeModuleTab)
|
|
useCloseOnOutsideClick(treeOpen, treeRef, closeTree)
|
|
useCloseOnOutsideClick(terminalOpen, terminalRef, closeTerminal)
|
|
useCloseOnOutsideClick(gitFileOpen, gitFileRef, closeGitFile)
|
|
}
|