gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore(react/ribbon): react note map to height changes

Browse Source
This commit is contained in:
Elian Doran 2025-08-23 11:12:14 +03:00
parent f7c82d6b09
commit 5f77ca31bd
No known key found for this signature in database
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/client/src/widgets/react/hooks.tsx
View File

@ -470,4 +470,25 @@ export function useResizeObserver(ref: RefObject<HTMLElement>, 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;
}

15
apps/client/src/widgets/ribbon/NoteMapTab.tsx
View File

@ -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<HTMLDivElement>(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 (
<div className="note-map-ribbon-widget" style={{ height }} ref={containerRef}>