labo-components/app/components/resourceviewer/annotationColumn/SingleAnnotationTarget.jsx

B&G UI components

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

import IDUtil from "../../../util/IDUtil";

import TargetHeader from "./TargetHeader";
import { renderPerType, getAnnotationsPerType, excludeCustomType } from "../AnnotationHelpers";

export default class SingleAnnotationTarget extends React.PureComponent {
    toggle = () => {
        this.props.toggle(this.props.target);
    };

    render() {
        // header
        const header = (
            <TargetHeader
                active={this.props.active}
                onToggle={this.toggle}
                title={this.props.title}
                count={
                    this.props.annotation && this.props.annotation.body
                        ? excludeCustomType(this.props.annotation.body).length
                        : 0
                }
                icon={this.props.icon}
            />
        );

        // types
        const types = this.props.active
            ? renderPerType(
                  getAnnotationsPerType(
                      this.props.activeTypes,
                      this.props.annotation
                  ),
                  this.props.target,
                  this.props.annotation,
                  this.props.annotationClient,
                  this.props.activeTypes,
                  false // hide form by default
              )
            : null;

        return (
            <div
                className={classNames(
                    IDUtil.cssClassName("single-annotation-target"),
                    "target-" + this.props.target
                )}
            >
                {header}
                {types}
            </div>
        );
    }
}

SingleAnnotationTarget.propTypes = {
    target: PropTypes.string.isRequired,
    annotationClient: PropTypes.object.isRequired,
    title: PropTypes.string.isRequired,
    icon: PropTypes.object.isRequired,
    toggle: PropTypes.func.isRequired,
    active: PropTypes.bool.isRequired,
    activeTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
    annotation: PropTypes.object,
};