azure-devops-ui/Components/Button/Button.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{FocusGroupContext}from"../../FocusGroup";import{FocusZoneContext}from"../../FocusZone";import{Icon,IconSize}from"../../Icon";import{Tooltip}from"../../TooltipEx";import{childCount,css,getSafeId,KeyCode}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";class Button extends React.Component{constructor(){super(...arguments),this.buttonElement=React.createRef(),this.onClick=s=>{var t;this.props.disabled?s.preventDefault():(t=this.props["onClick"],this.focus(),t&&t(s))},this.onFocus=s=>{this.props.onFocus&&this.props.onFocus(s),this.props.id&&this.context.onFocus&&this.context.onFocus(this.props.id)},this.onKeyDown=s=>{s.defaultPrevented||this.props.disabled||(s.which===KeyCode.enter||s.which===KeyCode.space?(this.props.onClick&&this.props.onClick(s),this.props.href||s.preventDefault()):s.which===KeyCode.escape?(this.buttonElement.current&&(this.buttonElement.current.blur(),document.dispatchEvent(new CustomEvent("vss-telemetry-proxy",{detail:{area:"vss-widgets",component:"Button",feature:"VssWidgets.Button",level:3,method:"onKeyDown",message:"Remove focus from button on Escape key press"},bubbles:!0}))),s.preventDefault(),s.stopPropagation()):this.props.onKeyDown&&this.props.onKeyDown(s))},this.onMouseDown=s=>{s.defaultPrevented||this.props.disabled&&s.preventDefault();var t=this.props["onMouseDown"];t&&t(s)},this.onMouseLeave=s=>{var t;this.props.disabled||(t=this.props["onMouseLeave"],t&&t(s))},this.onMouseOver=s=>{var t;this.props.disabled||(t=this.props["onMouseOver"],t&&t(s))}}render(){const r=this.props.iconProps&&!this.props.text&&0===childCount(this.props.children),i=void 0!==this.props.tooltipProps?this.props.tooltipProps:r&&this.props.ariaLabel?{text:this.props.ariaLabel}:void 0;return React.createElement(FocusZoneContext.Consumer,null,s=>{var t=this.props.href?"a":"button",o=this.props.role||(this.props.href?"link":"button");let e=React.createElement(t,{autoFocus:this.props.href?void 0:this.props.autoFocus,"aria-controls":getSafeId(this.props.ariaControls),"aria-describedby":getSafeId(this.props.ariaDescribedBy),"aria-disabled":this.props.disabled||this.props.ariaDisabled,"aria-expanded":this.props.ariaExpanded,"aria-haspopup":this.props.ariaHasPopup,"aria-hidden":this.props.ariaHidden,"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-setsize":this.props.ariaSetSize,"aria-posinset":this.props.ariaPosInSet,"aria-selected":this.props.ariaSelected,"aria-checked":this.props.ariaChecked,"aria-pressed":this.props.ariaPressed,"aria-roledescription":this.props.ariaRoleDescription,className:css(this.props.className,"bolt-button",this.props.href&&"bolt-link-button",this.props.iconProps&&"bolt-icon-button",this.props.danger&&"danger",this.props.disabled?"disabled":"enabled",this.props.primary&&"primary",this.props.subtle&&"subtle",r&&"icon-only","bolt-focus-treatment"),"data-focuszone":this.props.disabled||this.props.excludeFocusZone?void 0:css(this.props.focusZoneId,s.focuszoneId),"data-index":this.props.dataIndex,"data-is-focusable":!this.props.excludeFocusZone,href:this.props.disabled?void 0:this.props.href,id:getSafeId(this.props.id),onBlur:this.props.onBlur,onClick:this.onClick,onMouseLeave:this.onMouseLeave,onMouseOver:this.onMouseOver,onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onFocus:this.onFocus,rel:this.props.rel,role:o,style:this.props.style,tabIndex:getTabIndex(this.props,this.context),target:this.props.target,type:this.props.type||(this.props.href?void 0:"button"),ref:this.buttonElement},this.props.iconProps&&Icon(Object.assign(Object.assign({size:IconSize.medium},this.props.iconProps),{className:css(this.props.iconProps.className,"left-icon")})),this.props.text&&React.createElement("span",{className:"bolt-button-text body-m"},this.props.text),this.props.children);return e=i?React.createElement(Tooltip,Object.assign({addAriaDescribedBy:!0},i),e):e})}focus(){this.buttonElement.current&&this.buttonElement.current.focus()}setTabIndex(s){this.buttonElement.current&&(this.buttonElement.current.tabIndex=s)}}Button.contextType=FocusGroupContext;export{Button};