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