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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Pill.css";import*as React from"react";import{format}from"../../Core/Util/String";import{Button}from"../../Button";import{FocusZoneContext}from"../../FocusZone";import{Icon,IconSize}from"../../Icon";import*as Resources from"../../Resources.Widgets";import{css,getSafeId,KeyCode}from"../../Util";import{darken,getColorString,isDark}from"../../Utilities/Color";import{getTabIndex}from"../../Utilities/Focus";import{PillSize,PillVariant}from"./Pill.Props";class Pill extends React.Component{constructor(e){super(e),this.getChildText=()=>{let t="";return React.Children.map(this.props.children,e=>{"string"==typeof e&&(t+=e)}),t},this.onKeyDown=e=>{e.which===KeyCode.enter&&this.props.onClick&&this.props.onClick()},this.onMouseEnter=e=>{this.props.onMouseEnter&&this.props.onMouseEnter(e),this.setState({isHoveringPrimaryElement:!0})},this.onMouseLeave=e=>{this.props.onMouseLeave&&this.props.onMouseLeave(e),this.setState({isHoveringPrimaryElement:!1})},this.onMouseLeaveButton=()=>{this.setState({isHoveringPrimaryElement:!0})},this.onMouseOverButton=()=>{this.setState({isHoveringPrimaryElement:!1})},this.state={isHoveringPrimaryElement:!1}}static getColorStyle(e,t,o){if(e)return o=o&&t?darken(e,.06):e,{backgroundColor:getColorString(o)}}static getSizeClass(e){switch(e){case PillSize.compact:return"compact";case PillSize.large:return"large";default:PillSize.regular;return"regular"}}static getVariantClass(e,t){switch(e){case PillVariant.outlined:return"outlined";case PillVariant.colored:return t?css("colored",isDark(t)?"dark":"light"):"standard";case PillVariant.themedStandard:return"themed-standard";default:PillVariant.standard;return"standard"}}static getDerivedStateFromProps(e,t){return t}render(){const{ariaHidden:t,contentClassName:o,className:i,color:s,containsCount:r=!1,iconProps:n,id:a,isListItem:l,onClick:c,onBlur:u,onFocus:m,onRemoveClick:p,onRenderFilledVisual:d,size:h=PillSize.regular,variant:g=PillVariant.standard}=this.props,v=this.state["isHoveringPrimaryElement"],C=this.props.ariaLabel||this.getChildText();return React.createElement(FocusZoneContext.Consumer,null,e=>React.createElement("div",{className:css(i,"bolt-pill flex-row flex-center",Pill.getVariantClass(g,s),Pill.getSizeClass(h),r&&"count",v&&"hover",c&&"clickable",d&&"has-filled-visual",n&&!d&&"has-icon",p&&"has-remove-button"),id:getSafeId(a),onClick:c,onBlur:u,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,style:Pill.getColorStyle(s,v,c),role:l?"listitem":void 0},d&&React.createElement("div",{className:"bolt-pill-filled-visual flex-noshrink"},d()),n&&!d&&React.createElement(Icon,Object.assign({},n,{className:css(n.className,"bolt-pill-icon")})),React.createElement("div",{"aria-label":C,"aria-hidden":t,className:css(o,"bolt-pill-content text-ellipsis"),"data-focuszone":this.props.excludeFocusZone?void 0:e.focuszoneId,onFocus:m,onKeyDown:this.onKeyDown,role:this.props.role||(c?"button":"presentation"),tabIndex:c||m?getTabIndex(this.props):void 0},this.props.children),p&&React.createElement(Button,{ariaLabel:format(Resources.RemovePillLabel,C),className:"bolt-pill-button",iconProps:{iconName:"Cancel",size:IconSize.inherit},onClick:p,onMouseLeave:this.onMouseLeaveButton,onMouseOver:this.onMouseOverButton,subtle:!0,tooltipProps:{text:format(Resources.RemovePillLabel,C)},tabIndex:this.props.removeButtonTabIndex})))}}export{Pill};