aswi20220x00-gitlab/webapp/components/annotation/annotationItem.tsx @ 967f45fc

import { Row } from 'react-bootstrap';
import { Occurrence, Tag } from '../models/tag';
import { useState } from 'react';

import 'antd/dist/antd.css';
import { Button } from 'antd';
import {
    PlusOutlined,
    EyeOutlined,
    DownOutlined,
    DeleteOutlined,
} from '@ant-design/icons';

function AnnotationItem(tag: Tag) {
    const [visibleProperties, setVisibleProperties] = useState(false);
    const [visible, setVisible] = useState(true);

    const addOccurrence = () => {};

    const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {};

    const changeVisibility = () => {};

    const changePropertiesVisiblity = () => {
        setVisibleProperties(!visibleProperties);
    };

    return (
        <div>
            <Row>
                {tag.name}
                <Button
                    type="text"
                    shape="circle"
                    icon={<PlusOutlined />}
                    onClick={addOccurrence}
                />
                <Button
                    type="text"
                    shape="circle"
                    icon={<EyeOutlined />}
                    onClick={changeVisibility}
                />
                <Button
                    type="text"
                    shape="circle"
                    icon={<DownOutlined />}
                    onClick={changePropertiesVisiblity}
                />
            </Row>
            {visibleProperties && (
                <Row>
                    {tag.category}
                    Výskyty
                    {tag.occurrences.map((occurrence, index) => {
                        return (
                            <div key={index}>
                                {occurrence.position}
                                {occurrence.length}
                                <Button
                                    icon={<DeleteOutlined />}
                                    onClick={deleteOccurrence(occurrence)}
                                ></Button>
                            </div>
                        );
                    })}
                </Row>
            )}
        </div>
    );
}

export default AnnotationItem;