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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./RadioButton.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{FocusGroupContext}from"../../FocusGroup";import{FocusZone,FocusZoneContext,FocusZoneDirection,FocusZoneKeyStroke}from"../../FocusZone";import{FormItem,FormItemContext}from"../../FormItem";import{Observer}from"../../Observer";import{Tooltip}from"../../TooltipEx";import{css,getSafeId,isArrowKey,noop}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";import{RadioButtonGroupDirection}from"./RadioButton.Props";const RadioButtonGroupContext=React.createContext({onSelect:noop,registerId:noop});class RadioButtonGroup extends React.Component{constructor(){super(...arguments),this.focusGroupContext=React.createRef(),this.idMap={},this.onChange=t=>{this.props.onSelect&&this.props.onSelect(t)},this.getFirstButtonId=()=>{var t=React.Children.toArray(this.props.children);if(t.length)return t[0].props.id},this.postProcessKeystroke=t=>{return document.activeElement&&isArrowKey(t)&&(t=this.idMap[document.activeElement.id])&&t!==ObservableLike.getValue(this.props.selectedButtonId||"")&&this.props.onSelect&&this.props.onSelect(t),FocusZoneKeyStroke.IgnoreNone},this.registerId=(t,e)=>{this.idMap[t]=e}}render(){const{className:t,defaultButtonId:o,direction:r,excludeFocusZone:s,id:i,selectedButtonId:e,text:n,ariaInvalid:a,ariaErrorMessageId:c}=this.props,d=css("bolt-radio-button-group",r===RadioButtonGroupDirection.Vertical?"flex-column":"flex-row",this.props.groupClassName);return React.createElement(Observer,{selectedButtonId:e},e=>React.createElement(RadioButtonGroupContext.Provider,{value:{onSelect:this.onChange,registerId:this.registerId,selectedButtonId:e.selectedButtonId||this.getFirstButtonId()}},React.createElement(FormItem,{className:css(t,"bolt-radio-button-group-container",s&&d),label:n},s?this.props.children:React.createElement(FormItemContext.Consumer,null,t=>React.createElement(FocusZone,{direction:r===RadioButtonGroupDirection.Vertical?FocusZoneDirection.Vertical:FocusZoneDirection.Horizontal,circularNavigation:!0,focusGroupProps:{defaultElementId:o||e.selectedButtonId||this.getFirstButtonId(),ref:this.focusGroupContext},postprocessKeyStroke:this.postProcessKeystroke},React.createElement("div",{"aria-invalid":a,"aria-errormessage":c,"aria-labelledby":getSafeId(t.ariaLabelledById),className:d,role:"radiogroup",id:getSafeId(i)},this.props.children))))))}focus(){this.focusGroupContext.current&&this.focusGroupContext.current.focus()}}RadioButtonGroup.defaultProps={direction:RadioButtonGroupDirection.Vertical,ariaInvalid:!1};class RadioButton extends React.Component{constructor(){super(...arguments),this.radioButtonInternal=React.createRef()}render(){return React.createElement(RadioButtonGroupContext.Consumer,null,o=>React.createElement(FocusGroupContext.Consumer,null,e=>React.createElement(FocusZoneContext.Consumer,null,t=>React.createElement(RadioButtonInternal,Object.assign({},this.props,{focusGroupContext:e,focuszoneId:t.focuszoneId,onFocus:e.onFocus,onSelect:o.onSelect,registerId:o.registerId,selectedButton:o.selectedButtonId===this.props.id,ref:this.radioButtonInternal})))))}focus(){this.radioButtonInternal.current&&this.radioButtonInternal.current.focus()}}class RadioButtonInternal extends React.Component{constructor(){super(...arguments),this.radioButton=React.createRef(),this.onClick=t=>{t.defaultPrevented||this.props.disabled||(this.props.onSelect(this.props.id),t.preventDefault())},this.onFocus=t=>{this.props.onFocus(this.props.id)}}render(){var t=getTabIndex(this.props,this.props.focusGroupContext),e=this.props.text&&"rb-label-"+this.props.id;let o=React.createElement("div",{"aria-checked":this.props.selectedButton,"aria-disabled":this.props.disabled,"aria-labelledby":getSafeId(this.props.ariaLabelledBy||e),"aria-describedby":getSafeId(this.props.ariaDescribedBy),className:css(this.props.className,"bolt-radio-button cursor-pointer",this.props.disabled?"disabled":"enabled",this.props.selectedButton&&"checked",(this.props.text||0<React.Children.count(this.props.children))&&"labelled","bolt-focus-treatment"),"data-focuszone":this.props.disabled||this.props.excludeFocusZone?void 0:this.props.focuszoneId,"data-is-focusable":this.props.disabled?"false":"true",id:getSafeId(this.props.id),key:this.props.id,onClick:this.onClick,onFocus:this.onFocus,ref:this.radioButton,role:this.props.role||"radio",tabIndex:t},React.createElement("div",{className:"bolt-radio-button-icon"},React.createElement("div",{className:"bolt-radio-button-bullet"})),this.props.text&&React.createElement("div",{className:"bolt-radio-button-label",id:getSafeId(e)},this.props.text),this.props.children);return o=this.props.tooltipProps?React.createElement(Tooltip,Object.assign({},this.props.tooltipProps),o):o}componentDidMount(){var{id:t,registerId:e}=this.props;e(getSafeId(t),t)}focus(){this.radioButton.current&&this.radioButton.current.focus()}}export{RadioButtonGroupContext,RadioButtonGroup,RadioButton};