Revize 29f3811f

ItemPreview custom image added instead of missing image
re #10715

src/components/listView/ItemPreview.tsx

@@ -1 @@
-import { Center, HStack, Image, Pressable, ScrollView, Text, VStack } from "native-base"
+import { Box, Center, HStack, Image, Pressable, ScrollView, Text, VStack } from "native-base"
 import { useEffect } from "react"
 import { DrawerScreenProps } from "@react-navigation/drawer"
-import { RootDrawerParamList } from "../Navigation"
+import { RootDrawerParamList } from "../../pages/Navigation"
+import { ItemPreviewMissingImage } from "./ItemPreviewMissingImage"
 
 interface ItemPreviewProps {
     caption: string
@@ -9 +10 @@
     name?: string
     image?: string
     itemId: string
+    inventoryLabel: string
     navigation: any
 }
 
 const ItemPreview = (props: ItemPreviewProps) => {
 
-    useEffect(() => {
-        console.log("ItemPreview", "Props:", props)
-    }, [props])
-
     return (
         <>
             <Pressable
@@ -27 +25 @@
                 <HStack
                     space={ 2 }
                     flex={ 1 }
-                    alignItems={ "start" }
+                    alignItems={ "flex-start" }
+                    key={props.itemId}
                 >
+                    {props.image ? (
                     <Image
-                        source={ {uri: `http:/147.228.173.159/static/images/${ props.image ? "thumb-" + props.image : "thumb-Rel-78.png" }`} }
+                        source={ {uri: `http:/147.228.173.159/static/images/thumb-${props.image}`} }
                         size={ "sm" }
-                        alt={ props.image ? props.image : "thumb-Rel-78.png" }
+                        alt={ props.image }
                     />
-                    <VStack h={70}>
+                    ) : (
+                        <ItemPreviewMissingImage inventoryLabel={props.inventoryLabel} h={65} w={65} />
+                    )}
+                    <VStack h={70} maxW={"80%"}>
                         <Text fontSize={"sm"} italic>{ props.name }</Text>
                         <Text fontSize={"sm"} bold noOfLines={1}>{ props.caption }</Text>
-                        <Text fontSize={"xs"}>{ props.title }</Text>
+                        <Text fontSize={"2xs"} lineHeight={"2xs"} noOfLines={2}>{ props.title }</Text>
                     </VStack>
                 </HStack>
             </Pressable>

src/components/listView/ItemPreviewMissingImage.tsx

@@ +1 @@
+import { Box, Center, Text, VStack } from "native-base"
+import { useEffect, useState } from "react"
+import { log } from "../../logging/logger"
+
+interface ItemPreviewMissingImageProps {
+    inventoryLabel: string
+    w?: number
+    h?: number
+}
+
+const DEFAULT_W = 65
+const DEFAULT_H = 65
+
+export const ItemPreviewMissingImage = (props: ItemPreviewMissingImageProps) => {
+    const [firstPart, setFirstPart] = useState("")
+    const [secondPart, setSecondPart] = useState("")
+
+    useEffect(() => {
+        setFirstPart(props.inventoryLabel.slice(0, props.inventoryLabel.indexOf(" ")))
+        setSecondPart(props.inventoryLabel.slice(props.inventoryLabel.indexOf(" ") + 1))
+        log.debug("ItemPreviewMissingImage", "inventoryLabel", props.inventoryLabel)
+        log.debug("ItemPreviewMissingImage", "firstPart", firstPart)
+        log.debug("ItemPreviewMissingImage", "secondPart", secondPart)
+    }, [props.inventoryLabel])
+
+    return (
+        <Center>
+            <Box
+                bg="primary.100"
+                w={props.w ? props.w : DEFAULT_W}
+                h={props.h ? props.h : DEFAULT_H}
+                borderColor={"primary.700"}
+                borderWidth={4}
+                alignItems="center"
+                justifyContent="center"
+            >
+                <VStack space={0}>
+                    <Text
+                        fontSize="sm"
+                        color="black"
+                        textAlign={"center"}
+                        bold
+                        noOfLines={1}
+                    >
+                        { firstPart }
+                    </Text>
+                    <Text
+                        fontSize="xs"
+                        color="black"
+                        textAlign={"center"}
+                    >
+                        { secondPart }
+                    </Text>
+                </VStack>
+            </Box>
+        </Center>
+    )
+}