Merge pull request #2569 from gluestack/fix/popover-arrow-style-issue

fix: popover arrow style issue
gluestack · Nov 7, 2024 · b12be5a · b12be5a
2 parents 85093f7 + 7dfaa95
commit b12be5a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/unstyled/popover/src/Popover.tsx b/packages/unstyled/popover/src/Popover.tsx
@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useControllableState } from '@gluestack-ui/hooks';
 import { Overlay } from '@gluestack-ui/overlay';
-
-// import { useOverlayPosition } from '@react-native-aria/overlays';
 import { PopoverProvider } from './PopoverContext';
 
 export const Popover = (StyledPopover: any) =>

diff --git a/packages/unstyled/popover/src/PopoverArrow.tsx b/packages/unstyled/popover/src/PopoverArrow.tsx
@@ -27,11 +27,17 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
       });
     }, [arrowHeight, arrowWidth, placement, actualPlacement]);
 
-    if (arrowProps?.style?.left) {
-      arrowProps.style.left -= arrowWidth / 2;
-    } else if (arrowProps?.style?.top) {
-      arrowProps.style.top -= arrowHeight / 2;
-    }
+    const ArrowStyle = React.useMemo(() => {
+      return {
+        top: arrowProps?.style?.top - arrowHeight / 2,
+        left: arrowProps?.style?.left - arrowWidth / 2,
+      };
+    }, [
+      arrowHeight,
+      arrowWidth,
+      arrowProps?.style?.top,
+      arrowProps?.style?.left,
+    ]);
 
     React.useEffect(() => {
       const ArrowComponent = (
@@ -42,6 +48,7 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
             updateArrowSize({ height, width });
           }}
           {...props}
+          {...ArrowStyle}
           key={actualPlacement + 'arrow'}
           initial={{
             opacity: 0,
@@ -71,15 +78,15 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
           }}
           style={[
             props?.style,
-            arrowProps?.style,
+            ArrowStyle,
             {
               // To avoid border radius case
               top:
                 placement === 'right bottom' || placement === 'left bottom'
-                  ? arrowProps?.style?.top > 4
-                    ? arrowProps?.style?.top - 4
-                    : arrowProps?.style?.top
-                  : arrowProps?.style?.top,
+                  ? ArrowStyle?.top > 4
+                    ? ArrowStyle?.top - 4
+                    : ArrowStyle?.top
+                  : ArrowStyle?.top,
             },
             additionalStyles,
           ]}