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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Checkbox.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{FocusGroupContext}from"../../FocusGroup";import{FocusZoneContext}from"../../FocusZone";import{Icon,IconSize}from"../../Icon";import{Observer}from"../../Observer";import{Tooltip}from"../../TooltipEx";import{css,getSafeId,KeyCode}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";let checkboxId=1;class TriStateCheckbox extends React.Component{constructor(e){super(e),this.checkboxElement=React.createRef(),this.animationClassName="",this.onClick=e=>{this.focus(),this.onChange(e)},this.onFocus=()=>{var e=this.props.id;e&&this.context.onFocus(e)},this.onKeyDown=e=>{e.defaultPrevented||this.props.disabled||e.which===KeyCode.space&&(this.onChange(e),e.preventDefault())},this.onChange=o=>{if(this.props.onChange){let e=ObservableLike.getValue(this.props.checked);e=!1===e||!0===e&&!!this.props.triState&&void 0,this.props.onChange(o,e)}},this.labelId=`checkbox-${checkboxId++}-label`}render(){const{disabled:c,label:i,labelId:r,tooltipProps:a}=this.props;return React.createElement(FocusZoneContext.Consumer,null,s=>React.createElement(Observer,{checked:this.props.checked},e=>{let o,t=("presentation"!==this.props.role&&(o=void 0===e.checked?"mixed":e.checked?"true":"false"),React.createElement("div",{"aria-checked":o,"aria-describedby":getSafeId(this.props.ariaDescribedBy),"aria-disabled":this.props.disabled,"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabel?void 0:getSafeId(this.props.ariaLabelledBy),className:css(this.props.className,"bolt-checkbox cursor-pointer",!1!==e.checked&&"checked",c?"disabled":"enabled","bolt-focus-treatment",i&&"labelled"),"data-focuszone":!c&&css(this.props.focuszoneId,this.props.excludeFocusZone?void 0:s.focuszoneId),id:getSafeId(this.props.id),onClick:c?void 0:this.onClick,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:this.checkboxElement,role:this.props.role||"checkbox",tabIndex:getTabIndex(this.props,this.context)},React.createElement("div",{className:"bolt-checkmark justify-center flex-row flex-noshrink scroll-hidden"},Icon({className:this.animationClassName,iconName:void 0===e.checked?"SkypeMinus":"CheckMark",size:IconSize.small})),i&&React.createElement("div",{className:"bolt-checkbox-label",id:getSafeId(r||this.labelId)},i),this.props.children));return t=a?React.createElement(Tooltip,Object.assign({addAriaDescribedBy:!0},a),t):t}))}componentDidMount(){this.animationClassName="animation-ready"}focus(){this.checkboxElement.current&&this.checkboxElement.current.focus()}}TriStateCheckbox.contextType=FocusGroupContext;class Checkbox extends TriStateCheckbox{}Checkbox.defaultProps={checked:!1};export{TriStateCheckbox,Checkbox};