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

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

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
import styles from '/styles/Icon.module.scss';
/**
 * 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>(
        <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
    );

    /**
     * Changes visibility of tags.
     */
    const changeTagsVisibility = () => {
        setButtonIcon(
            visibleTags ? (
                <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
            ) : (
                <FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
            )
        );
        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}
                    {props.category.description && props.category.description !== '' && (
                        <Tooltip
                            title={props.category.description}
                            key={props.category.description}
                        >
                            <FontAwesomeIcon icon={faCircleQuestion} />
                        </Tooltip>
                    )}
                </Button>
            </Row>
            {visibleTags && (
                <Stack gap={2} className="mt-1 mb-2">
                    {props.category.tags?.map((tag, index) => (
                        <TagItem tag={tag} key={index} />
                    ))}
                </Stack>
            )}
        </Container>
    );
}