From 3390fbc5db3e5a691241dd547fa465c3a242f988 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Wed, 20 Nov 2024 01:33:19 +0000
Subject: [PATCH] feat(mobile): hide tab when virtual-keyboard show up (#8862)

---
 packages/frontend/apps/ios/src/app.tsx        | 10 ++++++
 .../src/mobile/components/app-tabs/index.tsx  | 13 +++++--
 .../frontend/core/src/mobile/modules/index.ts |  2 ++
 .../mobile/modules/virtual-keyboard/index.ts  | 13 +++++++
 .../providers/virtual-keyboard.ts             | 23 +++++++++++++
 .../services/virtual-keyboard.ts              | 34 +++++++++++++++++++
 6 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/core/src/mobile/modules/virtual-keyboard/index.ts
 create mode 100644 packages/frontend/core/src/mobile/modules/virtual-keyboard/providers/virtual-keyboard.ts
 create mode 100644 packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts

diff --git a/packages/frontend/apps/ios/src/app.tsx b/packages/frontend/apps/ios/src/app.tsx
index c98100961..327871da6 100644
--- a/packages/frontend/apps/ios/src/app.tsx
+++ b/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
diff --git a/packages/frontend/core/src/mobile/components/app-tabs/index.tsx b/packages/frontend/core/src/mobile/components/app-tabs/index.tsx
index dcc37b61c..9e3507f81 100644
--- a/packages/frontend/core/src/mobile/components/app-tabs/index.tsx
+++ b/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({
-        [styles.appTabsBackground]: background,
-      })}
+      style={{
+        ...assignInlineVars({
+          [styles.appTabsBackground]: background,
+        }),
+        visibility: virtualKeyboardVisible ? 'hidden' : 'visible',
+      }}
     >
       <ul className={styles.appTabsInner} id="app-tabs" role="tablist">
         {routes.map(route => {
diff --git a/packages/frontend/core/src/mobile/modules/index.ts b/packages/frontend/core/src/mobile/modules/index.ts
index ad85b29f5..106fdfc1c 100644
--- a/packages/frontend/core/src/mobile/modules/index.ts
+++ b/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);
 }
diff --git a/packages/frontend/core/src/mobile/modules/virtual-keyboard/index.ts b/packages/frontend/core/src/mobile/modules/virtual-keyboard/index.ts
new file mode 100644
index 000000000..1e6e86c12
--- /dev/null
+++ b/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))
+  );
+}
diff --git a/packages/frontend/core/src/mobile/modules/virtual-keyboard/providers/virtual-keyboard.ts b/packages/frontend/core/src/mobile/modules/virtual-keyboard/providers/virtual-keyboard.ts
new file mode 100644
index 000000000..eacecca9b
--- /dev/null
+++ b/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');
diff --git a/packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts b/packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts
new file mode 100644
index 000000000..42bc41197
--- /dev/null
+++ b/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);
+    });
+  }
+}