@razorpay/blade/build/lib/native/components/Radio/Radio.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { useRadio } from './useRadio.js';
import { RadioIcon } from './RadioIcon/RadioIcon.js';
import { useRadioGroupContext } from './RadioGroup/RadioContext.js';
import { radioSizes, radioHoverTokens } from './radioTokens.js';
import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
import { SelectorLabel } from '../Form/Selector/SelectorLabel.native.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { SelectorTitle } from '../Form/Selector/SelectorTitle.js';
import { SelectorSupportText } from '../Form/Selector/SelectorSupportText.js';
import { SelectorInput } from '../Form/Selector/SelectorInput.native.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import '@babel/runtime/helpers/slicedToArray';
import 'react-native';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import useTheme from '../BladeProvider/useTheme.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import '@babel/runtime/helpers/defineProperty';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var _excluded=["value","children","helpText","isDisabled","size","testID","_motionMeta"];var _Radio=function _Radio(_ref,ref){var _groupProps$state,_groupProps$size;var value=_ref.value,children=_ref.children,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,_motionMeta=_ref._motionMeta,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var groupProps=useRadioGroupContext();var isInsideGroup=!isEmpty(groupProps);if(__DEV__){if(!isInsideGroup){throwBladeError({moduleName:'Radio',message:'Cannot use <Radio /> outside of <RadioGroup />'});}}var isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=(groupProps==null?void 0:groupProps.defaultValue)===undefined?undefined:(groupProps==null?void 0:groupProps.defaultValue)===value;var validationState=groupProps==null?void 0:groupProps.validationState;var hasError=validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required';var name=groupProps==null?void 0:groupProps.name;var showHelpText=helpText;var isReactNative=getPlatformType()==='react-native';var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,value=_ref2.value,event=_ref2.event;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.setValue(value,event);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue();}};var _useRadio=useRadio({defaultChecked:defaultChecked,isChecked:isChecked,hasError:hasError,isDisabled:_isDisabled,isRequired:_isRequired,name:name,value:value,onChange:handleChange}),state=_useRadio.state,ids=_useRadio.ids,inputProps=_useRadio.inputProps;var helpTextLeftSpacing=makeSize(radioSizes.icon[size].width+theme.spacing[3]);return jsx(BaseBox,Object.assign({ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref})},getStyledProps(rest),{children:jsx(SelectorLabel,{componentName:MetaConstants.RadioLabel,inputProps:isReactNative?inputProps:{},testID:testID,children:jsxs(BaseBox,{display:"flex",flexDirection:"column",children:[jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,Object.assign({hoverTokens:radioHoverTokens,isChecked:state.isChecked,isDisabled:_isDisabled,hasError:hasError,inputProps:inputProps,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:ref})},makeAnalyticsAttribute(rest))),jsx(RadioIcon,{size:_size,isChecked:state.isChecked,isDisabled:_isDisabled,isNegative:hasError}),children?jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children}):null]}),showHelpText&&jsx(BaseBox,{marginLeft:helpTextLeftSpacing,children:jsx(SelectorSupportText,{size:_size,id:ids==null?void 0:ids.helpTextId,children:helpText})})]})})}));};var Radio=assignWithoutSideEffects(React__default.forwardRef(_Radio),{displayName:'Radio'});

export { Radio };
//# sourceMappingURL=Radio.js.map