Remove the drawer from the shell
This commit is contained in:
Paul Frazee
@@ -72,7 +72,6 @@
|
||||
"@react-native-menu/menu": "^0.8.0",
|
||||
"@react-native-picker/picker": "2.6.1",
|
||||
"@react-navigation/bottom-tabs": "^6.5.7",
|
||||
"@react-navigation/drawer": "^6.6.2",
|
||||
"@react-navigation/native": "^6.1.6",
|
||||
"@react-navigation/native-stack": "^6.9.12",
|
||||
"@segment/analytics-next": "^1.51.3",
|
||||
|
||||
@@ -16,7 +16,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {enforceLen} from 'lib/strings/helpers'
|
||||
import {isNative, isWeb} from 'platform/detection'
|
||||
import {useSearchPostsQuery} from 'state/queries/search-posts'
|
||||
import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from 'state/shell'
|
||||
import {useSetMinimalShellMode} from 'state/shell'
|
||||
import {Pager} from '#/view/com/pager/Pager'
|
||||
import {TabBar} from '#/view/com/pager/TabBar'
|
||||
import {CenteredView} from '#/view/com/util/Views'
|
||||
@@ -65,7 +65,6 @@ export default function HashtagScreen({
|
||||
|
||||
const [activeTab, setActiveTab] = React.useState(0)
|
||||
const setMinimalShellMode = useSetMinimalShellMode()
|
||||
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
|
||||
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
@@ -76,10 +75,9 @@ export default function HashtagScreen({
|
||||
const onPageSelected = React.useCallback(
|
||||
(index: number) => {
|
||||
setMinimalShellMode(false)
|
||||
setDrawerSwipeDisabled(index > 0)
|
||||
setActiveTab(index)
|
||||
},
|
||||
[setDrawerSwipeDisabled, setMinimalShellMode],
|
||||
[setMinimalShellMode],
|
||||
)
|
||||
|
||||
const sections = React.useMemo(() => {
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
type StateContext = boolean
|
||||
type SetContext = (v: boolean) => void
|
||||
|
||||
const stateContext = React.createContext<StateContext>(false)
|
||||
const setContext = React.createContext<SetContext>((_: boolean) => {})
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(false)
|
||||
|
||||
return (
|
||||
<stateContext.Provider value={state}>
|
||||
<setContext.Provider value={setState}>{children}</setContext.Provider>
|
||||
</stateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useIsDrawerOpen() {
|
||||
return React.useContext(stateContext)
|
||||
}
|
||||
|
||||
export function useSetDrawerOpen() {
|
||||
return React.useContext(setContext)
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
type StateContext = boolean
|
||||
type SetContext = (v: boolean) => void
|
||||
|
||||
const stateContext = React.createContext<StateContext>(false)
|
||||
const setContext = React.createContext<SetContext>((_: boolean) => {})
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(false)
|
||||
return (
|
||||
<stateContext.Provider value={state}>
|
||||
<setContext.Provider value={setState}>{children}</setContext.Provider>
|
||||
</stateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useIsDrawerSwipeDisabled() {
|
||||
return React.useContext(stateContext)
|
||||
}
|
||||
|
||||
export function useSetDrawerSwipeDisabled() {
|
||||
return React.useContext(setContext)
|
||||
}
|
||||
+16
-26
@@ -1,40 +1,30 @@
|
||||
import React from 'react'
|
||||
import {Provider as ShellLayoutProvder} from './shell-layout'
|
||||
import {Provider as DrawerOpenProvider} from './drawer-open'
|
||||
import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'
|
||||
import {Provider as MinimalModeProvider} from './minimal-mode'
|
||||
|
||||
import {Provider as ColorModeProvider} from './color-mode'
|
||||
import {Provider as OnboardingProvider} from './onboarding'
|
||||
import {Provider as ComposerProvider} from './composer'
|
||||
import {Provider as MinimalModeProvider} from './minimal-mode'
|
||||
import {Provider as OnboardingProvider} from './onboarding'
|
||||
import {Provider as ShellLayoutProvder} from './shell-layout'
|
||||
import {Provider as TickEveryMinuteProvider} from './tick-every-minute'
|
||||
|
||||
export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
|
||||
export {
|
||||
useIsDrawerSwipeDisabled,
|
||||
useSetDrawerSwipeDisabled,
|
||||
} from './drawer-swipe-disabled'
|
||||
export {useSetThemePrefs, useThemePrefs} from './color-mode'
|
||||
export {useComposerControls, useComposerState} from './composer'
|
||||
export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
|
||||
export {useThemePrefs, useSetThemePrefs} from './color-mode'
|
||||
export {useOnboardingState, useOnboardingDispatch} from './onboarding'
|
||||
export {useComposerState, useComposerControls} from './composer'
|
||||
export {useOnboardingDispatch, useOnboardingState} from './onboarding'
|
||||
export {useTickEveryMinute} from './tick-every-minute'
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
return (
|
||||
<ShellLayoutProvder>
|
||||
<DrawerOpenProvider>
|
||||
<DrawerSwipableProvider>
|
||||
<MinimalModeProvider>
|
||||
<ColorModeProvider>
|
||||
<OnboardingProvider>
|
||||
<ComposerProvider>
|
||||
<TickEveryMinuteProvider>{children}</TickEveryMinuteProvider>
|
||||
</ComposerProvider>
|
||||
</OnboardingProvider>
|
||||
</ColorModeProvider>
|
||||
</MinimalModeProvider>
|
||||
</DrawerSwipableProvider>
|
||||
</DrawerOpenProvider>
|
||||
<MinimalModeProvider>
|
||||
<ColorModeProvider>
|
||||
<OnboardingProvider>
|
||||
<ComposerProvider>
|
||||
<TickEveryMinuteProvider>{children}</TickEveryMinuteProvider>
|
||||
</ComposerProvider>
|
||||
</OnboardingProvider>
|
||||
</ColorModeProvider>
|
||||
</MinimalModeProvider>
|
||||
</ShellLayoutProvder>
|
||||
)
|
||||
}
|
||||
|
||||
+4
-14
@@ -1,9 +1,9 @@
|
||||
import {useCallback} from 'react'
|
||||
|
||||
import {useDialogStateControlContext} from '#/state/dialogs'
|
||||
import {useLightboxControls} from './lightbox'
|
||||
import {useModalControls} from './modals'
|
||||
import {useComposerControls} from './shell/composer'
|
||||
import {useSetDrawerOpen} from './shell/drawer-open'
|
||||
import {useDialogStateControlContext} from '#/state/dialogs'
|
||||
|
||||
/**
|
||||
* returns true if something was closed
|
||||
@@ -14,7 +14,6 @@ export function useCloseAnyActiveElement() {
|
||||
const {closeModal} = useModalControls()
|
||||
const {closeComposer} = useComposerControls()
|
||||
const {closeAllDialogs} = useDialogStateControlContext()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
return useCallback(() => {
|
||||
if (closeLightbox()) {
|
||||
return true
|
||||
@@ -28,9 +27,8 @@ export function useCloseAnyActiveElement() {
|
||||
if (closeAllDialogs()) {
|
||||
return true
|
||||
}
|
||||
setDrawerOpen(false)
|
||||
return false
|
||||
}, [closeLightbox, closeModal, closeComposer, setDrawerOpen, closeAllDialogs])
|
||||
}, [closeLightbox, closeModal, closeComposer, closeAllDialogs])
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -41,18 +39,10 @@ export function useCloseAllActiveElements() {
|
||||
const {closeAllModals} = useModalControls()
|
||||
const {closeComposer} = useComposerControls()
|
||||
const {closeAllDialogs: closeAlfDialogs} = useDialogStateControlContext()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
return useCallback(() => {
|
||||
closeLightbox()
|
||||
closeAllModals()
|
||||
closeComposer()
|
||||
closeAlfDialogs()
|
||||
setDrawerOpen(false)
|
||||
}, [
|
||||
closeLightbox,
|
||||
closeAllModals,
|
||||
closeComposer,
|
||||
closeAlfDialogs,
|
||||
setDrawerOpen,
|
||||
])
|
||||
}, [closeLightbox, closeAllModals, closeComposer, closeAlfDialogs])
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useSession} from '#/state/session'
|
||||
import {useSetDrawerOpen} from '#/state/shell/drawer-open'
|
||||
import {useShellLayout} from '#/state/shell/shell-layout'
|
||||
import {HITSLOP_10} from 'lib/constants'
|
||||
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
|
||||
@@ -28,15 +27,10 @@ export function HomeHeaderLayoutMobile({
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const {headerHeight} = useShellLayout()
|
||||
const {headerMinimalShellTransform} = useMinimalShellMode()
|
||||
const {hasSession} = useSession()
|
||||
|
||||
const onPressAvi = React.useCallback(() => {
|
||||
setDrawerOpen(true)
|
||||
}, [setDrawerOpen])
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
|
||||
@@ -47,7 +41,7 @@ export function HomeHeaderLayoutMobile({
|
||||
<View style={[pal.view, {width: 100}]}>
|
||||
<TouchableOpacity
|
||||
testID="viewHeaderDrawerBtn"
|
||||
onPress={onPressAvi}
|
||||
onPress={undefined /*TODO*/}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Open navigation`)}
|
||||
accessibilityHint={_(
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import React from 'react'
|
||||
import {Pressable, StyleSheet, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {emitSoftReset} from '#/state/events'
|
||||
import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
|
||||
import {BACK_HITSLOP} from 'lib/constants'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {TextLink} from '../util/Link'
|
||||
import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
|
||||
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
|
||||
import {CenteredView} from '../util/Views'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {makeProfileLink} from 'lib/routes/links'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {BACK_HITSLOP} from 'lib/constants'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {isNative} from 'platform/detection'
|
||||
import {useLightboxControls, ImagesLightbox} from '#/state/lightbox'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {Trans, msg} from '@lingui/macro'
|
||||
import {useSetDrawerOpen} from '#/state/shell'
|
||||
import {emitSoftReset} from '#/state/events'
|
||||
import {TextLink} from '../util/Link'
|
||||
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
|
||||
import {CenteredView} from '../util/Views'
|
||||
|
||||
export function ProfileSubpageHeader({
|
||||
isLoading,
|
||||
@@ -43,7 +43,6 @@ export function ProfileSubpageHeader({
|
||||
| undefined
|
||||
avatarType: UserAvatarType
|
||||
}>) {
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const {_} = useLingui()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
@@ -59,10 +58,6 @@ export function ProfileSubpageHeader({
|
||||
}
|
||||
}, [navigation])
|
||||
|
||||
const onPressMenu = React.useCallback(() => {
|
||||
setDrawerOpen(true)
|
||||
}, [setDrawerOpen])
|
||||
|
||||
const onPressAvi = React.useCallback(() => {
|
||||
if (
|
||||
avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
|
||||
@@ -88,7 +83,7 @@ export function ProfileSubpageHeader({
|
||||
]}>
|
||||
<Pressable
|
||||
testID="headerDrawerBtn"
|
||||
onPress={canGoBack ? onPressBack : onPressMenu}
|
||||
onPress={canGoBack ? onPressBack : undefined /*TODO*/}
|
||||
hitSlop={BACK_HITSLOP}
|
||||
style={canGoBack ? styles.backBtn : styles.backBtnWide}
|
||||
accessibilityRole="button"
|
||||
|
||||
@@ -8,13 +8,13 @@ import {
|
||||
} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
import {CenteredView} from './Views'
|
||||
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {useSetDrawerOpen} from '#/state/shell'
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import {CenteredView} from './Views'
|
||||
|
||||
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
|
||||
|
||||
@@ -27,7 +27,6 @@ export function SimpleViewHeader({
|
||||
style?: StyleProp<ViewStyle>
|
||||
}>) {
|
||||
const pal = usePalette('default')
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const {track} = useAnalytics()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
@@ -43,8 +42,8 @@ export function SimpleViewHeader({
|
||||
|
||||
const onPressMenu = React.useCallback(() => {
|
||||
track('ViewHeader:MenuButtonClicked')
|
||||
setDrawerOpen(true)
|
||||
}, [track, setDrawerOpen])
|
||||
// TODO
|
||||
}, [track])
|
||||
|
||||
const Container = isMobile ? View : CenteredView
|
||||
return (
|
||||
|
||||
@@ -6,7 +6,6 @@ import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {useSetDrawerOpen} from '#/state/shell'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
@@ -39,7 +38,6 @@ export function ViewHeader({
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const {track} = useAnalytics()
|
||||
const {isDesktop, isTablet} = useWebMediaQueries()
|
||||
@@ -55,8 +53,8 @@ export function ViewHeader({
|
||||
|
||||
const onPressMenu = React.useCallback(() => {
|
||||
track('ViewHeader:MenuButtonClicked')
|
||||
setDrawerOpen(true)
|
||||
}, [track, setDrawerOpen])
|
||||
// TODO
|
||||
}, [track])
|
||||
|
||||
if (isDesktop) {
|
||||
if (showOnDesktop) {
|
||||
|
||||
@@ -13,11 +13,7 @@ import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
|
||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
|
||||
import {useSession} from '#/state/session'
|
||||
import {
|
||||
useMinimalShellMode,
|
||||
useSetDrawerSwipeDisabled,
|
||||
useSetMinimalShellMode,
|
||||
} from '#/state/shell'
|
||||
import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
|
||||
import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
|
||||
import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
|
||||
@@ -94,15 +90,10 @@ function HomeScreenReady({
|
||||
|
||||
const {hasSession} = useSession()
|
||||
const setMinimalShellMode = useSetMinimalShellMode()
|
||||
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
setMinimalShellMode(false)
|
||||
setDrawerSwipeDisabled(selectedIndex > 0)
|
||||
return () => {
|
||||
setDrawerSwipeDisabled(false)
|
||||
}
|
||||
}, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]),
|
||||
}, [setMinimalShellMode]),
|
||||
)
|
||||
|
||||
useFocusEffect(
|
||||
@@ -139,12 +130,11 @@ function HomeScreenReady({
|
||||
const onPageSelected = React.useCallback(
|
||||
(index: number) => {
|
||||
setMinimalShellMode(false)
|
||||
setDrawerSwipeDisabled(index > 0)
|
||||
const feed = allFeeds[index]
|
||||
setSelectedFeed(feed)
|
||||
lastPagerReportedIndexRef.current = index
|
||||
},
|
||||
[setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds],
|
||||
[setSelectedFeed, setMinimalShellMode, allFeeds],
|
||||
)
|
||||
|
||||
const onPageSelecting = React.useCallback(
|
||||
|
||||
@@ -19,7 +19,7 @@ import {useModerationOpts} from '#/state/queries/preferences'
|
||||
import {useProfileQuery} from '#/state/queries/profile'
|
||||
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
|
||||
import {getAgent, useSession} from '#/state/session'
|
||||
import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useComposerControls} from '#/state/shell/composer'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {useSetTitle} from 'lib/hooks/useSetTitle'
|
||||
@@ -154,7 +154,6 @@ function ProfileScreenLoaded({
|
||||
})
|
||||
const [currentPage, setCurrentPage] = React.useState(0)
|
||||
const {_} = useLingui()
|
||||
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
|
||||
|
||||
const [scrollViewTag, setScrollViewTag] = React.useState<number | null>(null)
|
||||
|
||||
@@ -280,15 +279,6 @@ function ProfileScreenLoaded({
|
||||
}, [setMinimalShellMode, screen, currentPage, scrollSectionToTop]),
|
||||
)
|
||||
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
setDrawerSwipeDisabled(currentPage > 0)
|
||||
return () => {
|
||||
setDrawerSwipeDisabled(false)
|
||||
}
|
||||
}, [setDrawerSwipeDisabled, currentPage]),
|
||||
)
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
|
||||
@@ -37,8 +37,7 @@ import {
|
||||
useSuggestedFollowsQuery,
|
||||
} from '#/state/queries/suggested-follows'
|
||||
import {useSession} from '#/state/session'
|
||||
import {useSetDrawerOpen} from '#/state/shell'
|
||||
import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {
|
||||
NativeStackScreenProps,
|
||||
@@ -396,7 +395,6 @@ function SearchScreenUserResults({
|
||||
export function SearchScreenInner({query}: {query?: string}) {
|
||||
const pal = usePalette('default')
|
||||
const setMinimalShellMode = useSetMinimalShellMode()
|
||||
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
|
||||
const {hasSession} = useSession()
|
||||
const {isDesktop} = useWebMediaQueries()
|
||||
const [activeTab, setActiveTab] = React.useState(0)
|
||||
@@ -405,10 +403,9 @@ export function SearchScreenInner({query}: {query?: string}) {
|
||||
const onPageSelected = React.useCallback(
|
||||
(index: number) => {
|
||||
setMinimalShellMode(false)
|
||||
setDrawerSwipeDisabled(index > 0)
|
||||
setActiveTab(index)
|
||||
},
|
||||
[setDrawerSwipeDisabled, setMinimalShellMode],
|
||||
[setMinimalShellMode],
|
||||
)
|
||||
|
||||
const sections = React.useMemo(() => {
|
||||
@@ -535,7 +532,6 @@ export function SearchScreen(
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
const {track} = useAnalytics()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const moderationOpts = useModerationOpts()
|
||||
const search = useActorAutocompleteFn()
|
||||
const setMinimalShellMode = useSetMinimalShellMode()
|
||||
@@ -592,8 +588,7 @@ export function SearchScreen(
|
||||
|
||||
const onPressMenu = React.useCallback(() => {
|
||||
track('ViewHeader:MenuButtonClicked')
|
||||
setDrawerOpen(true)
|
||||
}, [track, setDrawerOpen])
|
||||
}, [track])
|
||||
|
||||
const onPressCancelSearch = React.useCallback(() => {
|
||||
scrollToTopWeb()
|
||||
|
||||
@@ -1,731 +0,0 @@
|
||||
import React, {ComponentProps} from 'react'
|
||||
import {
|
||||
Linking,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {StackActions, useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {emitSoftReset} from '#/state/events'
|
||||
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
|
||||
import {useProfileQuery} from '#/state/queries/profile'
|
||||
import {SessionAccount, useSession} from '#/state/session'
|
||||
import {useSetDrawerOpen} from '#/state/shell'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
|
||||
import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {
|
||||
BellIcon,
|
||||
BellIconSolid,
|
||||
CogIcon,
|
||||
HandIcon,
|
||||
HashtagIcon,
|
||||
HomeIcon,
|
||||
HomeIconSolid,
|
||||
ListIcon,
|
||||
MagnifyingGlassIcon2,
|
||||
MagnifyingGlassIcon2Solid,
|
||||
UserIcon,
|
||||
UserIconSolid,
|
||||
} from 'lib/icons'
|
||||
import {getTabState, TabState} from 'lib/routes/helpers'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {pluralize} from 'lib/strings/helpers'
|
||||
import {colors, s} from 'lib/styles'
|
||||
import {useTheme} from 'lib/ThemeContext'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {NavSignupCard} from '#/view/shell/NavSignupCard'
|
||||
import {formatCountShortOnly} from 'view/com/util/numeric/format'
|
||||
import {Text} from 'view/com/util/text/Text'
|
||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||
import {useTheme as useAlfTheme} from '#/alf'
|
||||
import {TextLink} from '../com/util/Link'
|
||||
|
||||
let DrawerProfileCard = ({
|
||||
account,
|
||||
onPressProfile,
|
||||
}: {
|
||||
account: SessionAccount
|
||||
onPressProfile: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
const {data: profile} = useProfileQuery({did: account.did})
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
testID="profileCardButton"
|
||||
accessibilityLabel={_(msg`Profile`)}
|
||||
accessibilityHint={_(msg`Navigates to your profile`)}
|
||||
onPress={onPressProfile}>
|
||||
<UserAvatar
|
||||
size={80}
|
||||
avatar={profile?.avatar}
|
||||
// See https://github.com/bluesky-social/social-app/pull/1801:
|
||||
usePlainRNImage={true}
|
||||
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
||||
/>
|
||||
<Text
|
||||
type="title-lg"
|
||||
style={[pal.text, s.bold, styles.profileCardDisplayName]}
|
||||
numberOfLines={1}>
|
||||
{profile?.displayName || account.handle}
|
||||
</Text>
|
||||
<Text
|
||||
type="2xl"
|
||||
style={[pal.textLight, styles.profileCardHandle]}
|
||||
numberOfLines={1}>
|
||||
@{account.handle}
|
||||
</Text>
|
||||
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
|
||||
<Text type="xl-medium" style={pal.text}>
|
||||
{formatCountShortOnly(profile?.followersCount ?? 0)}
|
||||
</Text>{' '}
|
||||
{pluralize(profile?.followersCount || 0, 'follower')} ·{' '}
|
||||
<Trans>
|
||||
<Text type="xl-medium" style={pal.text}>
|
||||
{formatCountShortOnly(profile?.followsCount ?? 0)}
|
||||
</Text>{' '}
|
||||
following
|
||||
</Trans>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
DrawerProfileCard = React.memo(DrawerProfileCard)
|
||||
export {DrawerProfileCard}
|
||||
|
||||
let DrawerContent = ({}: {}): React.ReactNode => {
|
||||
const theme = useTheme()
|
||||
const t = useAlfTheme()
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const {track} = useAnalytics()
|
||||
const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
|
||||
useNavigationTabState()
|
||||
const {hasSession, currentAccount} = useSession()
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
const onPressTab = React.useCallback(
|
||||
(tab: string) => {
|
||||
track('Menu:ItemClicked', {url: tab})
|
||||
const state = navigation.getState()
|
||||
setDrawerOpen(false)
|
||||
if (isWeb) {
|
||||
// hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
|
||||
if (tab === 'MyProfile') {
|
||||
navigation.navigate('Profile', {name: currentAccount!.handle})
|
||||
} else {
|
||||
// @ts-ignore must be Home, Search, Notifications, or MyProfile
|
||||
navigation.navigate(tab)
|
||||
}
|
||||
} else {
|
||||
const tabState = getTabState(state, tab)
|
||||
if (tabState === TabState.InsideAtRoot) {
|
||||
emitSoftReset()
|
||||
} else if (tabState === TabState.Inside) {
|
||||
navigation.dispatch(StackActions.popToTop())
|
||||
} else {
|
||||
// @ts-ignore must be Home, Search, Notifications, or MyProfile
|
||||
navigation.navigate(`${tab}Tab`)
|
||||
}
|
||||
}
|
||||
},
|
||||
[track, navigation, setDrawerOpen, currentAccount],
|
||||
)
|
||||
|
||||
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
|
||||
|
||||
const onPressSearch = React.useCallback(
|
||||
() => onPressTab('Search'),
|
||||
[onPressTab],
|
||||
)
|
||||
|
||||
const onPressNotifications = React.useCallback(
|
||||
() => onPressTab('Notifications'),
|
||||
[onPressTab],
|
||||
)
|
||||
|
||||
const onPressProfile = React.useCallback(() => {
|
||||
onPressTab('MyProfile')
|
||||
}, [onPressTab])
|
||||
|
||||
const onPressMyFeeds = React.useCallback(
|
||||
() => onPressTab('Feeds'),
|
||||
[onPressTab],
|
||||
)
|
||||
|
||||
const onPressLists = React.useCallback(() => {
|
||||
track('Menu:ItemClicked', {url: 'Lists'})
|
||||
navigation.navigate('Lists')
|
||||
setDrawerOpen(false)
|
||||
}, [navigation, track, setDrawerOpen])
|
||||
|
||||
const onPressModeration = React.useCallback(() => {
|
||||
track('Menu:ItemClicked', {url: 'Moderation'})
|
||||
navigation.navigate('Moderation')
|
||||
setDrawerOpen(false)
|
||||
}, [navigation, track, setDrawerOpen])
|
||||
|
||||
const onPressSettings = React.useCallback(() => {
|
||||
track('Menu:ItemClicked', {url: 'Settings'})
|
||||
navigation.navigate('Settings')
|
||||
setDrawerOpen(false)
|
||||
}, [navigation, track, setDrawerOpen])
|
||||
|
||||
const onPressFeedback = React.useCallback(() => {
|
||||
track('Menu:FeedbackClicked')
|
||||
Linking.openURL(
|
||||
FEEDBACK_FORM_URL({
|
||||
email: currentAccount?.email,
|
||||
handle: currentAccount?.handle,
|
||||
}),
|
||||
)
|
||||
}, [track, currentAccount])
|
||||
|
||||
const onPressHelp = React.useCallback(() => {
|
||||
track('Menu:HelpClicked')
|
||||
Linking.openURL(HELP_DESK_URL)
|
||||
}, [track])
|
||||
|
||||
// rendering
|
||||
// =
|
||||
|
||||
return (
|
||||
<View
|
||||
testID="drawer"
|
||||
style={[
|
||||
styles.view,
|
||||
theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<SafeAreaView style={s.flex1}>
|
||||
<ScrollView style={styles.main}>
|
||||
{hasSession && currentAccount ? (
|
||||
<View style={{}}>
|
||||
<DrawerProfileCard
|
||||
account={currentAccount}
|
||||
onPressProfile={onPressProfile}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<View style={{paddingRight: 20}}>
|
||||
<NavSignupCard />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{hasSession ? (
|
||||
<>
|
||||
<View style={{height: 16}} />
|
||||
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
|
||||
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
|
||||
<NotificationsMenuItem
|
||||
isActive={isAtNotifications}
|
||||
onPress={onPressNotifications}
|
||||
/>
|
||||
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
|
||||
<ListsMenuItem onPress={onPressLists} />
|
||||
<ModerationMenuItem onPress={onPressModeration} />
|
||||
<ProfileMenuItem
|
||||
isActive={isAtMyProfile}
|
||||
onPress={onPressProfile}
|
||||
/>
|
||||
<SettingsMenuItem onPress={onPressSettings} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
|
||||
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
|
||||
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<View style={styles.smallSpacer} />
|
||||
|
||||
<View style={[{flexWrap: 'wrap', gap: 12}, s.flexCol]}>
|
||||
<TextLink
|
||||
type="md"
|
||||
style={pal.link}
|
||||
href="https://bsky.social/about/support/tos"
|
||||
text={_(msg`Terms of Service`)}
|
||||
/>
|
||||
<TextLink
|
||||
type="md"
|
||||
style={pal.link}
|
||||
href="https://bsky.social/about/support/privacy-policy"
|
||||
text={_(msg`Privacy Policy`)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.smallSpacer} />
|
||||
<View style={styles.smallSpacer} />
|
||||
</ScrollView>
|
||||
|
||||
<DrawerFooter
|
||||
onPressFeedback={onPressFeedback}
|
||||
onPressHelp={onPressHelp}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
DrawerContent = React.memo(DrawerContent)
|
||||
export {DrawerContent}
|
||||
|
||||
let DrawerFooter = ({
|
||||
onPressFeedback,
|
||||
onPressHelp,
|
||||
}: {
|
||||
onPressFeedback: () => void
|
||||
onPressHelp: () => void
|
||||
}): React.ReactNode => {
|
||||
const theme = useTheme()
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
return (
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel={_(msg`Send feedback`)}
|
||||
accessibilityHint=""
|
||||
onPress={onPressFeedback}
|
||||
style={[
|
||||
styles.footerBtn,
|
||||
styles.footerBtnFeedback,
|
||||
theme.colorScheme === 'light'
|
||||
? styles.footerBtnFeedbackLight
|
||||
: styles.footerBtnFeedbackDark,
|
||||
]}>
|
||||
<FontAwesomeIcon
|
||||
style={pal.link as FontAwesomeIconStyle}
|
||||
size={18}
|
||||
icon={['far', 'message']}
|
||||
/>
|
||||
<Text type="lg-medium" style={[pal.link, s.pl10]}>
|
||||
<Trans>Feedback</Trans>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel={_(msg`Send feedback`)}
|
||||
accessibilityHint=""
|
||||
onPress={onPressHelp}
|
||||
style={[styles.footerBtn]}>
|
||||
<Text type="lg-medium" style={[pal.link, s.pl10]}>
|
||||
<Trans>Help</Trans>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
DrawerFooter = React.memo(DrawerFooter)
|
||||
|
||||
interface MenuItemProps extends ComponentProps<typeof TouchableOpacity> {
|
||||
icon: JSX.Element
|
||||
label: string
|
||||
count?: string
|
||||
bold?: boolean
|
||||
}
|
||||
|
||||
let SearchMenuItem = ({
|
||||
isActive,
|
||||
onPress,
|
||||
}: {
|
||||
isActive: boolean
|
||||
onPress: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={
|
||||
isActive ? (
|
||||
<MagnifyingGlassIcon2Solid
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size={24}
|
||||
strokeWidth={1.7}
|
||||
/>
|
||||
) : (
|
||||
<MagnifyingGlassIcon2
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size={24}
|
||||
strokeWidth={1.7}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={_(msg`Search`)}
|
||||
accessibilityLabel={_(msg`Search`)}
|
||||
accessibilityHint=""
|
||||
bold={isActive}
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
SearchMenuItem = React.memo(SearchMenuItem)
|
||||
|
||||
let HomeMenuItem = ({
|
||||
isActive,
|
||||
onPress,
|
||||
}: {
|
||||
isActive: boolean
|
||||
onPress: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={
|
||||
isActive ? (
|
||||
<HomeIconSolid
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="24"
|
||||
strokeWidth={3.25}
|
||||
/>
|
||||
) : (
|
||||
<HomeIcon
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="24"
|
||||
strokeWidth={3.25}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={_(msg`Home`)}
|
||||
accessibilityLabel={_(msg`Home`)}
|
||||
accessibilityHint=""
|
||||
bold={isActive}
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
HomeMenuItem = React.memo(HomeMenuItem)
|
||||
|
||||
let NotificationsMenuItem = ({
|
||||
isActive,
|
||||
onPress,
|
||||
}: {
|
||||
isActive: boolean
|
||||
onPress: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
const numUnreadNotifications = useUnreadNotifications()
|
||||
return (
|
||||
<MenuItem
|
||||
icon={
|
||||
isActive ? (
|
||||
<BellIconSolid
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="24"
|
||||
strokeWidth={1.7}
|
||||
/>
|
||||
) : (
|
||||
<BellIcon
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="24"
|
||||
strokeWidth={1.7}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={_(msg`Notifications`)}
|
||||
accessibilityLabel={_(msg`Notifications`)}
|
||||
accessibilityHint={
|
||||
numUnreadNotifications === ''
|
||||
? ''
|
||||
: _(msg`${numUnreadNotifications} unread`)
|
||||
}
|
||||
count={numUnreadNotifications}
|
||||
bold={isActive}
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
NotificationsMenuItem = React.memo(NotificationsMenuItem)
|
||||
|
||||
let FeedsMenuItem = ({
|
||||
isActive,
|
||||
onPress,
|
||||
}: {
|
||||
isActive: boolean
|
||||
onPress: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={
|
||||
isActive ? (
|
||||
<HashtagIcon
|
||||
strokeWidth={3}
|
||||
style={pal.text as FontAwesomeIconStyle}
|
||||
size={24}
|
||||
/>
|
||||
) : (
|
||||
<HashtagIcon
|
||||
strokeWidth={2}
|
||||
style={pal.text as FontAwesomeIconStyle}
|
||||
size={24}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={_(msg`Feeds`)}
|
||||
accessibilityLabel={_(msg`Feeds`)}
|
||||
accessibilityHint=""
|
||||
bold={isActive}
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
FeedsMenuItem = React.memo(FeedsMenuItem)
|
||||
|
||||
let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
|
||||
label={_(msg`Lists`)}
|
||||
accessibilityLabel={_(msg`Lists`)}
|
||||
accessibilityHint=""
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
ListsMenuItem = React.memo(ListsMenuItem)
|
||||
|
||||
let ModerationMenuItem = ({
|
||||
onPress,
|
||||
}: {
|
||||
onPress: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
|
||||
label={_(msg`Moderation`)}
|
||||
accessibilityLabel={_(msg`Moderation`)}
|
||||
accessibilityHint=""
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
ModerationMenuItem = React.memo(ModerationMenuItem)
|
||||
|
||||
let ProfileMenuItem = ({
|
||||
isActive,
|
||||
onPress,
|
||||
}: {
|
||||
isActive: boolean
|
||||
onPress: () => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={
|
||||
isActive ? (
|
||||
<UserIconSolid
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="26"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
) : (
|
||||
<UserIcon
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="26"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={_(msg`Profile`)}
|
||||
accessibilityLabel={_(msg`Profile`)}
|
||||
accessibilityHint=""
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
ProfileMenuItem = React.memo(ProfileMenuItem)
|
||||
|
||||
let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<MenuItem
|
||||
icon={
|
||||
<CogIcon
|
||||
style={pal.text as StyleProp<ViewStyle>}
|
||||
size="26"
|
||||
strokeWidth={1.75}
|
||||
/>
|
||||
}
|
||||
label={_(msg`Settings`)}
|
||||
accessibilityLabel={_(msg`Settings`)}
|
||||
accessibilityHint=""
|
||||
onPress={onPress}
|
||||
/>
|
||||
)
|
||||
}
|
||||
SettingsMenuItem = React.memo(SettingsMenuItem)
|
||||
|
||||
function MenuItem({
|
||||
icon,
|
||||
label,
|
||||
accessibilityLabel,
|
||||
count,
|
||||
bold,
|
||||
onPress,
|
||||
}: MenuItemProps) {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<TouchableOpacity
|
||||
testID={`menuItemButton-${label}`}
|
||||
style={styles.menuItem}
|
||||
onPress={onPress}
|
||||
accessibilityRole="tab"
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityHint="">
|
||||
<View style={[styles.menuItemIconWrapper]}>
|
||||
{icon}
|
||||
{count ? (
|
||||
<View
|
||||
style={[
|
||||
styles.menuItemCount,
|
||||
count.length > 2
|
||||
? styles.menuItemCountHundreds
|
||||
: count.length > 1
|
||||
? styles.menuItemCountTens
|
||||
: undefined,
|
||||
]}>
|
||||
<Text style={styles.menuItemCountLabel} numberOfLines={1}>
|
||||
{count}
|
||||
</Text>
|
||||
</View>
|
||||
) : undefined}
|
||||
</View>
|
||||
<Text
|
||||
type={bold ? '2xl-bold' : '2xl'}
|
||||
style={[pal.text, s.flex1]}
|
||||
numberOfLines={1}>
|
||||
{label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
view: {
|
||||
flex: 1,
|
||||
paddingBottom: 50,
|
||||
maxWidth: 300,
|
||||
},
|
||||
viewDarkMode: {
|
||||
backgroundColor: '#1B1919',
|
||||
},
|
||||
main: {
|
||||
paddingLeft: 20,
|
||||
paddingTop: 20,
|
||||
},
|
||||
smallSpacer: {
|
||||
height: 20,
|
||||
},
|
||||
|
||||
profileCardDisplayName: {
|
||||
marginTop: 20,
|
||||
paddingRight: 30,
|
||||
},
|
||||
profileCardHandle: {
|
||||
marginTop: 4,
|
||||
paddingRight: 30,
|
||||
},
|
||||
profileCardFollowers: {
|
||||
marginTop: 16,
|
||||
paddingRight: 10,
|
||||
},
|
||||
|
||||
menuItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 16,
|
||||
paddingRight: 10,
|
||||
},
|
||||
menuItemIconWrapper: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
menuItemCount: {
|
||||
position: 'absolute',
|
||||
width: 'auto',
|
||||
right: -6,
|
||||
top: -4,
|
||||
backgroundColor: colors.blue3,
|
||||
paddingHorizontal: 4,
|
||||
paddingBottom: 1,
|
||||
borderRadius: 6,
|
||||
},
|
||||
menuItemCountTens: {
|
||||
width: 25,
|
||||
},
|
||||
menuItemCountHundreds: {
|
||||
right: -12,
|
||||
width: 34,
|
||||
},
|
||||
menuItemCountLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
fontVariant: ['tabular-nums'],
|
||||
color: colors.white,
|
||||
},
|
||||
|
||||
inviteCodes: {
|
||||
paddingLeft: 0,
|
||||
paddingVertical: 8,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
inviteCodesIcon: {
|
||||
marginRight: 6,
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
},
|
||||
|
||||
footer: {
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
paddingRight: 20,
|
||||
paddingTop: 20,
|
||||
paddingLeft: 20,
|
||||
},
|
||||
footerBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 10,
|
||||
borderRadius: 25,
|
||||
},
|
||||
footerBtnFeedback: {
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
footerBtnFeedbackLight: {
|
||||
backgroundColor: '#DDEFFF',
|
||||
},
|
||||
footerBtnFeedbackDark: {
|
||||
backgroundColor: colors.blue6,
|
||||
},
|
||||
})
|
||||
@@ -6,23 +6,15 @@ import {
|
||||
useWindowDimensions,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {Drawer} from 'react-native-drawer-layout'
|
||||
import Animated from 'react-native-reanimated'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import * as NavigationBar from 'expo-navigation-bar'
|
||||
import {StatusBar} from 'expo-status-bar'
|
||||
import {useNavigationState} from '@react-navigation/native'
|
||||
|
||||
import {useSession} from '#/state/session'
|
||||
import {
|
||||
useIsDrawerOpen,
|
||||
useIsDrawerSwipeDisabled,
|
||||
useSetDrawerOpen,
|
||||
} from '#/state/shell'
|
||||
import {useCloseAnyActiveElement} from '#/state/util'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import * as notifications from 'lib/notifications/notifications'
|
||||
import {isStateAtTabRoot} from 'lib/routes/helpers'
|
||||
import {useTheme} from 'lib/ThemeContext'
|
||||
import {isAndroid} from 'platform/detection'
|
||||
import {useDialogStateContext} from 'state/dialogs'
|
||||
@@ -34,29 +26,15 @@ import {SigninDialog} from '#/components/dialogs/Signin'
|
||||
import {Outlet as PortalOutlet} from '#/components/Portal'
|
||||
import {RoutesContainer, TabsNavigator} from '../../Navigation'
|
||||
import {Composer} from './Composer'
|
||||
import {DrawerContent} from './Drawer'
|
||||
|
||||
function ShellInner() {
|
||||
const isDrawerOpen = useIsDrawerOpen()
|
||||
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
|
||||
const setIsDrawerOpen = useSetDrawerOpen()
|
||||
const winDim = useWindowDimensions()
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
const containerPadding = React.useMemo(
|
||||
() => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}),
|
||||
[safeAreaInsets],
|
||||
)
|
||||
const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
|
||||
const onOpenDrawer = React.useCallback(
|
||||
() => setIsDrawerOpen(true),
|
||||
[setIsDrawerOpen],
|
||||
)
|
||||
const onCloseDrawer = React.useCallback(
|
||||
() => setIsDrawerOpen(false),
|
||||
[setIsDrawerOpen],
|
||||
)
|
||||
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
|
||||
const {hasSession, currentAccount} = useSession()
|
||||
const {currentAccount} = useSession()
|
||||
const closeAnyActiveElement = useCloseAnyActiveElement()
|
||||
const {importantForAccessibility} = useDialogStateContext()
|
||||
// start undefined
|
||||
@@ -90,15 +68,7 @@ function ShellInner() {
|
||||
style={containerPadding}
|
||||
importantForAccessibility={importantForAccessibility}>
|
||||
<ErrorBoundary>
|
||||
<Drawer
|
||||
renderDrawerContent={renderDrawerContent}
|
||||
open={isDrawerOpen}
|
||||
onOpen={onOpenDrawer}
|
||||
onClose={onCloseDrawer}
|
||||
swipeEdgeWidth={winDim.width / 2}
|
||||
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
|
||||
<TabsNavigator />
|
||||
</Drawer>
|
||||
<TabsNavigator />
|
||||
</ErrorBoundary>
|
||||
</Animated.View>
|
||||
<Composer winHeight={winDim.height} />
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
import React, {useEffect} from 'react'
|
||||
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
|
||||
import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
|
||||
import {useCloseAllActiveElements} from '#/state/util'
|
||||
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
@@ -13,23 +9,15 @@ import {colors, s} from 'lib/styles'
|
||||
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
|
||||
import {SigninDialog} from '#/components/dialogs/Signin'
|
||||
import {Outlet as PortalOutlet} from '#/components/Portal'
|
||||
import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
|
||||
import {FlatNavigator, RoutesContainer} from '../../Navigation'
|
||||
import {Lightbox} from '../com/lightbox/Lightbox'
|
||||
import {ModalsContainer} from '../com/modals/Modal'
|
||||
import {ErrorBoundary} from '../com/util/ErrorBoundary'
|
||||
import {Composer} from './Composer.web'
|
||||
import {DrawerContent} from './Drawer'
|
||||
|
||||
function ShellInner() {
|
||||
const isDrawerOpen = useIsDrawerOpen()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const {isDesktop} = useWebMediaQueries()
|
||||
const navigator = useNavigation<NavigationProp>()
|
||||
const closeAllActiveElements = useCloseAllActiveElements()
|
||||
const {_} = useLingui()
|
||||
|
||||
useWebBodyScrollLock(isDrawerOpen)
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = navigator.addListener('state', () => {
|
||||
@@ -49,24 +37,6 @@ function ShellInner() {
|
||||
<SigninDialog />
|
||||
<Lightbox />
|
||||
<PortalOutlet />
|
||||
|
||||
{!isDesktop && isDrawerOpen && (
|
||||
<TouchableWithoutFeedback
|
||||
onPress={ev => {
|
||||
// Only close if press happens outside of the drawer
|
||||
if (ev.target === ev.currentTarget) {
|
||||
setDrawerOpen(false)
|
||||
}
|
||||
}}
|
||||
accessibilityLabel={_(msg`Close navigation footer`)}
|
||||
accessibilityHint={_(msg`Closes bottom navigation bar`)}>
|
||||
<View style={styles.drawerMask}>
|
||||
<View style={styles.drawerContainer}>
|
||||
<DrawerContent />
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -89,21 +59,4 @@ const styles = StyleSheet.create({
|
||||
bgDark: {
|
||||
backgroundColor: colors.black, // TODO
|
||||
},
|
||||
drawerMask: {
|
||||
// @ts-ignore web only
|
||||
position: 'fixed',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.25)',
|
||||
},
|
||||
drawerContainer: {
|
||||
display: 'flex',
|
||||
// @ts-ignore web only
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user