azure-devops-ui/Components/Button/ExpandableButton.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Button.css";import"./ExpandableButton.css";import*as React from"react";import{Expandable}from"../../Expandable";import{Icon,IconSize}from"../../Icon";import{css,KeyCode}from"../../Util";import{Location}from"../../Utilities/Position";import{Button}from"./Button";let buttonId=1;class ExpandableButton extends React.Component{constructor(t){super(t),this.buttonElement=React.createRef(),this.expandable=React.createRef(),this.collapse=()=>{this.expandable.current&&this.expandable.current.collapse()},this.expand=()=>{this.expandable.current&&this.expandable.current.expand()},this.renderCallout=()=>this.props.renderCallout(this,this.dropdownId,this.props.anchorElement||!this.props.anchorPoint&&this.containerElement.current||void 0,this.props.anchorOffset||{horizontal:0,vertical:0},this.props.anchorOrigin||{horizontal:Location.end,vertical:Location.end},this.props.anchorPoint,this.props.dropdownOrigin||{horizontal:Location.end,vertical:Location.start}),this.dropdownId=t.dropdownId||"dropdown-"+buttonId++,this.containerElement=t.containerRef||React.createRef()}render(){return React.createElement(Expandable,{disabled:this.props.disabled,expandKey:this.props.expandKey,onCollapse:this.props.onCollapse,onExpand:this.props.onExpand,renderCallout:this.renderCallout,ref:this.expandable},o=>{var t;return React.createElement("div",{className:css(this.props.className,"bolt-expandable-button inline-flex-row"),onMouseDown:o.onMouseDown,onKeyDown:o.onKeyDown,ref:this.containerElement},React.createElement(Button,Object.assign({},this.props,{ariaControls:o.expanded?this.dropdownId:void 0,ariaExpanded:o.expanded,ariaHasPopup:!0,ariaLabel:null!=(t=this.props.ariaLabel)?t:this.props.tooltipProps&&this.props.tooltipProps.text?null==(t=this.props.tooltipProps)?void 0:t.text:"",className:css(!this.props.text&&!this.props.children&&this.props.iconProps&&"icon-only",o.expanded&&"active",this.props.buttonClassName),onClick:t=>{o.onClick(t),this.props.onClick&&this.props.onClick(t),t.preventDefault()},ref:this.buttonElement,tooltipProps:this.props.tooltipProps?Object.assign(Object.assign({},this.props.tooltipProps),{disabled:o.expanded}):void 0}),this.props.children,this.props.hideDropdownIcon?void 0:Icon({key:"dropdown-icon",className:"icon-right font-weight-normal",iconName:"ChevronDownMed",size:IconSize.small})))})}focus(){this.buttonElement.current&&this.buttonElement.current.focus()}setTabIndex(t){this.buttonElement.current&&this.buttonElement.current.setTabIndex(t)}}ExpandableButton.defaultProps={expandKey:[KeyCode.downArrow,KeyCode.enter]};export{ExpandableButton};