UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

32 lines (29 loc) 4.37 kB
import { useEffect } from 'react'; import { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'; import { StyledAccordionButton } from './StyledAccordionButton.native.js'; import { useAccordion } from './AccordionContext.js'; import { getTransitionDuration, getTransitionEasing, getBackgroundColor } from './commonStyles.js'; import { AccordionItemHeader } from './AccordionItemHeader.js'; import '../Typography/Heading/Heading.js'; import { Text } from '../Typography/Text/Text.js'; import '../Typography/Code/Code.js'; import '../Typography/Display/Display.js'; import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js'; import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js'; import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js'; import 'react-native'; import '@babel/runtime/helpers/slicedToArray'; import { throwBladeError } from '../../utils/logger/logger.js'; import { castNativeType } from '../../utils/platform/castUtils.js'; import useTheme from '../BladeProvider/useTheme.js'; import { useCollapsible } from '../Collapsible/CollapsibleContext.js'; import { BaseBox } from '../Box/BaseBox/BaseBox.native.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 { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js'; var _AccordionButton=function _AccordionButton(_ref){var index=_ref.index,Icon=_ref.icon,title=_ref.title,isDeprecatedAPI=_ref.isDeprecatedAPI,isDisabled=_ref.isDisabled,header=_ref.header;var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded,collapsibleBodyId=_useCollapsible.collapsibleBodyId;var _useAccordion=useAccordion(),showNumberPrefix=_useAccordion.showNumberPrefix,expandedIndex=_useAccordion.expandedIndex;var _useTheme=useTheme(),theme=_useTheme.theme;var toggleCollapse=function toggleCollapse(){return onExpandChange(!isExpanded);};var isItemExpanded=expandedIndex===index;var isPressed=useSharedValue(false);var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));var activeBackgroundColor=useSharedValue(getBackgroundColor({theme:theme,isExpanded:isExpanded,isActive:true}));var inActiveBackgroundColor=useSharedValue(getBackgroundColor({theme:theme,isExpanded:isExpanded,isActive:false}));useEffect(function(){activeBackgroundColor.value=getBackgroundColor({theme:theme,isExpanded:isExpanded,isActive:true});inActiveBackgroundColor.value=getBackgroundColor({theme:theme,isExpanded:isExpanded,isActive:false});},[isExpanded,activeBackgroundColor,inActiveBackgroundColor,theme]);var animatedStyles=useAnimatedStyle(function(){return {backgroundColor:withTiming(isPressed.value?activeBackgroundColor.value:inActiveBackgroundColor.value,{duration:duration,easing:easing})};});var _showNumberPrefix=typeof index==='number'&&showNumberPrefix;var _index=_showNumberPrefix?jsxs(Text,{size:"large",weight:"semibold",marginRight:"spacing.2",children:[index+1,"."]}):null;var a11yLabel=_showNumberPrefix?`${index+1}. ${title}`:title;var renderChildren=function renderChildren(_ref2){var pressed=_ref2.pressed;isPressed.value=pressed;var _icon=Icon&&jsx(Icon,{size:"medium",color:"surface.icon.gray.normal",marginRight:"spacing.3",marginY:"spacing.2"});if(__DEV__){if(_index&&_icon){throwBladeError({message:"showNumberPrefix and icon shouldn't be used together",moduleName:'Accordion'});}}return jsx(BaseBox,{display:"flex",flexDirection:"row",flex:1,justifyContent:"space-between",alignItems:"center",children:isDeprecatedAPI?jsx(AccordionItemHeader,{title:title,leading:_icon!=null?_icon:_index}):header});};return jsx(StyledAccordionButton,Object.assign({isExpanded:isExpanded,onPress:toggleCollapse,style:animatedStyles,disabled:isDisabled},makeAccessible({role:'button',expanded:isItemExpanded,controls:collapsibleBodyId,label:a11yLabel}),metaAttribute({name:MetaConstants.AccordionButton}),{children:renderChildren}));};var AccordionButton=assignWithoutSideEffects(_AccordionButton,{componentId:MetaConstants.AccordionButton}); export { AccordionButton }; //# sourceMappingURL=AccordionButton.native.js.map