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

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 { QuestionCircleOutlined } from '@ant-design/icons';

/**
 * 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}
                >
                    {props.subTag.name}
                    {props.subTag.description && props.subTag.description !== '' && (
                        <Tooltip
                            title={props.subTag.description}
                            key={props.subTag.description}
                        >
                            <QuestionCircleOutlined />
                        </Tooltip>
                    )}
                </Button>
            </Row>
        </Container>
    );
}