diff --git a/components/system/Window/Titlebar/index.tsx b/components/system/Window/Titlebar/index.tsx index 906422aa..cf19b2e0 100644 --- a/components/system/Window/Titlebar/index.tsx +++ b/components/system/Window/Titlebar/index.tsx @@ -41,9 +41,18 @@ const Titlebar: FC = ({ id }) => { const { foregroundId, setForegroundId } = useSession(); const isForeground = id === foregroundId; const { onClose, onMaximize, onMinimize } = useWindowActions(id); - const onClickClose = useDoubleClick(onClose); - const onClickMaximize = useDoubleClick(onMaximize); const { menu, setMenu } = useMenu(); + const resetMenu = useCallback( + () => setMenu(Object.create(null) as MenuState), + [setMenu] + ); + const menuIsOpenRef = useRef(false); + const clickCloseCallback = useCallback(() => { + if (menuIsOpenRef.current) resetMenu(); + onClose(); + }, [onClose, resetMenu]); + const onClickClose = useDoubleClick(clickCloseCallback); + const onClickMaximize = useDoubleClick(onMaximize); const titlebarContextMenu = useTitlebarContextMenu(id); const touchStartTimeRef = useRef(0); const touchStartPositionRef = useRef(undefined); @@ -79,6 +88,37 @@ const Titlebar: FC = ({ id }) => { }, [componentWindow] ); + const onMouseDownCapture = useCallback< + React.MouseEventHandler + >( + ({ button }) => { + if (button === 0 && Object.keys(menu).length > 0) resetMenu(); + }, + [menu, resetMenu] + ); + const onMouseUpCapture = useCallback< + React.MouseEventHandler + >(() => { + if (componentWindow && componentWindow !== document.activeElement) { + setForegroundId(id); + } + }, [componentWindow, id, setForegroundId]); + const onIconClick = useCallback>( + (event) => { + if (menuIsOpenRef.current) resetMenu(); + else titlebarContextMenu.onContextMenuCapture(event); + + menuIsOpenRef.current = !menuIsOpenRef.current; + + onClickClose.onClick(event); + }, + [onClickClose, resetMenu, titlebarContextMenu] + ); + const onIconMouseDownCapture = useCallback< + React.MouseEventHandler + >(() => { + menuIsOpenRef.current = (menu.items?.length || 0) > 0; + }, [menu.items?.length]); return ( = ({ id }) => { {...(!hideMaximizeButton && allowResizing && !closing ? onClickMaximize : {})} - onMouseDownCapture={({ button }) => { - if (button === 0 && Object.keys(menu).length > 0) { - setMenu(Object.create(null) as MenuState); - } - }} - onMouseUpCapture={() => { - if (componentWindow && componentWindow !== document.activeElement) { - setForegroundId(id); - } - }} + onMouseDownCapture={onMouseDownCapture} + onMouseUpCapture={onMouseUpCapture} onTouchEndCapture={onTouchEnd} onTouchStartCapture={onTouchStart} >
{!hideTitlebarIcon && ( - + )}
{title}