@razorpay/blade/build/lib/native/components/Popover/Popover.native.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useFloating, shift, flip, offset, arrow } from '@floating-ui/react-native';
import React__default from 'react';
import { Modal, TouchableOpacity } from 'react-native';
import { PopoverContent } from './PopoverContent.js';
import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
import { PopoverContext } from './PopoverContext.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { mergeProps } from '../../utils/mergeProps.js';
import { useControllableState } from '../../utils/useControllable.js';
import { PopupArrow } from '../PopupArrow/PopupArrow.native.js';
import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
import { componentZIndices } from '../../utils/componentZIndices.js';

var Popover=function Popover(_ref){var content=_ref.content,children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'top':_ref$placement,onOpenChange=_ref.onOpenChange,_ref$zIndex=_ref.zIndex,zIndex=_ref$zIndex===void 0?componentZIndices.popover:_ref$zIndex,title=_ref.title,titleLeading=_ref.titleLeading,footer=_ref.footer,isOpen=_ref.isOpen,defaultIsOpen=_ref.defaultIsOpen;var _useTheme=useTheme(),theme=_useTheme.theme;var defaultInitialFocusRef=React__default.useRef(null);var _useControllableState=useControllableState({value:isOpen,defaultValue:defaultIsOpen,onChange:function onChange(isOpen){return onOpenChange==null?void 0:onOpenChange({isOpen:isOpen});}}),_useControllableState2=_slicedToArray(_useControllableState,2),controllableIsOpen=_useControllableState2[0],controllableSetIsOpen=_useControllableState2[1];var gap=theme.spacing[2];var _getFloatingPlacement=getFloatingPlacementParts(placement),_getFloatingPlacement2=_slicedToArray(_getFloatingPlacement,1),side=_getFloatingPlacement2[0];var isHorizontal=side==='left'||side==='right';var arrowRef=React__default.useRef();var context=useFloating({sameScrollView:false,placement:placement,middleware:[shift({crossAxis:false,padding:gap}),flip({padding:gap,fallbackAxisSideDirection:'start'}),offset(gap+ARROW_HEIGHT),arrow({element:arrowRef,padding:isHorizontal?0:ARROW_WIDTH})]});var refs=context.refs,floatingStyles=context.floatingStyles;var _getFloatingPlacement3=getFloatingPlacementParts(context.placement),_getFloatingPlacement4=_slicedToArray(_getFloatingPlacement3,1),computedSide=_getFloatingPlacement4[0];var handleOpen=React__default.useCallback(function(){controllableSetIsOpen(function(){return true;});onOpenChange==null?void 0:onOpenChange({isOpen:true});},[controllableSetIsOpen,onOpenChange]);var handleClose=React__default.useCallback(function(){controllableSetIsOpen(function(){return false;});onOpenChange==null?void 0:onOpenChange({isOpen:false});},[controllableSetIsOpen,onOpenChange]);var _React$useState=React__default.useState(function(){return controllableIsOpen;}),_React$useState2=_slicedToArray(_React$useState,2),isVisible=_React$useState2[0],setIsVisible=_React$useState2[1];React__default.useEffect(function(){var id=setTimeout(function(){if(!controllableIsOpen){setIsVisible(false);}},theme.motion.duration.gentle);if(controllableIsOpen){setIsVisible(true);}return function(){return clearTimeout(id);};},[controllableIsOpen]);var contextValue=React__default.useMemo(function(){return {close:handleClose,defaultInitialFocusRef:defaultInitialFocusRef,titleId:undefined};},[handleClose]);return jsxs(PopoverContext.Provider,{value:contextValue,children:[React__default.cloneElement(children,Object.assign({},mergeProps({onTouchEnd:children.props.onTouchEnd},{onTouchEnd:handleOpen}),{ref:refs.setReference})),jsxs(Modal,Object.assign({collapsable:false,transparent:true,visible:Boolean(isVisible)},metaAttribute({testID:'popover-modal'}),{children:[jsx(TouchableOpacity,Object.assign({style:{position:'absolute',top:0,bottom:0,left:0,right:0},onPress:handleClose,activeOpacity:1,testID:"popover-modal-backdrop"},metaAttribute({name:MetaConstants.Popover}))),jsx(PopoverContent,{titleLeading:titleLeading,title:title,footer:footer,isVisible:controllableIsOpen,ref:refs.setFloating,side:computedSide,style:Object.assign({},floatingStyles,{zIndex:zIndex}),arrow:jsx(PopupArrow,{ref:arrowRef,context:context,width:ARROW_WIDTH,height:ARROW_HEIGHT,fillColor:theme.colors.popup.background.subtle,strokeColor:theme.colors.popup.border.subtle}),children:content})]}))]});};

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