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

React components for building web UI in Azure DevOps

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";class Label extends React.Component{constructor(e){super(e),this.rootRef=React.createRef(),this.onBlur=()=>{this.props.onBlur&&this.props.onBlur()},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus(e),this.context&&this.props.id&&this.context.onFocus(this.props.id)},this.onHoverStart=()=>{this.setState({isHovered:!0})},this.onHoverEnd=()=>{this.setState({isHovered:!1})},this.state={isHovered:!1}}render(){const{className:r,content:s,color:n,enableHover:e=!1,excludeFocusZone:i,id:c,selected:l,onClick:a,onKeyDown:u,onMouseDown:p}=this.props;var o=this.state["isHovered"];const h=n&&o&&e?createHoverColor(n):n;return React.createElement(FocusZoneContext.Consumer,null,t=>React.createElement(FocusWithin,{onBlur:this.onBlur,onFocus:this.onFocus},o=>React.createElement(Observer,{selected:l},e=>React.createElement("div",{className:css(r,"bolt-label",e.selected&&"selected",n&&(this.isDark(n,e.selected)?"dark":"light")),"data-focuszone":!i&&t.focuszoneId,id:getSafeId(c),onBlur:this.onBlur,onClick:a,onFocus:this.onFocus,onKeyDown:u,onMouseDown:p,onMouseEnter:this.onHoverStart,onMouseLeave:this.onHoverEnd,ref:this.rootRef,style:this.getStyle(h,e.selected,o.hasFocus),tabIndex:getTabIndex(this.props,this.context)},React.createElement(Tooltip,{overflowOnly:!0},React.createElement("div",{className:"bolt-label-content text-ellipsis"},s))))))}focus(){this.rootRef.current&&this.rootRef.current.focus()}getStyle(e,o,t){if(!o&&!t&&e)return{backgroundColor:getColorString(e)}}isDark(e,o){return!(o||!e)&&isDark(e)}}function createHoverColor(e){return{red:.94*e.red,green:.94*e.green,blue:.94*e.blue}}Label.DEFAULT_COLOR={red:240,blue:240,green:240},Label.contextType=FocusGroupContext;export{Label};