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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var Pill=function(o){function h(e){var t=o.call(this,e)||this;return t.getChildText=function(){var o="";return React.Children.map(t.props.children,function(e){"string"==typeof e&&(o+=e)}),o},t.onKeyDown=function(e){e.which===KeyCode.enter&&t.props.onClick&&t.props.onClick()},t.onMouseEnter=function(e){t.props.onMouseEnter&&t.props.onMouseEnter(e),t.setState({isHoveringPrimaryElement:!0})},t.onMouseLeave=function(e){t.props.onMouseLeave&&t.props.onMouseLeave(e),t.setState({isHoveringPrimaryElement:!1})},t.onMouseLeaveButton=function(){t.setState({isHoveringPrimaryElement:!0})},t.onMouseOverButton=function(){t.setState({isHoveringPrimaryElement:!1})},t.state={isHoveringPrimaryElement:!1},t}return __extends(h,o),h.getColorStyle=function(e,o,t){if(e)return t=t&&o?darken(e,.06):e,{backgroundColor:getColorString(t)}},h.getSizeClass=function(e){switch(e){case PillSize.compact:return"compact";case PillSize.large:return"large";default:PillSize.regular;return"regular"}},h.getVariantClass=function(e,o){switch(e){case PillVariant.outlined:return"outlined";case PillVariant.colored:return o?css("colored",isDark(o)?"dark":"light"):"standard";case PillVariant.themedStandard:return"themed-standard";default:PillVariant.standard;return"standard"}},h.getDerivedStateFromProps=function(e,o){return o},h.prototype.render=function(){var o=this,e=this.props,t=e.ariaHidden,n=e.contentClassName,r=e.className,i=e.color,a=e.containsCount,s=void 0!==a&&a,l=e.iconProps,c=e.id,u=e.onClick,m=e.onBlur,d=e.onFocus,p=e.onRemoveClick,f=e.onRenderFilledVisual,a=e.size,v=void 0===a?PillSize.regular:a,a=e.variant,g=void 0===a?PillVariant.standard:a,C=this.state.isHoveringPrimaryElement,P=this.props.ariaLabel||this.getChildText();return React.createElement(FocusZoneContext.Consumer,null,function(e){return React.createElement("div",{className:css(r,"bolt-pill flex-row flex-center",h.getVariantClass(g,i),h.getSizeClass(v),s&&"count",C&&"hover",u&&"clickable",f&&"has-filled-visual",l&&!f&&"has-icon",p&&"has-remove-button"),id:getSafeId(c),onClick:u,onBlur:m,onMouseEnter:o.onMouseEnter,onMouseLeave:o.onMouseLeave,style:h.getColorStyle(i,C,u)},f&&React.createElement("div",{className:"bolt-pill-filled-visual flex-noshrink"},f()),l&&!f&&React.createElement(Icon,__assign({},l,{className:css(l.className,"bolt-pill-icon")})),React.createElement("div",{"aria-label":P,"aria-hidden":t,className:css(n,"bolt-pill-content text-ellipsis"),"data-focuszone":o.props.excludeFocusZone?void 0:e.focuszoneId,onFocus:d,onKeyDown:o.onKeyDown,role:u?"button":"presentation",tabIndex:u||d?getTabIndex(o.props):void 0},o.props.children),p&&React.createElement(Button,{ariaLabel:format(Resources.RemovePillLabel,P),className:"bolt-pill-button",iconProps:{iconName:"Cancel",size:IconSize.inherit},onClick:p,onMouseLeave:o.onMouseLeaveButton,onMouseOver:o.onMouseOverButton,subtle:!0,tooltipProps:{text:format(Resources.RemovePillLabel,P)},tabIndex:o.props.removeButtonTabIndex}))})},h}(React.Component);export{Pill};