azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 3.7 kB
JavaScript
import{__assign,__extends}from"tslib";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";var Button=function(o){function e(){var r=null!==o&&o.apply(this,arguments)||this;return r.buttonElement=React.createRef(),r.onClick=function(o){var e;r.props.disabled?o.preventDefault():(e=r.props.onClick,r.focus(),e&&e(o))},r.onFocus=function(o){r.props.onFocus&&r.props.onFocus(o),r.props.id&&r.context.onFocus&&r.context.onFocus(r.props.id)},r.onKeyDown=function(o){o.defaultPrevented||r.props.disabled||(o.which===KeyCode.enter||o.which===KeyCode.space?(r.props.onClick&&r.props.onClick(o),r.props.href||o.preventDefault()):r.props.onKeyDown&&r.props.onKeyDown(o))},r.onMouseDown=function(o){o.defaultPrevented||r.props.disabled&&o.preventDefault();var e=r.props.onMouseDown;e&&e(o)},r.onMouseLeave=function(o){var e;r.props.disabled||(e=r.props.onMouseLeave)&&e(o)},r.onMouseOver=function(o){var e;r.props.disabled||(e=r.props.onMouseOver)&&e(o)},r}return __extends(e,o),e.prototype.render=function(){var s=this,p=this.props.iconProps&&!this.props.text&&0===childCount(this.props.children),t=void 0!==this.props.tooltipProps?this.props.tooltipProps:p&&this.props.ariaLabel?{text:this.props.ariaLabel}:void 0;return React.createElement(FocusZoneContext.Consumer,null,function(o){var e=s.props.href?"a":"button",r=s.props.role||(s.props.href?"link":"button"),e=React.createElement(e,{autoFocus:s.props.href?void 0:s.props.autoFocus,"aria-controls":getSafeId(s.props.ariaControls),"aria-describedby":getSafeId(s.props.ariaDescribedBy),"aria-disabled":s.props.disabled||s.props.ariaDisabled,"aria-expanded":s.props.ariaExpanded,"aria-haspopup":s.props.ariaHasPopup,"aria-hidden":s.props.ariaHidden,"aria-label":s.props.ariaLabel,"aria-labelledby":s.props.ariaLabelledBy,"aria-setsize":s.props.ariaSetSize,"aria-posinset":s.props.ariaPosInSet,"aria-selected":s.props.ariaSelected,"aria-checked":s.props.ariaChecked,"aria-pressed":s.props.ariaPressed,"aria-roledescription":s.props.ariaRoleDescription,className:css(s.props.className,"bolt-button",s.props.href&&"bolt-link-button",s.props.iconProps&&"bolt-icon-button",s.props.danger&&"danger",s.props.disabled?"disabled":"enabled",s.props.primary&&"primary",s.props.subtle&&"subtle",p&&"icon-only","bolt-focus-treatment"),"data-focuszone":s.props.disabled||s.props.excludeFocusZone?void 0:css(s.props.focusZoneId,o.focuszoneId),"data-index":s.props.dataIndex,"data-is-focusable":!s.props.excludeFocusZone,href:s.props.disabled?void 0:s.props.href,id:getSafeId(s.props.id),onBlur:s.props.onBlur,onClick:s.onClick,onMouseLeave:s.onMouseLeave,onMouseOver:s.onMouseOver,onKeyDown:s.onKeyDown,onMouseDown:s.onMouseDown,onFocus:s.onFocus,rel:s.props.rel,role:r,style:s.props.style,tabIndex:getTabIndex(s.props,s.context),target:s.props.target,type:s.props.type||(s.props.href?void 0:"button"),ref:s.buttonElement},s.props.iconProps&&Icon(__assign(__assign({size:IconSize.medium},s.props.iconProps),{className:css(s.props.iconProps.className,"left-icon")})),s.props.text&&React.createElement("span",{className:"bolt-button-text body-m"},s.props.text),s.props.children);return e=t?React.createElement(Tooltip,__assign({addAriaDescribedBy:!0},t),e):e})},e.prototype.focus=function(){this.buttonElement.current&&this.buttonElement.current.focus()},e.contextType=FocusGroupContext,e}(React.Component);export{Button};