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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Toggle.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{FocusGroupContext}from"../../FocusGroup";import{FocusZoneContext}from"../../FocusZone";import{Observer}from"../../Observer";import{Tooltip}from"../../TooltipEx";import{css,getSafeId,KeyCode}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";let toggleId=1;class Toggle extends React.Component{constructor(){super(...arguments),this.toggleElement=React.createRef(),this.labelId=`toggle-${toggleId++}-label`,this.onClick=e=>{this.props.onChange&&!this.props.disabled&&this.props.onChange(e,void 0!==this.props.checked&&!ObservableLike.getValue(this.props.checked))},this.onFocus=()=>{this.props.id&&this.context.onFocus(this.props.id)},this.onKeyDown=e=>{e.defaultPrevented||e.which===KeyCode.space&&(this.onClick(e),e.preventDefault())}}render(){const{onAriaLabel:c,offAriaLabel:i,className:a,disabled:l,excludeFocusZone:n,id:d,offText:p,onText:h,role:b,text:m,tooltipProps:g}=this.props;return React.createElement(FocusZoneContext.Consumer,null,r=>React.createElement(Observer,{checked:this.props.checked},e=>{var t=e.checked?c||this.props.ariaLabel:i||this.props.ariaLabel,o=getSafeId(this.labelId);let s=React.createElement("div",{className:css(a,"bolt-toggle-button cursor-pointer",e.checked&&"checked",l?"disabled":"enabled"),onClick:this.onClick,onFocus:this.onFocus,onKeyDown:this.onKeyDown},React.createElement("div",{"aria-checked":e.checked,"aria-disabled":l,"aria-label":t,"aria-labelledby":t?void 0:o,"aria-describedby":this.props.ariaDescribedBy,className:"bolt-toggle-button-pill bolt-focus-treatment flex-noshrink","data-focuszone":l||n?void 0:r.focuszoneId,"data-is-focusable":!0,id:getSafeId(d),ref:this.toggleElement,role:b||"switch",tabIndex:getTabIndex(this.props,this.context)},React.createElement("div",{className:"bolt-toggle-button-icon"})),React.createElement("div",{className:"bolt-toggle-button-text body-m",id:o},e.checked?h||m:p||m));return s=g?React.createElement(Tooltip,Object.assign({},g),s):s}))}focus(){this.toggleElement.current&&this.toggleElement.current.focus()}}Toggle.contextType=FocusGroupContext;export{Toggle};