diff --git a/packages/frontend/apps/ios/src/app.tsx b/packages/frontend/apps/ios/src/app.tsx index abb3dd8f95..ea170ea9cd 100644 --- a/packages/frontend/apps/ios/src/app.tsx +++ b/packages/frontend/apps/ios/src/app.tsx @@ -44,6 +44,7 @@ import { useTheme } from 'next-themes'; import { Suspense, useEffect } from 'react'; import { RouterProvider } from 'react-router-dom'; +import { BlocksuiteMenuConfigProvider } from './bs-menu-config'; import { configureFetchProvider } from './fetch'; import { ModalConfigProvider } from './modal-config'; import { Cookie } from './plugins/cookie'; @@ -259,11 +260,13 @@ export function App() { - } - router={router} - future={future} - /> + + } + router={router} + future={future} + /> + diff --git a/packages/frontend/apps/ios/src/bs-menu-config.tsx b/packages/frontend/apps/ios/src/bs-menu-config.tsx new file mode 100644 index 0000000000..fa8967cf10 --- /dev/null +++ b/packages/frontend/apps/ios/src/bs-menu-config.tsx @@ -0,0 +1,41 @@ +import { NavigationGestureService } from '@affine/core/mobile/modules/navigation-gesture'; +import { onMenuOpen } from '@blocksuite/affine-components/context-menu'; +import { useService } from '@toeverything/infra'; +import { type PropsWithChildren, useCallback, useEffect, useRef } from 'react'; + +export const BlocksuiteMenuConfigProvider = ({ + children, +}: PropsWithChildren) => { + const navigationGesture = useService(NavigationGestureService); + const menuCountRef = useRef(0); + const prevEnabledRef = useRef(false); + + const handleMenuState = useCallback(() => { + const currentCount = menuCountRef.current + 1; + menuCountRef.current = currentCount; + + if (currentCount === 1) { + prevEnabledRef.current = navigationGesture.enabled$.value; + if (prevEnabledRef.current) { + navigationGesture.setEnabled(false); + } + } + + return () => { + const currentCount = menuCountRef.current - 1; + menuCountRef.current = currentCount; + + if (currentCount === 0 && prevEnabledRef.current) { + navigationGesture.setEnabled(true); + } + }; + }, [navigationGesture]); + + useEffect(() => { + return onMenuOpen(() => { + return handleMenuState(); + }); + }, [handleMenuState]); + + return children; +};