Paul Frazee
54faa7e176
* Update login page to use service query * Update modal to use session instead of store * Move image sizes cache off store * Update settings to no longer use store * Update link-meta fetch to use agent instead of rootstore * Remove deprecated resolveName() * Delete deprecated link-metas cache * Delete deprecated posts cache * Delete all remaining mobx models, including the root store * Strip out unused mobx observer wrappers
105 lines
2.7 KiB
TypeScript
105 lines
2.7 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
StyleProp,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
ViewStyle,
|
|
} from 'react-native'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {useNavigation} from '@react-navigation/native'
|
|
import {CenteredView} from './Views'
|
|
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'
|
|
|
|
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
|
|
|
|
export function SimpleViewHeader({
|
|
showBackButton = true,
|
|
style,
|
|
children,
|
|
}: React.PropsWithChildren<{
|
|
showBackButton?: boolean
|
|
style?: StyleProp<ViewStyle>
|
|
}>) {
|
|
const pal = usePalette('default')
|
|
const setDrawerOpen = useSetDrawerOpen()
|
|
const navigation = useNavigation<NavigationProp>()
|
|
const {track} = useAnalytics()
|
|
const {isMobile} = useWebMediaQueries()
|
|
const canGoBack = navigation.canGoBack()
|
|
|
|
const onPressBack = React.useCallback(() => {
|
|
if (navigation.canGoBack()) {
|
|
navigation.goBack()
|
|
} else {
|
|
navigation.navigate('Home')
|
|
}
|
|
}, [navigation])
|
|
|
|
const onPressMenu = React.useCallback(() => {
|
|
track('ViewHeader:MenuButtonClicked')
|
|
setDrawerOpen(true)
|
|
}, [track, setDrawerOpen])
|
|
|
|
const Container = isMobile ? View : CenteredView
|
|
return (
|
|
<Container style={[styles.header, isMobile && styles.headerMobile, style]}>
|
|
{showBackButton ? (
|
|
<TouchableOpacity
|
|
testID="viewHeaderDrawerBtn"
|
|
onPress={canGoBack ? onPressBack : onPressMenu}
|
|
hitSlop={BACK_HITSLOP}
|
|
style={canGoBack ? styles.backBtn : styles.backBtnWide}
|
|
accessibilityRole="button"
|
|
accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
|
|
accessibilityHint="">
|
|
{canGoBack ? (
|
|
<FontAwesomeIcon
|
|
size={18}
|
|
icon="angle-left"
|
|
style={[styles.backIcon, pal.text]}
|
|
/>
|
|
) : (
|
|
<FontAwesomeIcon
|
|
size={18}
|
|
icon="bars"
|
|
style={[styles.backIcon, pal.textLight]}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
) : null}
|
|
{children}
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 18,
|
|
paddingVertical: 12,
|
|
width: '100%',
|
|
},
|
|
headerMobile: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
},
|
|
backBtn: {
|
|
width: 30,
|
|
height: 30,
|
|
},
|
|
backBtnWide: {
|
|
width: 30,
|
|
height: 30,
|
|
paddingHorizontal: 6,
|
|
},
|
|
backIcon: {
|
|
marginTop: 6,
|
|
},
|
|
})
|