From 68ab910d5abc96f50794d85b9ed27b9a079b2ba1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 2 Nov 2024 00:46:28 +0000
Subject: [PATCH] Conslidate ImageView props

---
 src/state/lightbox.tsx                       |  2 +-
 src/view/com/lightbox/ImageViewing/index.tsx | 60 ++++++++++++--------
 src/view/com/lightbox/Lightbox.tsx           |  5 +-
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx
index 1dae67932c..70bb09123b 100644
--- a/src/state/lightbox.tsx
+++ b/src/state/lightbox.tsx
@@ -4,7 +4,7 @@ import type {MeasuredDimensions} from 'react-native-reanimated'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {ImageSource} from '#/view/com/lightbox/ImageViewing/@types'
 
-type Lightbox = {
+export type Lightbox = {
   images: ImageSource[]
   thumbDims: MeasuredDimensions | null
   index: number
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index d70aec32ac..96696a9b97 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -18,7 +18,7 @@ import {
 } from 'react-native'
 import {Gesture} from 'react-native-gesture-handler'
 import PagerView from 'react-native-pager-view'
-import {interpolate, MeasuredDimensions} from 'react-native-reanimated'
+import {interpolate} from 'react-native-reanimated'
 import Animated, {
   runOnJS,
   useAnimatedStyle,
@@ -33,6 +33,7 @@ import {Trans} from '@lingui/macro'
 
 import {colors, s} from '#/lib/styles'
 import {isIOS} from '#/platform/detection'
+import {Lightbox} from '#/state/lightbox'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
@@ -42,33 +43,25 @@ import ImageItem from './components/ImageItem/ImageItem'
 
 const SCREEN = Dimensions.get('screen')
 
-type Props = {
-  images: ImageSource[]
-  thumbDims: MeasuredDimensions | null
-  initialImageIndex: number
-  visible: boolean
-  onRequestClose: () => void
-  backgroundColor?: string
-  onPressSave: (uri: string) => void
-  onPressShare: (uri: string) => void
-}
-
 const SCREEN_HEIGHT = Dimensions.get('window').height
 
 function ImageViewing({
-  images,
-  thumbDims,
-  initialImageIndex,
-  visible,
+  lightbox,
   onRequestClose,
   onPressSave,
   onPressShare,
-}: Props) {
+}: {
+  lightbox: Lightbox
+  onRequestClose: () => void
+  onPressSave: (uri: string) => void
+  onPressShare: (uri: string) => void
+}) {
   const openProgress = useSharedValue(0)
   React.useEffect(() => {
     openProgress.value = withClampedSpring(1)
   }, [openProgress])
 
+  const {images, index: initialImageIndex, thumbDims} = lightbox
   const [isScaled, setIsScaled] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [imageIndex, setImageIndex] = useState(initialImageIndex)
@@ -176,10 +169,6 @@ function ImageViewing({
     return {opacity}
   })
 
-  if (!visible) {
-    return null
-  }
-
   return (
     <SafeAreaView
       style={styles.screen}
@@ -393,13 +382,34 @@ const styles = StyleSheet.create({
   },
 })
 
-const EnhancedImageViewing = (props: Props) => (
-  <ImageViewing key={props.initialImageIndex} {...props} />
-)
+function ImageViewingRoot({
+  lightbox,
+  onRequestClose,
+  onPressSave,
+  onPressShare,
+}: {
+  lightbox: Lightbox | null
+  onRequestClose: () => void
+  onPressSave: (uri: string) => void
+  onPressShare: (uri: string) => void
+}) {
+  if (!lightbox) {
+    return null
+  }
+  return (
+    <ImageViewing
+      key={lightbox.index}
+      lightbox={lightbox}
+      onRequestClose={onRequestClose}
+      onPressSave={onPressSave}
+      onPressShare={onPressShare}
+    />
+  )
+}
 
 function withClampedSpring(value: any) {
   'worklet'
   return withSpring(value, {overshootClamping: true, stiffness: 150})
 }
 
-export default EnhancedImageViewing
+export default ImageViewingRoot
diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index ed570d5a79..816fa46565 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -55,10 +55,7 @@ export function Lightbox() {
 
   return (
     <ImageView
-      images={activeLightbox.images}
-      initialImageIndex={activeLightbox.index}
-      thumbDims={activeLightbox.thumbDims}
-      visible
+      lightbox={activeLightbox}
       onRequestClose={onClose}
       onPressSave={saveImageToAlbumWithToasts}
       onPressShare={uri => shareImageModal({uri})}