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