dan
cd811114ef
* Remove tab bar autoscroll This will be replaced by a different mechanism. * Track pager drag gesture in a worklet * Track pager state change in a worklet * Track offset relative to current page * Sync scroll to swipe * Extract TabBarItem * Sync scroll to swipe properly * Implement all interactions * Clarify more hacks * Simplify the implementation I was trying to be too smart and this was causing the current page event to lag behind if you continuously drag. Better to let the library do its job. * Interpolate the indicator * Fix an infinite swipe loop * Add TODO * Animate header color * Respect initial page * Keep layouts in a shared value * Fix profile and types * Fast path for initial styles * Scroll to initial * Factor out a helper * Fix positioning * Scroll into view on tap if needed * Divide free space proportionally * Scroll into view more aggressively * Fix corner case * Ignore spurious event on iOS * Simplify the condition Due to RN onLayout event ordering, we know that by now we'll have container and content sizes already. * Change boolean state to enum * Better syncing heuristic * Rm extra return
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import {useNavigation} from '@react-navigation/native'
|
|
|
|
import {NavigationProp} from '#/lib/routes/types'
|
|
import {FeedSourceInfo} from '#/state/queries/feed'
|
|
import {useSession} from '#/state/session'
|
|
import {RenderTabBarFnProps} from '#/view/com/pager/Pager'
|
|
import {TabBar} from '../pager/TabBar'
|
|
import {HomeHeaderLayout} from './HomeHeaderLayout'
|
|
|
|
export function HomeHeader(
|
|
props: RenderTabBarFnProps & {
|
|
testID?: string
|
|
onPressSelected: () => void
|
|
feeds: FeedSourceInfo[]
|
|
},
|
|
) {
|
|
const {feeds} = props
|
|
const {hasSession} = useSession()
|
|
const navigation = useNavigation<NavigationProp>()
|
|
|
|
const hasPinnedCustom = React.useMemo<boolean>(() => {
|
|
if (!hasSession) return false
|
|
return feeds.some(tab => {
|
|
const isFollowing = tab.uri === 'following'
|
|
return !isFollowing
|
|
})
|
|
}, [feeds, hasSession])
|
|
|
|
const items = React.useMemo(() => {
|
|
const pinnedNames = feeds.map(f => f.displayName)
|
|
if (!hasPinnedCustom) {
|
|
return pinnedNames.concat('Feeds ✨')
|
|
}
|
|
return pinnedNames
|
|
}, [hasPinnedCustom, feeds])
|
|
|
|
const onPressFeedsLink = React.useCallback(() => {
|
|
navigation.navigate('Feeds')
|
|
}, [navigation])
|
|
|
|
const onSelect = React.useCallback(
|
|
(index: number) => {
|
|
if (!hasPinnedCustom && index === items.length - 1) {
|
|
onPressFeedsLink()
|
|
} else if (props.onSelect) {
|
|
props.onSelect(index)
|
|
}
|
|
},
|
|
[items.length, onPressFeedsLink, props, hasPinnedCustom],
|
|
)
|
|
|
|
return (
|
|
<HomeHeaderLayout tabBarAnchor={props.tabBarAnchor}>
|
|
<TabBar
|
|
key={items.join(',')}
|
|
onPressSelected={props.onPressSelected}
|
|
selectedPage={props.selectedPage}
|
|
onSelect={onSelect}
|
|
testID={props.testID}
|
|
items={items}
|
|
dragProgress={props.dragProgress}
|
|
dragState={props.dragState}
|
|
/>
|
|
</HomeHeaderLayout>
|
|
)
|
|
}
|