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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var buttonId=1,ExpandableButton=function(n){function o(o){var e=n.call(this,o)||this;return e.buttonElement=React.createRef(),e.expandable=React.createRef(),e.collapse=function(){e.expandable.current&&e.expandable.current.collapse()},e.expand=function(){e.expandable.current&&e.expandable.current.expand()},e.renderCallout=function(){return e.props.renderCallout(e,e.dropdownId,e.props.anchorElement||!e.props.anchorPoint&&e.containerElement.current||void 0,e.props.anchorOffset||{horizontal:0,vertical:0},e.props.anchorOrigin||{horizontal:Location.end,vertical:Location.end},e.props.anchorPoint,e.props.dropdownOrigin||{horizontal:Location.end,vertical:Location.start})},e.dropdownId=o.dropdownId||"dropdown-"+buttonId++,e.containerElement=o.containerRef||React.createRef(),e}return __extends(o,n),o.prototype.render=function(){var n=this;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},function(e){var o;return React.createElement("div",{className:css(n.props.className,"bolt-expandable-button inline-flex-row"),onMouseDown:e.onMouseDown,onKeyDown:e.onKeyDown,ref:n.containerElement},React.createElement(Button,__assign({},n.props,{ariaControls:e.expanded?n.dropdownId:void 0,ariaExpanded:e.expanded,ariaHasPopup:!0,ariaLabel:null!=(o=n.props.ariaLabel)?o:n.props.tooltipProps&&n.props.tooltipProps.text?null==(o=n.props.tooltipProps)?void 0:o.text:"",className:css(!n.props.text&&!n.props.children&&n.props.iconProps&&"icon-only",e.expanded&&"active",n.props.buttonClassName),onClick:function(o){e.onClick(o),n.props.onClick&&n.props.onClick(o),o.preventDefault()},ref:n.buttonElement,tooltipProps:n.props.tooltipProps?__assign(__assign({},n.props.tooltipProps),{disabled:e.expanded}):void 0}),n.props.children,n.props.hideDropdownIcon?void 0:Icon({key:"dropdown-icon",className:"icon-right font-weight-normal",iconName:"ChevronDownMed",size:IconSize.small})))})},o.prototype.focus=function(){this.buttonElement.current&&this.buttonElement.current.focus()},o.defaultProps={expandKey:[KeyCode.downArrow,KeyCode.enter]},o}(React.Component);export{ExpandableButton};