aswi20220x00-gitlab/webapp/components/annotation/TagItem.tsx @ 2c9bdf18

import { Container, Row, Stack } from 'react-bootstrap';
import { TagInfo } from '../../api';
import { Button } from 'antd';
import { DownOutlined, TagOutlined, UpOutlined } from '@ant-design/icons';
import React, { 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);

    /**
     * Tag context.
     */
    const { selectTag } = useContext(TagCategoryContext);

    /**
     * Button icon.
     */
    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />);

    /**
     * Changes visibility of sub tags.
     */
    const changeSubTagsVisibility = () => {
        setButtonIcon(visibleSubTags ? <DownOutlined /> : <UpOutlined />);
        setVisibleSubTags(!visibleSubTags);
    };

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

    /**
     * Does tag have sub tags?
     */
    const hasSubTags = (props.tag.subTags?.length ?? 0) > 0;

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