diff options
Diffstat (limited to 'src/view/com/util/images/ImageLayoutGrid.tsx')
| -rw-r--r-- | src/view/com/util/images/ImageLayoutGrid.tsx | 130 |
1 files changed, 109 insertions, 21 deletions
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 45da7f076..1aaf166ff 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -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' @@ -22,14 +22,23 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) { ? gtMobile ? a.gap_xs : a.gap_2xs - : gtMobile - ? a.gap_sm : a.gap_xs const count = props.images.length - const aspectRatio = count === 2 ? 2 : count === 3 ? 1.5 : 1 + let aspectRatio + switch (count) { + case 2: + aspectRatio = 2 + break + case 3: + aspectRatio = 2 + break + case 4: + aspectRatio = undefined + break + } return ( <View style={style}> - <View style={[gap, {aspectRatio}]}> + <View style={[gap, a.rounded_md, a.overflow_hidden, {aspectRatio}]}> <ImageLayoutGridInner {...props} gap={gap} /> </View> </View> @@ -54,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> ) @@ -65,15 +82,35 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { case 3: return ( <View style={[a.flex_1, a.flex_row, gap]}> - <View style={{flex: 2}}> - <GalleryItem {...props} index={0} /> + <View style={[a.flex_1]}> + <GalleryItem + {...props} + index={0} + insetBorderStyle={noCorners(['topRight', 'bottomRight'])} + /> </View> <View style={[a.flex_1, gap]}> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={1} /> + <View style={[a.flex_1]}> + <GalleryItem + {...props} + index={1} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'bottomRight', + ])} + /> </View> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={2} /> + <View style={[a.flex_1]}> + <GalleryItem + {...props} + index={2} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'topRight', + ])} + /> </View> </View> </View> @@ -83,19 +120,51 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { return ( <> <View style={[a.flex_row, gap]}> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={0} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={0} + insetBorderStyle={noCorners([ + 'bottomLeft', + 'topRight', + 'bottomRight', + ])} + /> </View> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={1} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={1} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'bottomRight', + ])} + /> </View> </View> <View style={[a.flex_row, gap]}> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={2} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={2} + insetBorderStyle={noCorners([ + 'topLeft', + 'topRight', + 'bottomRight', + ])} + /> </View> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={3} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={3} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'topRight', + ])} + /> </View> </View> </> @@ -105,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) +} |