@fibery/ui-kit 1.34.8 → 1.36.0

package/src/app-mode.tsx

@@ -0,0 +1,52 @@
+import {createContext, useState, useLayoutEffect, useContext} from "react";
+import {getMediaQueryList, subscribeOnChange} from "./media-query-utils";
+
+export const appModes = {
+  l: 3,
+  xl: 4,
+} as const;
+export type AppMode = 3 | 4;
+const lSize = 1024;
+export const lQuery = `(max-width: ${lSize}px)`;
+
+const mediaQueryList = getMediaQueryList(lQuery);
+function getMode(mql: MediaQueryList | MediaQueryListEvent): AppMode {
+  return mql.matches ? appModes.l : appModes.xl;
+}
+
+export function getCurrentAppMode(): AppMode {
+  return getMode(getMediaQueryList(lQuery));
+}
+
+const initialMode = getMode(mediaQueryList);
+
+const appModeContext = createContext<AppMode>(initialMode);
+
+export function useAppMode(): AppMode {
+  return useContext(appModeContext);
+}
+
+export function AppModeProvider({children}: {children: React.ReactNode}): JSX.Element {
+  const [mode, setMode] = useState<AppMode>(initialMode);
+  useLayoutEffect(() => {
+    if (initialMode < appModes.xl) {
+      document.body.classList.add("small-mode");
+    }
+
+    const listener = (evt: MediaQueryListEvent) => {
+      const mode = getMode(evt);
+      setMode(mode);
+      if (mode < appModes.xl) {
+        document.body.classList.add("small-mode");
+      } else {
+        document.body.classList.remove("small-mode");
+      }
+    };
+    const unsubscribe = subscribeOnChange(mediaQueryList, listener);
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return <appModeContext.Provider value={mode}>{children}</appModeContext.Provider>;
+}