azure-devops-ui/Components/Label/Label.min.js

React components for building web UI in Azure DevOps

import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Label.css";import*as React from"react";import{css,getSafeId}from"../../Util";import{Tooltip}from"../../TooltipEx";import{getColorString,isDark}from"../../Utilities/Color";import{FocusWithin}from"../../FocusWithin";import{FocusZoneContext}from"../../FocusZone";import{Observer}from"../../Observer";import{getTabIndex}from"../../Utilities/Focus";import{FocusGroupContext}from"../../FocusGroup";var Label=function(t){function e(e){var o=t.call(this,e)||this;return o.rootRef=React.createRef(),o.onBlur=function(){o.props.onBlur&&o.props.onBlur()},o.onFocus=function(e){o.props.onFocus&&o.props.onFocus(e),o.context&&o.props.id&&o.context.onFocus(o.props.id)},o.onHoverStart=function(){o.setState({isHovered:!0})},o.onHoverEnd=function(){o.setState({isHovered:!1})},o.state={isHovered:!1},o}return __extends(e,t),e.prototype.render=function(){var r=this,e=this.props,n=e.className,s=e.content,c=e.color,o=e.enableHover,i=e.excludeFocusZone,u=e.id,l=e.selected,a=e.onClick,p=e.onKeyDown,f=e.onMouseDown,e=this.state.isHovered,m=c&&e&&(void 0!==o&&o)?createHoverColor(c):c;return React.createElement(FocusZoneContext.Consumer,null,function(t){return React.createElement(FocusWithin,{onBlur:r.onBlur,onFocus:r.onFocus},function(o){return React.createElement(Observer,{selected:l},function(e){return React.createElement("div",{className:css(n,"bolt-label",e.selected&&"selected",c&&(r.isDark(c,e.selected)?"dark":"light")),"data-focuszone":!i&&t.focuszoneId,id:getSafeId(u),onBlur:r.onBlur,onClick:a,onFocus:r.onFocus,onKeyDown:p,onMouseDown:f,onMouseEnter:r.onHoverStart,onMouseLeave:r.onHoverEnd,ref:r.rootRef,style:r.getStyle(m,e.selected,o.hasFocus),tabIndex:getTabIndex(r.props,r.context)},React.createElement(Tooltip,{overflowOnly:!0},React.createElement("div",{className:"bolt-label-content text-ellipsis"},s)))})})})},e.prototype.focus=function(){this.rootRef.current&&this.rootRef.current.focus()},e.prototype.getStyle=function(e,o,t){if(!o&&!t&&e)return{backgroundColor:getColorString(e)}},e.prototype.isDark=function(e,o){return!(o||!e)&&isDark(e)},e.DEFAULT_COLOR={red:240,blue:240,green:240},e.contextType=FocusGroupContext,e}(React.Component);function createHoverColor(e){return{red:.94*e.red,green:.94*e.green,blue:.94*e.blue}}export{Label};