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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var toggleId=1,Toggle=function(e){function o(){var o=null!==e&&e.apply(this,arguments)||this;return o.toggleElement=React.createRef(),o.labelId="toggle-".concat(toggleId++,"-label"),o.onClick=function(e){o.props.onChange&&!o.props.disabled&&o.props.onChange(e,void 0!==o.props.checked&&!ObservableLike.getValue(o.props.checked))},o.onFocus=function(){o.props.id&&o.context.onFocus(o.props.id)},o.onKeyDown=function(e){e.defaultPrevented||e.which===KeyCode.space&&(o.onClick(e),e.preventDefault())},o}return __extends(o,e),o.prototype.render=function(){var n=this,e=this.props,c=e.onAriaLabel,a=e.offAriaLabel,l=e.className,s=e.disabled,i=e.excludeFocusZone,p=e.id,d=e.offText,u=e.onText,m=e.role,b=e.text,g=e.tooltipProps;return React.createElement(FocusZoneContext.Consumer,null,function(r){return React.createElement(Observer,{checked:n.props.checked},function(e){var o=e.checked?c||n.props.ariaLabel:a||n.props.ariaLabel,t=getSafeId(n.labelId),o=React.createElement("div",{className:css(l,"bolt-toggle-button cursor-pointer",e.checked&&"checked",s?"disabled":"enabled"),onClick:n.onClick,onFocus:n.onFocus,onKeyDown:n.onKeyDown},React.createElement("div",{"aria-checked":e.checked,"aria-disabled":s,"aria-label":o,"aria-labelledby":o?void 0:t,className:"bolt-toggle-button-pill bolt-focus-treatment flex-noshrink","data-focuszone":s||i?void 0:r.focuszoneId,"data-is-focusable":!0,id:getSafeId(p),ref:n.toggleElement,role:m||"switch",tabIndex:getTabIndex(n.props,n.context)},React.createElement("div",{className:"bolt-toggle-button-icon"})),React.createElement("div",{className:"bolt-toggle-button-text body-m",id:t},e.checked?u||b:d||b));return o=g?React.createElement(Tooltip,__assign({},g),o):o})})},o.prototype.focus=function(){this.toggleElement.current&&this.toggleElement.current.focus()},o.contextType=FocusGroupContext,o}(React.Component);export{Toggle};