use Link component rather than jank Pressable
This commit is contained in:
@@ -1,19 +1,13 @@
|
|||||||
import {
|
import {type StyleProp, View, type ViewStyle} from 'react-native'
|
||||||
Linking,
|
|
||||||
Pressable,
|
|
||||||
type StyleProp,
|
|
||||||
View,
|
|
||||||
type ViewStyle,
|
|
||||||
} from 'react-native'
|
|
||||||
import {
|
import {
|
||||||
type $Typed,
|
type $Typed,
|
||||||
AppBskyFeedDefs,
|
AppBskyFeedDefs,
|
||||||
type AppBskyGraphDefs,
|
type AppBskyGraphDefs,
|
||||||
AtUri,
|
AtUri,
|
||||||
} from '@atproto/api'
|
} from '@atproto/api'
|
||||||
import {Plural, Trans} from '@lingui/macro'
|
import {msg, Plural, Trans} from '@lingui/macro'
|
||||||
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
|
|
||||||
import {sanitizeHandle} from '#/lib/strings/handles'
|
import {sanitizeHandle} from '#/lib/strings/handles'
|
||||||
import {
|
import {
|
||||||
type FeedSourceInfo,
|
type FeedSourceInfo,
|
||||||
@@ -24,7 +18,7 @@ import {
|
|||||||
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
|
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
|
||||||
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
import {shouldClickOpenNewTab} from '#/components/Link'
|
import {Link} from '#/components/Link'
|
||||||
import {RichText} from '#/components/RichText'
|
import {RichText} from '#/components/RichText'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
@@ -40,6 +34,7 @@ type FeedSourceCardProps = {
|
|||||||
pinOnSave?: boolean
|
pinOnSave?: boolean
|
||||||
showMinimalPlaceholder?: boolean
|
showMinimalPlaceholder?: boolean
|
||||||
hideTopBorder?: boolean
|
hideTopBorder?: boolean
|
||||||
|
link?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function FeedSourceCard({
|
export function FeedSourceCard({
|
||||||
@@ -78,6 +73,7 @@ export function FeedSourceCardLoaded({
|
|||||||
showLikes = false,
|
showLikes = false,
|
||||||
showMinimalPlaceholder,
|
showMinimalPlaceholder,
|
||||||
hideTopBorder,
|
hideTopBorder,
|
||||||
|
link = true,
|
||||||
}: {
|
}: {
|
||||||
feed?: FeedSourceInfo
|
feed?: FeedSourceInfo
|
||||||
style?: StyleProp<ViewStyle>
|
style?: StyleProp<ViewStyle>
|
||||||
@@ -85,9 +81,10 @@ export function FeedSourceCardLoaded({
|
|||||||
showLikes?: boolean
|
showLikes?: boolean
|
||||||
showMinimalPlaceholder?: boolean
|
showMinimalPlaceholder?: boolean
|
||||||
hideTopBorder?: boolean
|
hideTopBorder?: boolean
|
||||||
|
link?: boolean
|
||||||
}) {
|
}) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const navigation = useNavigationDeduped()
|
const {_} = useLingui()
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* LOAD STATE
|
* LOAD STATE
|
||||||
@@ -109,45 +106,8 @@ export function FeedSourceCardLoaded({
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
const inner = (
|
||||||
<Pressable
|
<>
|
||||||
testID={`feed-${feed.displayName}`}
|
|
||||||
accessibilityRole="button"
|
|
||||||
style={[
|
|
||||||
a.flex_1,
|
|
||||||
a.p_lg,
|
|
||||||
a.gap_md,
|
|
||||||
!hideTopBorder && !a.border_t,
|
|
||||||
t.atoms.border_contrast_low,
|
|
||||||
style,
|
|
||||||
]}
|
|
||||||
onPress={e => {
|
|
||||||
const shouldOpenInNewTab = shouldClickOpenNewTab(e)
|
|
||||||
if (feed.type === 'feed') {
|
|
||||||
if (shouldOpenInNewTab) {
|
|
||||||
Linking.openURL(
|
|
||||||
`/profile/${feed.creatorDid}/feed/${new AtUri(feed.uri).rkey}`,
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
navigation.push('ProfileFeed', {
|
|
||||||
name: feed.creatorDid,
|
|
||||||
rkey: new AtUri(feed.uri).rkey,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (feed.type === 'list') {
|
|
||||||
if (shouldOpenInNewTab) {
|
|
||||||
Linking.openURL(
|
|
||||||
`/profile/${feed.creatorDid}/lists/${new AtUri(feed.uri).rkey}`,
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
navigation.push('ProfileList', {
|
|
||||||
name: feed.creatorDid,
|
|
||||||
rkey: new AtUri(feed.uri).rkey,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
key={feed.uri}>
|
|
||||||
<View style={[a.flex_row, a.align_center]}>
|
<View style={[a.flex_row, a.align_center]}>
|
||||||
<View style={[a.mr_md]}>
|
<View style={[a.mr_md]}>
|
||||||
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
|
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
|
||||||
@@ -170,7 +130,6 @@ export function FeedSourceCardLoaded({
|
|||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{showDescription && feed.description ? (
|
{showDescription && feed.description ? (
|
||||||
<RichText
|
<RichText
|
||||||
style={[t.atoms.text_contrast_high, a.flex_1, a.flex_wrap]}
|
style={[t.atoms.text_contrast_high, a.flex_1, a.flex_wrap]}
|
||||||
@@ -178,7 +137,6 @@ export function FeedSourceCardLoaded({
|
|||||||
numberOfLines={3}
|
numberOfLines={3}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{showLikes && feed.type === 'feed' ? (
|
{showLikes && feed.type === 'feed' ? (
|
||||||
<Text
|
<Text
|
||||||
style={[
|
style={[
|
||||||
@@ -193,6 +151,46 @@ export function FeedSourceCardLoaded({
|
|||||||
</Trans>
|
</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
) : null}
|
) : null}
|
||||||
</Pressable>
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
if (link) {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
testID={`feed-${feed.displayName}`}
|
||||||
|
label={_(
|
||||||
|
feed.type === 'feed'
|
||||||
|
? msg`${feed.displayName}, a feed by ${sanitizeHandle(feed.creatorHandle, '@')}, liked by ${feed.likeCount || 0}`
|
||||||
|
: msg`${feed.displayName}, a list by ${sanitizeHandle(feed.creatorHandle, '@')}`,
|
||||||
|
)}
|
||||||
|
to={{
|
||||||
|
screen: feed.type === 'feed' ? 'ProfileFeed' : 'ProfileList',
|
||||||
|
params: {name: feed.creatorDid, rkey: new AtUri(feed.uri).rkey},
|
||||||
|
}}
|
||||||
|
style={[
|
||||||
|
a.flex_1,
|
||||||
|
a.p_lg,
|
||||||
|
a.gap_md,
|
||||||
|
!hideTopBorder && !a.border_t,
|
||||||
|
t.atoms.border_contrast_low,
|
||||||
|
style,
|
||||||
|
]}>
|
||||||
|
{inner}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.flex_1,
|
||||||
|
a.p_lg,
|
||||||
|
a.gap_md,
|
||||||
|
!hideTopBorder && !a.border_t,
|
||||||
|
t.atoms.border_contrast_low,
|
||||||
|
style,
|
||||||
|
]}>
|
||||||
|
{inner}
|
||||||
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user