diff --git a/src/state/shell/drawer-open.tsx b/src/state/shell/drawer-open.tsx index 87650a09c6..7ce4189c31 100644 --- a/src/state/shell/drawer-open.tsx +++ b/src/state/shell/drawer-open.tsx @@ -1,15 +1,15 @@ -import React from 'react' +import {createContext, useContext, useState} from 'react' type StateContext = boolean type SetContext = (v: boolean) => void -const stateContext = React.createContext(false) +const stateContext = createContext(false) stateContext.displayName = 'DrawerOpenStateContext' -const setContext = React.createContext((_: boolean) => {}) +const setContext = createContext((_: boolean) => {}) setContext.displayName = 'DrawerOpenSetContext' export function Provider({children}: React.PropsWithChildren<{}>) { - const [state, setState] = React.useState(false) + const [state, setState] = useState(false) return ( @@ -19,9 +19,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) { } export function useIsDrawerOpen() { - return React.useContext(stateContext) + return useContext(stateContext) } export function useSetDrawerOpen() { - return React.useContext(setContext) + return useContext(setContext) } diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 8b4c65b8fc..73b68555aa 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -45,25 +45,10 @@ import {Composer} from './Composer' import {DrawerContent} from './Drawer' function ShellInner() { - const t = useTheme() - const isDrawerOpen = useIsDrawerOpen() - const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() - const setIsDrawerOpen = useSetDrawerOpen() const winDim = useWindowDimensions() const insets = useSafeAreaInsets() const {state: policyUpdateState} = usePolicyUpdateContext() - const renderDrawerContent = useCallback(() => , []) - const onOpenDrawer = useCallback( - () => setIsDrawerOpen(true), - [setIsDrawerOpen], - ) - const onCloseDrawer = useCallback( - () => setIsDrawerOpen(false), - [setIsDrawerOpen], - ) - const canGoBack = useNavigationState(state => !isStateAtTabRoot(state)) - const {hasSession} = useSession() const closeAnyActiveElement = useCloseAnyActiveElement() useNotificationsRegistration() @@ -102,60 +87,14 @@ function ShellInner() { } }, [dedupe, navigation]) - const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled - const [trendingScrollGesture] = useState(() => Gesture.Native()) return ( <> - { - handler = handler.requireExternalGestureToFail( - trendingScrollGesture, - ) - - if (swipeEnabled) { - if (isDrawerOpen) { - return handler.activeOffsetX([-1, 1]) - } else { - return ( - handler - // Any movement to the left is a pager swipe - // so fail the drawer gesture immediately. - .failOffsetX(-1) - // Don't rush declaring that a movement to the right - // is a drawer swipe. It could be a vertical scroll. - .activeOffsetX(5) - ) - } - } else { - // Fail the gesture immediately. - // This seems more reliable than the `swipeEnabled` prop. - // With `swipeEnabled` alone, the gesture may freeze after toggling off/on. - return handler.failOffsetX([0, 0]).failOffsetY([0, 0]) - } - }} - open={isDrawerOpen} - onOpen={onOpenDrawer} - onClose={onCloseDrawer} - swipeEdgeWidth={winDim.width} - swipeMinVelocity={100} - swipeMinDistance={10} - drawerType={isIOS ? 'slide' : 'front'} - overlayStyle={{ - backgroundColor: select(t.name, { - light: 'rgba(0, 57, 117, 0.1)', - dark: isAndroid - ? 'rgba(16, 133, 254, 0.1)' - : 'rgba(1, 82, 168, 0.1)', - dim: 'rgba(10, 13, 16, 0.8)', - }), - }}> + - + @@ -182,6 +121,76 @@ function ShellInner() { ) } +function DrawerLayout({children}: {children: React.ReactNode}) { + const t = useTheme() + const isDrawerOpen = useIsDrawerOpen() + const setIsDrawerOpen = useSetDrawerOpen() + const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() + const winDim = useWindowDimensions() + + const canGoBack = useNavigationState(state => !isStateAtTabRoot(state)) + const {hasSession} = useSession() + + const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled + const [trendingScrollGesture] = useState(() => Gesture.Native()) + + const renderDrawerContent = useCallback(() => , []) + const onOpenDrawer = useCallback( + () => setIsDrawerOpen(true), + [setIsDrawerOpen], + ) + const onCloseDrawer = useCallback( + () => setIsDrawerOpen(false), + [setIsDrawerOpen], + ) + + return ( + { + handler = handler.requireExternalGestureToFail(trendingScrollGesture) + + if (swipeEnabled) { + if (isDrawerOpen) { + return handler.activeOffsetX([-1, 1]) + } else { + return ( + handler + // Any movement to the left is a pager swipe + // so fail the drawer gesture immediately. + .failOffsetX(-1) + // Don't rush declaring that a movement to the right + // is a drawer swipe. It could be a vertical scroll. + .activeOffsetX(5) + ) + } + } else { + // Fail the gesture immediately. + // This seems more reliable than the `swipeEnabled` prop. + // With `swipeEnabled` alone, the gesture may freeze after toggling off/on. + return handler.failOffsetX([0, 0]).failOffsetY([0, 0]) + } + }} + open={isDrawerOpen} + onOpen={onOpenDrawer} + onClose={onCloseDrawer} + swipeEdgeWidth={winDim.width} + swipeMinVelocity={100} + swipeMinDistance={10} + drawerType={isIOS ? 'slide' : 'front'} + overlayStyle={{ + backgroundColor: select(t.name, { + light: 'rgba(0, 57, 117, 0.1)', + dark: isAndroid ? 'rgba(16, 133, 254, 0.1)' : 'rgba(1, 82, 168, 0.1)', + dim: 'rgba(10, 13, 16, 0.8)', + }), + }}> + {children} + + ) +} + export function Shell() { const t = useTheme() const {geolocation} = useGeolocation()