@razorpay/blade
Version:
The Design System that powers Razorpay
29 lines (26 loc) • 3.96 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { checkboxSizes } from '../checkboxTokens.js';
import { CheckboxGroupProvider } from './CheckboxGroupContext.js';
import { useCheckboxGroup } from './useCheckboxGroup.js';
import { FormHint } from '../../Form/FormHint.js';
import { FormLabel } from '../../Form/FormLabel.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
import { SelectorGroupField } from '../../Form/Selector/SelectorGroupField.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 { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import useTheme from '../../BladeProvider/useTheme.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{marginBottom:index===childCount-1?makeSize(0):gap,children:child},index);})}),jsx(FormHint,{size:size,errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]}))}))});};
export { CheckboxGroup };
//# sourceMappingURL=CheckboxGroup.js.map