azure-devops-ui/Components/Tabs/TabList.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{Orientation}from"../../Components/Tabs/Tabs.Props";import{css}from"../../Util";import{Tab}from"./Tab";import{TabGroupProviderContext}from"./TabGroupProviderContext";import{TabProviderContext}from"./TabProviderContext";import{Tabs}from"./Tabs";class TabList extends React.Component{constructor(e){super(e),this.generateGroupMap=e=>{if(!e)return{};const t={};return e.forEach(e=>{t[e.id]=e}),t},this.processChildren=r=>{const s={};return React.Children.forEach(this.props.children,e=>{var t;e&&(t=e.props.groupId||"",s[t]?s[t].items.push(e):s[t]={items:[e],groupProps:r[t]||{id:"",name:"",order:-1}})}),s},this.processContributions=(e,r,s)=>(e.forEach(e=>{var t=this.createRow(e),e=e.groupId||"";s[e]?s[e].items.push(t):s[e]={items:[t],groupProps:r[e]||{id:"",name:"",order:-1}}}),s),this.processGroups=e=>{const t=[];var r=[];for(const s in e)r.push(e[s]);return r.sort((e,t)=>(e.groupProps.order||1e3)-(t.groupProps.order||1e3)).forEach(e=>{e.groupProps.name&&t.push(React.createElement("div",{key:e.groupProps.name,className:"bolt-tablist-heading title-xs flex-noshrink"},e.groupProps.name)),t.push(...e.items)}),t},this.createRow=e=>React.createElement(Tab,{key:e.id,id:e.id,name:e.name,url:e.url&&ObservableLike.getValue(e.url),onBeforeTabChange:e.onBeforeTabChange,iconProps:e.iconProps}),this.renderTitle=e=>React.createElement("div",{className:"bolt-tablist-title title-m flex-noshrink"},e),this.renderSubTitle=e=>React.createElement("div",{className:"bolt-tablist-subtitle secondary-text flex-noshrink text-ellipsis"},e),this.onSelectedTabIdChanged=()=>{this.forceUpdate()}}render(){return React.createElement(TabGroupProviderContext.Consumer,null,e=>{const{className:r,tabGroups:t}=this.props;e=t?t.concat(e.groups):e.groups;const s=this.generateGroupMap(e);return React.createElement(TabProviderContext.Consumer,null,e=>{var t=this.props.selectedTabId||e.selectedId,e=this.processContributions(e.tabs,s,this.processChildren(s)),e=this.processGroups(e);return React.createElement("div",{className:css(r,"bolt-tablist flex-column")},this.props.listTitle&&this.renderTitle(this.props.listTitle),this.props.listSubTitle&&this.renderSubTitle(this.props.listSubTitle),React.createElement(Tabs,Object.assign({ariaLabel:this.props.listTitle,selectedTabId:t},this.props,{className:"bolt-tablist-tabs",orientation:Orientation.Vertical}),e))})})}}export{TabList};