update safe areas logic

Zalo-MiniApp · Sep 12, 2024 · f002c0e · f002c0e
1 parent f8d418e
commit f002c0e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -13,14 +13,15 @@ import { getSystemInfo } from "zmp-sdk";
 import { ScrollRestoration } from "./scroll-restoration";
 import { useHandlePayment } from "hooks";
 
-if (getSystemInfo().platform === "android") {
-  const androidSafeTop = Math.round(
-    (window as any).ZaloJavaScriptInterface.getStatusBarHeight() /
-      window.devicePixelRatio,
-  );
+if (import.meta.env.DEV) {
+  document.body.style.setProperty("--zaui-safe-area-inset-top", "24px");
+} else if (getSystemInfo().platform === "android") {
+  const statusBarHeight =
+    window.ZaloJavaScriptInterface?.getStatusBarHeight() ?? 0;
+  const androidSafeTop = Math.round(statusBarHeight / window.devicePixelRatio);
   document.body.style.setProperty(
     "--zaui-safe-area-inset-top",
-    `${androidSafeTop}px`,
+    `${androidSafeTop}px`
   );
 }
 

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -7,3 +7,9 @@ declare module "*.svg" {
   const content: string;
   export default content;
 }
+
+declare interface Window {
+  ZaloJavaScriptInterface?: {
+    getStatusBarHeight: () => number;
+  };
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -33,7 +33,10 @@
     "removeComments": true,
     "sourceMap": true,
     "resolveJsonModule": true,
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "types": [
+      "vite/client"
+    ]
   },
   "exclude": [
     "node_modules"