feat(mobile): hide tab when virtual-keyboard show up (#8862)

packages/frontend/apps/ios/src/app.tsx

@@ -1,6 +1,7 @@
 import { AffineContext } from '@affine/core/components/context';
 import { AppContainer } from '@affine/core/desktop/components/app-container';
 import { configureMobileModules } from '@affine/core/mobile/modules';
+import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
 import { router } from '@affine/core/mobile/router';
 import { configureCommonModules } from '@affine/core/modules';
 import {
@@ -20,6 +21,7 @@ import {
 } from '@affine/core/modules/workspace-engine';
 import { App as CapacitorApp } from '@capacitor/app';
 import { Browser } from '@capacitor/browser';
+import { Keyboard } from '@capacitor/keyboard';
 import {
   Framework,
   FrameworkRoot,
@@ -76,6 +78,14 @@ framework.impl(ValidatorProvider, {
     return res.value;
   },
 });
+framework.impl(VirtualKeyboardProvider, {
+  addEventListener: (event, callback) => {
+    Keyboard.addListener(event as any, callback as any);
+  },
+  removeAllListeners: () => {
+    Keyboard.removeAllListeners();
+  },
+});
 const frameworkProvider = framework.provider();
 
 // setup application lifecycle events, and emit application start event

packages/frontend/core/src/mobile/components/app-tabs/index.tsx

@@ -9,6 +9,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React from 'react';
 import type { Location } from 'react-router-dom';
 
+import { VirtualKeyboardService } from '../../modules/virtual-keyboard/services/virtual-keyboard';
 import { AppTabJournal } from './journal';
 import * as styles from './styles.css';
 
@@ -54,14 +55,20 @@ const routes: Route[] = [
 ];
 
 export const AppTabs = ({ background }: { background?: string }) => {
+  const virtualKeyboardService = useService(VirtualKeyboardService);
+  const virtualKeyboardVisible = useLiveData(virtualKeyboardService.show$);
+
   return (
     <SafeArea
       bottom
       className={styles.appTabs}
       bottomOffset={2}
-      style={assignInlineVars({
+      style={{
-        [styles.appTabsBackground]: background,
+        ...assignInlineVars({
-      })}
+          [styles.appTabsBackground]: background,
+        }),
+        visibility: virtualKeyboardVisible ? 'hidden' : 'visible',
+      }}
     >
       <ul className={styles.appTabsInner} id="app-tabs" role="tablist">
         {routes.map(route => {

packages/frontend/core/src/mobile/modules/index.ts

@@ -1,7 +1,9 @@
 import type { Framework } from '@toeverything/infra';
 
 import { configureMobileSearchModule } from './search';
+import { configureMobileVirtualKeyboardModule } from './virtual-keyboard';
 
 export function configureMobileModules(framework: Framework) {
   configureMobileSearchModule(framework);
+  configureMobileVirtualKeyboardModule(framework);
 }

packages/frontend/core/src/mobile/modules/virtual-keyboard/index.ts

@@ -0,0 +1,13 @@
+import type { Framework } from '@toeverything/infra';
+
+import { VirtualKeyboardProvider } from './providers/virtual-keyboard';
+import { VirtualKeyboardService } from './services/virtual-keyboard';
+
+export { VirtualKeyboardProvider, VirtualKeyboardService };
+
+export function configureMobileVirtualKeyboardModule(framework: Framework) {
+  framework.service(
+    VirtualKeyboardService,
+    f => new VirtualKeyboardService(f.getOptional(VirtualKeyboardProvider))
+  );
+}

packages/frontend/core/src/mobile/modules/virtual-keyboard/providers/virtual-keyboard.ts

@@ -0,0 +1,23 @@
+import { createIdentifier } from '@toeverything/infra';
+
+export type VirtualKeyboardEvent =
+  | 'keyboardWillShow'
+  | 'keyboardDidShow'
+  | 'keyboardWillHide'
+  | 'keyboardDidHide';
+
+export interface VirtualKeyboardEventInfo {
+  keyboardHeight: number;
+}
+type VirtualKeyboardEventListener = (info: VirtualKeyboardEventInfo) => void;
+
+export interface VirtualKeyboardProvider {
+  addEventListener: (
+    event: VirtualKeyboardEvent,
+    callback: VirtualKeyboardEventListener
+  ) => void;
+  removeAllListeners: () => void;
+}
+
+export const VirtualKeyboardProvider =
+  createIdentifier<VirtualKeyboardProvider>('VirtualKeyboardProvider');

packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts

@@ -0,0 +1,34 @@
+import { LiveData, Service } from '@toeverything/infra';
+
+import type { VirtualKeyboardProvider } from '../providers/virtual-keyboard';
+
+export class VirtualKeyboardService extends Service {
+  show$ = new LiveData(false);
+  height$ = new LiveData(0);
+
+  constructor(
+    private readonly virtualKeyboardProvider?: VirtualKeyboardProvider
+  ) {
+    super();
+    this._observe();
+  }
+
+  override dispose() {
+    super.dispose();
+    this.virtualKeyboardProvider?.removeAllListeners();
+  }
+
+  private _observe() {
+    this.virtualKeyboardProvider?.addEventListener(
+      'keyboardWillShow',
+      ({ keyboardHeight }) => {
+        this.show$.next(true);
+        this.height$.next(keyboardHeight);
+      }
+    );
+    this.virtualKeyboardProvider?.addEventListener('keyboardWillHide', () => {
+      this.show$.next(false);
+      this.height$.next(0);
+    });
+  }
+}