gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-13 11:53:38 +01:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

refactor(spreadsheet): make use of hooks

Browse Source
This commit is contained in:
Elian Doran 2026-03-03 18:48:45 +02:00
parent d331e418d4
commit 6de78c7154
No known key found for this signature in database
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/client/src/widgets/type_widgets/Spreadsheet.tsx
View File

@ -4,22 +4,21 @@ import "./Spreadsheet.css";
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
import { createUniver, FUniver, LocaleType, mergeLocales } from '@univerjs/presets';
import { useEffect, useRef } from "preact/hooks";
import { MutableRef, useEffect, useRef } from "preact/hooks";
import { useColorScheme } from "../react/hooks";
export default function Spreadsheet() {
const colorScheme = useColorScheme();
return (
<UniverSpreadsheet darkMode={colorScheme === 'dark'} />
);
}
function UniverSpreadsheet({ darkMode }: { darkMode: boolean }) {
const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<FUniver>();
useInitializeSpreadsheet(containerRef, apiRef);
useDarkMode(apiRef);
return <div ref={containerRef} className="spreadsheet" />;
}
function useInitializeSpreadsheet(containerRef: MutableRef<HTMLDivElement | null>, apiRef: MutableRef<FUniver | undefined>) {
useEffect(() => {
if (!containerRef.current) return;
@ -39,14 +38,16 @@ function UniverSpreadsheet({ darkMode }: { darkMode: boolean }) {
apiRef.current = univerAPI;
univerAPI.createWorkbook({});
return () => univerAPI.dispose();
}, []);
}, [ apiRef, containerRef ]);
}
function useDarkMode(apiRef: MutableRef<FUniver | undefined>) {
const colorScheme = useColorScheme();
// React to dark mode.
useEffect(() => {
const univerAPI = apiRef.current;
if (!univerAPI) return;
univerAPI.toggleDarkMode(darkMode);
}, [ darkMode ]);
return <div ref={containerRef} className="spreadsheet" />;
univerAPI.toggleDarkMode(colorScheme === 'dark');
}, [ colorScheme, apiRef ]);
}