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