diff options
Diffstat (limited to 'src/components/interstitials')
| -rw-r--r-- | src/components/interstitials/Trending.tsx | 164 |
1 files changed, 87 insertions, 77 deletions
diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index 9a5feb2b6..3e0308e43 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -1,6 +1,6 @@ -import React from 'react' -import {View} from 'react-native' -import {ScrollView} from 'react-native-gesture-handler' +import React, {useContext} from 'react' +import {ScrollView, View} from 'react-native' +import {GestureDetector} from 'react-native-gesture-handler' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -12,6 +12,7 @@ import { import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics' import {useTrendingConfig} from '#/state/trending-config' import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {TrendingGestureContext} from '#/view/shell/TrendingGestureContext' 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' @@ -40,83 +41,92 @@ export function Inner() { setTrendingDisabled(true) }, [setTrendingDisabled]) + // This is coordinated to take precedence over the drawer pan gesture. + const trendingScrollGesture = useContext(TrendingGestureContext) + return error || noTopics ? null : ( <View style={[t.atoms.border_contrast_low, a.border_t]}> - <ScrollView - horizontal - showsHorizontalScrollIndicator={false} - decelerationRate="fast"> - <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}> - <View style={{paddingLeft: 4, paddingRight: 2}}> - <Graph size="sm" /> - </View> - {isLoading ? ( - <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}> - <LoadingPlaceholder - width={80} - height={undefined} - style={{alignSelf: 'stretch'}} - /> - <LoadingPlaceholder - width={50} - height={undefined} - style={{alignSelf: 'stretch'}} - /> - <LoadingPlaceholder - width={120} - height={undefined} - style={{alignSelf: 'stretch'}} - /> - <LoadingPlaceholder - width={30} - height={undefined} - style={{alignSelf: 'stretch'}} - /> - <LoadingPlaceholder - width={180} - height={undefined} - style={{alignSelf: 'stretch'}} - /> - <Text - style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}> - {' '} - </Text> + <GestureDetector gesture={trendingScrollGesture}> + <ScrollView + horizontal + showsHorizontalScrollIndicator={false} + decelerationRate="fast"> + <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}> + <View style={{paddingLeft: 4, paddingRight: 2}}> + <Graph size="sm" /> </View> - ) : !trending?.topics ? null : ( - <> - {trending.topics.map(topic => ( - <TrendingTopicLink - key={topic.link} - topic={topic} - onPress={() => { - logEvent('trendingTopic:click', {context: 'interstitial'}) - }}> - <View style={[a.py_lg]}> - <Text - style={[ - t.atoms.text, - a.text_sm, - a.font_bold, - {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar - ]}> - {topic.topic} - </Text> - </View> - </TrendingTopicLink> - ))} - <Button - label={_(msg`Hide trending topics`)} - size="tiny" - variant="ghost" - color="secondary" - shape="round" - onPress={() => trendingPrompt.open()}> - <ButtonIcon icon={X} /> - </Button> - </> - )} - </View> - </ScrollView> + {isLoading ? ( + <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}> + <LoadingPlaceholder + width={80} + height={undefined} + style={{alignSelf: 'stretch'}} + /> + <LoadingPlaceholder + width={50} + height={undefined} + style={{alignSelf: 'stretch'}} + /> + <LoadingPlaceholder + width={120} + height={undefined} + style={{alignSelf: 'stretch'}} + /> + <LoadingPlaceholder + width={30} + height={undefined} + style={{alignSelf: 'stretch'}} + /> + <LoadingPlaceholder + width={180} + height={undefined} + style={{alignSelf: 'stretch'}} + /> + <Text + style={[ + t.atoms.text_contrast_medium, + a.text_sm, + a.font_bold, + ]}> + {' '} + </Text> + </View> + ) : !trending?.topics ? null : ( + <> + {trending.topics.map(topic => ( + <TrendingTopicLink + key={topic.link} + topic={topic} + onPress={() => { + logEvent('trendingTopic:click', {context: 'interstitial'}) + }}> + <View style={[a.py_lg]}> + <Text + style={[ + t.atoms.text, + a.text_sm, + a.font_bold, + {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar + ]}> + {topic.topic} + </Text> + </View> + </TrendingTopicLink> + ))} + <Button + label={_(msg`Hide trending topics`)} + size="tiny" + variant="ghost" + color="secondary" + shape="round" + onPress={() => trendingPrompt.open()}> + <ButtonIcon icon={X} /> + </Button> + </> + )} + </View> + </ScrollView> + </GestureDetector> <Prompt.Basic control={trendingPrompt} |