Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-13 08:45:50 +01:00
Code Issues Packages Projects Releases Activity

chore(react/ribbon): also react to width, not just height

Browse Source
This commit is contained in:
Elian Doran
2025-08-23 11:19:35 +03:00
parent 5f77ca31bd
commit 6c30e0836f
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
import { TabContext } from "./ribbon-interface";
import NoteMapWidget from "../note_map";
import { useLegacyWidget, useWindowSize } from "../react/hooks";
import { useElementSize, useLegacyWidget, useWindowSize } from "../react/hooks";
import ActionButton from "../react/ActionButton";
import { t } from "../../services/i18n";
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useEffect, useRef, useState } from "preact/hooks";
const SMALL_SIZE_HEIGHT = "300px";
@@ -12,6 +12,7 @@ export default function NoteMapTab({ note, noteContext }: TabContext) {
const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT);
const containerRef = useRef<HTMLDivElement>(null);
const { windowHeight } = useWindowSize();
const containerSize = useElementSize(containerRef);
const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), {
noteContext,
@@ -19,15 +20,14 @@ export default function NoteMapTab({ note, noteContext }: TabContext) {
});
useEffect(() => {
if (isExpanded && containerRef.current) {
const { top } = containerRef.current.getBoundingClientRect();
const height = windowHeight - top;
if (isExpanded && containerRef.current && containerSize) {
const height = windowHeight - containerSize.top;
setHeight(height + "px");
} else {
setHeight(SMALL_SIZE_HEIGHT);
}
}, [ isExpanded, containerRef, windowHeight ]);
useEffect(() => noteMapWidget.setDimensions(), [ height ]);
}, [ isExpanded, containerRef, windowHeight, containerSize?.top ]);
useEffect(() => noteMapWidget.setDimensions(), [ containerSize?.width, height ]);
return (
<div className="note-map-ribbon-widget" style={{ height }} ref={containerRef}>