Revize 6020775f

re #10917: ZoomableImage init

src/components/item/ItemView.tsx

@@ -1 @@
-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 +18 @@
 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 +30 @@
 
 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 +49 @@
                 :
                 (
                     <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 &&