@razorpay/blade/build/lib/native/components/Collapsible/CollapsibleBodyContent.native.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useState, useCallback, useEffect } from 'react';
import styled from 'styled-components/native';
import Animated, { useSharedValue, withTiming, runOnJS, useAnimatedStyle } from 'react-native-reanimated';
import { View } from 'react-native';
import { useCollapsible } from './CollapsibleContext.js';
import { getOpacity, getTransitionDuration, getTransitionEasing, getCollapsibleBodyContentBoxProps } from './commonStyles.js';
import { nativeStyles } from './styles.native.js';
import { Box } from '../Box/Box.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import { castNativeType } from '../../utils/platform/castUtils.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsx } from 'react/jsx-runtime';

var AnimatedStyledCollapsibleBodyContent=styled(Animated.View)(function(){return {overflow:'hidden'};});var CollapsibleBodyContent=function CollapsibleBodyContent(_ref){var children=_ref.children,_hasMargin=_ref._hasMargin;var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;var _useTheme=useTheme(),theme=_useTheme.theme;var opacity=useSharedValue(getOpacity({isExpanded:isExpanded}));var height=useSharedValue(isExpanded?undefined:0);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),layoutHeight=_useState2[0],setLayoutHeight=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isAnimating=_useState4[0],setIsAnimating=_useState4[1];var onAnimationComplete=useCallback(function(){requestAnimationFrame(function(){return setIsAnimating(false);});},[]);var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));useEffect(function(){setIsAnimating(true);opacity.value=withTiming(getOpacity({isExpanded:isExpanded}),{duration:duration,easing:easing});height.value=withTiming(isExpanded&&layoutHeight?layoutHeight:0,{duration:duration,easing:easing},function(isComplete){if(isComplete){runOnJS(onAnimationComplete)();}});},[isExpanded,opacity,duration,easing,height,layoutHeight,onAnimationComplete]);var animatedStyles=useAnimatedStyle(function(){return {opacity:opacity.value,height:height.value};});var onLayout=useCallback(function(event){if(isAnimating){if(event.nativeEvent.layout.height>layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}}else if(event.nativeEvent.layout.height!==layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}},[layoutHeight,isAnimating]);return jsx(AnimatedStyledCollapsibleBodyContent,{isExpanded:isExpanded,style:animatedStyles,children:jsx(View,{onLayout:onLayout,style:isExpanded||isAnimating?nativeStyles.collapsibleBodyExpanded:nativeStyles.collapsibleBodyCollapsed,children:jsx(Box,Object.assign({},getCollapsibleBodyContentBoxProps({direction:direction,_hasMargin:_hasMargin}),{children:children}))})});};

export { CollapsibleBodyContent };
//# sourceMappingURL=CollapsibleBodyContent.native.js.map