Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119import 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'import {isWeb} from '#/platform/detection'
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, isWeb && styles.headerWeb, pal.view, 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, }, headerWeb: { // @ts-ignore web-only position: 'sticky', top: 0, zIndex: 1, }, backBtn: { width: 30, height: 30, }, backBtnWide: { width: 30, height: 30, paddingHorizontal: 6, }, backIcon: { marginTop: 6, },})