azure-devops-ui/Components/Tabs/TabBar.min.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";class TabBar extends React.Component{constructor(){super(...arguments),this.renderAdditionalContent=e=>e?e(!0):this.props.renderAdditionalContent&&this.props.renderAdditionalContent(),this.createTab=e=>React.createElement(Tab,{ariaLabel:e.ariaLabel,badgeCount:e.badgeCount,className:e.className,key:e.id,iconProps:e.iconProps,id:e.id,name:e.name,onBeforeTabChange:e.onBeforeTabChange,url:e.url&&ObservableLike.getValue(e.url),renderBadge:e.renderBadge,onFocus:e.onFocus})}render(){return React.createElement(Observer,{size:this.context.size},a=>{const o=a.size<=ScreenSize.medium;return React.createElement(SurfaceContext.Consumer,null,t=>React.createElement(TabProviderContext.Consumer,null,e=>{var r=this.props.selectedTabId||e.selectedId;return React.createElement("div",{className:css(this.props.className,"bolt-tabbar flex-row flex-center flex-noshrink",!this.props.disableSticky&&a.size>=ScreenSize.small&&"sticky",t.background===SurfaceBackground.neutral&&"bolt-tabbar-grey",t.background===SurfaceBackground.callout&&"bolt-tabbar-on-callout")},React.createElement(Tabs,Object.assign({selectedTabId:r},this.props,{className:css(this.props.tabsClassName,"bolt-tabbar-tabs flex-grow",!o&&"flex-noshrink",o&&"flex-wrap")}),this.props.children,e.tabs.map(this.createTab)),this.renderAdditionalContent(e.renderFilterBar))}))})}}TabBar.contextType=ScreenContext;export{TabBar};