aswi20220x00-gitlab/webapp/components/annotation/CategoryItem.tsx @ ed01528f

import { Col, Container, Row, Stack } from 'react-bootstrap';
import { Button } from 'antd';
import { DownOutlined, TagOutlined } from '@ant-design/icons';
import { TagCategoryInfo } from '../../api';
import { useState } from 'react';
import { TagItem } from './TagItem';

/**
 * Creates a single item for a category in a tag panel.
 * @param props Properties should contain a category.
 * @returns Item that represents the category.
 */
export function CategoryItem(props: { category: TagCategoryInfo }) {
    /**
     * Should tags in this category be visible?
     */
    const [visibleTags, setVisibleTags] = useState(false);

    /**
     * Changes visibility of tags.
     */
    const changeTagsVisibility = () => {
        setVisibleTags(!visibleTags);
    };

    return (
        <Container>
            <Row>
                <Col>
                    <Button
                        type="text"
                        icon={<DownOutlined />}
                        onClick={changeTagsVisibility}
                        className="w-100 text-start"
                    >
                        {props.category.name}
                    </Button>
                </Col>
                <Col md="auto">
                    <TagOutlined style={{ color: props.category.color ?? 'black' }} />
                </Col>
            </Row>
            {visibleTags && (
                <Stack>
                    {props.category.tags?.map((tag, index) => (
                        <TagItem tag={tag} key={index} />
                    ))}
                </Stack>
            )}
        </Container>
    );
}