azure-devops-ui/Components/Tabs/TabList.min.js

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var TabList=function(r){function e(e){var n=r.call(this,e)||this;return n.generateGroupMap=function(e){var r;return e?(r={},e.forEach(function(e){r[e.id]=e}),r):{}},n.processChildren=function(t){var o={};return React.Children.forEach(n.props.children,function(e){var r;e&&(r=e.props.groupId||"",o[r]?o[r].items.push(e):o[r]={items:[e],groupProps:t[r]||{id:"",name:"",order:-1}})}),o},n.processContributions=function(e,t,o){return e.forEach(function(e){var r=n.createRow(e),e=e.groupId||"";o[e]?o[e].items.push(r):o[e]={items:[r],groupProps:t[e]||{id:"",name:"",order:-1}}}),o},n.processGroups=function(e){var r,t=[],o=[];for(r in e)o.push(e[r]);return o.sort(function(e,r){return(e.groupProps.order||1e3)-(r.groupProps.order||1e3)}).forEach(function(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.apply(t,e.items)}),t},n.createRow=function(e){return 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})},n.renderTitle=function(e){return React.createElement("div",{className:"bolt-tablist-title title-m flex-noshrink"},e)},n.renderSubTitle=function(e){return React.createElement("div",{className:"bolt-tablist-subtitle secondary-text flex-noshrink text-ellipsis"},e)},n.onSelectedTabIdChanged=function(){n.forceUpdate()},n}return __extends(e,r),e.prototype.render=function(){var n=this;return React.createElement(TabGroupProviderContext.Consumer,null,function(e){var r=n.props,t=r.className,r=r.tabGroups,r=r?r.concat(e.groups):e.groups,o=n.generateGroupMap(r);return React.createElement(TabProviderContext.Consumer,null,function(e){var r=n.props.selectedTabId||e.selectedId,e=n.processContributions(e.tabs,o,n.processChildren(o)),e=n.processGroups(e);return React.createElement("div",{className:css(t,"bolt-tablist flex-column")},n.props.listTitle&&n.renderTitle(n.props.listTitle),n.props.listSubTitle&&n.renderSubTitle(n.props.listSubTitle),React.createElement(Tabs,__assign({ariaLabel:n.props.listTitle,selectedTabId:r},n.props,{className:"bolt-tablist-tabs",orientation:Orientation.Vertical}),e))})})},e}(React.Component);export{TabList};