fix(sdk) safe area cant update without event

Telegram-Mini-Apps · Dec 2, 2024 · b9f1443 · b9f1443
1 parent 928c88a
commit b9f1443
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/packages/sdk/src/scopes/components/viewport/const.ts b/packages/sdk/src/scopes/components/viewport/const.ts
@@ -2,6 +2,8 @@ export const COMPONENT_NAME = 'viewport';
 export const REQUEST_FS_METHOD = 'web_app_request_fullscreen';
 export const FS_FAILED_EVENT = 'fullscreen_failed';
 export const FS_CHANGED_EVENT = 'fullscreen_changed';
+export const SA_CHANGED_EVENT = 'safe_area_changed';
+export const CSA_CHANGED_EVENT = 'content_safe_area_changed';
 export const VIEWPORT_CHANGED_EVENT = 'viewport_changed';
 export const REQUEST_SAFE_AREA_METHOD = 'web_app_request_safe_area';
 export const REQUEST_CONTENT_SAFE_AREA_METHOD = 'web_app_request_content_safe_area';
diff --git a/packages/sdk/src/scopes/components/viewport/methods/mounting/mount.ts b/packages/sdk/src/scopes/components/viewport/methods/mounting/mount.ts
@@ -4,7 +4,13 @@ import { CancelablePromise, on, retrieveLaunchParams } from '@telegram-apps/brid
 import { createMountFn } from '@/scopes/createMountFn.js';
 
 import { wrapBasic } from '../wrappers.js';
-import { COMPONENT_NAME, FS_CHANGED_EVENT, VIEWPORT_CHANGED_EVENT } from '../../const.js';
+import {
+  COMPONENT_NAME,
+  CSA_CHANGED_EVENT,
+  FS_CHANGED_EVENT,
+  SA_CHANGED_EVENT,
+  VIEWPORT_CHANGED_EVENT
+} from '../../const.js';
 import { isMounted, mountPromise, mountError } from '../../signals/mounting.js';
 import { getStateFromStorage, setState } from '../../signals/state.js';
 import { safeAreaInsets } from '../../signals/safe-area-insets.js';
@@ -14,7 +20,7 @@ import { requestSafeAreaInsets } from '../static/requestSafeAreaInsets.js';
 import { requestViewport } from '../static/requestViewport.js';
 import type { State } from '../../types.js';
 
-import { onFullscreenChanged, onViewportChanged } from './shared.js';
+import { onContentSafeAreaChanged, onFullscreenChanged, onSafeAreaChanged, onViewportChanged } from './shared.js';
 
 /**
  * Mounts the Viewport component.
@@ -78,6 +84,8 @@ export const mount = wrapBasic('mount', createMountFn<State>(
   (result) => {
     on(VIEWPORT_CHANGED_EVENT, onViewportChanged);
     on(FS_CHANGED_EVENT, onFullscreenChanged);
+    on(SA_CHANGED_EVENT, onSafeAreaChanged);
+    on(CSA_CHANGED_EVENT, onContentSafeAreaChanged);
     setState(result);
   },
   isMounted,

diff --git a/packages/sdk/src/scopes/components/viewport/methods/mounting/shared.ts b/packages/sdk/src/scopes/components/viewport/methods/mounting/shared.ts
@@ -15,3 +15,11 @@ export const onViewportChanged: EventListener<'viewport_changed'> = (data) => {
 export const onFullscreenChanged: EventListener<'fullscreen_changed'> = (data) => {
   setState({ isFullscreen: data.is_fullscreen });
 };
+
+export const onSafeAreaChanged: EventListener<'safe_area_changed'> = (data) => {
+  setState({ safeAreaInsets: data });
+};
+
+export const onContentSafeAreaChanged: EventListener<'content_safe_area_changed'> = (data) => {
+  setState({ contentSafeAreaInsets: data });
+};
diff --git a/packages/sdk/src/scopes/components/viewport/methods/mounting/unmount.ts b/packages/sdk/src/scopes/components/viewport/methods/mounting/unmount.ts
@@ -1,9 +1,9 @@
 import { off } from '@telegram-apps/bridge';
 
-import { FS_CHANGED_EVENT, VIEWPORT_CHANGED_EVENT } from '../../const.js';
+import { CSA_CHANGED_EVENT, FS_CHANGED_EVENT, SA_CHANGED_EVENT, VIEWPORT_CHANGED_EVENT } from '../../const.js';
 import { isMounted, mountPromise } from '../../signals/mounting.js';
 
-import { onFullscreenChanged, onViewportChanged } from './shared.js';
+import { onContentSafeAreaChanged, onFullscreenChanged, onSafeAreaChanged, onViewportChanged } from './shared.js';
 
 /**
  * Unmounts the Viewport.
@@ -18,6 +18,8 @@ export function unmount(): void {
   // Remove event listeners.
   off(VIEWPORT_CHANGED_EVENT, onViewportChanged);
   off(FS_CHANGED_EVENT, onFullscreenChanged);
+  off(SA_CHANGED_EVENT, onSafeAreaChanged);
+  off(CSA_CHANGED_EVENT, onContentSafeAreaChanged);
 
   // Drop the mount flag.
   isMounted.set(false);