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

React components for building web UI in Azure DevOps

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";class PillGroup extends React.Component{constructor(e){super(e),this.observing=!1,this.onClick=e=>{this.setState({overflow:this.state.overflow===this.props.overflow?PillGroupOverflow.wrap:this.props.overflow}),null!=e&&e.preventDefault()},this.observeElement=e=>{e&&this.intersectionContext&&!this.observing&&(this.intersectionContext.observe(e),this.observing=!0)},this.onIntersect=e=>{this.setState({overflowing:Math.round(e[0].rootBounds.right)<Math.round(e[0].boundingClientRect.right)})},this.state={overflowing:!1,overflow:this.props.overflow}}render(){var{onMouseEnter:e,onMouseLeave:t}=this.props,o=this.state["overflow"];let r,s;return s=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}})),r=o===PillGroupOverflow.fade?React.createElement(IntersectionContext.Consumer,null,e=>(this.intersectionContext=e,React.createElement("div",{className:"bolt-pill-overflow flex-row"},React.createElement("div",{className:"bolt-pill-group-inner flex-row"},this.state.overflowing&&s,this.props.children),React.createElement("div",{className:"bolt-pill-observe",ref:e=>this.observeElement(e)})))):React.createElement("div",{className:"bolt-pill-group-inner flex-row"},this.state.overflowing&&s,this.props.children),r=React.createElement("div",{className:css(this.props.className,"bolt-pill-group flex-row",o===PillGroupOverflow.wrap?"overflow-wrap":o===PillGroupOverflow.fade?this.state.overflowing&&"overflow-fade":void 0),onMouseEnter:e,onMouseLeave:t},r),r=o===PillGroupOverflow.fade?React.createElement(Intersection,null,r):r}componentDidMount(){this.intersectionContext&&this.intersectionContext.register(this.onIntersect)}componentWillUnmount(){this.intersectionContext&&this.intersectionContext.unregister(this.onIntersect)}}export{PillGroup};