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

B&G UI components

import React from "react";

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

import { ResourceViewerContext } from "../ResourceViewerContext";
import Strings from "../_Strings";
import { ANNOTATION_TYPE } from "../../../util/AnnotationConstants";

export default class AnnotationFilter extends React.PureComponent {
    static contextType = ResourceViewerContext;

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        document.addEventListener("mousedown", this.checkForKey);
    }

    componentWillUnMount() {
        document.removeEventListener("mousedown", this.checkForKey);
    }

    checkForKey = (e) => {
        this.extraKeyPressed = e.ctrlKey || e.shiftKey || e.metaKey;
    };

    /* ---------------------------------- UI FUNCTIONS -------------------------------- */

    // Toggle given type, but keep type order intact
    // Persist the state in session storage
    // extraKey set newTypes to clicked type, or if only selected type, back to all types
    toggleType = (type, extraKey) => {
        let newTypes;
        // keys
        if (extraKey) {
            if (
                this.context.activeAnnotationTypes.length == 1 &&
                this.context.activeAnnotationTypes.includes(type)
            ) {
                // all
                newTypes = Object.values(ANNOTATION_TYPE);
            } else {
                // single
                newTypes = [type];
            }
        } else {
            // add or remove type
            newTypes = this.context.activeAnnotationTypes.includes(type)
                ? this.context.activeAnnotationTypes.filter((t) => t != type)
                : [type, ...this.context.activeAnnotationTypes];
        }
        // keep ANNOTATION_TYPE order intact
        const activeAnnotationTypes = Object.values(
            ANNOTATION_TYPE
        ).filter((type) => newTypes.includes(type));

        this.context.setActiveAnnotationTypes(activeAnnotationTypes);
    };

    // /* ---------------------------------- RENDER FUNCTIONS -------------------------------- */

    render() {
        // Active annotation types
        const activeAnnotationTypes = this.context.activeAnnotationTypes;

        const checkBoxes = Object.keys(ANNOTATION_TYPE).map((type) => (
            <span key={type} title={Strings.ANNOTATION_FILTER_SHIFT_CLICK}>
                <input
                    type="checkbox"
                    checked={activeAnnotationTypes.includes(
                        ANNOTATION_TYPE[type]
                    )}
                    onChange={() => {
                        this.toggleType(
                            ANNOTATION_TYPE[type],
                            this.extraKeyPressed
                        );
                    }}
                    id={"annotation-filter-" + type}
                />
                <label htmlFor={"annotation-filter-" + type}>
                    {Strings["ANNOTATION_TYPE_TITLE_" + type]}
                </label>
            </span>
        ));

        return (
            <div className={IDUtil.cssClassName("annotation-filter")}>
                {checkBoxes}
            </div>
        );
    }
}