azure-devops-ui/Components/Tabs/Tabs.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{Orientation,TabSize}from"../../Components/Tabs/Tabs.Props";import{ObservableLike}from"../../Core/Observable";import{FocusZone,FocusZoneDirection}from"../../FocusZone";import{css}from"../../Util";import{Tab}from"./Tab";class Tabs extends React.Component{constructor(e){super(e),this.onTabClick=e=>{var t=this.props["onSelectedTabChanged"];t&&t(e)},this.onSelectedTabIdChanged=()=>{this.forceUpdate()},ObservableLike.isObservable(e.selectedTabId)&&e.selectedTabId.subscribe(this.onSelectedTabIdChanged)}componentWillUnmount(){ObservableLike.isObservable(this.props.selectedTabId)&&this.props.selectedTabId.unsubscribe(this.onSelectedTabIdChanged)}render(){var{tabSize:e=TabSize.Tall,orientation:t=Orientation.Horizontal}=this.props;const s=this.props.selectedTabId&&ObservableLike.getValue(this.props.selectedTabId);let r=0,o=0;const a={};let i;React.Children.map(this.props.children,e=>{e&&e.type===Tab&&(a[e.props.id]=o++,r++,!i)&&e.props.id&&(i="tab-"+e.props.id)});var n=React.Children.map(this.props.children,e=>{var t,o;return e&&"string"!=typeof e.type?(t=(e.props.id&&e.props.id.toLocaleLowerCase())===(s&&s.toLocaleLowerCase()),o=this.onTabClick,React.cloneElement(e,Object.assign(Object.assign({},e.props),{isSelected:t,onClick:o,index:a[e.props.id],setSize:r}))):e}),c=t===Orientation.Vertical?"flex-column":"flex-row",t=t===Orientation.Vertical?FocusZoneDirection.Vertical:FocusZoneDirection.Horizontal;return React.createElement(FocusZone,{direction:t,focusGroupProps:{defaultElementId:i}},React.createElement("div",{"aria-label":this.props.ariaLabel,className:css(this.props.className,"bolt-tabs",c,e),role:"tablist"},n))}}export{Tabs};