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

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext.js';
import { CheckboxIcon } from './CheckboxIcon/CheckboxIcon.js';
import { useCheckbox } from './useCheckbox.js';
import { checkboxSizes, checkboxHoverTokens } from './checkboxTokens.js';
import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.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 { throwBladeError } from '../../utils/logger/logger.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import useTheme from '../BladeProvider/useTheme.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { FormHint } from '../Form/FormHint.js';
import '../VisuallyHidden/VisuallyHidden.native.js';
import '../Typography/Heading/Heading.js';
import '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../BottomSheet/BottomSheetStack.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { SelectorLabel } from '../Form/Selector/SelectorLabel.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 { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';

var _excluded=["defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","size","tabIndex","testID","_motionMeta"];var _Checkbox=function _Checkbox(_ref,ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,tabIndex=_ref.tabIndex,testID=_ref.testID,_motionMeta=_ref._motionMeta,rest=_objectWithoutProperties(_ref,_excluded);var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined(validationState);var hasName=!isUndefined(name);var hasDefaultChecked=!isUndefined(defaultChecked);var hasIsChecked=!isUndefined(isChecked);var hasOnChange=!isUndefined(onChange);if(__DEV__){if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throwBladeError({message:`Cannot set \`${props}\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,moduleName:'Checkbox'});}if(!value&&!isEmpty(groupProps)){throw new Error(`[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique "value" prop to each <Checkbox />
      <CheckboxGroup>
        <Checkbox value="apple">Apple</Checkbox>
        <Checkbox value="mango">Mango</Checkbox>
      </CheckboxGroup>
      `);}}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=Boolean(isRequired||(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required');var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var _useTheme=useTheme(),theme=_useTheme.theme;var formHintSize={small:'medium',medium:'medium',large:'large'};var showSupportingText=helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:_isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;var helpTextLeftSpacing=makeSize(checkboxSizes.icon[size].width+theme.spacing[3]);return jsxs(BaseBox,Object.assign({ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref})},metaAttribute({name:MetaConstants.Checkbox,testID:testID}),getStyledProps(rest),{children:[jsx(SelectorLabel,{componentName:MetaConstants.CheckboxLabel,inputProps:state.isReactNative?inputProps:{},style:{cursor:isDisabled?'not-allowed':'pointer'},children:jsxs(BaseBox,{display:"flex",flexDirection:"column",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[jsx(SelectorInput,Object.assign({hoverTokens:checkboxHoverTokens,isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps,tabIndex:tabIndex,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:ref})},makeAnalyticsAttribute(rest))),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),children?jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children}):null]}),showSupportingText?jsx(BaseBox,{marginLeft:helpTextLeftSpacing,children:jsx(SelectorSupportText,{size:_size,id:ids==null?void 0:ids.helpTextId,children:helpText})}):null]})}),jsx(FormHint,{size:formHintSize[_size],errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]}));};var Checkbox=assignWithoutSideEffects(React__default.forwardRef(_Checkbox),{displayName:'Checkbox'});

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