acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge remote-tracking branch 'origin/main' into hailey/upgrade-clean

Browse Source
This commit is contained in:
Hailey
2024-12-02 17:39:07 -08:00
parent f7d0c6980c 84f4afd3d7
commit 698be92034
12 changed files with 664 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/statsig/events.ts
-6
View File
@@ -80,12 +80,6 @@ export type LogEvents = {
feedUrl: string
feedType: string
index: number
reason:
| 'focus'
| 'tabbar-click'
| 'pager-swipe'
| 'desktop-sidebar-click'
| 'starter-pack-initial-feed'
}
'feed:endReached': {
feedUrl: string
src/view/com/feeds/FeedPage.tsx
+4 -2
View File
@@ -32,6 +32,7 @@ const POLL_FREQ = 60e3 // 60sec
export function FeedPage({
testID,
isPageFocused,
isPageAdjacent,
feed,
feedParams,
renderEmptyState,
@@ -42,6 +43,7 @@ export function FeedPage({
feed: FeedDescriptor
feedParams?: FeedParams
isPageFocused: boolean
isPageAdjacent: boolean
renderEmptyState: () => JSX.Element
renderEndOfFeed?: () => JSX.Element
savedFeedConfig?: AppBskyActorDefs.SavedFeed
@@ -111,11 +113,11 @@ export function FeedPage({
<FeedFeedbackProvider value={feedFeedback}>
<Feed
testID={testID ? `${testID}-feed` : undefined}
enabled={isPageFocused}
enabled={isPageFocused || isPageAdjacent}
feed={feed}
feedParams={feedParams}
pollInterval={POLL_FREQ}
disablePoll={hasNew}
disablePoll={hasNew || !isPageFocused}
scrollElRef={scrollElRef}
onScrolledDownChange={setIsScrolledDown}
onHasNew={setHasNew}
src/view/com/home/HomeHeader.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import React from 'react'
import {useNavigation} from '@react-navigation/native'
import {usePalette} from '#/lib/hooks/usePalette'
import {NavigationProp} from '#/lib/routes/types'
import {FeedSourceInfo} from '#/state/queries/feed'
import {useSession} from '#/state/session'
@@ -19,7 +18,6 @@ export function HomeHeader(
const {feeds} = props
const {hasSession} = useSession()
const navigation = useNavigation<NavigationProp>()
const pal = usePalette('default')
const hasPinnedCustom = React.useMemo<boolean>(() => {
if (!hasSession) return false
@@ -61,7 +59,8 @@ export function HomeHeader(
onSelect={onSelect}
testID={props.testID}
items={items}
indicatorColor={pal.colors.link}
dragProgress={props.dragProgress}
dragState={props.dragState}
/>
</HomeHeaderLayout>
)
src/view/com/pager/Pager.tsx
+98 -83
View File
@@ -1,27 +1,33 @@
import React, {forwardRef} from 'react'
import {View} from 'react-native'
import PagerView, {
PagerViewOnPageScrollEvent,
PagerViewOnPageScrollEventData,
PagerViewOnPageSelectedEvent,
PageScrollStateChangedNativeEvent,
PagerViewOnPageSelectedEventData,
PageScrollStateChangedNativeEventData,
} from 'react-native-pager-view'
import Animated, {
runOnJS,
SharedValue,
useEvent,
useHandler,
useSharedValue,
} from 'react-native-reanimated'
import {LogEvents} from '#/lib/statsig/events'
import {atoms as a, native} from '#/alf'
export type PageSelectedEvent = PagerViewOnPageSelectedEvent
export interface PagerRef {
setPage: (
index: number,
reason: LogEvents['home:feedDisplayed']['reason'],
) => void
setPage: (index: number) => void
}
export interface RenderTabBarFnProps {
selectedPage: number
onSelect?: (index: number) => void
tabBarAnchor?: JSX.Element | null | undefined // Ignored on native.
dragProgress: SharedValue<number> // Ignored on web.
dragState: SharedValue<'idle' | 'dragging' | 'settling'> // Ignored on web.
}
export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@@ -29,106 +35,82 @@ interface Props {
initialPage?: number
renderTabBar: RenderTabBarFn
onPageSelected?: (index: number) => void
onPageSelecting?: (
index: number,
reason: LogEvents['home:feedDisplayed']['reason'],
) => void
onPageScrollStateChanged?: (
scrollState: 'idle' | 'dragging' | 'settling',
) => void
testID?: string
}
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
function PagerImpl(
{
children,
initialPage = 0,
renderTabBar,
onPageScrollStateChanged,
onPageSelected,
onPageSelecting,
onPageScrollStateChanged: parentOnPageScrollStateChanged,
onPageSelected: parentOnPageSelected,
testID,
}: React.PropsWithChildren<Props>,
ref,
) {
const [selectedPage, setSelectedPage] = React.useState(0)
const lastOffset = React.useRef(0)
const lastDirection = React.useRef(0)
const scrollState = React.useRef('')
const [selectedPage, setSelectedPage] = React.useState(initialPage)
const pagerView = React.useRef<PagerView>(null)
React.useImperativeHandle(ref, () => ({
setPage: (
index: number,
reason: LogEvents['home:feedDisplayed']['reason'],
) => {
setPage: (index: number) => {
pagerView.current?.setPage(index)
onPageSelecting?.(index, reason)
},
}))
const onPageSelectedInner = React.useCallback(
(e: PageSelectedEvent) => {
setSelectedPage(e.nativeEvent.position)
onPageSelected?.(e.nativeEvent.position)
const onPageSelectedJSThread = React.useCallback(
(nextPosition: number) => {
setSelectedPage(nextPosition)
parentOnPageSelected?.(nextPosition)
},
[setSelectedPage, onPageSelected],
)
const onPageScroll = React.useCallback(
(e: PagerViewOnPageScrollEvent) => {
const {position, offset} = e.nativeEvent
if (offset === 0) {
// offset hits 0 in some awkward spots so we ignore it
return
}
// NOTE
// we want to call `onPageSelecting` as soon as the scroll-gesture
// enters the "settling" phase, which means the user has released it
// we can't infer directionality from the scroll information, so we
// track the offset changes. if the offset delta is consistent with
// the existing direction during the settling phase, we can say for
// certain where it's going and can fire
// -prf
if (scrollState.current === 'settling') {
if (lastDirection.current === -1 && offset < lastOffset.current) {
onPageSelecting?.(position, 'pager-swipe')
setSelectedPage(position)
lastDirection.current = 0
} else if (
lastDirection.current === 1 &&
offset > lastOffset.current
) {
onPageSelecting?.(position + 1, 'pager-swipe')
setSelectedPage(position + 1)
lastDirection.current = 0
}
} else {
if (offset < lastOffset.current) {
lastDirection.current = -1
} else if (offset > lastOffset.current) {
lastDirection.current = 1
}
}
lastOffset.current = offset
},
[lastOffset, lastDirection, onPageSelecting],
)
const handlePageScrollStateChanged = React.useCallback(
(e: PageScrollStateChangedNativeEvent) => {
scrollState.current = e.nativeEvent.pageScrollState
onPageScrollStateChanged?.(e.nativeEvent.pageScrollState)
},
[scrollState, onPageScrollStateChanged],
[setSelectedPage, parentOnPageSelected],
)
const onTabBarSelect = React.useCallback(
(index: number) => {
pagerView.current?.setPage(index)
onPageSelecting?.(index, 'tabbar-click')
},
[pagerView, onPageSelecting],
[pagerView],
)
const dragState = useSharedValue<'idle' | 'settling' | 'dragging'>('idle')
const dragProgress = useSharedValue(selectedPage)
const didInit = useSharedValue(false)
const handlePageScroll = usePagerHandlers(
{
onPageScroll(e: PagerViewOnPageScrollEventData) {
'worklet'
if (didInit.get() === false) {
// On iOS, there's a spurious scroll event with 0 position
// even if a different page was supplied as the initial page.
// Ignore it and wait for the first confirmed selection instead.
return
}
dragProgress.set(e.offset + e.position)
},
onPageScrollStateChanged(e: PageScrollStateChangedNativeEventData) {
'worklet'
if (dragState.get() === 'idle' && e.pageScrollState === 'settling') {
// This is a programmatic scroll on Android.
// Stay "idle" to match iOS and avoid confusing downstream code.
return
}
dragState.set(e.pageScrollState)
parentOnPageScrollStateChanged?.(e.pageScrollState)
},
onPageSelected(e: PagerViewOnPageSelectedEventData) {
'worklet'
didInit.set(true)
runOnJS(onPageSelectedJSThread)(e.position)
},
},
[parentOnPageScrollStateChanged],
)
return (
@@ -136,17 +118,50 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
{renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
dragProgress,
dragState,
})}
<PagerView
<AnimatedPagerView
ref={pagerView}
style={[a.flex_1]}
initialPage={initialPage}
onPageScrollStateChanged={handlePageScrollStateChanged}
onPageSelected={onPageSelectedInner}
onPageScroll={onPageScroll}>
onPageScroll={handlePageScroll}>
{children}
</PagerView>
</AnimatedPagerView>
</View>
)
},
)
function usePagerHandlers(
handlers: {
onPageScroll: (e: PagerViewOnPageScrollEventData) => void
onPageScrollStateChanged: (e: PageScrollStateChangedNativeEventData) => void
onPageSelected: (e: PagerViewOnPageSelectedEventData) => void
},
dependencies: unknown[],
) {
const {doDependenciesDiffer} = useHandler(handlers as any, dependencies)
const subscribeForEvents = [
'onPageScroll',
'onPageScrollStateChanged',
'onPageSelected',
]
return useEvent(
event => {
'worklet'
const {onPageScroll, onPageScrollStateChanged, onPageSelected} = handlers
if (event.eventName.endsWith('onPageScroll')) {
onPageScroll(event as any as PagerViewOnPageScrollEventData)
} else if (event.eventName.endsWith('onPageScrollStateChanged')) {
onPageScrollStateChanged(
event as any as PageScrollStateChangedNativeEventData,
)
} else if (event.eventName.endsWith('onPageSelected')) {
onPageSelected(event as any as PagerViewOnPageSelectedEventData)
}
},
subscribeForEvents,
doDependenciesDiffer,
)
}
src/view/com/pager/Pager.web.tsx
+5 -15
View File
@@ -2,7 +2,6 @@ import React from 'react'
import {View} from 'react-native'
import {flushSync} from 'react-dom'
import {LogEvents} from '#/lib/statsig/events'
import {s} from '#/lib/styles'
export interface RenderTabBarFnProps {
@@ -16,10 +15,6 @@ interface Props {
initialPage?: number
renderTabBar: RenderTabBarFn
onPageSelected?: (index: number) => void
onPageSelecting?: (
index: number,
reason: LogEvents['home:feedDisplayed']['reason'],
) => void
}
export const Pager = React.forwardRef(function PagerImpl(
{
@@ -27,7 +22,6 @@ export const Pager = React.forwardRef(function PagerImpl(
initialPage = 0,
renderTabBar,
onPageSelected,
onPageSelecting,
}: React.PropsWithChildren<Props>,
ref,
) {
@@ -36,16 +30,13 @@ export const Pager = React.forwardRef(function PagerImpl(
const anchorRef = React.useRef(null)
React.useImperativeHandle(ref, () => ({
setPage: (
index: number,
reason: LogEvents['home:feedDisplayed']['reason'],
) => {
onTabBarSelect(index, reason)
setPage: (index: number) => {
onTabBarSelect(index)
},
}))
const onTabBarSelect = React.useCallback(
(index: number, reason: LogEvents['home:feedDisplayed']['reason']) => {
(index: number) => {
const scrollY = window.scrollY
// We want to determine if the tabbar is already "sticking" at the top (in which
// case we should preserve and restore scroll), or if it is somewhere below in the
@@ -64,7 +55,6 @@ export const Pager = React.forwardRef(function PagerImpl(
flushSync(() => {
setSelectedPage(index)
onPageSelected?.(index)
onPageSelecting?.(index, reason)
})
if (isSticking) {
const restoredScrollY = scrollYs.current[index]
@@ -75,7 +65,7 @@ export const Pager = React.forwardRef(function PagerImpl(
}
}
},
[selectedPage, setSelectedPage, onPageSelected, onPageSelecting],
[selectedPage, setSelectedPage, onPageSelected],
)
return (
@@ -83,7 +73,7 @@ export const Pager = React.forwardRef(function PagerImpl(
{renderTabBar({
selectedPage,
tabBarAnchor: <View ref={anchorRef} />,
onSelect: e => onTabBarSelect(e, 'tabbar-click'),
onSelect: e => onTabBarSelect(e),
})}
{React.Children.map(children, (child, i) => (
<View style={selectedPage === i ? s.flex1 : s.hidden} key={`page-${i}`}>
src/view/com/pager/PagerWithHeader.tsx
+8 -5
View File
@@ -97,6 +97,8 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
scrollY={scrollY}
testID={testID}
allowHeaderOverScroll={allowHeaderOverScroll}
dragProgress={props.dragProgress}
dragState={props.dragState}
/>
</PagerHeaderProvider>
)
@@ -182,17 +184,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
[onPageSelected, setCurrentPage],
)
const onPageSelecting = React.useCallback((index: number) => {
setCurrentPage(index)
}, [])
return (
<Pager
ref={ref}
testID={testID}
initialPage={initialPage}
onPageSelected={onPageSelectedInner}
onPageSelecting={onPageSelecting}
renderTabBar={renderTabBar}>
{toArray(children)
.filter(Boolean)
@@ -231,6 +228,8 @@ let PagerTabBar = ({
onCurrentPageSelected,
onSelect,
allowHeaderOverScroll,
dragProgress,
dragState,
}: {
currentPage: number
headerOnlyHeight: number
@@ -244,6 +243,8 @@ let PagerTabBar = ({
onCurrentPageSelected?: (index: number) => void
onSelect?: (index: number) => void
allowHeaderOverScroll?: boolean
dragProgress: SharedValue<number>
dragState: SharedValue<'idle' | 'dragging' | 'settling'>
}): React.ReactNode => {
const headerTransform = useAnimatedStyle(() => {
const translateY = Math.min(scrollY.get(), headerOnlyHeight) * -1
@@ -302,6 +303,8 @@ let PagerTabBar = ({
selectedPage={currentPage}
onSelect={onSelect}
onPressSelected={onCurrentPageSelected}
dragProgress={dragProgress}
dragState={dragState}
/>
</View>
</Animated.View>
src/view/com/pager/PagerWithHeader.web.tsx
+2 -5
View File
@@ -75,17 +75,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
[onPageSelected, setCurrentPage],
)
const onPageSelecting = React.useCallback((index: number) => {
setCurrentPage(index)
}, [])
return (
<Pager
ref={ref}
testID={testID}
initialPage={initialPage}
onPageSelected={onPageSelectedInner}
onPageSelecting={onPageSelecting}
renderTabBar={renderTabBar}>
{toArray(children)
.filter(Boolean)
@@ -156,6 +151,8 @@ let PagerTabBar = ({
selectedPage={currentPage}
onSelect={onSelect}
onPressSelected={onCurrentPageSelected}
dragProgress={undefined as any /* native-only */}
dragState={undefined as any /* native-only */}
/>
</View>
</>
src/view/com/pager/TabBar.tsx
+329 -138
View File
@@ -1,120 +1,264 @@
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {useCallback} from 'react'
import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
import Animated, {
interpolate,
runOnJS,
runOnUI,
scrollTo,
SharedValue,
useAnimatedReaction,
useAnimatedRef,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {isNative} from '#/platform/detection'
import {PressableWithHover} from '../util/PressableWithHover'
import {Text} from '../util/text/Text'
import {DraggableScrollView} from './DraggableScrollView'
export interface TabBarProps {
testID?: string
selectedPage: number
items: string[]
indicatorColor?: string
onSelect?: (index: number) => void
onPressSelected?: (index: number) => void
dragProgress: SharedValue<number>
dragState: SharedValue<'idle' | 'dragging' | 'settling'>
}
// How much of the previous/next item we're showing
// to give the user a hint there's more to scroll.
const ITEM_PADDING = 10
const CONTENT_PADDING = 6
// How much of the previous/next item we're requiring
// when deciding whether to scroll into view on tap.
const OFFSCREEN_ITEM_WIDTH = 20
export function TabBar({
testID,
selectedPage,
items,
indicatorColor,
onSelect,
onPressSelected,
dragProgress,
dragState,
}: TabBarProps) {
const pal = usePalette('default')
const scrollElRef = useRef<ScrollView>(null)
const itemRefs = useRef<Array<Element>>([])
const [itemXs, setItemXs] = useState<number[]>([])
const indicatorStyle = useMemo(
() => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal],
const scrollElRef = useAnimatedRef<ScrollView>()
const syncScrollState = useSharedValue<'synced' | 'unsynced' | 'needs-sync'>(
'synced',
)
const {isDesktop, isTablet} = useWebMediaQueries()
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
const didInitialScroll = useSharedValue(false)
const contentSize = useSharedValue(0)
const containerSize = useSharedValue(0)
const scrollX = useSharedValue(0)
const layouts = useSharedValue<{x: number; width: number}[]>([])
const itemsLength = items.length
useEffect(() => {
if (isNative) {
// On native, the primary interaction is swiping.
// We adjust the scroll little by little on every tab change.
// Scroll into view but keep the end of the previous item visible.
let x = itemXs[selectedPage] || 0
x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
scrollElRef.current?.scrollTo({x})
} else {
// On the web, the primary interaction is tapping.
// Scrolling under tap feels disorienting so only adjust the scroll offset
// when tapping on an item out of view--and we adjust by almost an entire page.
const parent = scrollElRef?.current?.getScrollableNode?.()
if (!parent) {
const scrollToOffsetJS = useCallback(
(x: number) => {
scrollElRef.current?.scrollTo({
x,
y: 0,
animated: true,
})
},
[scrollElRef],
)
const indexToOffset = useCallback(
(index: number) => {
'worklet'
const layout = layouts.get()[index]
const availableSize = containerSize.get() - 2 * CONTENT_PADDING
if (!layout) {
// Should not happen, but fall back to equal sizes.
const offsetPerPage = contentSize.get() - availableSize
return (index / (itemsLength - 1)) * offsetPerPage
}
const freeSpace = availableSize - layout.width
const accumulatingOffset = interpolate(
index,
// Gradually shift every next item to the left so that the first item
// is positioned like "left: 0" but the last item is like "right: 0".
[0, itemsLength - 1],
[0, freeSpace],
'clamp',
)
return layout.x - accumulatingOffset
},
[itemsLength, contentSize, containerSize, layouts],
)
const progressToOffset = useCallback(
(progress: number) => {
'worklet'
return interpolate(
progress,
[Math.floor(progress), Math.ceil(progress)],
[
indexToOffset(Math.floor(progress)),
indexToOffset(Math.ceil(progress)),
],
'clamp',
)
},
[indexToOffset],
)
// When we know the entire layout for the first time, scroll selection into view.
useAnimatedReaction(
() => layouts.get().length,
(nextLayoutsLength, prevLayoutsLength) => {
if (nextLayoutsLength !== prevLayoutsLength) {
if (
nextLayoutsLength === itemsLength &&
didInitialScroll.get() === false
) {
didInitialScroll.set(true)
const progress = dragProgress.get()
const offset = progressToOffset(progress)
// It's unclear why we need to go back to JS here. It seems iOS-specific.
runOnJS(scrollToOffsetJS)(offset)
}
}
},
)
// When you swipe the pager, the tabbar should scroll automatically
// as you're dragging the page and then even during deceleration.
useAnimatedReaction(
() => dragProgress.get(),
(nextProgress, prevProgress) => {
if (
nextProgress !== prevProgress &&
dragState.value !== 'idle' &&
// This is only OK to do when we're 100% sure we're synced.
// Otherwise, there would be a jump at the beginning of the swipe.
syncScrollState.get() === 'synced'
) {
const offset = progressToOffset(nextProgress)
scrollTo(scrollElRef, offset, 0, false)
}
},
)
// If the syncing is currently off but you've just finished swiping,
// it's an opportunity to resync. It won't feel disruptive because
// you're not directly interacting with the tabbar at the moment.
useAnimatedReaction(
() => dragState.value,
(nextDragState, prevDragState) => {
if (
nextDragState !== prevDragState &&
nextDragState === 'idle' &&
(syncScrollState.get() === 'unsynced' ||
syncScrollState.get() === 'needs-sync')
) {
const progress = dragProgress.get()
const offset = progressToOffset(progress)
scrollTo(scrollElRef, offset, 0, true)
syncScrollState.set('synced')
}
},
)
// When you press on the item, we'll scroll into view -- unless you previously
// have scrolled the tabbar manually, in which case it'll re-sync on next press.
const onPressUIThread = useCallback(
(index: number) => {
'worklet'
const itemLayout = layouts.get()[index]
if (!itemLayout) {
// Should not happen.
return
}
const parentRect = parent.getBoundingClientRect()
if (!parentRect) {
return
const leftEdge = itemLayout.x - OFFSCREEN_ITEM_WIDTH
const rightEdge = itemLayout.x + itemLayout.width + OFFSCREEN_ITEM_WIDTH
const scrollLeft = scrollX.get()
const scrollRight = scrollLeft + containerSize.get()
const scrollIntoView = leftEdge < scrollLeft || rightEdge > scrollRight
if (
syncScrollState.get() === 'synced' ||
syncScrollState.get() === 'needs-sync' ||
scrollIntoView
) {
const offset = progressToOffset(index)
scrollTo(scrollElRef, offset, 0, true)
syncScrollState.set('synced')
} else {
// The item is already in view so it's disruptive to
// scroll right now. Do it on the next opportunity.
syncScrollState.set('needs-sync')
}
const {
left: parentLeft,
right: parentRight,
width: parentWidth,
} = parentRect
const child = itemRefs.current[selectedPage]
if (!child) {
return
}
const childRect = child.getBoundingClientRect?.()
if (!childRect) {
return
}
const {left: childLeft, right: childRight, width: childWidth} = childRect
let dx = 0
if (childRight >= parentRight) {
dx += childRight - parentRight
dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
} else if (childLeft <= parentLeft) {
dx -= parentLeft - childLeft
dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
}
let x = parent.scrollLeft + dx
x = Math.max(0, x)
x = Math.min(x, parent.scrollWidth - parentWidth)
if (dx !== 0) {
parent.scroll({
left: x,
behavior: 'smooth',
})
},
[
syncScrollState,
scrollElRef,
scrollX,
progressToOffset,
containerSize,
layouts,
],
)
const onItemLayout = useCallback(
(i: number, layout: {x: number; width: number}) => {
'worklet'
layouts.modify(ls => {
ls[i] = layout
return ls
})
},
[layouts],
)
const indicatorStyle = useAnimatedStyle(() => {
if (!_WORKLET) {
return {opacity: 0}
}
const layoutsValue = layouts.get()
if (
layoutsValue.length !== itemsLength ||
layoutsValue.some(l => l === undefined)
) {
return {
opacity: 0,
}
}
}, [scrollElRef, itemXs, selectedPage, styles])
if (layoutsValue.length === 1) {
return {opacity: 1}
}
return {
opacity: 1,
transform: [
{
translateX: interpolate(
dragProgress.get(),
layoutsValue.map((l, i) => i),
layoutsValue.map(l => l.x + l.width / 2 - contentSize.get() / 2),
),
},
{
scaleX: interpolate(
dragProgress.get(),
layoutsValue.map((l, i) => i),
layoutsValue.map(
l => (l.width - ITEM_PADDING * 2) / contentSize.get(),
),
),
},
],
}
})
const onPressItem = useCallback(
(index: number) => {
runOnUI(onPressUIThread)(index)
onSelect?.(index)
if (index === selectedPage) {
onPressSelected?.(index)
}
},
[onSelect, selectedPage, onPressSelected],
)
// calculates the x position of each item on mount and on layout change
const onItemLayout = React.useCallback(
(e: LayoutChangeEvent, index: number) => {
const x = e.nativeEvent.layout.x
setItemXs(prev => {
const Xs = [...prev]
Xs[index] = x
return Xs
})
},
[],
[onSelect, selectedPage, onPressSelected, onPressUIThread],
)
return (
@@ -122,84 +266,131 @@ export function TabBar({
testID={testID}
style={[pal.view, styles.outer]}
accessibilityRole="tablist">
<DraggableScrollView
<ScrollView
testID={`${testID}-selector`}
horizontal={true}
showsHorizontalScrollIndicator={false}
ref={scrollElRef}
contentContainerStyle={styles.contentContainer}>
{items.map((item, i) => {
const selected = i === selectedPage
return (
<PressableWithHover
testID={`${testID}-selector-${i}`}
key={`${item}-${i}`}
ref={node => (itemRefs.current[i] = node as any)}
onLayout={e => onItemLayout(e, i)}
style={styles.item}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}
accessibilityRole="tab">
<View style={[styles.itemInner, selected && indicatorStyle]}>
<Text
emoji
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
testID={testID ? `${testID}-${item}` : undefined}
style={[
selected ? pal.text : pal.textLight,
{lineHeight: 20},
]}>
{item}
</Text>
</View>
</PressableWithHover>
)
})}
</DraggableScrollView>
contentContainerStyle={styles.contentContainer}
onLayout={e => {
containerSize.set(e.nativeEvent.layout.width)
}}
onScrollBeginDrag={() => {
// Remember that you've manually messed with the tabbar scroll.
// This will disable auto-adjustment until after next pager swipe or item tap.
syncScrollState.set('unsynced')
}}
onScroll={e => {
scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
}}>
<Animated.View
onLayout={e => {
contentSize.set(e.nativeEvent.layout.width)
}}
style={{flexDirection: 'row'}}>
{items.map((item, i) => {
return (
<TabBarItem
key={i}
index={i}
testID={testID}
dragProgress={dragProgress}
item={item}
onPressItem={onPressItem}
onItemLayout={onItemLayout}
/>
)
})}
<Animated.View
style={[
indicatorStyle,
{
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
borderBottomWidth: 3,
borderColor: pal.link.color,
},
]}
/>
</Animated.View>
</ScrollView>
<View style={[pal.border, styles.outerBottomBorder]} />
</View>
)
}
const desktopStyles = StyleSheet.create({
outer: {
flexDirection: 'row',
width: 598,
},
contentContainer: {
paddingHorizontal: 0,
backgroundColor: 'transparent',
},
item: {
paddingTop: 14,
paddingHorizontal: 14,
justifyContent: 'center',
},
itemInner: {
paddingBottom: 12,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},
outerBottomBorder: {
position: 'absolute',
left: 0,
right: 0,
top: '100%',
borderBottomWidth: StyleSheet.hairlineWidth,
},
})
function TabBarItem({
index,
testID,
dragProgress,
item,
onPressItem,
onItemLayout,
}: {
index: number
testID: string | undefined
dragProgress: SharedValue<number>
item: string
onPressItem: (index: number) => void
onItemLayout: (index: number, layout: {x: number; width: number}) => void
}) {
const pal = usePalette('default')
const style = useAnimatedStyle(() => {
if (!_WORKLET) {
return {opacity: 0.7}
}
return {
opacity: interpolate(
dragProgress.get(),
[index - 1, index, index + 1],
[0.7, 1, 0.7],
'clamp',
),
}
})
const mobileStyles = StyleSheet.create({
const handleLayout = useCallback(
(e: LayoutChangeEvent) => {
runOnUI(onItemLayout)(index, e.nativeEvent.layout)
},
[index, onItemLayout],
)
return (
<View onLayout={handleLayout}>
<PressableWithHover
testID={`${testID}-selector-${index}`}
style={styles.item}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(index)}
accessibilityRole="tab">
<Animated.View style={[style, styles.itemInner]}>
<Text
emoji
type="lg-bold"
testID={testID ? `${testID}-${item}` : undefined}
style={[pal.text, {lineHeight: 20}]}>
{item}
</Text>
</Animated.View>
</PressableWithHover>
</View>
)
}
const styles = StyleSheet.create({
outer: {
flexDirection: 'row',
},
contentContainer: {
backgroundColor: 'transparent',
paddingHorizontal: 6,
paddingHorizontal: CONTENT_PADDING,
},
item: {
paddingTop: 10,
paddingHorizontal: 10,
paddingHorizontal: ITEM_PADDING,
justifyContent: 'center',
},
itemInner: {
src/view/com/pager/TabBar.web.tsx
+192
View File
@@ -0,0 +1,192 @@
import {useCallback, useEffect, useMemo, useRef} from 'react'
import {ScrollView, StyleSheet, View} from 'react-native'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {PressableWithHover} from '../util/PressableWithHover'
import {Text} from '../util/text/Text'
import {DraggableScrollView} from './DraggableScrollView'
export interface TabBarProps {
testID?: string
selectedPage: number
items: string[]
indicatorColor?: string
onSelect?: (index: number) => void
onPressSelected?: (index: number) => void
}
// How much of the previous/next item we're showing
// to give the user a hint there's more to scroll.
const OFFSCREEN_ITEM_WIDTH = 20
export function TabBar({
testID,
selectedPage,
items,
indicatorColor,
onSelect,
onPressSelected,
}: TabBarProps) {
const pal = usePalette('default')
const scrollElRef = useRef<ScrollView>(null)
const itemRefs = useRef<Array<Element>>([])
const indicatorStyle = useMemo(
() => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal],
)
const {isDesktop, isTablet} = useWebMediaQueries()
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
useEffect(() => {
// On the web, the primary interaction is tapping.
// Scrolling under tap feels disorienting so only adjust the scroll offset
// when tapping on an item out of view--and we adjust by almost an entire page.
const parent = scrollElRef?.current?.getScrollableNode?.()
if (!parent) {
return
}
const parentRect = parent.getBoundingClientRect()
if (!parentRect) {
return
}
const {
left: parentLeft,
right: parentRight,
width: parentWidth,
} = parentRect
const child = itemRefs.current[selectedPage]
if (!child) {
return
}
const childRect = child.getBoundingClientRect?.()
if (!childRect) {
return
}
const {left: childLeft, right: childRight, width: childWidth} = childRect
let dx = 0
if (childRight >= parentRight) {
dx += childRight - parentRight
dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
} else if (childLeft <= parentLeft) {
dx -= parentLeft - childLeft
dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
}
let x = parent.scrollLeft + dx
x = Math.max(0, x)
x = Math.min(x, parent.scrollWidth - parentWidth)
if (dx !== 0) {
parent.scroll({
left: x,
behavior: 'smooth',
})
}
}, [scrollElRef, selectedPage, styles])
const onPressItem = useCallback(
(index: number) => {
onSelect?.(index)
if (index === selectedPage) {
onPressSelected?.(index)
}
},
[onSelect, selectedPage, onPressSelected],
)
return (
<View
testID={testID}
style={[pal.view, styles.outer]}
accessibilityRole="tablist">
<DraggableScrollView
testID={`${testID}-selector`}
horizontal={true}
showsHorizontalScrollIndicator={false}
ref={scrollElRef}
contentContainerStyle={styles.contentContainer}>
{items.map((item, i) => {
const selected = i === selectedPage
return (
<PressableWithHover
testID={`${testID}-selector-${i}`}
key={`${item}-${i}`}
ref={node => (itemRefs.current[i] = node as any)}
style={styles.item}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}
accessibilityRole="tab">
<View style={[styles.itemInner, selected && indicatorStyle]}>
<Text
emoji
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
testID={testID ? `${testID}-${item}` : undefined}
style={[
selected ? pal.text : pal.textLight,
{lineHeight: 20},
]}>
{item}
</Text>
</View>
</PressableWithHover>
)
})}
</DraggableScrollView>
<View style={[pal.border, styles.outerBottomBorder]} />
</View>
)
}
const desktopStyles = StyleSheet.create({
outer: {
flexDirection: 'row',
width: 598,
},
contentContainer: {
paddingHorizontal: 0,
backgroundColor: 'transparent',
},
item: {
paddingTop: 14,
paddingHorizontal: 14,
justifyContent: 'center',
},
itemInner: {
paddingBottom: 12,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},
outerBottomBorder: {
position: 'absolute',
left: 0,
right: 0,
top: '100%',
borderBottomWidth: StyleSheet.hairlineWidth,
},
})
const mobileStyles = StyleSheet.create({
outer: {
flexDirection: 'row',
},
contentContainer: {
backgroundColor: 'transparent',
paddingHorizontal: 6,
},
item: {
paddingTop: 10,
paddingHorizontal: 10,
justifyContent: 'center',
},
itemInner: {
paddingBottom: 10,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},
outerBottomBorder: {
position: 'absolute',
left: 0,
right: 0,
top: '100%',
borderBottomWidth: StyleSheet.hairlineWidth,
},
})
src/view/com/posts/Feed.tsx
+2 -2
View File
@@ -216,7 +216,7 @@ let Feed = ({
checkForNewRef.current = checkForNew
}, [checkForNew])
React.useEffect(() => {
if (enabled) {
if (enabled && !disablePoll) {
const timeSinceFirstLoad = Date.now() - lastFetchRef.current
// DISABLED need to check if this is causing random feed refreshes -prf
/*if (timeSinceFirstLoad > REFRESH_AFTER) {
@@ -231,7 +231,7 @@ let Feed = ({
checkForNewRef.current()
}
}
}, [enabled, feed, queryClient, scrollElRef])
}, [enabled, disablePoll, feed, queryClient, scrollElRef])
React.useEffect(() => {
let cleanup1: () => void | undefined, cleanup2: () => void | undefined
const subscription = AppState.addEventListener('change', nextAppState => {
src/view/com/util/MainScrollProvider.tsx
+11 -11
View File
@@ -60,15 +60,16 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
const snapToClosestState = useCallback(
(e: NativeScrollEvent) => {
'worklet'
const offsetY = Math.max(0, e.contentOffset.y)
if (isNative) {
const startDragOffsetValue = startDragOffset.get()
if (startDragOffsetValue === null) {
return
}
const didScrollDown = e.contentOffset.y > startDragOffsetValue
const didScrollDown = offsetY > startDragOffsetValue
startDragOffset.set(null)
startMode.set(null)
if (e.contentOffset.y < headerHeight.get()) {
if (offsetY < headerHeight.get()) {
// If we're close to the top, show the shell.
setMode(false)
} else if (didScrollDown) {
@@ -86,8 +87,9 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
const onBeginDrag = useCallback(
(e: NativeScrollEvent) => {
'worklet'
const offsetY = Math.max(0, e.contentOffset.y)
if (isNative) {
startDragOffset.set(e.contentOffset.y)
startDragOffset.set(offsetY)
startMode.set(headerMode.get())
}
},
@@ -121,14 +123,12 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
const onScroll = useCallback(
(e: NativeScrollEvent) => {
'worklet'
const offsetY = Math.max(0, e.contentOffset.y)
if (isNative) {
const startDragOffsetValue = startDragOffset.get()
const startModeValue = startMode.get()
if (startDragOffsetValue === null || startModeValue === null) {
if (
headerMode.get() !== 0 &&
e.contentOffset.y < headerHeight.get()
) {
if (headerMode.get() !== 0 && offsetY < headerHeight.get()) {
// If we're close enough to the top, always show the shell.
// Even if we're not dragging.
setMode(false)
@@ -138,7 +138,7 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
// The "mode" value is always between 0 and 1.
// Figure out how much to move it based on the current dragged distance.
const dy = e.contentOffset.y - startDragOffsetValue
const dy = offsetY - startDragOffsetValue
const dProgress = interpolate(
dy,
[-headerHeight.get(), headerHeight.get()],
@@ -157,10 +157,10 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
}
// On the web, we don't try to follow the drag because we don't know when it ends.
// Instead, show/hide immediately based on whether we're scrolling up or down.
const dy = e.contentOffset.y - (startDragOffset.get() ?? 0)
startDragOffset.set(e.contentOffset.y)
const dy = offsetY - (startDragOffset.get() ?? 0)
startDragOffset.set(offsetY)
if (dy < 0 || e.contentOffset.y < WEB_HIDE_SHELL_THRESHOLD) {
if (dy < 0 || offsetY < WEB_HIDE_SHELL_THRESHOLD) {
setMode(false)
} else if (dy > 0) {
setMode(true)
src/view/screens/Home.tsx
+11 -14
View File
@@ -11,7 +11,7 @@ import {
HomeTabNavigatorParams,
NativeStackScreenProps,
} from '#/lib/routes/types'
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
import {logEvent} from '#/lib/statsig/statsig'
import {isWeb} from '#/platform/detection'
import {emitSoftReset} from '#/state/events'
import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
@@ -121,7 +121,7 @@ function HomeScreenReady({
// This is supposed to only happen on the web when you use the right nav.
if (selectedIndex !== lastPagerReportedIndexRef.current) {
lastPagerReportedIndexRef.current = selectedIndex
pagerRef.current?.setPage(selectedIndex, 'desktop-sidebar-click')
pagerRef.current?.setPage(selectedIndex)
}
}, [selectedIndex])
@@ -156,23 +156,17 @@ function HomeScreenReady({
setMinimalShellMode(false)
setDrawerSwipeDisabled(index > 0)
const feed = allFeeds[index]
setSelectedFeed(feed)
// Mutate the ref before setting state to avoid the imperative syncing effect
// above from starting a loop on Android when swiping back and forth.
lastPagerReportedIndexRef.current = index
},
[setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds],
)
const onPageSelecting = React.useCallback(
(index: number, reason: LogEvents['home:feedDisplayed']['reason']) => {
const feed = allFeeds[index]
setSelectedFeed(feed)
logEvent('home:feedDisplayed', {
index,
feedType: feed.split('|')[0],
feedUrl: feed,
reason,
})
},
[allFeeds],
[setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds],
)
const onPressSelected = React.useCallback(() => {
@@ -181,6 +175,7 @@ function HomeScreenReady({
const onPageScrollStateChanged = React.useCallback(
(state: 'idle' | 'dragging' | 'settling') => {
'worklet'
if (state === 'dragging') {
setMinimalShellMode(false)
}
@@ -228,12 +223,11 @@ function HomeScreenReady({
ref={pagerRef}
testID="homeScreen"
initialPage={selectedIndex}
onPageSelecting={onPageSelecting}
onPageSelected={onPageSelected}
onPageScrollStateChanged={onPageScrollStateChanged}
renderTabBar={renderTabBar}>
{pinnedFeedInfos.length ? (
pinnedFeedInfos.map(feedInfo => {
pinnedFeedInfos.map((feedInfo, index) => {
const feed = feedInfo.feedDescriptor
if (feed === 'following') {
return (
@@ -241,6 +235,7 @@ function HomeScreenReady({
key={feed}
testID="followingFeedPage"
isPageFocused={selectedFeed === feed}
isPageAdjacent={Math.abs(selectedIndex - index) === 1}
feed={feed}
feedParams={homeFeedParams}
renderEmptyState={renderFollowingEmptyState}
@@ -254,6 +249,7 @@ function HomeScreenReady({
key={feed}
testID="customFeedPage"
isPageFocused={selectedFeed === feed}
isPageAdjacent={Math.abs(selectedIndex - index) === 1}
feed={feed}
renderEmptyState={renderCustomFeedEmptyState}
savedFeedConfig={savedFeedConfig}
@@ -273,6 +269,7 @@ function HomeScreenReady({
<FeedPage
testID="customFeedPage"
isPageFocused
isPageAdjacent={false}
feed={`feedgen|${PROD_DEFAULT_FEED('whats-hot')}`}
renderEmptyState={renderCustomFeedEmptyState}
/>