From bd393b1b387eeddff33a520f60f04387c9105379 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 25 Sep 2024 14:58:53 +0100 Subject: [PATCH] Allow profile header to overscroll (#5457) * add allowoverscroll prop * ensure spinner is visible * more generic prop for `` * rename to allowHeaderOverScroll --- .../StarterPack/ProfileStarterPacks.tsx | 17 ++++++----- src/screens/Profile/Header/index.tsx | 14 +++++---- src/screens/Profile/Sections/Feed.tsx | 14 +++++---- src/view/com/feeds/ProfileFeedgens.tsx | 5 ++-- src/view/com/lists/ProfileLists.tsx | 7 +++-- src/view/com/pager/PagerWithHeader.tsx | 29 +++++++++++++------ src/view/com/pager/PagerWithHeader.web.tsx | 2 +- src/view/com/posts/Feed.tsx | 9 ++++-- src/view/com/util/List.tsx | 17 ++++++----- src/view/screens/Profile.tsx | 5 ++-- 10 files changed, 72 insertions(+), 47 deletions(-) diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx index 7fb0545a21..00afbdcfe9 100644 --- a/src/components/StarterPack/ProfileStarterPacks.tsx +++ b/src/components/StarterPack/ProfileStarterPacks.tsx @@ -12,15 +12,15 @@ import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query' +import {useGenerateStarterPackMutation} from '#/lib/generate-starterpack' +import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {NavigationProp} from '#/lib/routes/types' +import {parseStarterPackUri} from '#/lib/strings/starter-pack' import {logger} from '#/logger' -import {useGenerateStarterPackMutation} from 'lib/generate-starterpack' -import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' -import {parseStarterPackUri} from 'lib/strings/starter-pack' -import {List, ListRef} from 'view/com/util/List' -import {Text} from 'view/com/util/text/Text' -import {atoms as a, useTheme} from '#/alf' +import {List, ListRef} from '#/view/com/util/List' +import {Text} from '#/view/com/util/text/Text' +import {atoms as a, ios, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' import {LinearGradientBackground} from '#/components/LinearGradientBackground' @@ -132,6 +132,7 @@ export const ProfileStarterPacks = React.forwardRef< keyExtractor={keyExtractor} refreshing={isPTRing} headerOffset={headerOffset} + progressViewOffset={ios(0)} contentContainerStyle={{paddingBottom: headerOffset + bottomBarOffset}} indicatorStyle={t.name === 'light' ? 'black' : 'white'} removeClippedSubviews={true} diff --git a/src/screens/Profile/Header/index.tsx b/src/screens/Profile/Header/index.tsx index c7ef34b701..cdb0667d06 100644 --- a/src/screens/Profile/Header/index.tsx +++ b/src/screens/Profile/Header/index.tsx @@ -7,18 +7,22 @@ import { RichText as RichTextAPI, } from '@atproto/api' -import {usePalette} from 'lib/hooks/usePalette' -import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' +import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {useTheme} from '#/alf' import {ProfileHeaderLabeler} from './ProfileHeaderLabeler' import {ProfileHeaderStandard} from './ProfileHeaderStandard' let ProfileHeaderLoading = (_props: {}): React.ReactNode => { - const pal = usePalette('default') + const t = useTheme() return ( - + + style={[ + t.atoms.bg, + {borderColor: t.atoms.bg.backgroundColor}, + styles.avi, + ]}> diff --git a/src/screens/Profile/Sections/Feed.tsx b/src/screens/Profile/Sections/Feed.tsx index fc4eff02c8..22ac5df9a7 100644 --- a/src/screens/Profile/Sections/Feed.tsx +++ b/src/screens/Profile/Sections/Feed.tsx @@ -4,17 +4,18 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' +import {usePalette} from '#/lib/hooks/usePalette' import {isNative} from '#/platform/detection' import {FeedDescriptor} from '#/state/queries/post-feed' import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' import {truncateAndInvalidate} from '#/state/queries/util' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {usePalette} from 'lib/hooks/usePalette' +import {Feed} from '#/view/com/posts/Feed' +import {EmptyState} from '#/view/com/util/EmptyState' +import {ListRef} from '#/view/com/util/List' +import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' import {Text} from '#/view/com/util/text/Text' -import {Feed} from 'view/com/posts/Feed' -import {EmptyState} from 'view/com/util/EmptyState' -import {ListRef} from 'view/com/util/List' -import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' +import {ios} from '#/alf' import {SectionRef} from './types' interface FeedSectionProps { @@ -82,6 +83,7 @@ export const ProfileFeedSection = React.forwardRef< onScrolledDownChange={setIsScrolledDown} renderEmptyState={renderPostsEmpty} headerOffset={headerHeight} + progressViewOffset={ios(0)} renderEndOfFeed={ProfileEndOfFeed} ignoreFilterFor={ignoreFilterFor} initialNumToRender={ diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx index 6f98cc49a4..693a8e361a 100644 --- a/src/view/com/feeds/ProfileFeedgens.tsx +++ b/src/view/com/feeds/ProfileFeedgens.tsx @@ -15,9 +15,9 @@ import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' import {usePreferencesQuery} from '#/state/queries/preferences' import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens' +import {EmptyState} from '#/view/com/util/EmptyState' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' -import {EmptyState} from 'view/com/util/EmptyState' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, ios, useTheme} from '#/alf' import * as FeedCard from '#/components/FeedCard' import {ErrorMessage} from '../util/error/ErrorMessage' import {List, ListRef} from '../util/List' @@ -191,6 +191,7 @@ export const ProfileFeedgens = React.forwardRef< refreshing={isPTRing} onRefresh={onRefresh} headerOffset={headerOffset} + progressViewOffset={ios(0)} contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}} indicatorStyle={t.name === 'light' ? 'black' : 'white'} removeClippedSubviews={true} diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx index f633774c7a..117164413f 100644 --- a/src/view/com/lists/ProfileLists.tsx +++ b/src/view/com/lists/ProfileLists.tsx @@ -10,14 +10,14 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' +import {useAnalytics} from '#/lib/analytics/analytics' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists' -import {useAnalytics} from 'lib/analytics/analytics' +import {EmptyState} from '#/view/com/util/EmptyState' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' -import {EmptyState} from 'view/com/util/EmptyState' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, ios, useTheme} from '#/alf' import * as ListCard from '#/components/ListCard' import {ErrorMessage} from '../util/error/ErrorMessage' import {List, ListRef} from '../util/List' @@ -192,6 +192,7 @@ export const ProfileLists = React.forwardRef( refreshing={isPTRing} onRefresh={onRefresh} headerOffset={headerOffset} + progressViewOffset={ios(0)} contentContainerStyle={ isNative && {paddingBottom: headerOffset + 100} } diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 7b1d8b78f4..559bc70f13 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -19,8 +19,8 @@ import Animated, { import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {ScrollProvider} from '#/lib/ScrollContext' -import {isIOS} from 'platform/detection' -import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' +import {isIOS} from '#/platform/detection' +import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager' import {ListMethods} from '../util/List' import {TabBar} from './TabBar' @@ -41,6 +41,7 @@ export interface PagerWithHeaderProps { initialPage?: number onPageSelected?: (index: number) => void onCurrentPageSelected?: (index: number) => void + allowHeaderOverScroll?: boolean } export const PagerWithHeader = React.forwardRef( function PageWithHeaderImpl( @@ -53,6 +54,7 @@ export const PagerWithHeader = React.forwardRef( initialPage, onPageSelected, onCurrentPageSelected, + allowHeaderOverScroll, }: PagerWithHeaderProps, ref, ) { @@ -92,6 +94,7 @@ export const PagerWithHeader = React.forwardRef( onSelect={props.onSelect} scrollY={scrollY} testID={testID} + allowHeaderOverScroll={allowHeaderOverScroll} /> ) }, @@ -106,6 +109,7 @@ export const PagerWithHeader = React.forwardRef( onHeaderOnlyLayout, scrollY, testID, + allowHeaderOverScroll, ], ) @@ -216,6 +220,7 @@ let PagerTabBar = ({ onTabBarLayout, onCurrentPageSelected, onSelect, + allowHeaderOverScroll, }: { currentPage: number headerOnlyHeight: number @@ -228,14 +233,20 @@ let PagerTabBar = ({ onTabBarLayout: (e: LayoutChangeEvent) => void onCurrentPageSelected?: (index: number) => void onSelect?: (index: number) => void + allowHeaderOverScroll?: boolean }): React.ReactNode => { - const headerTransform = useAnimatedStyle(() => ({ - transform: [ - { - translateY: Math.min(Math.min(scrollY.value, headerOnlyHeight) * -1, 0), - }, - ], - })) + const headerTransform = useAnimatedStyle(() => { + const translateY = Math.min(scrollY.value, headerOnlyHeight) * -1 + return { + transform: [ + { + translateY: allowHeaderOverScroll + ? translateY + : Math.min(translateY, 0), + }, + ], + } + }) const headerRef = React.useRef(null) return ( JSX.Element testID?: string headerOffset?: number + progressViewOffset?: number desktopFixedHeightOffset?: number ListHeaderComponent?: () => JSX.Element extraData?: any @@ -548,6 +550,7 @@ let Feed = ({ refreshing={isPTRing} onRefresh={onRefresh} headerOffset={headerOffset} + progressViewOffset={progressViewOffset} contentContainerStyle={{ minHeight: Dimensions.get('window').height * 1.5, }} diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index f9aeae1a86..53b0547d45 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -4,11 +4,11 @@ import {runOnJS, useSharedValue} from 'react-native-reanimated' import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video' import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' -import {usePalette} from '#/lib/hooks/usePalette' +import {useDedupe} from '#/lib/hooks/useDedupe' import {useScrollHandlers} from '#/lib/ScrollContext' -import {useDedupe} from 'lib/hooks/useDedupe' -import {addStyle} from 'lib/styles' -import {isIOS} from 'platform/detection' +import {addStyle} from '#/lib/styles' +import {isIOS} from '#/platform/detection' +import {useTheme} from '#/alf' import {FlatList_INTERNAL} from './Views' export type ListMethods = FlatList_INTERNAL @@ -44,12 +44,13 @@ function ListImpl( onItemSeen, headerOffset, style, + progressViewOffset, ...props }: ListProps, ref: React.Ref, ) { const isScrolledDown = useSharedValue(false) - const pal = usePalette('default') + const t = useTheme() const dedupe = useDedupe(400) function handleScrolledDownChange(didScrollDown: boolean) { @@ -120,9 +121,9 @@ function ListImpl( ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 879632e9ef..b37445fad6 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -37,11 +37,11 @@ import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' import {ProfileFeedgens} from '#/view/com/feeds/ProfileFeedgens' import {ProfileLists} from '#/view/com/lists/ProfileLists' +import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {FAB} from '#/view/com/util/fab/FAB' import {ListRef} from '#/view/com/util/List' import {CenteredView} from '#/view/com/util/Views' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' @@ -363,7 +363,8 @@ function ProfileScreenLoaded({ items={sectionTitles} onPageSelected={onPageSelected} onCurrentPageSelected={onCurrentPageSelected} - renderHeader={renderHeader}> + renderHeader={renderHeader} + allowHeaderOverScroll> {showFiltersTab ? ({headerHeight, isFocused, scrollElRef}) => (