Add editable function to Lightbox

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.60.0",
+  "version": "1.61.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",

src/components/Lightbox.tsx

@@ -89,19 +89,33 @@ type Props = {
   onClose: () => void
   onDelete?: (imageIndex: number) => void
   onCrop?: (imageIndex: number) => void
+  editable?: (imageIndex: number) => boolean
   photos: string[]
   title?: string
   description?: string
   content?: (imageIndex?: number) => React.ReactElement | undefined
   style?: LightboxStyle
 }
 
-const Lightbox = ({ index, onClose, onDelete, onCrop, photos, title, description, content, style }: Props) => {
+const Lightbox = ({
+  index,
+  onClose,
+  onDelete,
+  onCrop,
+  editable,
+  photos,
+  title,
+  description,
+  content,
+  style,
+}: Props) => {
   const initialImageIndex = index ?? 0
   const [currentImageIndex, setCurrentImageIndex] = useState<number>()
 
-  const onPressDelete = onDelete ? () => onDelete(currentImageIndex ?? initialImageIndex) : undefined
-  const onPressCrop = onCrop ? () => onCrop(currentImageIndex ?? initialImageIndex) : undefined
+  const imageIndex = currentImageIndex ?? initialImageIndex
+  const onPressDelete = onDelete ? () => onDelete(imageIndex) : undefined
+  const onPressCrop = onCrop ? () => onCrop(imageIndex) : undefined
+  const showCrop = editable ? editable(imageIndex) : true
 
   const ImageViewTypeErased = ImageView as unknown as any
 
@@ -117,10 +131,10 @@ const Lightbox = ({ index, onClose, onDelete, onCrop, photos, title, description
       FooterComponent={getLightboxFooterComponent(
         title,
         description,
-        content?.(currentImageIndex),
+        content?.(imageIndex),
         style,
         onPressDelete,
-        onPressCrop,
+        showCrop ? onPressCrop : undefined,
       )}
     />
   )

src/components/__tests__/Lightbox.test.tsx

@@ -103,6 +103,33 @@ describe('Lightbox', () => {
       expect(queryByTestId('crop-photo')).not.toBeNull()
       expect(toJSON()).toMatchSnapshot()
     })
+
+    test('Do not show crop button when editable returns false', () => {
+      const { toJSON, queryByTestId } = render(
+        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} editable={() => false} />,
+      )
+
+      expect(queryByTestId('crop-photo')).toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('Show crop button when editable returns true', () => {
+      const { toJSON, queryByTestId } = render(
+        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} editable={() => true} />,
+      )
+
+      expect(queryByTestId('crop-photo')).not.toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('When editable returns true, but no onCrop is provided, show no crop button', () => {
+      const { toJSON, queryByTestId } = render(
+        <Lightbox photos={photos} index={0} onClose={onClose} editable={() => true} />,
+      )
+
+      expect(queryByTestId('crop-photo')).toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
   })
 
   describe('Interaction', () => {
@@ -155,5 +182,26 @@ describe('Lightbox', () => {
       // THEN
       expect(onDelete).toHaveBeenCalledWith(1)
     })
+
+    test('When swiping to a photo that is not cropable, the crop button is not shown', async () => {
+      // GIVEN
+      jest.mock('@observation.org/react-native-image-viewing', () => 'ImageCarousel')
+      const { queryByTestId } = render(
+        <Lightbox
+          photos={photos}
+          index={0}
+          onClose={onClose}
+          onCrop={() => {}}
+          editable={(imageIndex) => imageIndex === 0}
+        />,
+      )
+      expect(queryByTestId('crop-photo')).not.toBeNull()
+
+      // WHEN
+      act(() => mockOnImageIndexChange(1))
+
+      // THEN
+      expect(queryByTestId('crop-photo')).toBeNull()
+    })
   })
 })