labo-components/app/components/resourceviewer/StaticColumn.jsx

B&G UI components

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import IDUtil from "../../util/IDUtil"; // for generating unique CSS classnames for this component
import { ResourceViewerContext } from "./ResourceViewerContext";
import ColumnHeader from "./ColumnHeader";
import Tabs from "./Tabs";
import MediaEvents from "./_MediaEvents";
import BaseColumn, { COLUMN_STATIC } from "./BaseColumn";
import MetadataColumn from "./MetadataColumn";
import ContentAnnotationsColumn from "./ContentAnnotationsColumn";
import Strings from "./_Strings";

/*
	This component shows the static metadata and content annotations
*/

const TAB_METADATA = "metadata";
const TAB_CONTENT_ANNOTATIONS = "content_annotations";

export default class StaticColumn extends React.Component {
    static contextType = ResourceViewerContext;

    constructor(props) {
        super(props);

        // define our tabs
        this.tabs = [
            {
                id: TAB_METADATA,
                title: Strings.METADATA_TITLE,
                description: Strings.METADATA_HELP,
                onClick: () => {
                    this.setActiveTab(TAB_METADATA);
                },
            },
            {
                id: TAB_CONTENT_ANNOTATIONS,
                title: Strings.CONTENT_ANNOTATIONS_TITLE,
                description: Strings.CONTENT_ANNOTATIONS_HELP,
                onClick: () => {
                    this.setActiveTab(TAB_CONTENT_ANNOTATIONS);
                },
            },
        ];

        this.state = {
            activeTab: null,
        };
    }

    componentDidMount() {
        this.setState({
            activeTab: this.context && this.context.getActiveTranscripts() ? TAB_CONTENT_ANNOTATIONS : TAB_METADATA,
        });

        this.context.mediaEvents.bind(
            MediaEvents.SHOW_CONTENT_ANNOTATIONS,
            this.showContentAnnotationsTab
        );
    }

    componentWillUnmount() {
        this.context.mediaEvents.unbind(
            MediaEvents.SHOW_CONTENT_ANNOTATIONS,
            this.showContentAnnotationsTab
        );
    }

    showContentAnnotationsTab = () => {
        this.setActiveTab(TAB_CONTENT_ANNOTATIONS);
    };

    setActiveTab = (activeTab) => {
        this.setState({ activeTab });
    };

    getColumnContent = (id) => {
        switch (id) {
            case TAB_METADATA:
                return <MetadataColumn onMoreInfo={this.props.onMoreInfo}/>;
                break;
            case TAB_CONTENT_ANNOTATIONS:
                return <ContentAnnotationsColumn />;
                break;
            default:
                return <div>Unknown content column: {id}</div>;
                break;
        }
    };

    toggleColumn = () => this.props.onToggle(COLUMN_STATIC);

    renderActive(toggleColumn, tabs, activeTab) {
        const columnContent = this.getColumnContent(activeTab);
        return (
            <React.Fragment>
                <ColumnHeader onClose={toggleColumn}>
                    <Tabs tabs={tabs} activeTab={activeTab} />
                </ColumnHeader>

                <div className="column-content">{columnContent}</div>
            </React.Fragment>
        );
    }

    renderInactive(toggleColumn) {
        return (
            <div onClick={toggleColumn}>
                <div className="icon" />
                <div className="title">
                    {Strings.METADATA_TITLE +
                        " & " +
                        Strings.CONTENT_ANNOTATIONS_TITLE}
                </div>
            </div>
        );
    }

    render() {
        return (
            <BaseColumn
                className={classNames(IDUtil.cssClassName("static-column"), {
                    active: this.props.active,
                    inactive: !this.props.active,
                })}
            >
                {this.props.active
                    ? this.renderActive(
                          this.toggleColumn,
                          this.tabs,
                          this.state.activeTab
                      )
                    : this.renderInactive(this.toggleColumn)}
            </BaseColumn>
        );
    }
}

StaticColumn.propTypes = {
    active : PropTypes.bool.isRequired,
    onToggle: PropTypes.func.isRequired,
    onMoreInfo: PropTypes.func.isRequired //what to do when the user clicks the more info item
};