commit 6020775fece30358e048c61d790171f304aca66d
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Mon Dec 18 15:14:01 2023 +0100

    re #10917: ZoomableImage init

diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index 3b61c4a..4b41d56 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -1,4 +1,4 @@
-import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon, Divider, Pressable, CircleIcon, IconButton } from "native-base"
+import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon, Divider, Pressable, CircleIcon, IconButton, useToast } from "native-base"
 import React, { useCallback, useEffect, useState } from "react"
 import { Certainty, Item, RelationshipType } from "../../types/item"
 import { Note } from "../../types/note"
@@ -18,6 +18,7 @@ import { select } from "d3"
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice"
 import { LeftArrowIcon, RightArrowIcon } from "../general/Icons"
 import { ZoomableImage } from "./ZoomableImage"
+import { InfoToast } from "../toast/InfoToast"
 
 interface ItemDetailProps {
     item: Item,
@@ -29,7 +30,7 @@ interface ItemDetailProps {
 
 const ItemDetail = (props: ItemDetailProps) => {
     const item = props.item;
-
+    const toast = useToast();
     const [selectedImage, setSelectedImage] = useState<number>(0);
 
     const [images, setImages] = useState<{ imageUrl: string, title: string }[]>([]);
@@ -48,28 +49,67 @@ const ItemDetail = (props: ItemDetailProps) => {
                 :
                 (
                     <ScrollView flex="1" paddingLeft={2.5} paddingRight={2.5} marginTop={2.5}>
+
                         <VStack>
-                            <HStack marginLeft={2.5} alignItems={"center"}>
-                                <VStack flex={1} marginTop={3.5}>
+
+                            <VStack flex={1} marginTop={3.5} marginLeft={1.5} >
+                                <HStack alignItems="center" height="auto">
                                     <Text fontSize={13} color="#4D4D4D">
                                         {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                     </Text>
-                                    <Heading marginTop={1} fontSize={18} color="#4D4D4D">
+                                    <HStack marginRight={0} marginLeft="auto" width={70}>
+                                        <Button disabled={!item.prevItem} padding={1} marginLeft="auto" variant="ghost" size="xs"
+                                            onPress={() => {
+                                                if (item.prevItem) {
+                                                    console.log(item.prevItem)
+                                                    props.navigation.navigate("Item", { itemId: item.prevItem.toString() })
+                                                }
+                                                else {
+                                                    toast.show({
+                                                        render: ({
+                                                            id
+                                                        }) => {
+                                                            return <InfoToast text={"No previous item..."} onClose={() => toast.close(id)} />;
+                                                        },
+                                                        duration: 3000
+                                                    });
+                                                }
+                                            }}
+                                            leftIcon={<ChevronLeftIcon size="md" />}>
+                                        </Button>
+                                        <Button disabled={!item.nextItem}  marginLeft="auto" padding={1} marginRight={2.5} variant="ghost" size="xs"
+                                            onPress={() => {
+
+                                                if (item.nextItem) {
+                                                    props.navigation.navigate("Item", { itemId: item.nextItem.toString() })
+                                                }
+                                                else {
+                                                    toast.show({
+                                                        render: ({
+                                                            //@ts-ignore
+                                                            id
+                                                        }) => {
+                                                            return <InfoToast text={"No next item..."} onClose={() => toast.close(id)} />;
+                                                        },
+                                                        duration: 3000
+                                                    });
+                                                }
+                                            }}
+                                            leftIcon={<ChevronRightIcon size="md" />}>
+                                        </Button>
+                                    </HStack>
+                                </HStack>
+                                <HStack alignItems="center" height="auto" marginTop={1}>
+                                    <Heading marginBottom="auto" fontSize={18} color="#4D4D4D">
                                         {item.workName}
                                     </Heading>
-
-                                </VStack>
-                                <Box marginLeft="auto" marginTop={1.5} alignItems={"end"}> {/* marginLeft: "auto" pushes the Box to the right */}
-                                    <Button variant="outline" backgroundColor={"#F4DFAB"} borderRadius={8} size="sm" padding={0.5} paddingLeft={2} paddingRight={2} >
+                                    <Button marginLeft="auto" marginTop="auto" marginRight={2.5} variant="outline" backgroundColor={"#F4DFAB"} borderRadius={8} size="sm" padding={0.5} paddingLeft={2} paddingRight={2} >
                                         <Text color="#654B07" fontSize={12}>
                                             {item?.concordances?.[0]?.id}
                                         </Text>
                                     </Button>
-                                </Box>
-                            </HStack>
-
-
-
+                                </HStack>
+                            </VStack>
 
                             <View marginTop={5} backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
                                 {item.inventoryItem &&
diff --git a/src/components/item/ZoomableImage.tsx b/src/components/item/ZoomableImage.tsx
index f00a63c..0a2e8de 100644
--- a/src/components/item/ZoomableImage.tsx
+++ b/src/components/item/ZoomableImage.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from "react";
 
-import { Flex, Image, Pressable, View } from "native-base"
+import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay } from "native-base"
 import { PinchGestureHandler, PanGestureHandler, State } from "react-native-gesture-handler";
 import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import Svg, { SvgXml, Path } from "react-native-svg";
 import { FullscreenIcon, ExitfullscreenIcon } from "../general/Icons";
-import { Dimensions } from "react-native";
+import { Button, Dimensions } from "react-native";
 
 export const ZoomableImage = (props: { size: number, imageUri: string, fullScreen?: boolean }) => {
     const DEFAULT_SCALE = 1
@@ -91,66 +91,53 @@ export const ZoomableImage = (props: { size: number, imageUri: string, fullScree
     });
 
 
+    console.log(viewSize)
+    console.log(fullScreenMode)
     return (
-        <View
-            // height={viewSize.height}
-            width={viewSize.width}
-            // @ts-ignore
-            style={
-                fullScreenMode ? {
-                    position: "absolute",
-                    top: -230,
-                    left: 0,
-                    zIndex: 1000,
-                    backgroundColor: "white",
-                }
-                    :
-                    {
-                        overflow: "hidden",
-                    }
-            }
-            borderColor={fullScreenMode ? "light.300" : undefined}
-            borderRadius={fullScreenMode ? 10 : 0}
-            borderWidth={fullScreenMode ? 0 : 1}
-        >
-            {/* control panel */}
-            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
-                {
-                    fullScreenMode &&
-                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
-                        <FullscreenIcon color="white" />
-                    </Pressable>
-                }
-
-            </Flex>
-
-            <PinchGestureHandler
-                ref={pinchRef}
-                // @ts-ignore
-                onGestureEvent={onGestureEvent}
-                simultaneousHandlers={[panRef]}>
-                <Animated.View style={[{ flex: 1 }, animatedStyle]}>
-                    <PanGestureHandler
-                        ref={panRef}
-                        simultaneousHandlers={[pinchRef]}
-                        onGestureEvent={onPanEvent}
-                        onHandlerStateChange={(nativeEvent: any) => {
-                            if (nativeEvent.state === State.END) {
-                                console.log(nativeEvent)
-                            }
-                        }}
+        <View>
+            <Pressable onPress={() => setFullScreenMode(true)}>
+                <Image size={viewSize.width} source={{ uri: props.imageUri }} alt="image" resizeMode={"contain"} />
+            </Pressable>
+
+            <Modal isOpen={fullScreenMode} onClose={() => setFullScreenMode(false)} size="full">
+                <Box
+                    flex={1}
+                    justifyContent="center"
+                    alignItems="center"
+                    backgroundColor="transparent" // Make the background transparent
+                >
+                    <Pressable
+                        position="absolute"
+                        bottom={20}
+                        right={0}
+                        padding={2}
+                        zIndex={1000}
+                        onPress={() => setFullScreenMode(false)}
                     >
-                        <Animated.View style={[{
-                            flex: 1,
-                        }]}>
-                            <Pressable onPress={() => console.log("toggle fullscreen image")}>
-                                <Image size={viewSize.width} source={{uri: props.imageUri}} resizeMode={"contain"} />
-                            </Pressable>
-                        </Animated.View>
-                    </PanGestureHandler>
-                </Animated.View>
-            </PinchGestureHandler >
-        </View >
+                        {/* Your close button (you can replace this with an icon) */}
+                        <Box style={{width: 70, height: 30, backgroundColor:"white", borderRadius: 10}} alignItems={"center"} justifyContent="center">
+                            <Text>Close</Text>
+                        </Box>
+                    </Pressable>
+                    <Image
+                        height={viewSize.height}
+                        width={viewSize.width}
+                        alt="image"
+                        source={{ uri: props.imageUri }}
+                        resizeMode={"contain"}
+                    />
+                </Box>
+            </Modal>
+        </View>
+        // <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
+        //     {
+        //         fullScreenMode &&
+        //         <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
+        //             <FullscreenIcon color="white" />
+        //         </Pressable>
+        //     }
+
+        // </Flex>
     )
 
 }
\ No newline at end of file
