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

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

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

    /**
     * Changes visibility of tags.
     */
    const changeTagsVisibility = () => {
        setButtonIcon(visibleTags ? <DownOutlined /> : <UpOutlined />);
        setVisibleTags(!visibleTags);
    };

    return (
        <Container className="shadow-sm rounded">
            <Row>
                <Button
                    type="text"
                    icon={buttonIcon}
                    onClick={changeTagsVisibility}
                    className="w-100 text-start rounded"
                >
                    {props.category.name}
                </Button>
            </Row>
            {visibleTags && (
                <Stack gap={2} className="mt-1 mb-2">
                    {props.category.tags?.map((tag, index) => (
                        <TagItem tag={tag} key={index} />
                    ))}
                </Stack>
            )}
        </Container>
    );
}