aswi20220x00-gitlab/webapp/components/annotation/AnnotationItem.tsx @ b5f60842

import { Col, Container, Row, Stack } from 'react-bootstrap';
import { Occurrence, Tag } from '../types/tag';
import { ChangeEvent, useContext, useState } from 'react';
import 'antd/dist/antd.css';
import { Button, Input } from 'antd';
import {
    PlusOutlined,
    EyeOutlined,
    DownOutlined,
    DeleteOutlined,
} from '@ant-design/icons';
import { AnnotationContext } from '../../contexts/AnnotationContext';

/**
 * Creates a single item in an annotation panel.
 * @param props Properties should contain a tag that will be shown in this annotation.
 * @returns The item that represents an annotation.
 */
export function AnnotationItem(props: { tag: Tag }) {
    /**
     * Should properties of this annotation be visible?
     */
    const [visibleProperties, setVisibleProperties] = useState(false);

    /**
     * Context that manages annotations.
     */
    const {
        addOccurrence,
        deleteOccurrence,
        changeVisibility,
        changePosition,
        changeLength,
    } = useContext(AnnotationContext);

    /**
     * Adds new occurrence of this annotation to the context.
     */
    const onAddOccurrence = () => {
        addOccurrence(props.tag);
    };

    /**
     * Removes an occurrence of this annotation from the context.
     * @param occurrence The occurrence that should be removed.
     */
    const onDeleteOccurrence = (occurrence: Occurrence) => (e: any) => {
        deleteOccurrence(occurrence);
    };

    /**
     * Changes visibility of this annotation in the context.
     */
    const onChangeVisibility = () => {
        changeVisibility(props.tag);
    };

    /**
     * Changes a position of an occurrence of this annotation in the context.
     * @param occurrence The occurrence that should be changed.
     */
    const onChangePosition =
        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
            changePosition(occurrence, Number(e.currentTarget.value));
        };

    /**
     * Changes a length of an occurrence of this annotation in the context.
     * @param occurrence The occurrence that should be changed.
     */
    const onChangeLength =
        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
            changeLength(occurrence, Number(e.currentTarget.value));
        };

    /**
     * Changes visibility of properties of this annotation.
     */
    const changePropertiesVisibility = () => {
        setVisibleProperties(!visibleProperties);
    };

    return (
        <Container>
            <Row>
                <Col className="d-flex align-items-center">{props.tag.name}</Col>
                <Col sm="auto">
                    <Button
                        type="text"
                        shape="circle"
                        icon={<PlusOutlined />}
                        onClick={onAddOccurrence}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<EyeOutlined />}
                        onClick={onChangeVisibility}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<DownOutlined />}
                        onClick={changePropertiesVisibility}
                    />
                </Col>
            </Row>
            {visibleProperties && (
                <Stack>
                    <div>Kategorie: {props.tag.category}</div>
                    <div>Výskyty:</div>
                    {props.tag.occurrences.map((occurrence, index) => {
                        return (
                            <div key={index} id={props.tag.name + index}>
                                <Container>
                                    <Row>
                                        <Col>
                                            <Row>
                                                <Col className="d-flex align-items-center">
                                                    Pozice:
                                                </Col>
                                                <Col sm="auto">
                                                    <Input
                                                        value={occurrence.position}
                                                        onChange={onChangePosition(
                                                            occurrence
                                                        )}
                                                    />
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col className="d-flex align-items-center">
                                                    Délka:
                                                </Col>
                                                <Col sm="auto">
                                                    <Input
                                                        value={occurrence.length}
                                                        onChange={onChangeLength(
                                                            occurrence
                                                        )}
                                                    />
                                                </Col>
                                            </Row>
                                        </Col>
                                        <Col
                                            sm="auto"
                                            className="d-flex align-items-center"
                                        >
                                            <Button
                                                icon={<DeleteOutlined />}
                                                onClick={onDeleteOccurrence(occurrence)}
                                            ></Button>
                                        </Col>
                                    </Row>
                                </Container>
                            </div>
                        );
                    })}
                </Stack>
            )}
        </Container>
    );
}