azure-devops-ui/Components/Tabs/TabBar.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./Tabs.css";
import * as React from "react";
import { ObservableLike } from '../../Core/Observable';
import { ScreenContext, ScreenSize } from '../../Core/Util/Screen';
import { Observer } from '../../Observer';
import { SurfaceBackground, SurfaceContext } from '../../Surface';
import { css } from '../../Util';
import { Tab } from "./Tab";
import { TabProviderContext } from "./TabProviderContext";
import { Tabs } from "./Tabs";
/**
 * Renders tabs (provided as children or through a tab provider context) as well as addtional
 * content such as in-line filters, view options, etc.
 *
 * Tabs provided directly as children will always be place before contributed tabs.
 */
export class TabBar extends React.Component {
    constructor() {
        super(...arguments);
        this.renderAdditionalContent = (renderFilterBar) => {
            if (renderFilterBar) {
                return renderFilterBar(true);
            }
            return this.props.renderAdditionalContent && this.props.renderAdditionalContent();
        };
        this.createTab = (tab) => {
            return (React.createElement(Tab, { ariaLabel: tab.ariaLabel, badgeCount: tab.badgeCount, className: tab.className, key: tab.id, iconProps: tab.iconProps, id: tab.id, name: tab.name, onBeforeTabChange: tab.onBeforeTabChange, url: tab.url && ObservableLike.getValue(tab.url), renderBadge: tab.renderBadge, onFocus: tab.onFocus }));
        };
    }
    render() {
        return (React.createElement(Observer, { size: this.context.size }, (props) => {
            //determine on which screen sizes we should stack line by line.
            const shouldBeStacked = props.size <= ScreenSize.medium;
            return (React.createElement(SurfaceContext.Consumer, null, surfaceContext => (React.createElement(TabProviderContext.Consumer, null, (tabProviderContext) => {
                const selectedTabId = this.props.selectedTabId || tabProviderContext.selectedId;
                return (React.createElement("div", { className: css(this.props.className, "bolt-tabbar flex-row flex-center flex-noshrink", !this.props.disableSticky && props.size >= ScreenSize.small && "sticky", surfaceContext.background === SurfaceBackground.neutral && "bolt-tabbar-grey", surfaceContext.background === SurfaceBackground.callout && "bolt-tabbar-on-callout") },
                    React.createElement(Tabs, Object.assign({ selectedTabId: selectedTabId }, this.props, { className: css(this.props.tabsClassName, "bolt-tabbar-tabs flex-grow", !shouldBeStacked && "flex-noshrink", shouldBeStacked && "flex-wrap") }),
                        this.props.children,
                        tabProviderContext.tabs.map(this.createTab)),
                    this.renderAdditionalContent(tabProviderContext.renderFilterBar)));
            }))));
        }));
    }
}
TabBar.contextType = ScreenContext;