UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

15 lines (12 loc) 2.98 kB
import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import React__default from 'react'; import { useFormId } from '../Form/useFormId.js'; import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js'; import 'react-native'; import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js'; import { throwBladeError } from '../../utils/logger/logger.js'; import '../BladeProvider/useTheme.js'; import { useControllableState } from '../../utils/useControllable.js'; function setMixed(element,mixed){if(mixed){element.indeterminate=true;}else if(element.indeterminate){element.indeterminate=false;}}var useCheckbox=function useCheckbox(_ref){var _ref$role=_ref.role,role=_ref$role===void 0?'checkbox':_ref$role,isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isIndeterminate=_ref.isIndeterminate,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,hasHelperText=_ref.hasHelperText,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(__DEV__){if(isChecked&&defaultChecked){throwBladeError({message:`Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,moduleName:'useCheckbox'});}}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),checkboxState=_useControllableState2[0],setCheckboxStateChange=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setCheckboxStateChange(function(checked){onChange==null?void 0:onChange({isChecked:!checked,event:event,value:value});return !checked;});};React__default.useEffect(function(){var element=inputRef.current;if(!element)return;setMixed(element,isIndeterminate);},[isIndeterminate]);var state={isReactNative:isReactNative,isChecked:checkboxState,setChecked:setCheckboxStateChange};var _useFormId=useFormId('checkbox'),inputId=_useFormId.inputId,errorTextId=_useFormId.errorTextId,helpTextId=_useFormId.helpTextId;var accessibilityProps=makeAccessible(Object.assign({role:role,required:Boolean(isRequired),invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:checkboxState},hasError?{errorMessage:errorTextId}:{},hasHelperText?{describedBy:helpTextId}:{}));if(isReactNative){return {state:state,inputProps:Object.assign({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{inputId:inputId,errorTextId:errorTextId,helpTextId:helpTextId},inputProps:Object.assign({ref:inputRef,onChange:handleOnChange,type:'checkbox',name:name,value:value,checked:checkboxState,disabled:isDisabled,required:isRequired},accessibilityProps)};}; export { useCheckbox }; //# sourceMappingURL=useCheckbox.js.map