diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/FeedInterstitials.tsx | 118 | ||||
| -rw-r--r-- | src/components/interstitials/Trending.tsx | 13 | ||||
| -rw-r--r-- | src/view/shell/BlockDrawerGesture.tsx | 9 |
3 files changed, 76 insertions, 64 deletions
diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx index ec224eeae..268a5ff5b 100644 --- a/src/components/FeedInterstitials.tsx +++ b/src/components/FeedInterstitials.tsx @@ -1,6 +1,5 @@ import React from 'react' -import {View} from 'react-native' -import {ScrollView} from 'react-native-gesture-handler' +import {ScrollView, View} from 'react-native' import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -17,6 +16,7 @@ import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows import {useSession} from '#/state/session' import * as userActionHistory from '#/state/userActionHistory' import {SeenPost} from '#/state/userActionHistory' +import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture' import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf' import {Button} from '#/components/Button' import * as FeedCard from '#/components/FeedCard' @@ -336,33 +336,37 @@ export function ProfileGrid({ </View> </View> ) : ( - <ScrollView - horizontal - showsHorizontalScrollIndicator={false} - snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap} - decelerationRate="fast"> - <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}> - {content} - - <Button - label={_(msg`Browse more accounts on the Explore page`)} - onPress={() => { - navigation.navigate('SearchTab') - }}> - <CardOuter style={[a.flex_1, {borderWidth: 0}]}> - <View style={[a.flex_1, a.justify_center]}> - <View style={[a.flex_row, a.px_lg]}> - <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}> - <Trans>Browse more suggestions on the Explore page</Trans> - </Text> - - <Arrow size="xl" /> + <BlockDrawerGesture> + <ScrollView + horizontal + showsHorizontalScrollIndicator={false} + snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap} + decelerationRate="fast"> + <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}> + {content} + + <Button + label={_(msg`Browse more accounts on the Explore page`)} + onPress={() => { + navigation.navigate('SearchTab') + }}> + <CardOuter style={[a.flex_1, {borderWidth: 0}]}> + <View style={[a.flex_1, a.justify_center]}> + <View style={[a.flex_row, a.px_lg]}> + <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}> + <Trans> + Browse more suggestions on the Explore page + </Trans> + </Text> + + <Arrow size="xl" /> + </View> </View> - </View> - </CardOuter> - </Button> - </View> - </ScrollView> + </CardOuter> + </Button> + </View> + </ScrollView> + </BlockDrawerGesture> )} </View> ) @@ -469,34 +473,38 @@ export function SuggestedFeeds() { </View> </View> ) : ( - <ScrollView - horizontal - showsHorizontalScrollIndicator={false} - snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap} - decelerationRate="fast"> - <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}> - {content} - - <Button - label={_(msg`Browse more feeds on the Explore page`)} - onPress={() => { - navigation.navigate('SearchTab') - }} - style={[a.flex_col]}> - <CardOuter style={[a.flex_1]}> - <View style={[a.flex_1, a.justify_center]}> - <View style={[a.flex_row, a.px_lg]}> - <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}> - <Trans>Browse more suggestions on the Explore page</Trans> - </Text> - - <Arrow size="xl" /> + <BlockDrawerGesture> + <ScrollView + horizontal + showsHorizontalScrollIndicator={false} + snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap} + decelerationRate="fast"> + <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}> + {content} + + <Button + label={_(msg`Browse more feeds on the Explore page`)} + onPress={() => { + navigation.navigate('SearchTab') + }} + style={[a.flex_col]}> + <CardOuter style={[a.flex_1]}> + <View style={[a.flex_1, a.justify_center]}> + <View style={[a.flex_row, a.px_lg]}> + <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}> + <Trans> + Browse more suggestions on the Explore page + </Trans> + </Text> + + <Arrow size="xl" /> + </View> </View> - </View> - </CardOuter> - </Button> - </View> - </ScrollView> + </CardOuter> + </Button> + </View> + </ScrollView> + </BlockDrawerGesture> )} </View> ) diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index a9d7778a9..7412c6f0a 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -1,7 +1,5 @@ -import React, {useContext} from 'react' +import React from 'react' import {ScrollView, View} from 'react-native' -import {DrawerGestureContext} from 'react-native-drawer-layout' -import {Gesture, GestureDetector} from 'react-native-gesture-handler' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -13,6 +11,7 @@ import { import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics' import {useTrendingConfig} from '#/state/trending-config' import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture' import {atoms as a, useGutters, useTheme} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' @@ -41,13 +40,9 @@ export function Inner() { setTrendingDisabled(true) }, [setTrendingDisabled]) - const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web - const trendingScrollGesture = - Gesture.Native().blocksExternalGesture(drawerGesture) - return error || noTopics ? null : ( <View style={[t.atoms.border_contrast_low, a.border_t]}> - <GestureDetector gesture={trendingScrollGesture}> + <BlockDrawerGesture> <ScrollView horizontal showsHorizontalScrollIndicator={false} @@ -127,7 +122,7 @@ export function Inner() { )} </View> </ScrollView> - </GestureDetector> + </BlockDrawerGesture> <Prompt.Basic control={trendingPrompt} diff --git a/src/view/shell/BlockDrawerGesture.tsx b/src/view/shell/BlockDrawerGesture.tsx new file mode 100644 index 000000000..bae9a8db8 --- /dev/null +++ b/src/view/shell/BlockDrawerGesture.tsx @@ -0,0 +1,9 @@ +import {useContext} from 'react' +import {DrawerGestureContext} from 'react-native-drawer-layout' +import {Gesture, GestureDetector} from 'react-native-gesture-handler' + +export function BlockDrawerGesture({children}: {children: React.ReactNode}) { + const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web + const scrollGesture = Gesture.Native().blocksExternalGesture(drawerGesture) + return <GestureDetector gesture={scrollGesture}>{children}</GestureDetector> +} |