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

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import * as React from 'react';
import styled from 'styled-components/native';
import { View } from 'react-native';
import 'react-native-svg';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import Path from '../Icons/_Svg/Path/Path.native.js';
import Svg from '../Icons/_Svg/Svg/Svg.native.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import { logger } from '../../utils/logger/logger.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import '../BottomSheet/BottomSheetStack.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { size } from '../../tokens/global/size.js';
import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';

var StyledSvg=styled(Svg)(function(_ref){var styles=_ref.styles;return styles;});var PopupArrow=React.forwardRef(function(_ref2,ref){var context=_ref2.context,width=_ref2.width,height=_ref2.height,fillColor=_ref2.fillColor,strokeColor=_ref2.strokeColor;var _useTheme=useTheme(),theme=_useTheme.theme;var placement=context.placement,floating=context.elements.floating,arrow=context.middlewareData.arrow;var strokeWidth=theme.border.width.thin*2;if(__DEV__){if(!ref){logger({type:'warn',moduleName:'PopupArrow',message:'Floating UI: The `ref` prop is required for the `FloatingArrow` component.'});}}if(!floating){return jsx(Fragment,{});}var _getFloatingPlacement=getFloatingPlacementParts(placement),_getFloatingPlacement2=_slicedToArray(_getFloatingPlacement,1),side=_getFloatingPlacement2[0];var svgX=width/2;var svgY=0;var dValue='M0,0'+` H${width}`+` L${width-svgX},${height-svgY}`+` Q${width/2},${height} ${svgX},${height-svgY}`+' Z';var staticSide={top:'bottom',right:'left',bottom:'top',left:'right'}[side];var rotation={top:0,bottom:180,left:-90,right:90}[side];var newStyles={};if(arrow){var x=arrow.x,y=arrow.y;newStyles=_defineProperty(_defineProperty({width:makeSize(size[20]),height:makeSize(size[20]),position:'absolute',left:x!=null?`${x}px`:undefined,top:y!=null?`${y}px`:undefined,right:undefined,bottom:undefined},staticSide,`${-width}px`),"transform",`rotate(${rotation}deg)`);}return jsx(View,{pointerEvents:"none",collapsable:false,style:{position:'absolute',left:0,right:0,top:0,bottom:0},children:jsxs(StyledSvg,{ref:ref,width:`${width}px`,height:`${width}px`,viewBox:`0 0 ${width} ${width}`,styles:newStyles,children:[jsx(Path,{fill:"none",stroke:strokeColor,strokeWidth:`${strokeWidth}px`,d:dValue}),jsx(Path,{fill:fillColor,stroke:"none",d:dValue})]})});});

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