labo-components/app/components/resourceviewer/mediaColumn/timeline/LayerHeaders.jsx

B&G UI components

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

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

import { LayersPropTypes } from "./Layers";

// Per layer, show the layer header with the title, description, menu etc;
class LayerHeaders extends React.PureComponent {
    render() {
        const { layers } = this.props;
        return (
            <div className={IDUtil.cssClassName("tl-layer-headers")}>
                {layers.map((layer) => (
                    <div
                        key={layer.id}
                        className={classNames(
                            "tl-layer-header",
                            {
                                active: layer.id === this.props.activeLayerId,
                                tools:
                                    layer.headerChildren &&
                                    layer.headerChildren.props.children.filter(
                                        (a) => a
                                    ).length > 1, // add-segment-button is always shown, tools are added only != null when active annotation in layer
                            },
                            layer.className
                        )}
                        style={{
                            height: layer.height,
                        }}
                        onClick={() => {
                            this.props.onClick(layer.id);
                        }}
                    >
                        {layer.description ? (
                            <Info
                                id={"layer_header_info_" + layer.id}
                                text={layer.description}
                                className="black left"
                            />
                        ) : null}
                        {layer.title}
                        {layer.headerChildren}
                    </div>
                ))}
            </div>
        );
    }
}

LayerHeaders.propTypes = {
    layers: LayersPropTypes,
    activeLayerId: PropTypes.number,
    onClick: PropTypes.func.isRequired,
};

export default LayerHeaders;