diff options
Diffstat (limited to 'src/view/com/util/images/AutoSizedImage.tsx')
-rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 41 |
1 files changed, 28 insertions, 13 deletions
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 17e3e809b..8c31f5614 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -9,29 +9,33 @@ import { import {Image} from 'expo-image' import {clamp} from 'lib/numbers' import {useStores} from 'state/index' -import {Dim} from 'lib/media/manip' +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 +interface Props { + alt?: string + uri: string + onPress?: () => void + onLongPress?: () => void + onPressIn?: () => void + style?: StyleProp<ViewStyle> + children?: React.ReactNode +} + export function AutoSizedImage({ + alt, uri, onPress, onLongPress, onPressIn, style, children = null, -}: { - uri: string - onPress?: () => void - onLongPress?: () => void - onPressIn?: () => void - style?: StyleProp<ViewStyle> - children?: React.ReactNode -}) { +}: Props) { const store = useStores() - const [dim, setDim] = React.useState<Dim | undefined>( + const [dim, setDim] = React.useState<Dimensions | undefined>( store.imageSizes.get(uri), ) const [aspectRatio, setAspectRatio] = React.useState<number>( @@ -59,20 +63,31 @@ export function AutoSizedImage({ onPressIn={onPressIn} delayPressIn={DELAY_PRESS_IN} style={[styles.container, style]}> - <Image style={[styles.image, {aspectRatio}]} source={uri} /> + <Image + style={[styles.image, {aspectRatio}]} + source={uri} + accessible={true} // Must set for `accessibilityLabel` to work + accessibilityLabel={alt} + /> {children} </TouchableOpacity> ) } + return ( <View style={[styles.container, style]}> - <Image style={[styles.image, {aspectRatio}]} source={{uri}} /> + <Image + style={[styles.image, {aspectRatio}]} + source={{uri}} + accessible={true} // Must set for `accessibilityLabel` to work + accessibilityLabel={alt} + /> {children} </View> ) } -function calc(dim: Dim) { +function calc(dim: Dimensions) { if (dim.width === 0 || dim.height === 0) { return 1 } |