gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 10:08:52 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

chore(react/collections/calendar): handle resize

Browse Source
This commit is contained in:
Elian Doran 2025-09-05 17:33:46 +03:00
parent 10d1ec1bb2
commit ba42e90502
No known key found for this signature in database
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/collections/calendar/index.tsx
View File

@ -3,7 +3,7 @@ import { ViewModeProps } from "../interface";
import Calendar from "./calendar";
import { useEffect, useRef, useState } from "preact/hooks";
import "./index.css";
import { useNoteLabel, useNoteLabelBoolean, useSpacedUpdate, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import { LOCALE_IDS } from "@triliumnext/commons";
import { Calendar as FullCalendar } from "@fullcalendar/core";
import { setLabel } from "../../../services/attributes";
@ -36,6 +36,7 @@ const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: LocaleInput
};
export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
const containerRef = useRef<HTMLDivElement>(null);
const calendarRef = useRef<FullCalendar>(null);
const plugins = usePlugins(false, false);
const locale = useLocale();
@ -45,9 +46,10 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
const [ calendarView, setCalendarView ] = useNoteLabel(note, "calendar:view");
const initialView = useRef(calendarView);
const viewSpacedUpdate = useSpacedUpdate(() => setCalendarView(initialView.current));
useResizeObserver(containerRef, () => calendarRef.current?.updateSize());
return (plugins &&
<div className="calendar-view">
<div className="calendar-view" ref={containerRef}>
<Calendar
calendarRef={calendarRef}
plugins={plugins}
@ -60,6 +62,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
firstDay={firstDayOfWeek ?? 0}
weekends={!hideWeekends}
weekNumbers={weekNumbers}
handleWindowResize={false}
locale={locale}
viewDidMount={({ view }) => {
if (initialView.current !== view.type) {

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

@ -627,3 +627,18 @@ export function useTouchBar(
parentComponent?.triggerCommand("refreshTouchBar");
}, inputs);
}
export function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => void) {
const resizeObserver = useRef<ResizeObserver>(null);
useEffect(() => {
resizeObserver.current?.disconnect();
const observer = new ResizeObserver(callback);
resizeObserver.current = observer;
if (ref.current) {
observer.observe(ref.current);
}
return () => observer.disconnect();
}, [ callback, ref ]);
}

4
apps/client/src/widgets/view_widgets/calendar_view.ts
View File

@ -70,7 +70,6 @@ export default class CalendarView extends ViewMode<{}> {
eventChange: (e) => this.#onEventMoved(e),
height: "100%",
nowIndicator: true,
handleWindowResize: false,
eventDidMount: (e) => {
const { iconClass, promotedAttributes } = e.event.extendedProps;
@ -135,9 +134,6 @@ export default class CalendarView extends ViewMode<{}> {
datesSet: (e) => this.#onDatesSet(e),
});
new ResizeObserver(() => calendar.updateSize())
.observe(this.$calendarContainer[0]);
return this.$root;
}