Use `Pressable` for most links/embeds (#1181)
* delay press on all links * use Pressable for all accessible linkszio/stable
parent
4654a9a45e
commit
462022741d
|
@ -1,12 +1,5 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
Pressable,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
View,
|
||||
ViewStyle,
|
||||
TouchableOpacity,
|
||||
} from 'react-native'
|
||||
import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
|
@ -68,7 +61,7 @@ export const CustomFeed = observer(
|
|||
}, [store, item])
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
<Pressable
|
||||
testID={`feed-${item.displayName}`}
|
||||
accessibilityRole="button"
|
||||
style={[styles.container, pal.border, style]}
|
||||
|
@ -132,7 +125,7 @@ export const CustomFeed = observer(
|
|||
{pluralize(item.data.likeCount || 0, 'user')}
|
||||
</Text>
|
||||
) : null}
|
||||
</TouchableOpacity>
|
||||
</Pressable>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
|
|
@ -9,8 +9,9 @@ import {
|
|||
TextProps,
|
||||
View,
|
||||
ViewStyle,
|
||||
TouchableOpacity,
|
||||
Pressable,
|
||||
TouchableWithoutFeedback,
|
||||
TouchableOpacity,
|
||||
} from 'react-native'
|
||||
import {
|
||||
useLinkProps,
|
||||
|
@ -112,7 +113,7 @@ export const Link = observer(function Link({
|
|||
}
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
<Pressable
|
||||
testID={testID}
|
||||
style={style}
|
||||
onPress={onPress}
|
||||
|
@ -122,7 +123,7 @@ export const Link = observer(function Link({
|
|||
href={asAnchor ? sanitizeUrl(href) : undefined}
|
||||
{...props}>
|
||||
{children ? children : <Text>{title || 'link'}</Text>}
|
||||
</TouchableOpacity>
|
||||
</Pressable>
|
||||
)
|
||||
})
|
||||
|
||||
|
|
|
@ -1,17 +1,10 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {StyleProp, StyleSheet, Pressable, View, ViewStyle} from 'react-native'
|
||||
import {Image} from 'expo-image'
|
||||
import {clamp} from 'lib/numbers'
|
||||
import {useStores} from 'state/index'
|
||||
import {Dimensions} from 'lib/media/types'
|
||||
|
||||
export const DELAY_PRESS_IN = 500
|
||||
const MIN_ASPECT_RATIO = 0.33 // 1/3
|
||||
const MAX_ASPECT_RATIO = 5 // 5/1
|
||||
|
||||
|
@ -57,11 +50,10 @@ export function AutoSizedImage({
|
|||
|
||||
if (onPress || onLongPress || onPressIn) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
onPressIn={onPressIn}
|
||||
delayPressIn={DELAY_PRESS_IN}
|
||||
style={[styles.container, style]}
|
||||
accessible={true}
|
||||
accessibilityRole="button"
|
||||
|
@ -74,7 +66,7 @@ export function AutoSizedImage({
|
|||
accessibilityIgnoresInvertColors
|
||||
/>
|
||||
{children}
|
||||
</TouchableOpacity>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {AppBskyEmbedImages} from '@atproto/api'
|
||||
import React, {ComponentProps, FC} from 'react'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import {StyleSheet, Text, Pressable, View} from 'react-native'
|
||||
import {Image} from 'expo-image'
|
||||
|
||||
type EventFunction = (index: number) => void
|
||||
|
@ -14,8 +14,6 @@ interface GalleryItemProps {
|
|||
imageStyle: ComponentProps<typeof Image>['style']
|
||||
}
|
||||
|
||||
const DELAY_PRESS_IN = 500
|
||||
|
||||
export const GalleryItem: FC<GalleryItemProps> = ({
|
||||
images,
|
||||
index,
|
||||
|
@ -28,8 +26,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
|
|||
|
||||
return (
|
||||
<View>
|
||||
<TouchableOpacity
|
||||
delayPressIn={DELAY_PRESS_IN}
|
||||
<Pressable
|
||||
onPress={onPress ? () => onPress(index) : undefined}
|
||||
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
|
||||
onLongPress={onLongPress ? () => onLongPress(index) : undefined}
|
||||
|
@ -44,7 +41,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
|
|||
accessibilityHint=""
|
||||
accessibilityIgnoresInvertColors
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</Pressable>
|
||||
{image.alt === '' ? null : (
|
||||
<View style={styles.altContainer}>
|
||||
<Text style={styles.alt} accessible={false}>
|
||||
|
|
|
@ -23,9 +23,9 @@ export const YoutubeEmbed = ({
|
|||
|
||||
return (
|
||||
<Link
|
||||
asAnchor
|
||||
style={[styles.extOuter, pal.view, pal.border, style]}
|
||||
href={link.uri}
|
||||
noFeedback>
|
||||
href={link.uri}>
|
||||
<ExternalLinkEmbed link={link} imageChild={imageChild} />
|
||||
</Link>
|
||||
)
|
||||
|
|
|
@ -150,7 +150,6 @@ export function PostEmbeds({
|
|||
return (
|
||||
<Link
|
||||
asAnchor
|
||||
noFeedback
|
||||
style={[styles.extOuter, pal.view, pal.border, style]}
|
||||
href={link.uri}>
|
||||
<ExternalLinkEmbed link={link} />
|
||||
|
|
Loading…
Reference in New Issue