mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {observer} from 'mobx-react-lite'
3import {
4 StyleProp,
5 StyleSheet,
6 TouchableOpacity,
7 View,
8 ViewStyle,
9} from 'react-native'
10import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
11import {useNavigation} from '@react-navigation/native'
12import {CenteredView} from './Views'
13import {useStores} from 'state/index'
14import {usePalette} from 'lib/hooks/usePalette'
15import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
16import {useAnalytics} from 'lib/analytics/analytics'
17import {NavigationProp} from 'lib/routes/types'
18
19const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
20
21export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
22 showBackButton = true,
23 style,
24 children,
25}: React.PropsWithChildren<{
26 showBackButton?: boolean
27 style?: StyleProp<ViewStyle>
28}>) {
29 const pal = usePalette('default')
30 const store = useStores()
31 const navigation = useNavigation<NavigationProp>()
32 const {track} = useAnalytics()
33 const {isMobile} = useWebMediaQueries()
34 const canGoBack = navigation.canGoBack()
35
36 const onPressBack = React.useCallback(() => {
37 if (navigation.canGoBack()) {
38 navigation.goBack()
39 } else {
40 navigation.navigate('Home')
41 }
42 }, [navigation])
43
44 const onPressMenu = React.useCallback(() => {
45 track('ViewHeader:MenuButtonClicked')
46 store.shell.openDrawer()
47 }, [track, store])
48
49 const Container = isMobile ? View : CenteredView
50 return (
51 <Container style={[styles.header, isMobile && styles.headerMobile, style]}>
52 {showBackButton ? (
53 <TouchableOpacity
54 testID="viewHeaderDrawerBtn"
55 onPress={canGoBack ? onPressBack : onPressMenu}
56 hitSlop={BACK_HITSLOP}
57 style={canGoBack ? styles.backBtn : styles.backBtnWide}
58 accessibilityRole="button"
59 accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
60 accessibilityHint="">
61 {canGoBack ? (
62 <FontAwesomeIcon
63 size={18}
64 icon="angle-left"
65 style={[styles.backIcon, pal.text]}
66 />
67 ) : (
68 <FontAwesomeIcon
69 size={18}
70 icon="bars"
71 style={[styles.backIcon, pal.textLight]}
72 />
73 )}
74 </TouchableOpacity>
75 ) : null}
76 {children}
77 </Container>
78 )
79})
80
81const styles = StyleSheet.create({
82 header: {
83 flexDirection: 'row',
84 alignItems: 'center',
85 paddingHorizontal: 18,
86 paddingVertical: 12,
87 width: '100%',
88 },
89 headerMobile: {
90 paddingHorizontal: 12,
91 paddingVertical: 10,
92 },
93 backBtn: {
94 width: 30,
95 height: 30,
96 },
97 backBtnWide: {
98 width: 30,
99 height: 30,
100 paddingHorizontal: 6,
101 },
102 backIcon: {
103 marginTop: 6,
104 },
105})