mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {
3 StyleProp,
4 StyleSheet,
5 TouchableOpacity,
6 View,
7 ViewStyle,
8} from 'react-native'
9import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10import {useNavigation} from '@react-navigation/native'
11import {CenteredView} from './Views'
12import {usePalette} from 'lib/hooks/usePalette'
13import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
14import {useAnalytics} from 'lib/analytics/analytics'
15import {NavigationProp} from 'lib/routes/types'
16import {useSetDrawerOpen} from '#/state/shell'
17import {isWeb} from '#/platform/detection'
18
19const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
20
21export function SimpleViewHeader({
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 setDrawerOpen = useSetDrawerOpen()
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 setDrawerOpen(true)
47 }, [track, setDrawerOpen])
48
49 const Container = isMobile ? View : CenteredView
50 return (
51 <Container
52 style={[
53 styles.header,
54 isMobile && styles.headerMobile,
55 isWeb && styles.headerWeb,
56 pal.view,
57 style,
58 ]}>
59 {showBackButton ? (
60 <TouchableOpacity
61 testID="viewHeaderDrawerBtn"
62 onPress={canGoBack ? onPressBack : onPressMenu}
63 hitSlop={BACK_HITSLOP}
64 style={canGoBack ? styles.backBtn : styles.backBtnWide}
65 accessibilityRole="button"
66 accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
67 accessibilityHint="">
68 {canGoBack ? (
69 <FontAwesomeIcon
70 size={18}
71 icon="angle-left"
72 style={[styles.backIcon, pal.text]}
73 />
74 ) : (
75 <FontAwesomeIcon
76 size={18}
77 icon="bars"
78 style={[styles.backIcon, pal.textLight]}
79 />
80 )}
81 </TouchableOpacity>
82 ) : null}
83 {children}
84 </Container>
85 )
86}
87
88const styles = StyleSheet.create({
89 header: {
90 flexDirection: 'row',
91 alignItems: 'center',
92 paddingHorizontal: 18,
93 paddingVertical: 12,
94 width: '100%',
95 },
96 headerMobile: {
97 paddingHorizontal: 12,
98 paddingVertical: 10,
99 },
100 headerWeb: {
101 // @ts-ignore web-only
102 position: 'sticky',
103 top: 0,
104 zIndex: 1,
105 },
106 backBtn: {
107 width: 30,
108 height: 30,
109 },
110 backBtnWide: {
111 width: 30,
112 height: 30,
113 paddingHorizontal: 6,
114 },
115 backIcon: {
116 marginTop: 6,
117 },
118})