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

import { SubTagInfo, TagInfo } from '../../api';
import { Container, Row } from 'react-bootstrap';
import { Button, Tooltip } from 'antd';
import React, { useContext } from 'react';
import { TagCategoryContext } from '../../contexts/TagCategoryContext';
import { AnnotationContext } from '../../contexts/AnnotationContext';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
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 SubTagItem(props: { tag: TagInfo; subTag: SubTagInfo }) {
    /**
     * Tag context.
     */
    const { selectTag } = useContext(TagCategoryContext);

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

    /**
     * Selects the sub tag.
     */
    const onSelectSubTag = () => {
        selectTag(props.tag, props.subTag);
    };

    return (
        <Container>
            <Row>
                <Button
                    onClick={onSelectSubTag}
                    className="w-100 text-start rounded"
                    disabled={submitting}
                >
                    <div className=" align-middle">
                        {props.subTag.name}
                        {props.subTag.description && props.subTag.description !== '' && (
                            <Tooltip
                                title={props.subTag.description}
                                key={props.subTag.description}
                            >
                                <FontAwesomeIcon
                                    icon={faCircleQuestion}
                                    className={styles.iconRight}
                                />
                            </Tooltip>
                        )}
                    </div>
                </Button>
            </Row>
        </Container>
    );
}