Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 091dec61

Přidáno uživatelem Fantič před téměř 2 roky(ů)

#re 10454: ItemView: ItemDetail update

Zobrazit rozdíly:

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