@firecms/core 3.0.0-canary.27 → 3.0.0-canary.271

package/src/hooks/useBuildLocalConfigurationPersistence.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { PartialEntityCollection, UserConfigurationPersistence } from "../types";
 import { mergeDeep, stripCollectionPath } from "../util";
 
 export function useBuildLocalConfigurationPersistence(): UserConfigurationPersistence {
 
-    const [configCache, setConfigCache] = useState<Record<string, PartialEntityCollection>>({});
+    const configCache = useRef<Record<string, PartialEntityCollection>>({});
 
     const getCollectionFromStorage = useCallback((storageKey: string) => {
         const item = localStorage.getItem(storageKey);
@@ -13,20 +13,18 @@ export function useBuildLocalConfigurationPersistence(): UserConfigurationPersis
 
     const getCollectionConfig = useCallback(<M extends Record<string, any>>(path: string): PartialEntityCollection<M> => {
         const storageKey = `collection_config::${stripCollectionPath(path)}`;
-        if (configCache[storageKey]) {
-            return configCache[storageKey] as PartialEntityCollection<M>;
+        if (configCache.current[storageKey]) {
+            return configCache.current[storageKey] as PartialEntityCollection<M>;
         }
         return getCollectionFromStorage(storageKey);
-    }, [configCache, getCollectionFromStorage]);
+    }, [getCollectionFromStorage]);
 
     const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialEntityCollection<M>) => {
         const storageKey = `collection_config::${stripCollectionPath(path)}`;
         localStorage.setItem(storageKey, JSON.stringify(data));
-        setConfigCache((currentCache) => {
-            const cachedConfig = currentCache[storageKey];
-            const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
-            return (mergeDeep(currentCache, newConfig));
-        });
+        const cachedConfig = configCache.current[storageKey];
+        const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
+        configCache.current[storageKey] = mergeDeep(configCache.current[storageKey], newConfig);
     }, [getCollectionFromStorage]);
 
     const [recentlyVisitedPaths, _setRecentlyVisitedPaths] = useState<string[]>([]);

package/src/hooks/useBuildModeController.tsx

@@ -8,10 +8,15 @@ import { ModeController } from "./index";
  */
 export function useBuildModeController(): ModeController {
 
-    const prefersDarkModeQuery = typeof window !== "undefined" &&
-        window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDarkModeQuery = useCallback((): boolean => {
+        if (typeof window === "undefined")
+            return false;
+        const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+        return mediaQueryList.matches;
+    }, []);
+
     const prefersDarkModeStorage: boolean | null = localStorage.getItem("prefers-dark-mode") != null ? localStorage.getItem("prefers-dark-mode") === "true" : null;
-    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery;
+    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery();
     const [mode, setMode] = useState<"light" | "dark">(prefersDarkMode ? "dark" : "light");
 
     useEffect(() => {
@@ -19,42 +24,30 @@ export function useBuildModeController(): ModeController {
         setDocumentMode(prefersDarkMode ? "dark" : "light");
     }, [prefersDarkMode]);
 
-    // color-scheme: dark;
-    const setDarkMode = useCallback(() => {
-        setMode("dark");
-        setDocumentMode("dark");
-    }, [prefersDarkModeQuery]);
-
-    const setLightMode = useCallback(() => {
-        setMode("light");
-        setDocumentMode("light");
-    }, []);
-
     const setDocumentMode = (mode: "light" | "dark") => {
         document.body.style.setProperty("color-scheme", mode);
         document.documentElement.dataset.theme = mode;
     };
 
-    const toggleMode = useCallback(() => {
-
+    const setModeInternal = useCallback((mode: "light" | "dark" | "system") => {
         if (mode === "light") {
-            if (!prefersDarkModeQuery)
-                localStorage.setItem("prefers-dark-mode", "true");
-            else
-                localStorage.removeItem("prefers-dark-mode");
-            setDarkMode();
+            setDocumentMode("light");
+            localStorage.setItem("prefers-dark-mode", "false");
+            setMode("light");
+        } else if (mode === "dark") {
+            setDocumentMode("dark");
+            localStorage.setItem("prefers-dark-mode", "true");
+            setMode("dark");
         } else {
-            if (prefersDarkModeQuery)
-                localStorage.setItem("prefers-dark-mode", "false");
-            else
-                localStorage.removeItem("prefers-dark-mode");
-            setLightMode();
+            const preferredMode = prefersDarkModeQuery() ? "dark" : "light";
+            setDocumentMode(preferredMode);
+            localStorage.removeItem("prefers-dark-mode");
+            setMode(preferredMode);
         }
-    }, [mode, prefersDarkModeQuery]);
+    }, [prefersDarkModeQuery]);
 
     return {
         mode,
-        setMode,
-        toggleMode
+        setMode: setModeInternal
     };
 }