UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

23 lines (20 loc) 3.62 kB
import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import React__default, { useState, Children, useCallback, useMemo, cloneElement } from 'react'; import { AccordionContext } from './AccordionContext.js'; import { MAX_WIDTH } from './styles.native.js'; import { BaseBox } from '../Box/BaseBox/BaseBox.native.js'; import { getStyledProps } from '../Box/styledProps/getStyledProps.js'; import 'react-native'; import '../../tokens/global/typography.js'; import '../../tokens/global/motion.js'; import { size } from '../../tokens/global/size.js'; import { makeSize } from '../../utils/makeSize/makeSize.js'; import '../BladeProvider/useTheme.js'; import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js'; import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js'; import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js'; import { jsx } from 'react/jsx-runtime'; var _excluded=["defaultExpandedIndex","expandedIndex","onExpandChange","showNumberPrefix","children","variant","size","maxWidth","testID"];var MIN_WIDTH={s:makeSize(size[200]),m:makeSize(size[360]),l:makeSize(size[360])};var getVariantStyles=function getVariantStyles(variant){if(variant==='transparent'){return {};}return {backgroundColor:'surface.background.gray.intense',borderRadius:'medium',borderWidth:'thinner',borderColor:'surface.border.gray.subtle'};};var _Accordion=function _Accordion(_ref,ref){var defaultExpandedIndex=_ref.defaultExpandedIndex,expandedIndex=_ref.expandedIndex,onExpandChange=_ref.onExpandChange,_ref$showNumberPrefix=_ref.showNumberPrefix,showNumberPrefix=_ref$showNumberPrefix===void 0?false:_ref$showNumberPrefix,children=_ref.children,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'transparent':_ref$variant,_ref$size=_ref.size,size=_ref$size===void 0?'large':_ref$size,maxWidth=_ref.maxWidth,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useState=useState(defaultExpandedIndex),_useState2=_slicedToArray(_useState,2),expandedAccordionItemIndex=_useState2[0],setExpandedAccordionItemIndex=_useState2[1];var numberOfItems=Children.count(children);var handleExpandChange=useCallback(function(nextExpandedIndex){if(typeof expandedIndex!=='undefined'){onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}else {setExpandedAccordionItemIndex(nextExpandedIndex);onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}},[onExpandChange,expandedIndex]);var accordionContext=useMemo(function(){return {expandedIndex:expandedIndex!=null?expandedIndex:expandedAccordionItemIndex,defaultExpandedIndex:defaultExpandedIndex,onExpandChange:handleExpandChange,showNumberPrefix:showNumberPrefix,variant:variant,numberOfItems:numberOfItems,size:size};},[expandedAccordionItemIndex,handleExpandChange,expandedIndex,showNumberPrefix,defaultExpandedIndex,variant,numberOfItems,size]);return jsx(AccordionContext.Provider,{value:accordionContext,children:jsx(BaseBox,Object.assign({ref:ref},metaAttribute({name:MetaConstants.Accordion,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsx(BaseBox,Object.assign({},getVariantStyles(variant),{minWidth:MIN_WIDTH,maxWidth:maxWidth!=null?maxWidth:MAX_WIDTH,width:"100%",children:Children.map(children,function(child,index){return cloneElement(child,{_index:index,key:index});})}))}))});};var Accordion=React__default.forwardRef(_Accordion); export { Accordion }; //# sourceMappingURL=Accordion.js.map