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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var RadioButtonGroupContext=React.createContext({onSelect:noop,registerId:noop}),RadioButtonGroup=function(t){function e(){var o=null!==t&&t.apply(this,arguments)||this;return o.focusGroupContext=React.createRef(),o.idMap={},o.onChange=function(t){o.props.onSelect&&o.props.onSelect(t)},o.getFirstButtonId=function(){var t=React.Children.toArray(o.props.children);if(t.length)return t[0].props.id},o.postProcessKeystroke=function(t){return document.activeElement&&isArrowKey(t)&&(t=o.idMap[document.activeElement.id])&&t!==ObservableLike.getValue(o.props.selectedButtonId||"")&&o.props.onSelect&&o.props.onSelect(t),FocusZoneKeyStroke.IgnoreNone},o.registerId=function(t,e){o.idMap[t]=e},o}return __extends(e,t),e.prototype.render=function(){var o=this,t=this.props,r=t.className,n=t.defaultButtonId,s=t.direction,i=t.excludeFocusZone,a=t.id,e=t.selectedButtonId,c=t.text,u=t.ariaInvalid,p=t.ariaErrorMessageId,d=css("bolt-radio-button-group",s===RadioButtonGroupDirection.Vertical?"flex-column":"flex-row",this.props.groupClassName);return React.createElement(Observer,{selectedButtonId:e},function(e){return React.createElement(RadioButtonGroupContext.Provider,{value:{onSelect:o.onChange,registerId:o.registerId,selectedButtonId:e.selectedButtonId||o.getFirstButtonId()}},React.createElement(FormItem,{className:css(r,"bolt-radio-button-group-container",i&&d),label:c},i?o.props.children:React.createElement(FormItemContext.Consumer,null,function(t){return React.createElement(FocusZone,{direction:s===RadioButtonGroupDirection.Vertical?FocusZoneDirection.Vertical:FocusZoneDirection.Horizontal,circularNavigation:!0,focusGroupProps:{defaultElementId:n||e.selectedButtonId||o.getFirstButtonId(),ref:o.focusGroupContext},postprocessKeyStroke:o.postProcessKeystroke},React.createElement("div",{"aria-invalid":u,"aria-errormessage":p,"aria-labelledby":getSafeId(t.ariaLabelledById),className:d,role:"radiogroup",id:getSafeId(a)},o.props.children))})))})},e.prototype.focus=function(){this.focusGroupContext.current&&this.focusGroupContext.current.focus()},e.defaultProps={direction:RadioButtonGroupDirection.Vertical,ariaInvalid:!1},e}(React.Component),RadioButton=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.radioButtonInternal=React.createRef(),t}return __extends(t,e),t.prototype.render=function(){var r=this;return React.createElement(RadioButtonGroupContext.Consumer,null,function(o){return React.createElement(FocusGroupContext.Consumer,null,function(e){return React.createElement(FocusZoneContext.Consumer,null,function(t){return React.createElement(RadioButtonInternal,__assign({},r.props,{focusGroupContext:e,focuszoneId:t.focuszoneId,onFocus:e.onFocus,onSelect:o.onSelect,registerId:o.registerId,selectedButton:o.selectedButtonId===r.props.id,ref:r.radioButtonInternal}))})})})},t.prototype.focus=function(){this.radioButtonInternal.current&&this.radioButtonInternal.current.focus()},t}(React.Component),RadioButtonInternal=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.radioButton=React.createRef(),e.onClick=function(t){t.defaultPrevented||e.props.disabled||(e.props.onSelect(e.props.id),t.preventDefault())},e.onFocus=function(t){e.props.onFocus(e.props.id)},e}return __extends(e,t),e.prototype.render=function(){var t=getTabIndex(this.props,this.props.focusGroupContext),e=this.props.text&&"rb-label-"+this.props.id,t=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 t=this.props.tooltipProps?React.createElement(Tooltip,__assign({},this.props.tooltipProps),t):t},e.prototype.componentDidMount=function(){var t=this.props,e=t.id;(0,t.registerId)(getSafeId(e),e)},e.prototype.focus=function(){this.radioButton.current&&this.radioButton.current.focus()},e}(React.Component);export{RadioButtonGroupContext,RadioButtonGroup,RadioButton};