@razorpay/blade/build/lib/native/components/Tooltip/Tooltip.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 { TooltipContent } from './TooltipContent.js';
import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
import { TooltipContext } from './TooltipContext.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 { PopupArrow } from '../PopupArrow/PopupArrow.native.js';
import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
import { componentZIndices } from '../../utils/componentZIndices.js';

var Tooltip=function Tooltip(_ref){var title=_ref.title,content=_ref.content,children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'left':_ref$placement,onOpenChange=_ref.onOpenChange,_ref$zIndex=_ref.zIndex,zIndex=_ref$zIndex===void 0?componentZIndices.tooltip:_ref$zIndex;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[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}),offset(gap+ARROW_HEIGHT),arrow({element:arrowRef,padding:isHorizontal?0:ARROW_WIDTH})]});var refs=context.refs,floatingStyles=context.floatingStyles;var handleOpen=React__default.useCallback(function(){setIsOpen(true);onOpenChange==null?void 0:onOpenChange({isOpen:true});},[onOpenChange]);var handleClose=React__default.useCallback(function(){setIsOpen(false);onOpenChange==null?void 0:onOpenChange({isOpen:false});},[onOpenChange]);var _React$useState3=React__default.useState(function(){return isOpen;}),_React$useState4=_slicedToArray(_React$useState3,2),isVisible=_React$useState4[0],setIsVisible=_React$useState4[1];React__default.useEffect(function(){var id=setTimeout(function(){if(!isOpen){setIsVisible(false);}},theme.motion.duration.gentle);if(isOpen){setIsVisible(true);}return function(){return clearTimeout(id);};},[isOpen]);return jsxs(TooltipContext.Provider,{value:true,children:[React__default.cloneElement(children,Object.assign({},mergeProps({onTouchEnd:children.props.onTouchEnd},{onTouchEnd:handleOpen}),{ref:refs.setReference})),jsx(Modal,{accessibilityLabel:content,collapsable:false,transparent:true,visible:isVisible,children:jsx(TouchableOpacity,Object.assign({style:{flexShrink:0,flex:1},onPress:handleClose,activeOpacity:1,testID:"tooltip-modal-backdrop"},metaAttribute({name:MetaConstants.Tooltip}),{children:jsx(TooltipContent,{title:title,isVisible:isOpen,ref:refs.setFloating,side:side,style:Object.assign({},floatingStyles,{left:floatingStyles.left||-200,top:floatingStyles.top||-200,zIndex:zIndex}),arrow:jsx(PopupArrow,{ref:arrowRef,context:context,width:ARROW_WIDTH,height:ARROW_HEIGHT,fillColor:theme.colors.popup.background.intense,strokeColor:theme.colors.popup.border.intense}),children:content})}))})]});};

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