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