diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 6f1595bfb..910daf0da 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -470,4 +470,25 @@ export function useResizeObserver(ref: RefObject, callback: ResizeO resizeObserver.disconnect(); } }, [ ref, callback ]); +} + +export function useWindowSize() { + const [ size, setSize ] = useState<{ windowWidth: number, windowHeight: number }>({ + windowWidth: window.innerWidth, + windowHeight: window.innerHeight + }); + + useEffect(() => { + function onResize() { + setSize({ + windowWidth: window.innerWidth, + windowHeight: window.innerHeight + }); + } + + window.addEventListener("resize", onResize); + return () => window.removeEventListener("resize", onResize); + }); + + return size; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx index a5b0a98e5..05f47b9fc 100644 --- a/apps/client/src/widgets/ribbon/NoteMapTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx @@ -1,6 +1,6 @@ import { TabContext } from "./ribbon-interface"; import NoteMapWidget from "../note_map"; -import { useLegacyWidget, useResizeObserver } from "../react/hooks"; +import { useLegacyWidget, useWindowSize } from "../react/hooks"; import ActionButton from "../react/ActionButton"; import { t } from "../../services/i18n"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; @@ -11,26 +11,23 @@ export default function NoteMapTab({ note, noteContext }: TabContext) { const [ isExpanded, setExpanded ] = useState(false); const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT); const containerRef = useRef(null); + const { windowHeight } = useWindowSize(); const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), { noteContext, containerClassName: "note-map-container" }); - - const resizeIfNeeded = useCallback(() => { - console.log("Resize if needed"); + + useEffect(() => { if (isExpanded && containerRef.current) { const { top } = containerRef.current.getBoundingClientRect(); - const height = window.innerHeight - top; + const height = windowHeight - top; setHeight(height + "px"); } else { setHeight(SMALL_SIZE_HEIGHT); } - }, [ isExpanded, containerRef ]); - + }, [ isExpanded, containerRef, windowHeight ]); useEffect(() => noteMapWidget.setDimensions(), [ height ]); - useEffect(() => resizeIfNeeded(), [ isExpanded ]); - useResizeObserver(containerRef, resizeIfNeeded); return (