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

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

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown, faAngleUp, faTag } from '@fortawesome/free-solid-svg-icons';
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
import styles from '/styles/Icon.module.scss';

/**
 * 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);

    /**
     * Annotation context
     */
    const { submitting } = useContext(AnnotationContext);

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

    /**
     * Changes visibility of sub tags.
     */
    const changeSubTagsVisibility = () => {
        setButtonIcon(
            visibleSubTags ? (
                <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
            ) : (
                <FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
            )
        );
        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
                        onClick={changeSubTagsVisibility}
                        className="w-100 text-start rounded"
                        disabled={submitting}
                    >
                        <div className=" align-middle">
                            {buttonIcon}
                            <FontAwesomeIcon
                                icon={faTag}
                                style={{ color: props.tag.color ?? 'black' }}
                                className={styles.iconMiddle}
                            />
                            {props.tag.name}
                            {props.tag.description && props.tag.description !== '' && (
                                <Tooltip
                                    title={props.tag.description}
                                    key={props.tag.description}
                                >
                                    <FontAwesomeIcon
                                        icon={faCircleQuestion}
                                        className={styles.iconRight}
                                    />
                                </Tooltip>
                            )}
                        </div>
                    </Button>
                )}
                {!hasSubTags && (
                    <Button
                        onClick={onSelectTag}
                        className="w-100 text-start rounded"
                        disabled={submitting}
                    >
                        <div className=" align-middle">
                            <FontAwesomeIcon
                                icon={faTag}
                                style={{ color: props.tag.color ?? 'black' }}
                                className={styles.iconLeft}
                            />
                            {props.tag.name}
                            {props.tag.description && props.tag.description !== '' && (
                                <Tooltip
                                    title={props.tag.description}
                                    key={props.tag.description}
                                >
                                    <FontAwesomeIcon
                                        icon={faCircleQuestion}
                                        className={styles.iconRight}
                                    />
                                </Tooltip>
                            )}
                        </div>
                    </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>
    );
}