diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 75c0e429d8..e277b7e86a 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -1,6 +1,6 @@ -import React, {ComponentProps, FC} from 'react' -import {Pressable, View} from 'react-native' -import {Image} from 'expo-image' +import React from 'react' +import {Pressable, StyleProp, View, ViewStyle} from 'react-native' +import {Image, ImageStyle} from 'expo-image' import {AppBskyEmbedImages} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -13,17 +13,18 @@ import {Text} from '#/components/Typography' type EventFunction = (index: number) => void -interface GalleryItemProps { +interface Props { images: AppBskyEmbedImages.ViewImage[] index: number onPress?: EventFunction onLongPress?: EventFunction onPressIn?: EventFunction - imageStyle?: ComponentProps['style'] + imageStyle?: StyleProp viewContext?: PostEmbedViewContext + insetBorderStyle?: StyleProp } -export const GalleryItem: FC = ({ +export function GalleryItem({ images, index, imageStyle, @@ -31,7 +32,8 @@ export const GalleryItem: FC = ({ onPressIn, onLongPress, viewContext, -}) => { + insetBorderStyle, +}: Props) { const t = useTheme() const {_} = useLingui() const largeAltBadge = useLargeAltBadgeEnabled() @@ -62,7 +64,7 @@ export const GalleryItem: FC = ({ accessibilityHint="" accessibilityIgnoresInvertColors /> - + {hasAlt && !hideBadges ? ( - + - + ) @@ -75,14 +83,34 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { return ( - + - + - + @@ -93,18 +121,50 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { <> - + - + - + - + @@ -114,3 +174,22 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { return null } } + +function noCorners( + corners: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[], +) { + const styles: StyleProp[] = [] + if (corners.includes('topLeft')) { + styles.push({borderTopLeftRadius: 0}) + } + if (corners.includes('topRight')) { + styles.push({borderTopRightRadius: 0}) + } + if (corners.includes('bottomLeft')) { + styles.push({borderBottomLeftRadius: 0}) + } + if (corners.includes('bottomRight')) { + styles.push({borderBottomRightRadius: 0}) + } + return StyleSheet.flatten(styles) +}