Revize e0741b92
Přidáno uživatelem Fantič před více než 1 rok
| src/components/item/ItemTabBar.tsx | ||
|---|---|---|
| 44 | 44 |
<Pressable key={i} onPress={() => { onIndexChange(i) }}>
|
| 45 | 45 |
<HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
|
| 46 | 46 |
<CircleIcon |
| 47 |
marginLeft="20%"
|
|
| 47 |
marginLeft="5"
|
|
| 48 | 48 |
size="2" |
| 49 | 49 |
color={CertaintyWithColors[concordances[i].cert].color}
|
| 50 | 50 |
/> |
| src/components/item/ItemView.tsx | ||
|---|---|---|
| 1 |
import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex } from "native-base"
|
|
| 1 |
import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon } from "native-base"
|
|
| 2 | 2 |
import React, { useCallback, useEffect, useState } from "react"
|
| 3 | 3 |
import { Item } from "../../types/item"
|
| 4 | 4 |
import { Note } from "../../types/note"
|
| ... | ... | |
| 24 | 24 |
const ItemDetail = (props: { item: Item, itemLoading: boolean }) => {
|
| 25 | 25 |
const item = props.item; |
| 26 | 26 |
|
| 27 |
const [selectedImage, setSelectedImage] = useState<number>(0); |
|
| 28 |
|
|
| 29 |
console.log("rerender")
|
|
| 30 |
|
|
| 27 | 31 |
return (<> |
| 28 | 32 |
{
|
| 29 | 33 |
item && props.itemLoading ? |
| ... | ... | |
| 32 | 36 |
( |
| 33 | 37 |
<ScrollView flex="1"> |
| 34 | 38 |
<VStack> |
| 35 |
<HStack marginTop="5%">
|
|
| 36 |
<VStack width="75%">
|
|
| 39 |
<HStack marginLeft={2.5} alignItems={"center"}>
|
|
| 40 |
<VStack flex={1} marginTop={3.5}>
|
|
| 37 | 41 |
<Text> |
| 38 | 42 |
{item.authorDisplayName ? item.authorDisplayName : item.authorName}
|
| 39 | 43 |
</Text> |
| 40 | 44 |
<Heading size="sm"> |
| 41 | 45 |
{item.workName}
|
| 42 | 46 |
</Heading> |
| 43 |
|
|
| 44 | 47 |
</VStack> |
| 45 |
<Box width="25%">
|
|
| 48 |
<Box marginLeft="auto" marginTop={0}> {/* marginLeft: "auto" pushes the Box to the right */}
|
|
| 46 | 49 |
<Button variant="outline" size="md"> |
| 47 | 50 |
{item.concordances[0].id}
|
| 48 | 51 |
</Button> |
| 49 | 52 |
</Box> |
| 50 | 53 |
</HStack> |
| 51 |
<Card shadow="1" marginTop="5%">
|
|
| 54 |
<Card shadow="1" marginTop={5}>
|
|
| 52 | 55 |
{item.inventoryItem &&
|
| 53 | 56 |
<VStack> |
| 54 | 57 |
<Text italic> |
| ... | ... | |
| 62 | 65 |
</Text> |
| 63 | 66 |
</VStack>} |
| 64 | 67 |
</Card> |
| 65 |
{item.fullView && item.imageUrl && (
|
|
| 66 |
<Center background="primary.100" marginTop="5%"> |
|
| 67 |
<Text>Resembling object</Text> |
|
| 68 |
<Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }} />
|
|
| 69 |
</Center>)} |
|
| 68 |
{item.fullView && item.images && item.images.length > 0 && (
|
|
| 69 |
<VStack background="primary.100" marginTop={5} alignItems="center" justifyContent="center">
|
|
| 70 |
<Text marginBottom={2}>Resembling objects {selectedImage + 1 + "/" + item.images.length}</Text>
|
|
| 71 |
<HStack space={4}>
|
|
| 72 |
<Button variant="ghost" size="lg" onPress={() => {
|
|
| 73 |
if (item.images && selectedImage - 1 >= 0) {
|
|
| 74 |
setSelectedImage(selectedImage - 1); |
|
| 75 |
} |
|
| 76 |
}} leftIcon={<ChevronLeftIcon size="lg" />} />
|
|
| 77 |
<Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.images[selectedImage].imageUrl }} />
|
|
| 78 |
<Button variant="ghost" size="lg" onPress={() => {
|
|
| 79 |
if (item.images && selectedImage + 1 < item.images.length) {
|
|
| 80 |
setSelectedImage(selectedImage + 1); |
|
| 81 |
} |
|
| 82 |
}} leftIcon={<ChevronRightIcon size="lg" />} />
|
|
| 83 |
</HStack> |
|
| 84 |
</VStack> |
|
| 85 |
)} |
|
| 70 | 86 |
{item.fullView && (
|
| 71 |
<Card shadow="1" marginTop="5%" marginBottom="5%">
|
|
| 87 |
<Card shadow={1} marginTop={5} marginBottom={5}>
|
|
| 72 | 88 |
{item.authorName &&
|
| 73 | 89 |
<HStack> |
| 74 |
<Text italic marginTop="2.5%">
|
|
| 90 |
<Text italic marginTop={2.5}>
|
|
| 75 | 91 |
<Text color="light.500">Author name: </Text> |
| 76 | 92 |
{item.authorName}
|
| 77 | 93 |
</Text> |
| 78 | 94 |
</HStack>} |
| 79 | 95 |
{item.title &&
|
| 80 | 96 |
<HStack> |
| 81 |
<Text italic marginTop="2.5%">
|
|
| 97 |
<Text italic marginTop={2.5}>
|
|
| 82 | 98 |
<Text color="light.500">Title: </Text> |
| 83 | 99 |
{item.title}
|
| 84 | 100 |
</Text> |
| 85 | 101 |
</HStack>} |
| 86 | 102 |
{item.institution &&
|
| 87 | 103 |
<HStack> |
| 88 |
<Text italic marginTop="2.5%">
|
|
| 104 |
<Text italic marginTop={2.5}>
|
|
| 89 | 105 |
<Text color="light.500">Institution: </Text> |
| 90 | 106 |
{item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
|
| 91 | 107 |
</Text> |
| 92 | 108 |
</HStack>} |
| 93 | 109 |
{item.repository &&
|
| 94 | 110 |
<HStack> |
| 95 |
<Text italic marginTop="2.5%">
|
|
| 111 |
<Text italic marginTop={2.5}>
|
|
| 96 | 112 |
<Text color="light.500">Repository: </Text> |
| 97 | 113 |
{item.repository}
|
| 98 | 114 |
</Text> |
| 99 | 115 |
</HStack>} |
| 100 | 116 |
{item.provenance &&
|
| 101 | 117 |
<HStack> |
| 102 |
<Text italic marginTop="2.5%">
|
|
| 118 |
<Text italic marginTop={2.5}>
|
|
| 103 | 119 |
<Text color="light.500">Provenance: </Text> |
| 104 | 120 |
{item.provenance}
|
| 105 | 121 |
</Text> |
| 106 | 122 |
</HStack>} |
| 107 | 123 |
{item.description &&
|
| 108 | 124 |
<HStack> |
| 109 |
<Text italic marginTop="2.5%">
|
|
| 125 |
<Text italic marginTop={2.5}>
|
|
| 110 | 126 |
<Text color="light.500">Description: </Text> |
| 111 | 127 |
{item.description}
|
| 112 | 128 |
</Text> |
| ... | ... | |
| 131 | 147 |
|
| 132 | 148 |
// trigger refresh on triggerRefresh increment |
| 133 | 149 |
useEffect(() => {
|
| 134 |
if(triggerRefresh > 0){
|
|
| 150 |
if (triggerRefresh > 0) {
|
|
| 135 | 151 |
log.debug("NotesViewPage", "useEffect", "getNotes");
|
| 136 | 152 |
dispatch(getItemNotes({ item: props.item, relatedComments: showRelatedComments }));
|
| 137 | 153 |
} |
| ... | ... | |
| 166 | 182 |
props.notesLoading ? |
| 167 | 183 |
(<LoadingBox text="Notes loading..." />) |
| 168 | 184 |
: |
| 169 |
(<VStack height="90%">
|
|
| 185 |
(<VStack> |
|
| 170 | 186 |
<Flex direction="row" alignItems="center" justify="flex-end"> |
| 171 | 187 |
<Text fontSize={"12"}>Show related comments</Text>
|
| 172 | 188 |
<Switch value={showRelatedComments} onChange={toggleRelatedComments} size="md" />
|
| 173 | 189 |
</Flex> |
| 174 |
<Box height="120%">
|
|
| 175 |
<NotesListView height={Dimensions.get('window').height - 70 - 160} requestPending={requestPending} notes={props.notes} navigation={props.navigation} handleCreateComment={handleCreateItemComment} />
|
|
| 190 |
<Box > |
|
| 191 |
<NotesListView height={Dimensions.get('window').height - 355} requestPending={requestPending} notes={props.notes} navigation={props.navigation} handleCreateComment={handleCreateItemComment} />
|
|
| 176 | 192 |
</Box> |
| 177 | 193 |
</VStack>) |
| 178 | 194 |
); |
| ... | ... | |
| 196 | 212 |
} |
| 197 | 213 |
|
| 198 | 214 |
return ( |
| 199 |
<Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
|
|
| 215 |
<Box marginLeft={2.5} marginRight={2.5}>
|
|
| 200 | 216 |
|
| 201 |
<Box width="92%" marginLeft="5%" height="92%">
|
|
| 217 |
<Box height={Dimensions.get('window').height - 210}>
|
|
| 202 | 218 |
{itemShown ? (
|
| 203 | 219 |
<ItemDetail itemLoading={itemLoading} item={props.item} />
|
| 204 | 220 |
) : ( |
| ... | ... | |
| 206 | 222 |
)} |
| 207 | 223 |
</Box> |
| 208 | 224 |
|
| 209 |
|
|
| 210 |
|
|
| 211 | 225 |
{/* item notes switch tab */}
|
| 212 | 226 |
<HStack alignItems="center"> |
| 213 | 227 |
<Button |
| src/stores/actions/itemThunks.ts | ||
|---|---|---|
| 15 | 15 |
|
| 16 | 16 |
// data with image |
| 17 | 17 |
if (response.status === 200 && response.data.object.length > 1) {
|
| 18 |
// TODO IMAGES to array :-) |
|
| 18 | 19 |
const authorName = response.data.object[1]?.name?.[0]?.getty_data?.display_name || null; |
| 19 |
const imageUrl = response.data.object[1]?.images?.[0]?.file || null; |
|
| 20 |
const title = response.data.object[1]?.images?.[0]?.text || null; |
|
| 20 |
const images : {imageUrl: string, title: string}[] = []
|
|
| 21 |
for(let i = 0; i < response.data.object[1]?.images.length; i++){
|
|
| 22 |
images.push({imageUrl: response.data.object[1]?.images?.[i]?.file, title: response.data.object[1]?.images?.[i]?.text})
|
|
| 23 |
} |
|
| 24 |
|
|
| 21 | 25 |
const institution = {
|
| 22 | 26 |
name: response.data.object[1]?.institution || null, |
| 23 | 27 |
inventoryNumber: response.data.object[1]?.id_number || null, |
| ... | ... | |
| 40 | 44 |
inventoryItem: response.data.text || null, |
| 41 | 45 |
searchSubjects: response.data.search_subject || null, |
| 42 | 46 |
authorName, |
| 43 |
imageUrl, |
|
| 44 |
title, |
|
| 47 |
images, |
|
| 45 | 48 |
institution, |
| 46 | 49 |
repository, |
| 47 | 50 |
provenance, |
| src/stores/reducers/itemSlice.ts | ||
|---|---|---|
| 45 | 45 |
if (action.payload.fullView) {
|
| 46 | 46 |
state.item.institution = action.payload.institution; |
| 47 | 47 |
state.item.authorName = action.payload.authorName; |
| 48 |
state.item.imageUrl = action.payload.imageUrl;
|
|
| 49 |
state.item.title = action.payload.title;
|
|
| 48 |
state.item.images = action.payload.images;
|
|
| 49 |
state.item.title = action.payload.images?.[0].title ?? undefined;
|
|
| 50 | 50 |
state.item.repository = action.payload.repository; |
| 51 | 51 |
state.item.provenance = action.payload.provenance; |
| 52 | 52 |
state.item.description = action.payload.description; |
| ... | ... | |
| 54 | 54 |
else {
|
| 55 | 55 |
state.item.institution = undefined; |
| 56 | 56 |
state.item.authorName = undefined; |
| 57 |
state.item.imageUrl = undefined;
|
|
| 57 |
state.item.images = undefined;
|
|
| 58 | 58 |
state.item.title = undefined; |
| 59 | 59 |
state.item.repository = undefined; |
| 60 | 60 |
state.item.provenance = undefined; |
| src/types/item.ts | ||
|---|---|---|
| 14 | 14 |
fullView : boolean |
| 15 | 15 |
|
| 16 | 16 |
authorName?: string |
| 17 |
imageUrl?: string
|
|
| 17 |
images?: {imageUrl : string, title : string}[]
|
|
| 18 | 18 |
title?: string |
| 19 | 19 |
institution?: {
|
| 20 | 20 |
name :string, |
Také k dispozici: Unified diff
re #10819 ItemView refactor layout, optimize