Screen info utils

client/packages/lowcoder/src/comps/hooks/hookComp.tsx

@@ -33,6 +33,7 @@ import { ThemeComp } from "./themeComp";
 import UrlParamsHookComp from "./UrlParamsHookComp";
 import { UtilsComp } from "./utilsComp";
 import { VideoMeetingControllerComp } from "../comps/meetingComp/videoMeetingControllerComp";
+import { ScreenInfoHookComp } from "./screenInfoComp";
 
 window._ = _;
 window.dayjs = dayjs;
@@ -97,6 +98,7 @@ const HookMap: HookCompMapRawType = {
   modal: ModalComp,
   meeting: VideoMeetingControllerComp,
   currentUser: CurrentUserHookComp,
+  screenInfo: ScreenInfoHookComp,
   urlParams: UrlParamsHookComp,
   drawer: DrawerComp,
   theme: ThemeComp,

client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx

@@ -14,6 +14,7 @@ const AllHookComp = [
   "message",
   "localStorage",
   "currentUser",
+  "screenInfo",
   "urlParams",
   "theme",
 ] as const;

client/packages/lowcoder/src/comps/hooks/hookListComp.tsx

@@ -21,6 +21,7 @@ const defaultHookListValue = [
   { compType: "message", name: "message" },
   { compType: "localStorage", name: "localStorage" },
   { compType: "currentUser", name: "currentUser" },
+  { compType: "screenInfo", name: "screenInfo" },
   { compType: "theme", name: "theme" },
 ] as const;
 

client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useState } from "react";
+import { hookToStateComp } from "../generators/hookToComp";
+
+enum ScreenTypes {
+  Mobile = 'mobile',
+  Tablet = 'tablet',
+  Desktop = 'desktop',
+}
+
+type ScreenType = typeof ScreenTypes[keyof typeof ScreenTypes]
+
+type ScreenInfo = {
+  width?: number;
+  height?: number;
+  deviceType?: ScreenType;
+  isDesktop?: boolean;
+  isTablet?: boolean;
+  isMobile?: boolean;
+}
+
+function useScreenInfo() {
+  const getDeviceType = () => {
+    if (window.screen.width < 768) return ScreenTypes.Mobile;
+    if (window.screen.width < 889) return ScreenTypes.Tablet;
+    return ScreenTypes.Desktop;
+  }
+  const getFlagsByDeviceType = (deviceType: ScreenType) => {
+    const flags = {
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false,
+    };
+    if(deviceType === ScreenTypes.Mobile) {
+      return { ...flags, isMobile: true };
+    }
+    if(deviceType === ScreenTypes.Tablet) {
+      return { ...flags, Tablet: true };
+    }
+    return { ...flags, isDesktop: true };
+  }
+
+  const getScreenInfo = useCallback(() => {
+    const { width, height } = window.screen;
+    const deviceType = getDeviceType();
+    const flags = getFlagsByDeviceType(deviceType);
+
+    return { width, height, deviceType, ...flags };
+  }, [])
+
+  const [screenInfo, setScreenInfo] = useState<ScreenInfo>({});
+
+  const updateScreenInfo = useCallback(() => {
+    setScreenInfo(getScreenInfo());
+  }, [getScreenInfo])
+
+  useEffect(() => {
+    window.addEventListener('resize', updateScreenInfo);
+    updateScreenInfo();
+    return () => window.removeEventListener('resize', updateScreenInfo);
+  }, [ updateScreenInfo ])
+
+  return screenInfo;
+}
+
+export const ScreenInfoHookComp = hookToStateComp(useScreenInfo);