Revize 091dec61
Přidáno uživatelem Fantič před téměř 2 roky(ů)
| src/components/item/ItemView.tsx | ||
|---|---|---|
| 1 |
import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer } from "native-base"
|
|
| 1 |
import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading } from "native-base"
|
|
| 2 | 2 |
import React from "react" |
| 3 | 3 |
import { Item } from "../../types/item"
|
| 4 | 4 |
import { Note } from "../../types/note"
|
| 5 | 5 |
import LoadingBox from "../loading/LoadingBox" |
| 6 | 6 |
import NotesListView from "../notes/NotesListView" |
| 7 |
import WebView from "react-native-webview" |
|
| 7 | 8 |
|
| 8 | 9 |
interface ItemDetailProps {
|
| 9 | 10 |
item: Item, |
| ... | ... | |
| 12 | 13 |
notesLoading: boolean |
| 13 | 14 |
} |
| 14 | 15 |
|
| 15 |
|
|
| 16 | 16 |
const ItemDetail = (props: { item: Item }) => {
|
| 17 | 17 |
const item = props.item; |
| 18 | 18 |
|
| 19 | 19 |
return ( |
| 20 |
<View alignItems="center" flex="1" justifyContent="center">
|
|
| 21 |
{
|
|
| 22 |
item && (
|
|
| 23 |
<ScrollView>
|
|
| 20 |
<ScrollView flex="1">
|
|
| 21 |
<Box width="90%" marginLeft="5%">
|
|
| 22 |
{
|
|
| 23 |
item && (
|
|
| 24 | 24 |
<VStack> |
| 25 |
<Text>id: {item.id}</Text>
|
|
| 26 |
<Text>name: {item.workName}</Text>
|
|
| 27 |
{
|
|
| 28 |
item.fullView && item.imageUrl && ( |
|
| 25 |
<HStack marginTop="5%"> |
|
| 26 |
<VStack width="75%"> |
|
| 27 |
<Text> |
|
| 28 |
{item.authorDisplayName ? item.authorDisplayName : item.authorName}
|
|
| 29 |
</Text> |
|
| 30 |
<Heading size="sm"> |
|
| 31 |
{item.workName}
|
|
| 32 |
</Heading> |
|
| 33 |
|
|
| 34 |
</VStack> |
|
| 35 |
<Box width="25%"> |
|
| 36 |
<Button variant="outline" size="md"> |
|
| 37 |
{item.concordances[0].id}
|
|
| 38 |
</Button> |
|
| 39 |
</Box> |
|
| 40 |
</HStack> |
|
| 41 |
<Card shadow="1" marginTop="5%"> |
|
| 42 |
{item.inventoryItem &&
|
|
| 43 |
<VStack> |
|
| 44 |
<Text italic> |
|
| 45 |
<Text color="light.500">Inventory item: </Text> |
|
| 46 |
{item.inventoryItem}
|
|
| 47 |
</Text> |
|
| 48 |
<Text italic marginTop="2.5%"> |
|
| 49 |
{item.searchSubjects.map((subject, index) => (
|
|
| 50 |
index < item.searchSubjects.length -1 ? (subject + ", ") : (subject) |
|
| 51 |
))} |
|
| 52 |
</Text> |
|
| 53 |
</VStack>} |
|
| 54 |
</Card> |
|
| 55 |
{item.fullView && item.imageUrl && (
|
|
| 56 |
<Center background="primary.100" marginTop="5%"> |
|
| 57 |
<Text>Resembling object</Text> |
|
| 29 | 58 |
<Image size={250} alt="image" source={{ uri: `http:147.228.173.159/static/images/${item.imageUrl}` }} />
|
| 30 |
) |
|
| 31 |
} |
|
| 59 |
</Center>)} |
|
| 60 |
{item.fullView && (
|
|
| 61 |
<Card shadow="1" marginTop="5%" marginBottom="5%"> |
|
| 62 |
{item.authorName &&
|
|
| 63 |
<HStack> |
|
| 64 |
<Text italic> |
|
| 65 |
<Text color="light.500">Author name: </Text> |
|
| 66 |
{item.authorName}
|
|
| 67 |
</Text> |
|
| 68 |
</HStack>} |
|
| 69 |
{item.title &&
|
|
| 70 |
<HStack> |
|
| 71 |
<Text italic> |
|
| 72 |
<Text color="light.500">Title: </Text> |
|
| 73 |
{item.title}
|
|
| 74 |
</Text> |
|
| 75 |
</HStack>} |
|
| 76 |
{item.institution &&
|
|
| 77 |
<HStack> |
|
| 78 |
<Text italic> |
|
| 79 |
<Text color="light.500">Institution: </Text> |
|
| 80 |
{item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
|
|
| 81 |
</Text> |
|
| 82 |
</HStack>} |
|
| 83 |
{item.repository &&
|
|
| 84 |
<HStack> |
|
| 85 |
<Text italic> |
|
| 86 |
<Text color="light.500">Repository: </Text> |
|
| 87 |
{item.repository}
|
|
| 88 |
</Text> |
|
| 89 |
</HStack>} |
|
| 90 |
{item.provenance &&
|
|
| 91 |
<HStack> |
|
| 92 |
<Text italic> |
|
| 93 |
<Text color="light.500">Provenance: </Text> |
|
| 94 |
{item.provenance}
|
|
| 95 |
</Text> |
|
| 96 |
</HStack>} |
|
| 97 |
{item.description &&
|
|
| 98 |
<HStack> |
|
| 99 |
<Text italic> |
|
| 100 |
<Text color="light.500">Description: </Text> |
|
| 101 |
{item.description}
|
|
| 102 |
</Text> |
|
| 103 |
</HStack>} |
|
| 104 |
</Card>)} |
|
| 32 | 105 |
</VStack> |
| 33 |
</ScrollView> |
|
| 34 |
|
|
| 35 |
) |
|
| 36 |
} |
|
| 37 |
</View> |
|
| 106 |
) |
|
| 107 |
} |
|
| 108 |
</Box> |
|
| 109 |
</ScrollView> |
|
| 38 | 110 |
); |
| 39 | 111 |
} |
| 40 | 112 |
|
| ... | ... | |
| 45 | 117 |
// item shown / note shown |
| 46 | 118 |
const [itemShown, setItemShown] = React.useState(true); |
| 47 | 119 |
|
| 48 |
const {itemLoading, notesLoading} = props;
|
|
| 120 |
const { itemLoading, notesLoading } = props;
|
|
| 49 | 121 |
|
| 50 | 122 |
const handleItemClick = () => {
|
| 51 | 123 |
setItemShown(true); |
| ... | ... | |
| 58 | 130 |
return ( |
| 59 | 131 |
<Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
|
| 60 | 132 |
{itemShown ? (
|
| 61 |
itemLoading ?
|
|
| 62 |
<LoadingBox text="Item loading"/>
|
|
| 63 |
: |
|
| 64 |
<ItemDetail item={props.item} />
|
|
| 133 |
itemLoading ? |
|
| 134 |
<LoadingBox text="Item loading" />
|
|
| 135 |
:
|
|
| 136 |
<ItemDetail item={props.item} />
|
|
| 65 | 137 |
) : ( |
| 66 |
notesLoading ?
|
|
| 67 |
<LoadingBox text="Notes loading"/>
|
|
| 68 |
: |
|
| 69 |
<NotesListView notes={props.notes} />
|
|
| 138 |
notesLoading ? |
|
| 139 |
<LoadingBox text="Notes loading" />
|
|
| 140 |
:
|
|
| 141 |
<NotesListView notes={props.notes} />
|
|
| 70 | 142 |
)} |
| 71 | 143 |
|
| 72 | 144 |
{/* item notes switch tab */}
|
| 73 | 145 |
<HStack alignItems="center"> |
| 74 |
<Button
|
|
| 146 |
<Button |
|
| 75 | 147 |
variant={itemShown ? "subtle" : "outline"}
|
| 76 | 148 |
w="50%" |
| 77 | 149 |
onPress={handleItemClick}
|
| 78 | 150 |
> |
| 79 | 151 |
Item |
| 80 | 152 |
</Button> |
| 81 |
<Button
|
|
| 153 |
<Button |
|
| 82 | 154 |
variant={itemShown ? "outline" : "subtle"}
|
| 83 | 155 |
w="50%" |
| 84 | 156 |
onPress={handleNotesClick}
|
Také k dispozici: Unified diff
#re 10454: ItemView: ItemDetail update