Reduce confusing visual feedback while scrolling
parent
c3caf4826e
commit
36dc1c7525
|
@ -50,7 +50,7 @@ export const FeedItem = observer(function FeedItem({
|
||||||
|
|
||||||
if (item.isReply || item.isMention) {
|
if (item.isReply || item.isMention) {
|
||||||
return (
|
return (
|
||||||
<Link href={itemHref} title={itemTitle}>
|
<Link href={itemHref} title={itemTitle} noFeedback>
|
||||||
<Post
|
<Post
|
||||||
uri={item.uri}
|
uri={item.uri}
|
||||||
initView={item.additionalPost}
|
initView={item.additionalPost}
|
||||||
|
@ -121,7 +121,8 @@ export const FeedItem = observer(function FeedItem({
|
||||||
<Link
|
<Link
|
||||||
style={[styles.outer, item.isRead ? undefined : styles.outerUnread]}
|
style={[styles.outer, item.isRead ? undefined : styles.outerUnread]}
|
||||||
href={itemHref}
|
href={itemHref}
|
||||||
title={itemTitle}>
|
title={itemTitle}
|
||||||
|
noFeedback>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutIcon}>
|
<View style={styles.layoutIcon}>
|
||||||
{icon === 'UpIconSolid' ? (
|
{icon === 'UpIconSolid' ? (
|
||||||
|
|
|
@ -86,7 +86,8 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
|
||||||
<Link
|
<Link
|
||||||
style={styles.outer}
|
style={styles.outer}
|
||||||
href={`/profile/${item.handle}`}
|
href={`/profile/${item.handle}`}
|
||||||
title={item.handle}>
|
title={item.handle}
|
||||||
|
noFeedback>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
|
@ -226,7 +226,7 @@ export const PostThreadItem = observer(function PostThreadItem({
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<Link style={styles.outer} href={itemHref} title={itemTitle}>
|
<Link style={styles.outer} href={itemHref} title={itemTitle} noFeedback>
|
||||||
{!item.replyingTo && item.record.reply && (
|
{!item.replyingTo && item.record.reply && (
|
||||||
<View style={styles.parentReplyLine} />
|
<View style={styles.parentReplyLine} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -86,7 +86,8 @@ const LikedByItem = ({item}: {item: VotesViewItemModel}) => {
|
||||||
<Link
|
<Link
|
||||||
style={styles.outer}
|
style={styles.outer}
|
||||||
href={`/profile/${item.actor.handle}`}
|
href={`/profile/${item.actor.handle}`}
|
||||||
title={item.actor.handle}>
|
title={item.actor.handle}
|
||||||
|
noFeedback>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
|
@ -133,7 +133,11 @@ export const Post = observer(function Post({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link style={[styles.outer, style]} href={itemHref} title={itemTitle}>
|
<Link
|
||||||
|
style={[styles.outer, style]}
|
||||||
|
href={itemHref}
|
||||||
|
title={itemTitle}
|
||||||
|
noFeedback>
|
||||||
{showReplyLine && <View style={styles.replyLine} />}
|
{showReplyLine && <View style={styles.replyLine} />}
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
|
|
|
@ -109,7 +109,7 @@ export const FeedItem = observer(function FeedItem({
|
||||||
style={{marginTop: 2}}
|
style={{marginTop: 2}}
|
||||||
/>
|
/>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
<Link style={outerStyles} href={itemHref} title={itemTitle}>
|
<Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
|
||||||
{isChild && <View style={styles.topReplyLine} />}
|
{isChild && <View style={styles.topReplyLine} />}
|
||||||
{item._isThreadParent && (
|
{item._isThreadParent && (
|
||||||
<View
|
<View
|
||||||
|
|
|
@ -20,7 +20,11 @@ export function ProfileCard({
|
||||||
onPressButton?: () => void
|
onPressButton?: () => void
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Link style={styles.outer} href={`/profile/${handle}`} title={handle}>
|
<Link
|
||||||
|
style={styles.outer}
|
||||||
|
href={`/profile/${handle}`}
|
||||||
|
title={handle}
|
||||||
|
noFeedback>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
|
@ -84,7 +84,8 @@ const User = ({item}: {item: FollowerItem}) => {
|
||||||
<Link
|
<Link
|
||||||
style={styles.outer}
|
style={styles.outer}
|
||||||
href={`/profile/${item.handle}`}
|
href={`/profile/${item.handle}`}
|
||||||
title={item.handle}>
|
title={item.handle}
|
||||||
|
noFeedback>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
|
@ -84,7 +84,8 @@ const User = ({item}: {item: FollowItem}) => {
|
||||||
<Link
|
<Link
|
||||||
style={styles.outer}
|
style={styles.outer}
|
||||||
href={`/profile/${item.handle}`}
|
href={`/profile/${item.handle}`}
|
||||||
title={item.handle}>
|
title={item.handle}
|
||||||
|
noFeedback>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<View style={styles.layoutAvi}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
|
|
|
@ -4,8 +4,10 @@ import {
|
||||||
Linking,
|
Linking,
|
||||||
StyleProp,
|
StyleProp,
|
||||||
Text,
|
Text,
|
||||||
|
TouchableWithoutFeedback,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
TextStyle,
|
TextStyle,
|
||||||
|
View,
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {useStores, RootStoreModel} from '../../../state'
|
import {useStores, RootStoreModel} from '../../../state'
|
||||||
|
@ -16,11 +18,13 @@ export const Link = observer(function Link({
|
||||||
href,
|
href,
|
||||||
title,
|
title,
|
||||||
children,
|
children,
|
||||||
|
noFeedback,
|
||||||
}: {
|
}: {
|
||||||
style?: StyleProp<ViewStyle>
|
style?: StyleProp<ViewStyle>
|
||||||
href: string
|
href: string
|
||||||
title?: string
|
title?: string
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
|
noFeedback?: boolean
|
||||||
}) {
|
}) {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const onPress = () => {
|
const onPress = () => {
|
||||||
|
@ -29,12 +33,24 @@ export const Link = observer(function Link({
|
||||||
const onLongPress = () => {
|
const onLongPress = () => {
|
||||||
handleLink(store, href, true)
|
handleLink(store, href, true)
|
||||||
}
|
}
|
||||||
|
if (noFeedback) {
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableWithoutFeedback
|
||||||
style={style}
|
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
onLongPress={onLongPress}
|
onLongPress={onLongPress}
|
||||||
delayPressIn={50}>
|
delayPressIn={50}>
|
||||||
|
<View style={style}>
|
||||||
|
{children ? children : <Text>{title || 'link'}</Text>}
|
||||||
|
</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={onPress}
|
||||||
|
onLongPress={onLongPress}
|
||||||
|
delayPressIn={50}
|
||||||
|
style={style}>
|
||||||
{children ? children : <Text>{title || 'link'}</Text>}
|
{children ? children : <Text>{title || 'link'}</Text>}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)
|
)
|
||||||
|
|
|
@ -97,7 +97,7 @@ export function PostEmbeds({
|
||||||
const externalEmbed = embed as AppBskyEmbedExternal.Presented
|
const externalEmbed = embed as AppBskyEmbedExternal.Presented
|
||||||
const link = externalEmbed.external
|
const link = externalEmbed.external
|
||||||
return (
|
return (
|
||||||
<Link style={[styles.extOuter, style]} href={link.uri}>
|
<Link style={[styles.extOuter, style]} href={link.uri} noFeedback>
|
||||||
{link.thumb ? (
|
{link.thumb ? (
|
||||||
<AutoSizedImage style={style} uri={link.thumb} />
|
<AutoSizedImage style={style} uri={link.thumb} />
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
|
|
@ -37,7 +37,10 @@ export const Settings = observer(function Settings({
|
||||||
<Text style={[s.blue3, s.bold]}>Sign out</Text>
|
<Text style={[s.blue3, s.bold]}>Sign out</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
<Link href={`/profile/${store.me.handle}`} title="Your profile">
|
<Link
|
||||||
|
href={`/profile/${store.me.handle}`}
|
||||||
|
title="Your profile"
|
||||||
|
noFeedback>
|
||||||
<View style={styles.profile}>
|
<View style={styles.profile}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
size={40}
|
size={40}
|
||||||
|
|
Loading…
Reference in New Issue