azure-devops-ui/Components/Tabs/Tab.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{FocusGroupContext}from"../../FocusGroup";import{FocusZoneContext}from"../../FocusZone";import{Icon}from"../../Icon";import{Observer}from"../../Observer";import{Tooltip}from"../../TooltipEx";import{css,getSafeId,KeyCode}from"../../Util";import{getFriendlyDisplayValue}from"../../Utilities/FriendlyNumber";import{TabBadge}from"./TabBadge";var Tab=function(e){function t(){var r=null!==e&&e.apply(this,arguments)||this;return r.onClick=function(e){var t=r.props.url,o=!0;(o=e.ctrlKey&&t?!1:o)&&(e.preventDefault(),r.updateSelectedItem(e))},r.onKeyDown=function(e){e.defaultPrevented||e.which!==KeyCode.space&&e.which!==KeyCode.enter||(e.preventDefault(),r.updateSelectedItem(e))},r}return __extends(t,e),t.prototype.render=function(){var s=this,e=this.props,c=e.ariaLabel,l=e.index,p=e.setSize,d=e.iconProps,u=e.id,m=e.isSelected,f=e.renderBadge,b=e.url,v=b?"a":"div";return React.createElement(Observer,{name:this.props.name,badgeCount:this.props.badgeCount},function(a){var i=a.name;return React.createElement(FocusGroupContext.Consumer,null,function(n){return React.createElement(FocusZoneContext.Consumer,null,function(e){var t=f?f():s.renderBadge(a.badgeCount),o=void 0!==d&&Icon(__assign({className:"bolt-tab-icon"},d)),r=i&&React.createElement("span",{className:"bolt-tab-text","data-content":i},i);return React.createElement(Tooltip,__assign({},o&&!i&&c?{text:c,overflowOnly:!1}:{text:i,overflowDetected:overflowDetected,overflowOnly:!0}),React.createElement(v,{"aria-label":c,"aria-posinset":void 0!==l?l+1:void 0,"aria-selected":m,"aria-setsize":p,className:css(s.props.className,"bolt-tab focus-treatment flex-noshrink",m&&"selected"),"data-focuszone":e.focuszoneId,href:b,id:getSafeId("tab-"+u),key:u,onClick:s.onClick,onKeyDown:s.onKeyDown,role:"tab",tabIndex:n.focusedElementId==="tab-"+u?0:-1},React.createElement("span",{className:"bolt-tab-inner-container"},o,r,t)))})})})},t.prototype.renderBadge=function(e){var t=void 0!==e?getFriendlyDisplayValue(e):void 0,o=void 0,e=(e&&t!==e.toString()&&(o=e.toString()),null);return e=t?React.createElement(TabBadge,{tooltipProps:o?{text:o}:void 0},t):e},t.prototype.updateSelectedItem=function(e){var t=this.props.onClick;e&&this.props.onBeforeTabChange&&!this.props.onBeforeTabChange(e,this.props.id,this.props.url)?e.preventDefault():t&&t(this.props.id)},t}(React.Component);function overflowDetected(e){e=e.querySelector(".bolt-tab-text");return!!e&&e.scrollWidth>Math.ceil(e.offsetWidth)}export{Tab};