feat(core): disable the back gesture when the menu is open (#9263)

close: BS-2174
This commit is contained in:
zzj3720
2024-12-26 07:12:09 +00:00
parent 96fae47744
commit 45acdbda04
2 changed files with 49 additions and 5 deletions

View File

@@ -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() {
<AffineContext store={getCurrentStore()}>
<KeyboardThemeProvider />
<ModalConfigProvider>
<RouterProvider
fallbackElement={<AppFallback />}
router={router}
future={future}
/>
<BlocksuiteMenuConfigProvider>
<RouterProvider
fallbackElement={<AppFallback />}
router={router}
future={future}
/>
</BlocksuiteMenuConfigProvider>
</ModalConfigProvider>
</AffineContext>
</I18nProvider>

View File

@@ -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;
};