@razorpay/blade
Version:
The Design System that powers Razorpay
24 lines (21 loc) • 2.64 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import styled from 'styled-components/native';
import Animated, { useSharedValue, withDelay, withTiming, useAnimatedStyle } from 'react-native-reanimated';
import React__default from 'react';
import { getPopoverContentWrapperStyles } from './getPopoverContentWrapperStyles.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { castNativeType } from '../../utils/platform/castUtils.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsx } from 'react/jsx-runtime';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { size } from '../../tokens/global/size.js';
var _excluded=["children","styles","side","isVisible"];var StyledPopoverContentWrapper=styled(BaseBox)(function(_ref){var theme=_ref.theme,isMobile=_ref.isMobile,styles=_ref.styles;return getPopoverContentWrapperStyles({theme:theme,styles:styles,isMobile:isMobile});});var PopoverContentWrapper=React__default.forwardRef(function(_ref2,ref){var children=_ref2.children,styles=_ref2.styles,side=_ref2.side,isVisible=_ref2.isVisible,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme,platform=_useTheme.platform;var isMobile=platform==='onMobile';var isOppositeAxis=side==='right'||side==='bottom';var isHorizontal=side==='left'||side==='right';var offset=isOppositeAxis?-size[4]:size[4];var translate=useSharedValue(offset);var opacity=useSharedValue(0);var easing=theme.motion.easing.entrance;var duration=theme.motion.duration.quick;React__default.useEffect(function(){var timings={easing:easing,duration:duration};opacity.value=withDelay(duration,withTiming(isVisible?1:0,timings));translate.value=withDelay(duration,withTiming(isVisible?0:offset,timings));},[isVisible]);var animatedStyles=useAnimatedStyle(function(){var transform=isHorizontal?'translateX':'translateY';return {opacity:opacity.value,transform:[_defineProperty({},transform,translate.value)]};},[isVisible]);return jsx(Animated.View,{style:animatedStyles,children:jsx(StyledPopoverContentWrapper,Object.assign({styles:styles,style:castNativeType(theme.elevation.lowRaised),elevation:20,ref:ref,collapse:false,isMobile:isMobile},props,{children:children}))});});
export { PopoverContentWrapper };
//# sourceMappingURL=PopoverContentWrapper.native.js.map