Oleksii Bulenok
127 lines
4.0 KiB
TypeScript
127 lines
4.0 KiB
TypeScript
import {View} from 'react-native'
|
|
import Animated from 'react-native-reanimated'
|
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {useNavigation} from '@react-navigation/native'
|
|
|
|
import {HITSLOP_10} from '#/lib/constants'
|
|
import {PressableScale} from '#/lib/custom-animations/PressableScale'
|
|
import {useHaptics} from '#/lib/haptics'
|
|
import {type NavigationProp} from '#/lib/routes/types'
|
|
import {emitSoftReset} from '#/state/events'
|
|
import {useSession} from '#/state/session'
|
|
import {useShellLayout} from '#/state/shell/shell-layout'
|
|
import {useHomeHeaderTransform} from '#/view/com/util/MainScrollProvider'
|
|
import {Logo} from '#/view/icons/Logo'
|
|
import {useLogoVariant} from '#/view/icons/useLogoVariant'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {ButtonIcon} from '#/components/Button'
|
|
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Link} from '#/components/Link'
|
|
import {Text} from '#/components/Typography'
|
|
import {useAnalytics} from '#/analytics'
|
|
import {IS_DEV, IS_LIQUID_GLASS} from '#/env'
|
|
|
|
export function HomeHeaderLayoutMobile({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
tabBarAnchor: React.ReactElement | null | undefined
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const ax = useAnalytics()
|
|
const {headerHeight} = useShellLayout()
|
|
const insets = useSafeAreaInsets()
|
|
const headerMinimalShellTransform = useHomeHeaderTransform()
|
|
const {hasSession} = useSession()
|
|
const playHaptic = useHaptics()
|
|
const {navigate} = useNavigation<NavigationProp>()
|
|
const logoVariant = useLogoVariant()
|
|
|
|
return (
|
|
<Animated.View
|
|
style={[
|
|
a.fixed,
|
|
a.z_10,
|
|
t.atoms.bg,
|
|
{
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
IS_LIQUID_GLASS && {paddingTop: insets.top},
|
|
headerMinimalShellTransform,
|
|
]}
|
|
onLayout={e => {
|
|
headerHeight.set(e.nativeEvent.layout.height)
|
|
}}>
|
|
<Layout.Header.Outer noBottomBorder>
|
|
<Layout.Header.Slot>
|
|
<Layout.Header.MenuButton />
|
|
</Layout.Header.Slot>
|
|
|
|
<View style={[a.flex_1, a.align_center]}>
|
|
<PressableScale
|
|
targetScale={0.9}
|
|
onPress={() => {
|
|
if (IS_DEV) {
|
|
navigate('Debug')
|
|
} else {
|
|
playHaptic('Light')
|
|
emitSoftReset()
|
|
}
|
|
}}>
|
|
<Logo width={logoVariant === 'japan' ? 34 : 30} />
|
|
</PressableScale>
|
|
|
|
{/* TODO: Remove this before merging */}
|
|
<View
|
|
pointerEvents="none"
|
|
style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
|
<View
|
|
style={[
|
|
a.px_xs,
|
|
a.py_2xs,
|
|
a.rounded_full,
|
|
{backgroundColor: t.palette.black},
|
|
]}>
|
|
<Text style={[a.text_xs, a.font_bold, {color: t.palette.white}]}>
|
|
Expo 57
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
{/* TODO: Remove this before merging */}
|
|
</View>
|
|
|
|
<Layout.Header.Slot>
|
|
{hasSession && (
|
|
<Link
|
|
testID="viewHeaderHomeFeedPrefsBtn"
|
|
to={{screen: 'Feeds'}}
|
|
hitSlop={HITSLOP_10}
|
|
label={_(msg`View your feeds and explore more`)}
|
|
size="small"
|
|
variant="ghost"
|
|
color="secondary"
|
|
shape="square"
|
|
onPress={() => {
|
|
ax.metric('nav:click', {item: 'feeds', surface: 'topBar'})
|
|
}}
|
|
style={[
|
|
a.justify_center,
|
|
{marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET},
|
|
a.bg_transparent,
|
|
]}>
|
|
<ButtonIcon icon={FeedsIcon} size="lg" />
|
|
</Link>
|
|
)}
|
|
</Layout.Header.Slot>
|
|
</Layout.Header.Outer>
|
|
{children}
|
|
</Animated.View>
|
|
)
|
|
}
|