aswi20220x00-gitlab/webapp/components/annotation/TagItem.tsx @ 5593c10b

import { Col, Container, Row, Stack } from 'react-bootstrap';
import { TagInfo } from '../../api';
import { Button } from 'antd';
import { DownOutlined, TagOutlined } from '@ant-design/icons';
import { useContext, useState } from 'react';
import { SubTagItem } from './SubTagItem';
import { TagCategoryContext } from '../../contexts/TagCategoryContext';

/**
 * Creates a single tag item in a tag panel.
 * @param props Properties should contain the tag.
 * @returns The item that represents the tag.
 */
export function TagItem(props: { tag: TagInfo }) {
    /**
     * Should sub tags be visible?
     */
    const [visibleSubTags, setVisibleSubTags] = useState(false);

    const { selectTag } = useContext(TagCategoryContext);

    /**
     * Changes visibility of sub tags.
     */
    const changeSubTagsVisibility = () => {
        setVisibleSubTags(!visibleSubTags);
    };

    /**
     * Selects the tag.
     */
    const onSelectTag = () => {
        selectTag(props.tag, null);
    };

    return (
        <Container>
            <Row>
                <Col>
                    {props.tag.subTags && (
                        <Button
                            type="text"
                            icon={<DownOutlined />}
                            onClick={changeSubTagsVisibility}
                            className="w-100 text-start"
                        >
                            {props.tag.name}
                        </Button>
                    )}
                    {!props.tag.subTags && (
                        <Button
                            type="text"
                            onClick={onSelectTag}
                            className="w-100 text-start"
                        >
                            {props.tag.name}
                        </Button>
                    )}
                </Col>
                <Col sm="auto">
                    <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
                </Col>
            </Row>
            {props.tag.subTags && visibleSubTags && (
                <Stack>
                    {props.tag.subTags?.map((subTag, index) => (
                        <SubTagItem tag={props.tag} subTag={subTag} key={index} />
                    ))}
                </Stack>
            )}
        </Container>
    );
}