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

React components for building web UI in Azure DevOps

import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./PillGroup.css";import*as React from"react";import{Button}from"../../Button";import{IconSize}from"../../Icon";import{Intersection,IntersectionContext}from"../../Intersection";import{Pill,PillSize}from"../../Pill";import*as Resources from"../../Resources.Widgets";import{css}from"../../Util";import{PillGroupOverflow}from"./PillGroup.Props";var PillGroup=function(t){function e(e){var o=t.call(this,e)||this;return o.observing=!1,o.onClick=function(e){o.setState({overflow:o.state.overflow===o.props.overflow?PillGroupOverflow.wrap:o.props.overflow}),null!=e&&e.preventDefault()},o.observeElement=function(e){e&&o.intersectionContext&&!o.observing&&(o.intersectionContext.observe(e),o.observing=!0)},o.onIntersect=function(e){o.setState({overflowing:Math.round(e[0].rootBounds.right)<Math.round(e[0].boundingClientRect.right)})},o.state={overflowing:!1,overflow:o.props.overflow},o}return __extends(e,t),e.prototype.render=function(){var o=this,e=this.props,t=e.onMouseEnter,e=e.onMouseLeave,r=this.state.overflow,n=React.createElement(Pill,{size:PillSize.compact},React.createElement(Button,{ariaLabel:this.state.overflow===this.props.overflow?Resources.ShowMore:Resources.ShowLess,className:"bolt-pill-button",iconProps:{iconName:"More",size:IconSize.inherit},onClick:this.onClick,subtle:!0,tooltipProps:{text:this.state.overflow===this.props.overflow?Resources.ShowMore:Resources.ShowLess}})),i=r===PillGroupOverflow.fade?React.createElement(IntersectionContext.Consumer,null,function(e){return o.intersectionContext=e,React.createElement("div",{className:"bolt-pill-overflow flex-row"},React.createElement("div",{className:"bolt-pill-group-inner flex-row"},o.state.overflowing&&n,o.props.children),React.createElement("div",{className:"bolt-pill-observe",ref:function(e){return o.observeElement(e)}}))}):React.createElement("div",{className:"bolt-pill-group-inner flex-row"},this.state.overflowing&&n,this.props.children);return i=React.createElement("div",{className:css(this.props.className,"bolt-pill-group flex-row",r===PillGroupOverflow.wrap?"overflow-wrap":r===PillGroupOverflow.fade?this.state.overflowing&&"overflow-fade":void 0),onMouseEnter:t,onMouseLeave:e},i),i=r===PillGroupOverflow.fade?React.createElement(Intersection,null,i):i},e.prototype.componentDidMount=function(){this.intersectionContext&&this.intersectionContext.register(this.onIntersect)},e.prototype.componentWillUnmount=function(){this.intersectionContext&&this.intersectionContext.unregister(this.onIntersect)},e}(React.Component);export{PillGroup};