@razorpay/blade
Version:
The Design System that powers Razorpay
32 lines (29 loc) • 4.37 kB
JavaScript
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