From b93ab428c3ccf58ca45c52c4e3621fe711cbe13d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 13 Dec 2023 04:18:54 +0000 Subject: [PATCH] Port pager to use onScrolledDownChange --- src/view/com/lists/ListMembers.tsx | 3 +++ src/view/com/pager/PagerWithHeader.tsx | 16 ----------- src/view/screens/Profile.tsx | 37 +++++--------------------- src/view/screens/ProfileFeed.tsx | 8 +++--- src/view/screens/ProfileList.tsx | 25 +++++++---------- 5 files changed, 23 insertions(+), 66 deletions(-) diff --git a/src/view/com/lists/ListMembers.tsx b/src/view/com/lists/ListMembers.tsx index b496611d32..a783ee3450 100644 --- a/src/view/com/lists/ListMembers.tsx +++ b/src/view/com/lists/ListMembers.tsx @@ -35,6 +35,7 @@ export function ListMembers({ style, scrollElRef, onScroll, + onScrolledDownChange, onPressTryAgain, renderHeader, renderEmptyState, @@ -47,6 +48,7 @@ export function ListMembers({ style?: StyleProp scrollElRef?: ListRef onScroll: OnScrollHandler + onScrolledDownChange: (isScrolledDown: boolean) => void onPressTryAgain?: () => void renderHeader: () => JSX.Element renderEmptyState: () => JSX.Element @@ -234,6 +236,7 @@ export function ListMembers({ }} style={{paddingTop: headerOffset}} onScroll={scrollHandler} + onScrolledDownChange={onScrolledDownChange} onEndReached={onEndReached} onEndReachedThreshold={0.6} scrollEventThrottle={scrollEventThrottle} diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 3054bf5f82..570163b3d3 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -23,13 +23,10 @@ import {OnScrollHandler} from 'lib/hooks/useOnMainScroll' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {ListMethods} from '../util/List' -const SCROLLED_DOWN_LIMIT = 200 - export interface PagerWithHeaderChildParams { headerHeight: number isFocused: boolean onScroll: OnScrollHandler - isScrolledDown: boolean scrollElRef: React.MutableRefObject } @@ -62,7 +59,6 @@ export const PagerWithHeader = React.forwardRef( const [currentPage, setCurrentPage] = React.useState(0) const [tabBarHeight, setTabBarHeight] = React.useState(0) const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0) - const [isScrolledDown, setIsScrolledDown] = React.useState(false) const scrollY = useSharedValue(0) const headerHeight = headerOnlyHeight + tabBarHeight @@ -155,15 +151,7 @@ export const PagerWithHeader = React.forwardRef( if (!throttleTimeout.current) { throttleTimeout.current = setTimeout(() => { throttleTimeout.current = null - runOnUI(adjustScrollForOtherPages)() - - const nextIsScrolledDown = scrollY.value > SCROLLED_DOWN_LIMIT - if (isScrolledDown !== nextIsScrolledDown) { - React.startTransition(() => { - setIsScrolledDown(nextIsScrolledDown) - }) - } }, 80 /* Sync often enough you're unlikely to catch it unsynced */) } }) @@ -211,7 +199,6 @@ export const PagerWithHeader = React.forwardRef( index={i} isReady={isReady} isFocused={i === currentPage} - isScrolledDown={isScrolledDown} onScrollWorklet={i === currentPage ? onScrollWorklet : noop} registerRef={registerRef} renderTab={child} @@ -293,7 +280,6 @@ function PagerItem({ index, isReady, isFocused, - isScrolledDown, onScrollWorklet, renderTab, registerRef, @@ -302,7 +288,6 @@ function PagerItem({ index: number isFocused: boolean isReady: boolean - isScrolledDown: boolean registerRef: (scrollRef: AnimatedRef | null, atIndex: number) => void onScrollWorklet: (e: NativeScrollEvent) => void renderTab: ((props: PagerWithHeaderChildParams) => JSX.Element) | null @@ -328,7 +313,6 @@ function PagerItem({ return renderTab({ headerHeight, isFocused, - isScrolledDown, onScroll: scrollHandler, scrollElRef: scrollElRef as React.MutableRefObject< ListMethods | ScrollView | null diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index fa15b8a149..31886afdb4 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -278,65 +278,49 @@ function ProfileScreenLoaded({ onPageSelected={onPageSelected} onCurrentPageSelected={onCurrentPageSelected} renderHeader={renderHeader}> - {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => ( + {({onScroll, headerHeight, isFocused, scrollElRef}) => ( )} {showRepliesTab - ? ({ - onScroll, - headerHeight, - isFocused, - isScrolledDown, - scrollElRef, - }) => ( + ? ({onScroll, headerHeight, isFocused, scrollElRef}) => ( ) : null} - {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => ( + {({onScroll, headerHeight, isFocused, scrollElRef}) => ( )} {showLikesTab - ? ({ - onScroll, - headerHeight, - isFocused, - isScrolledDown, - scrollElRef, - }) => ( + ? ({onScroll, headerHeight, isFocused, scrollElRef}) => ( @@ -388,25 +372,17 @@ interface FeedSectionProps { onScroll: OnScrollHandler headerHeight: number isFocused: boolean - isScrolledDown: boolean scrollElRef: ListRef ignoreFilterFor?: string } const FeedSection = React.forwardRef( function FeedSectionImpl( - { - feed, - onScroll, - headerHeight, - isFocused, - isScrolledDown, - scrollElRef, - ignoreFilterFor, - }, + {feed, onScroll, headerHeight, isFocused, scrollElRef, ignoreFilterFor}, ref, ) { const queryClient = useQueryClient() const [hasNew, setHasNew] = React.useState(false) + const [isScrolledDown, setIsScrolledDown] = React.useState(false) const onScrollToTop = React.useCallback(() => { scrollElRef.current?.scrollToOffset({ @@ -433,6 +409,7 @@ const FeedSection = React.forwardRef( scrollElRef={scrollElRef} onHasNew={setHasNew} onScroll={onScroll} + onScrolledDownChange={setIsScrolledDown} scrollEventThrottle={1} renderEmptyState={renderPostsEmpty} headerOffset={headerHeight} diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 73e265410c..cfd6f564aa 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -398,14 +398,13 @@ export function ProfileFeedScreenInner({ isHeaderReady={true} renderHeader={renderHeader} onCurrentPageSelected={onCurrentPageSelected}> - {({onScroll, headerHeight, isScrolledDown, scrollElRef, isFocused}) => + {({onScroll, headerHeight, scrollElRef, isFocused}) => isPublicResponse?.isPublic ? ( @@ -492,16 +491,16 @@ interface FeedSectionProps { feed: FeedDescriptor onScroll: OnScrollHandler headerHeight: number - isScrolledDown: boolean scrollElRef: ListRef isFocused: boolean } const FeedSection = React.forwardRef( function FeedSectionImpl( - {feed, onScroll, headerHeight, isScrolledDown, scrollElRef, isFocused}, + {feed, onScroll, headerHeight, scrollElRef, isFocused}, ref, ) { const [hasNew, setHasNew] = React.useState(false) + const [isScrolledDown, setIsScrolledDown] = React.useState(false) const queryClient = useQueryClient() const onScrollToTop = useCallback(() => { @@ -530,6 +529,7 @@ const FeedSection = React.forwardRef( scrollElRef={scrollElRef} onHasNew={setHasNew} onScroll={onScroll} + onScrolledDownChange={setIsScrolledDown} scrollEventThrottle={5} renderEmptyState={renderPostsEmpty} headerOffset={headerHeight} diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 84f4137b5c..9052ffd3ad 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -160,24 +160,17 @@ function ProfileListScreenLoaded({ isHeaderReady={true} renderHeader={renderHeader} onCurrentPageSelected={onCurrentPageSelected}> - {({ - onScroll, - headerHeight, - isScrolledDown, - scrollElRef, - isFocused, - }) => ( + {({onScroll, headerHeight, scrollElRef, isFocused}) => ( )} - {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( + {({onScroll, headerHeight, scrollElRef}) => ( )} @@ -212,14 +204,13 @@ function ProfileListScreenLoaded({ items={SECTION_TITLES_MOD} isHeaderReady={true} renderHeader={renderHeader}> - {({onScroll, headerHeight, isScrolledDown, scrollElRef}) => ( + {({onScroll, headerHeight, scrollElRef}) => ( )} @@ -606,17 +597,17 @@ interface FeedSectionProps { feed: FeedDescriptor onScroll: OnScrollHandler headerHeight: number - isScrolledDown: boolean scrollElRef: ListRef isFocused: boolean } const FeedSection = React.forwardRef( function FeedSectionImpl( - {feed, scrollElRef, onScroll, headerHeight, isScrolledDown, isFocused}, + {feed, scrollElRef, onScroll, headerHeight, isFocused}, ref, ) { const queryClient = useQueryClient() const [hasNew, setHasNew] = React.useState(false) + const [isScrolledDown, setIsScrolledDown] = React.useState(false) const onScrollToTop = useCallback(() => { scrollElRef.current?.scrollToOffset({ @@ -644,6 +635,7 @@ const FeedSection = React.forwardRef( scrollElRef={scrollElRef} onHasNew={setHasNew} onScroll={onScroll} + onScrolledDownChange={setIsScrolledDown} scrollEventThrottle={1} renderEmptyState={renderPostsEmpty} headerOffset={headerHeight} @@ -665,18 +657,18 @@ interface AboutSectionProps { onPressAddUser: () => void onScroll: OnScrollHandler headerHeight: number - isScrolledDown: boolean scrollElRef: ListRef } const AboutSection = React.forwardRef( function AboutSectionImpl( - {list, onPressAddUser, onScroll, headerHeight, isScrolledDown, scrollElRef}, + {list, onPressAddUser, onScroll, headerHeight, scrollElRef}, ref, ) { const pal = usePalette('default') const {_} = useLingui() const {isMobile} = useWebMediaQueries() const {currentAccount} = useSession() + const [isScrolledDown, setIsScrolledDown] = React.useState(false) const isCurateList = list.purpose === 'app.bsky.graph.defs#curatelist' const isOwner = list.creator.did === currentAccount?.did @@ -807,6 +799,7 @@ const AboutSection = React.forwardRef( renderEmptyState={renderEmptyState} headerOffset={headerHeight} onScroll={onScroll} + onScrolledDownChange={setIsScrolledDown} scrollEventThrottle={1} /> {isScrolledDown && (