From dbb3c5c15524c517291356a4918d043348906aad Mon Sep 17 00:00:00 2001
From: Ollie H <renahlee@outlook.com>
Date: Mon, 1 May 2023 11:59:17 -0700
Subject: Image alt text view modal (#551)

* Image alt text view modal

* Minor style tweaks

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
---
 src/view/com/util/images/ImageLayoutGrid.tsx | 204 ++++++---------------------
 1 file changed, 41 insertions(+), 163 deletions(-)

(limited to 'src/view/com/util/images/ImageLayoutGrid.tsx')

diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index 51bb04fe9..4c0901304 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -3,15 +3,13 @@ import {
   LayoutChangeEvent,
   StyleProp,
   StyleSheet,
-  TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native'
-import {Image, ImageStyle} from 'expo-image'
+import {ImageStyle} from 'expo-image'
 import {Dimensions} from 'lib/media/types'
 import {AppBskyEmbedImages} from '@atproto/api'
-
-export const DELAY_PRESS_IN = 500
+import {GalleryItem} from './Gallery'
 
 interface ImageLayoutGridProps {
   images: AppBskyEmbedImages.ViewImage[]
@@ -21,32 +19,21 @@ interface ImageLayoutGridProps {
   style?: StyleProp<ViewStyle>
 }
 
-export function ImageLayoutGrid({
-  images,
-  onPress,
-  onLongPress,
-  onPressIn,
-  style,
-}: ImageLayoutGridProps) {
+export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
   const [containerInfo, setContainerInfo] = useState<Dimensions | undefined>()
 
   const onLayout = (evt: LayoutChangeEvent) => {
+    const {width, height} = evt.nativeEvent.layout
     setContainerInfo({
-      width: evt.nativeEvent.layout.width,
-      height: evt.nativeEvent.layout.height,
+      width,
+      height,
     })
   }
 
   return (
     <View style={style} onLayout={onLayout}>
       {containerInfo ? (
-        <ImageLayoutGridInner
-          images={images}
-          onPress={onPress}
-          onPressIn={onPressIn}
-          onLongPress={onLongPress}
-          containerInfo={containerInfo}
-        />
+        <ImageLayoutGridInner {...props} containerInfo={containerInfo} />
       ) : undefined}
     </View>
   )
@@ -61,13 +48,10 @@ interface ImageLayoutGridInnerProps {
 }
 
 function ImageLayoutGridInner({
-  images,
-  onPress,
-  onLongPress,
-  onPressIn,
   containerInfo,
+  ...props
 }: ImageLayoutGridInnerProps) {
-  const count = images.length
+  const count = props.images.length
   const size1 = useMemo<ImageStyle>(() => {
     if (count === 3) {
       const size = (containerInfo.width - 10) / 3
@@ -87,149 +71,43 @@ function ImageLayoutGridInner({
     }
   }, [count, containerInfo])
 
-  if (count === 2) {
-    return (
-      <View style={styles.flexRow}>
-        <TouchableOpacity
-          delayPressIn={DELAY_PRESS_IN}
-          onPress={() => onPress?.(0)}
-          onPressIn={() => onPressIn?.(0)}
-          onLongPress={() => onLongPress?.(0)}>
-          <Image
-            source={{uri: images[0].thumb}}
-            style={size1}
-            accessible={true}
-            accessibilityLabel={images[0].alt}
-          />
-        </TouchableOpacity>
-        <View style={styles.wSpace} />
-        <TouchableOpacity
-          delayPressIn={DELAY_PRESS_IN}
-          onPress={() => onPress?.(1)}
-          onPressIn={() => onPressIn?.(1)}
-          onLongPress={() => onLongPress?.(1)}>
-          <Image
-            source={{uri: images[1].thumb}}
-            style={size1}
-            accessible={true}
-            accessibilityLabel={images[1].alt}
-          />
-        </TouchableOpacity>
-      </View>
-    )
-  }
-  if (count === 3) {
-    return (
-      <View style={styles.flexRow}>
-        <TouchableOpacity
-          delayPressIn={DELAY_PRESS_IN}
-          onPress={() => onPress?.(0)}
-          onPressIn={() => onPressIn?.(0)}
-          onLongPress={() => onLongPress?.(0)}>
-          <Image
-            source={{uri: images[0].thumb}}
-            style={size2}
-            accessible={true}
-            accessibilityLabel={images[0].alt}
-          />
-        </TouchableOpacity>
-        <View style={styles.wSpace} />
-        <View>
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(1)}
-            onPressIn={() => onPressIn?.(1)}
-            onLongPress={() => onLongPress?.(1)}>
-            <Image
-              source={{uri: images[1].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[1].alt}
-            />
-          </TouchableOpacity>
-          <View style={styles.hSpace} />
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(2)}
-            onPressIn={() => onPressIn?.(2)}
-            onLongPress={() => onLongPress?.(2)}>
-            <Image
-              source={{uri: images[2].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[2].alt}
-            />
-          </TouchableOpacity>
+  switch (count) {
+    case 2:
+      return (
+        <View style={styles.flexRow}>
+          <GalleryItem index={0} {...props} imageStyle={size1} />
+          <GalleryItem index={1} {...props} imageStyle={size1} />
         </View>
-      </View>
-    )
-  }
-  if (count === 4) {
-    return (
-      <View style={styles.flexRow}>
-        <View>
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(0)}
-            onPressIn={() => onPressIn?.(0)}
-            onLongPress={() => onLongPress?.(0)}>
-            <Image
-              source={{uri: images[0].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[0].alt}
-            />
-          </TouchableOpacity>
-          <View style={styles.hSpace} />
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(2)}
-            onPressIn={() => onPressIn?.(2)}
-            onLongPress={() => onLongPress?.(2)}>
-            <Image
-              source={{uri: images[2].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[2].alt}
-            />
-          </TouchableOpacity>
+      )
+    case 3:
+      return (
+        <View style={styles.flexRow}>
+          <GalleryItem index={0} {...props} imageStyle={size2} />
+          <View style={styles.flexColumn}>
+            <GalleryItem index={1} {...props} imageStyle={size1} />
+            <GalleryItem index={2} {...props} imageStyle={size1} />
+          </View>
         </View>
-        <View style={styles.wSpace} />
-        <View>
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(1)}
-            onPressIn={() => onPressIn?.(1)}
-            onLongPress={() => onLongPress?.(1)}>
-            <Image
-              source={{uri: images[1].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[1].alt}
-            />
-          </TouchableOpacity>
-          <View style={styles.hSpace} />
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(3)}
-            onPressIn={() => onPressIn?.(3)}
-            onLongPress={() => onLongPress?.(3)}>
-            <Image
-              source={{uri: images[3].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[3].alt}
-            />
-          </TouchableOpacity>
+      )
+    case 4:
+      return (
+        <View style={styles.flexRow}>
+          <View style={styles.flexColumn}>
+            <GalleryItem index={0} {...props} imageStyle={size1} />
+            <GalleryItem index={2} {...props} imageStyle={size1} />
+          </View>
+          <View style={styles.flexColumn}>
+            <GalleryItem index={1} {...props} imageStyle={size1} />
+            <GalleryItem index={3} {...props} imageStyle={size1} />
+          </View>
         </View>
-      </View>
-    )
+      )
+    default:
+      return null
   }
-  return <View />
 }
 
 const styles = StyleSheet.create({
-  flexRow: {flexDirection: 'row'},
-  wSpace: {width: 5},
-  hSpace: {height: 5},
+  flexRow: {flexDirection: 'row', gap: 5},
+  flexColumn: {flexDirection: 'column', gap: 5},
 })
-- 
cgit 1.4.1