acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

fix inset styles

Browse Source
This commit is contained in:
Samuel Newman
2024-09-19 15:45:02 +01:00
parent 6662b4fe5a
commit 0fd8643718
2 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/util/images/Gallery.tsx
+10 -8
View File
@@ -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<typeof Image>['style']
imageStyle?: StyleProp<ImageStyle>
viewContext?: PostEmbedViewContext
insetBorderStyle?: StyleProp<ViewStyle>
}
export const GalleryItem: FC<GalleryItemProps> = ({
export function GalleryItem({
images,
index,
imageStyle,
@@ -31,7 +32,8 @@ export const GalleryItem: FC<GalleryItemProps> = ({
onPressIn,
onLongPress,
viewContext,
}) => {
insetBorderStyle,
}: Props) {
const t = useTheme()
const {_} = useLingui()
const largeAltBadge = useLargeAltBadgeEnabled()
@@ -62,7 +64,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
accessibilityHint=""
accessibilityIgnoresInvertColors
/>
<MediaInsetBorder />
<MediaInsetBorder style={insetBorderStyle} />
</Pressable>
{hasAlt && !hideBadges ? (
<View
src/view/com/util/images/ImageLayoutGrid.tsx
+91 -12
View File
@@ -1,5 +1,5 @@
import React from 'react'
import {StyleProp, View, ViewStyle} from 'react-native'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {AppBskyEmbedImages} from '@atproto/api'
import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
@@ -24,7 +24,7 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
: a.gap_2xs
: a.gap_xs
const count = props.images.length
let aspectRatio = 1
let aspectRatio
switch (count) {
case 2:
aspectRatio = 2
@@ -33,7 +33,7 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
aspectRatio = 2
break
case 4:
aspectRatio = 1.5
aspectRatio = undefined
break
}
return (
@@ -63,10 +63,18 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
return (
<View style={[a.flex_1, a.flex_row, gap]}>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={0} />
<GalleryItem
{...props}
index={0}
insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={1} />
<GalleryItem
{...props}
index={1}
insetBorderStyle={noCorners(['topLeft', 'bottomLeft'])}
/>
</View>
</View>
)
@@ -75,14 +83,34 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
return (
<View style={[a.flex_1, a.flex_row, gap]}>
<View style={[a.flex_1]}>
<GalleryItem {...props} index={0} />
<GalleryItem
{...props}
index={0}
insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
/>
</View>
<View style={[a.flex_1, gap]}>
<View style={[a.flex_1]}>
<GalleryItem {...props} index={1} />
<GalleryItem
{...props}
index={1}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'bottomRight',
])}
/>
</View>
<View style={[a.flex_1]}>
<GalleryItem {...props} index={2} />
<GalleryItem
{...props}
index={2}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'topRight',
])}
/>
</View>
</View>
</View>
@@ -93,18 +121,50 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
<>
<View style={[a.flex_row, gap]}>
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem {...props} index={0} />
<GalleryItem
{...props}
index={0}
insetBorderStyle={noCorners([
'bottomLeft',
'topRight',
'bottomRight',
])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem {...props} index={1} />
<GalleryItem
{...props}
index={1}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'bottomRight',
])}
/>
</View>
</View>
<View style={[a.flex_row, gap]}>
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem {...props} index={2} />
<GalleryItem
{...props}
index={2}
insetBorderStyle={noCorners([
'topLeft',
'topRight',
'bottomRight',
])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem {...props} index={3} />
<GalleryItem
{...props}
index={3}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'topRight',
])}
/>
</View>
</View>
</>
@@ -114,3 +174,22 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
return null
}
}
function noCorners(
corners: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[],
) {
const styles: StyleProp<ViewStyle>[] = []
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)
}