1
|
import { Col, Container, Row, Stack } from 'react-bootstrap';
|
2
|
import { Occurrence, Tag } from '../models/tag';
|
3
|
import { ChangeEvent, ChangeEventHandler, useState } from 'react';
|
4
|
|
5
|
import 'antd/dist/antd.css';
|
6
|
import { Button, Input } from 'antd';
|
7
|
import {
|
8
|
PlusOutlined,
|
9
|
EyeOutlined,
|
10
|
DownOutlined,
|
11
|
DeleteOutlined,
|
12
|
} from '@ant-design/icons';
|
13
|
|
14
|
type AnnotationItemProps = {
|
15
|
tag: Tag;
|
16
|
onAddOccurrence: (tag: Tag) => void;
|
17
|
onDeleteOccurrence: (occurrence: Occurrence) => void;
|
18
|
onChangeVisibility: (tag: Tag) => void;
|
19
|
onChangePosition: (occurrence: Occurrence, newValue: number) => void;
|
20
|
onChangeLength: (occurrence: Occurrence, newValue: number) => void;
|
21
|
};
|
22
|
|
23
|
export function AnnotationItem(props: AnnotationItemProps) {
|
24
|
const [visibleProperties, setVisibleProperties] = useState(false);
|
25
|
|
26
|
const addOccurrence = () => {
|
27
|
props.onAddOccurrence(props.tag);
|
28
|
};
|
29
|
|
30
|
const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {
|
31
|
props.onDeleteOccurrence(occurrence);
|
32
|
};
|
33
|
|
34
|
const changeVisibility = () => {
|
35
|
props.onChangeVisibility(props.tag);
|
36
|
};
|
37
|
|
38
|
const changePropertiesVisibility = () => {
|
39
|
setVisibleProperties(!visibleProperties);
|
40
|
};
|
41
|
|
42
|
const changePosition =
|
43
|
(occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
|
44
|
props.onChangePosition(occurrence, Number(e.currentTarget.value));
|
45
|
};
|
46
|
|
47
|
const changeLength =
|
48
|
(occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
|
49
|
props.onChangeLength(occurrence, Number(e.currentTarget.value));
|
50
|
};
|
51
|
|
52
|
return (
|
53
|
<div>
|
54
|
<Row>
|
55
|
<Col className="d-flex align-items-center">{props.tag.name}</Col>
|
56
|
<Col sm="auto">
|
57
|
<Button
|
58
|
type="text"
|
59
|
shape="circle"
|
60
|
icon={<PlusOutlined />}
|
61
|
onClick={addOccurrence}
|
62
|
/>
|
63
|
<Button
|
64
|
type="text"
|
65
|
shape="circle"
|
66
|
icon={<EyeOutlined />}
|
67
|
onClick={changeVisibility}
|
68
|
/>
|
69
|
<Button
|
70
|
type="text"
|
71
|
shape="circle"
|
72
|
icon={<DownOutlined />}
|
73
|
onClick={changePropertiesVisibility}
|
74
|
/>
|
75
|
</Col>
|
76
|
</Row>
|
77
|
{visibleProperties && (
|
78
|
<Stack>
|
79
|
<div>Kategorie: {props.tag.category}</div>
|
80
|
<div>Výskyty:</div>
|
81
|
{props.tag.occurrences.map((occurrence, index) => {
|
82
|
return (
|
83
|
<div key={index} id={props.tag.name + index}>
|
84
|
<Container>
|
85
|
<Row>
|
86
|
<Col>
|
87
|
<Row>
|
88
|
Pozice:
|
89
|
<Input
|
90
|
value={occurrence.position}
|
91
|
onChange={changePosition(occurrence)}
|
92
|
/>
|
93
|
</Row>
|
94
|
<Row>
|
95
|
Délka:
|
96
|
<Input
|
97
|
value={occurrence.length}
|
98
|
onChange={changeLength(occurrence)}
|
99
|
/>
|
100
|
</Row>
|
101
|
</Col>
|
102
|
<Col
|
103
|
sm="auto"
|
104
|
className="d-flex align-items-center"
|
105
|
>
|
106
|
<Button
|
107
|
icon={<DeleteOutlined />}
|
108
|
onClick={deleteOccurrence(occurrence)}
|
109
|
></Button>
|
110
|
</Col>
|
111
|
</Row>
|
112
|
</Container>
|
113
|
</div>
|
114
|
);
|
115
|
})}
|
116
|
</Stack>
|
117
|
)}
|
118
|
</div>
|
119
|
);
|
120
|
}
|