Support pointer position styles

Support pointer position styles

Author: Stringsaeed

src/components/PointerWrapper/PointerWrapper.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { getPointerWrapperStyle } from '../../utils';
+import type { PointerWrapperProps } from '../../types';
+
+import Pointer from '../Pointer';
+
+import styles from './styles';
+
+const PointerWrapper: React.FC<PointerWrapperProps> = ({
+  tooltipLayout,
+  ...pointerProps
+}) => {
+  const pointerStyles = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.wrapper,
+        getPointerWrapperStyle(pointerProps, tooltipLayout),
+      ]),
+    [pointerProps, tooltipLayout]
+  );
+
+  return (
+    <View style={pointerStyles}>
+      <Pointer {...pointerProps} />
+    </View>
+  );
+};
+
+export default PointerWrapper;

src/components/PointerWrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './PointerWrapper';

src/components/PointerWrapper/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+const pointerWrapperStyles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+  },
+});
+
+export default pointerWrapperStyles;

src/components/TooltipWrapper/TooltipWrapper.tsx

@@ -1,12 +1,11 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useLayout } from '../../hooks';
+import { getPositionStyles } from '../../utils';
 import type { TooltipWrapperProps } from '../../types';
-import { getPointerWrapperStyle, getPositionStyles } from '../../utils';
 
-import Pointer from '../Pointer';
+import PointerWrapper from '../PointerWrapper';
 
 import styles from './styles';
 
@@ -37,22 +36,17 @@ const TooltipWrapperComponent: React.FC<TooltipWrapperProps> = (props) => {
     });
   }, [layout, position, props]);
 
-  const pointerStyles = useMemo(() => {
-    return StyleSheet.flatten<ViewStyle>([
-      styles.pointer,
-      getPointerWrapperStyle({ position, ...pointerProps }, layout),
-    ]);
-  }, [position, pointerProps, layout]);
-
   return (
     <Animated.View
       onLayout={onLayout}
       style={[styles.tooltipWrapper, positionStyles, stylez]}
     >
       {children}
-      <View style={pointerStyles}>
-        <Pointer {...pointerProps} position={position} />
-      </View>
+      <PointerWrapper
+        {...pointerProps}
+        tooltipLayout={layout}
+        position={position}
+      />
     </Animated.View>
   );
 };

src/components/TooltipWrapper/styles.ts

@@ -5,9 +5,6 @@ const tooltipWrapperStyles = StyleSheet.create({
     position: 'absolute',
     opacity: 0,
   },
-  pointer: {
-    position: 'absolute',
-  },
 });
 
 export default tooltipWrapperStyles;

src/types/ComponentsProps.ts

@@ -20,10 +20,14 @@ export interface OverlayProps
   overlayStyle?: ViewStyle;
 }
 
+export interface PointerWrapperProps extends PointerProps {
+  tooltipLayout?: LayoutRectangle;
+}
+
 export interface TooltipWrapperProps
   extends RequiredChildrenProp,
     AnimatedPresenceProp,
-    PointerProps {
+    Omit<PointerWrapperProps, 'tooltipLayout'> {
   offset?: number;
   childrenLayout?: LayoutRectangle;
 }

src/utils/pointer.ts

@@ -69,10 +69,10 @@ export function getPointerStyles(props: PointerProps) {
 
 export function getPointerWrapperStyle(
   props: PointerProps,
-  layout: LayoutRectangle
+  layout: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 }
 ): ViewStyle {
   const { position = 'top', pointerStyle: pointerStyles } = props;
-  const { width, height } = getSafeStyle(pointerStyles);
+  const { width, height, ...restStyle } = getSafeStyle(pointerStyles);
 
   const size = isVerticalPosition(position) ? height : width;
 
@@ -84,28 +84,32 @@ export function getPointerWrapperStyle(
       return {
         top: -size,
         left: sideWhenVertical,
+        ...restStyle,
       };
     }
     case 'left': {
       return {
         right: -size,
         top: sideWhenHorizontal,
+        ...restStyle,
       };
     }
     case 'top': {
       return {
         bottom: -size,
         left: sideWhenVertical,
+        ...restStyle,
       };
     }
     case 'right': {
       return {
         left: -size,
         top: sideWhenHorizontal,
+        ...restStyle,
       };
     }
     default: {
-      return {};
+      return { ...restStyle };
     }
   }
 }

src/utils/validation.ts

@@ -18,6 +18,7 @@ export function getSafeStyle(style?: ViewStyle) {
   const safeHeight = (isValidNumber(height) && height) || 0;
 
   return {
+    ...style,
     width: safeWidth,
     height: safeHeight,
   };