forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add web version of the header
+150
+150
src/view/com/util/ViewHeader.web.tsx
+150
src/view/com/util/ViewHeader.web.tsx
···
1
+
import React from 'react'
2
+
import {observer} from 'mobx-react-lite'
3
+
import {
4
+
ActivityIndicator,
5
+
StyleSheet,
6
+
TouchableOpacity,
7
+
View,
8
+
} from 'react-native'
9
+
import {
10
+
FontAwesomeIcon,
11
+
FontAwesomeIconStyle,
12
+
} from '@fortawesome/react-native-fontawesome'
13
+
import {CenteredView} from './Views'
14
+
import {Text} from './text/Text'
15
+
import {useStores} from '../../../state'
16
+
import {usePalette} from '../../lib/hooks/usePalette'
17
+
import {colors} from '../../lib/styles'
18
+
19
+
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
20
+
21
+
export const ViewHeader = observer(function ViewHeader({
22
+
title,
23
+
subtitle,
24
+
canGoBack,
25
+
}: {
26
+
title: string
27
+
subtitle?: string
28
+
canGoBack?: boolean
29
+
}) {
30
+
const pal = usePalette('default')
31
+
const store = useStores()
32
+
const onPressBack = () => {
33
+
store.nav.tab.goBack()
34
+
}
35
+
const onPressReconnect = () => {
36
+
store.session.connect().catch(e => {
37
+
store.log.warn('Failed to reconnect to server', e)
38
+
})
39
+
}
40
+
if (typeof canGoBack === 'undefined') {
41
+
canGoBack = store.nav.tab.canGoBack
42
+
}
43
+
return (
44
+
<CenteredView style={[styles.header, pal.view]}>
45
+
{canGoBack ? (
46
+
<>
47
+
<TouchableOpacity
48
+
testID="viewHeaderBackOrMenuBtn"
49
+
onPress={onPressBack}
50
+
hitSlop={BACK_HITSLOP}
51
+
style={styles.backBtn}>
52
+
<FontAwesomeIcon
53
+
size={18}
54
+
icon="angle-left"
55
+
style={[styles.backIcon, pal.text]}
56
+
/>
57
+
</TouchableOpacity>
58
+
<View style={styles.titleContainer} pointerEvents="none">
59
+
<Text type="title" style={[pal.text, styles.title]}>
60
+
{title}
61
+
</Text>
62
+
{subtitle ? (
63
+
<Text
64
+
type="title-sm"
65
+
style={[styles.subtitle, pal.textLight]}
66
+
numberOfLines={1}>
67
+
{subtitle}
68
+
</Text>
69
+
) : undefined}
70
+
</View>
71
+
</>
72
+
) : (
73
+
<View style={styles.titleContainer} pointerEvents="none">
74
+
<Text type="title" style={[pal.text, styles.title]}>
75
+
Home
76
+
</Text>
77
+
</View>
78
+
)}
79
+
{!store.session.online ? (
80
+
<TouchableOpacity style={styles.btn} onPress={onPressReconnect}>
81
+
{store.session.attemptingConnect ? (
82
+
<ActivityIndicator />
83
+
) : (
84
+
<>
85
+
<FontAwesomeIcon
86
+
icon="signal"
87
+
style={pal.text as FontAwesomeIconStyle}
88
+
size={16}
89
+
/>
90
+
<FontAwesomeIcon
91
+
icon="x"
92
+
style={[
93
+
styles.littleXIcon,
94
+
{backgroundColor: pal.colors.background},
95
+
]}
96
+
size={8}
97
+
/>
98
+
</>
99
+
)}
100
+
</TouchableOpacity>
101
+
) : undefined}
102
+
</CenteredView>
103
+
)
104
+
})
105
+
106
+
const styles = StyleSheet.create({
107
+
header: {
108
+
flexDirection: 'row',
109
+
alignItems: 'center',
110
+
paddingHorizontal: 16,
111
+
paddingVertical: 12,
112
+
},
113
+
114
+
titleContainer: {
115
+
flexDirection: 'row',
116
+
alignItems: 'baseline',
117
+
marginRight: 'auto',
118
+
},
119
+
title: {
120
+
fontWeight: 'bold',
121
+
},
122
+
subtitle: {
123
+
marginLeft: 4,
124
+
maxWidth: 200,
125
+
fontWeight: 'normal',
126
+
},
127
+
128
+
backBtn: {
129
+
width: 30,
130
+
},
131
+
backIcon: {
132
+
position: 'relative',
133
+
top: -1,
134
+
},
135
+
btn: {
136
+
flexDirection: 'row',
137
+
alignItems: 'center',
138
+
justifyContent: 'center',
139
+
width: 36,
140
+
height: 36,
141
+
borderRadius: 20,
142
+
marginLeft: 4,
143
+
},
144
+
littleXIcon: {
145
+
color: colors.red3,
146
+
position: 'absolute',
147
+
right: 7,
148
+
bottom: 7,
149
+
},
150
+
})