@momo-kits/animated-tooltip 0.156.1-beta.4 → 0.156.1-beta.50

package/index.tsx

@@ -1,9 +1,10 @@
 import React, {
-  forwardRef,
+  forwardRef, useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
+  useReducer,
   useRef,
   useState,
 } from 'react';
@@ -23,6 +24,7 @@ import {
   Spacing,
   Text,
   useTooltipPortal,
+  useScreenRegistry,
 } from '@momo-kits/foundation';
 import styles from './styles';
 import { TooltipPlacement, TooltipProps, TooltipRef } from './types';
@@ -43,6 +45,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
   },
   ref,
 ) {
+  useScreenRegistry('Tooltip');
   const ANIMATION_DURATION = 180;
   const TOOLTIP_OFFSET = Spacing.S;
   const app = useContext<any>(MiniAppContext);
@@ -83,7 +86,9 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     return `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
   }, [accessibilityLabel, app, screen, componentName]);
 
-  const [visible, setVisible] = useState(false);
+  // Ref-based visibility for imperative control (no state re-renders)
+  const visibleRef = useRef(false);
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
   const animatedValue = useRef(new Animated.Value(0)).current;
   const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -97,29 +102,32 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     }
   };
 
-  const setVisibility = (nextVisible: boolean) => {
-    setVisible(nextVisible);
-    onVisibleChange?.(nextVisible);
-  };
+  const setVisibility = useCallback((nextVisible: boolean) => {
+    if (visibleRef.current !== nextVisible) {
+      visibleRef.current = nextVisible;
+      forceUpdate(); // Trigger re-render to update portal
+      onVisibleChange?.(nextVisible);
+    }
+  },[onVisibleChange]);
 
-  const animate = (nextVisible: boolean) => {
+  const animate = useCallback((nextVisible: boolean) => {
     Animated.timing(animatedValue, {
       toValue: nextVisible ? 1 : 0,
       duration: ANIMATION_DURATION,
       useNativeDriver: true,
       easing: nextVisible ? Easing.out(Easing.quad) : Easing.in(Easing.quad),
     }).start();
-  };
+  }, [animatedValue]);
 
   useEffect(() => {
     // Only animate if we have tooltip size (to avoid position jump on first show)
     const hasSize = tooltipSize.width > 0 || tooltipSize.height > 0;
-    if (visible && !hasSize) {
+    if (visibleRef.current && !hasSize) {
       // Don't animate yet, wait for onLayout
       return;
     }
-    animate(visible);
-  }, [visible, tooltipSize]);
+    animate(visibleRef.current);
+  }, [tooltipSize, animate]);
 
   // Preload anchor measurement on mount for faster initial display
   useEffect(() => {
@@ -140,10 +148,10 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     }, 0);
 
     return () => clearTimeout(timer);
-  }, []);
+  }, [portal.hostRef]);
 
   useEffect(() => {
-    if (!visible) {
+    if (!visibleRef.current) {
       setAnchorPosition({ x: 0, y: 0, width: 0, height: 0 });
       setHostPosition({ x: 0, y: 0 });
       return;
@@ -190,7 +198,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       });
     };
 
-    // Start polling
+    // Defer measurement to next frame (single measurement, not polling)
     rafId = requestAnimationFrame(measureAnchor);
 
     return () => {
@@ -204,7 +212,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
         rafId = null;
       }
     };
-  }, [visible, portal.hostRef]);
+  }, [portal.hostRef]);
 
   useEffect(() => {
     return () => {
@@ -213,7 +221,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     };
   }, [animatedValue]);
 
-  const handleShow = () => {
+  const handleShow = useCallback(() => {
     clearTimers();
     showTimer.current = setTimeout(() => {
       // Measure host position first
@@ -229,62 +237,54 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
         setVisibility(true);
       });
     }, ANIMATION_DURATION);
-  };
+  }, [portal.hostRef, setVisibility]);
 
-  const handleHide = () => {
+  const handleHide = useCallback(() => {
     clearTimers();
     hideTimer.current = setTimeout(
       () => setVisibility(false),
       ANIMATION_DURATION,
     );
-  };
+  }, [setVisibility]);
 
-  const handleToggle = () => {
-    if (visible) {
-      handleHide();
-    } else {
-      handleShow();
-    }
-  };
 
   useImperativeHandle(
     ref,
     () => ({
       show: handleShow,
       hide: handleHide,
-      toggle: handleToggle,
     }),
-    [visible],
+    [handleHide, handleShow],
   );
 
   const translate =
     placement === 'top'
       ? {
-          translateY: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [4, 0],
-          }),
-        }
+        translateY: animatedValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [4, 0],
+        }),
+      }
       : placement === 'bottom'
-      ? {
+        ? {
           translateY: animatedValue.interpolate({
             inputRange: [0, 1],
             outputRange: [-4, 0],
           }),
         }
-      : placement === 'left'
-      ? {
-          translateX: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [4, 0],
-          }),
-        }
-      : {
-          translateX: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [-4, 0],
-          }),
-        };
+        : placement === 'left'
+          ? {
+            translateX: animatedValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: [4, 0],
+            }),
+          }
+          : {
+            translateX: animatedValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: [-4, 0],
+            }),
+          };
 
   const placementStyle = useMemo((): {
     top?: number;
@@ -332,7 +332,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     }
 
     return position;
-  }, [anchorPosition, tooltipSize, placement, align, hostPosition]);
+  }, [anchorPosition, tooltipSize, placement, TOOLTIP_OFFSET, hostPosition.y, hostPosition.x, align]);
 
   const renderButtons = () => {
     if (!buttons.length) {
@@ -341,7 +341,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
 
     if (buttons.length === 1) {
       const btn = buttons[0];
-      const onPress = btn.onPress ?? (() => {});
+      const onPress = btn.onPress ?? (() => { });
       return (
         <View style={styles.buttonsRow}>
           <View
@@ -362,8 +362,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
 
     if (buttons.length === 2) {
       const [first, second] = buttons;
-      const firstPress = first.onPress ?? (() => {});
-      const secondPress = second.onPress ?? (() => {});
+      const firstPress = first.onPress ?? (() => { });
+      const secondPress = second.onPress ?? (() => { });
       const bothIcon = !!first.icon && !!second.icon;
 
       return (
@@ -396,7 +396,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
         {buttons.map((btn, idx) => {
           const isIcon = !!btn.icon;
           const key = btn.title || btn.icon || `${idx}`;
-          const onPress = btn.onPress ?? (() => {});
+          const onPress = btn.onPress ?? (() => { });
 
           return (
             <View
@@ -486,8 +486,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
             ...(align === 'start'
               ? { left: size + Spacing.M }
               : align === 'end'
-              ? { right: size + Spacing.M }
-              : { alignSelf: 'center' }),
+                ? { right: size + Spacing.M }
+                : { alignSelf: 'center' }),
           },
         ];
       case 'bottom':
@@ -498,8 +498,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
             ...(align === 'start'
               ? { left: size + Spacing.M }
               : align === 'end'
-              ? { right: size + Spacing.M }
-              : { alignSelf: 'center' }),
+                ? { right: size + Spacing.M }
+                : { alignSelf: 'center' }),
           },
         ];
       case 'left':
@@ -510,8 +510,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
             ...(align === 'start'
               ? { top: size + Spacing.M }
               : align === 'end'
-              ? { bottom: size + Spacing.M }
-              : { top: (tooltipSize.height || 0) / 2 - size }),
+                ? { bottom: size + Spacing.M }
+                : { top: (tooltipSize.height || 0) / 2 - size }),
           },
         ];
       case 'right':
@@ -523,8 +523,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
             ...(align === 'start'
               ? { top: size + Spacing.M }
               : align === 'end'
-              ? { bottom: size + Spacing.M }
-              : { top: (tooltipSize.height || 0) / 2 - size }),
+                ? { bottom: size + Spacing.M }
+                : { top: (tooltipSize.height || 0) / 2 - size }),
           },
         ];
     }
@@ -533,7 +533,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
   useEffect(() => {
     let isActive = true; // Track if effect is still active
 
-    if (!visible) {
+    if (!visibleRef.current) {
       portal.unregister(portalId, true); // Immediate cleanup when hiding
       return;
     }
@@ -595,7 +595,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       portal.unregister(portalId, true);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, anchorPosition, placement, align, tooltipSize]);
+  }, [visibleRef.current, anchorPosition, placement, align, tooltipSize]);
 
   return (
     <View style={styles.container} accessibilityLabel={componentId}>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/animated-tooltip",
-    "version": "0.156.1-beta.4",
+    "version": "0.156.1-beta.50",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/types.ts

@@ -6,7 +6,6 @@ export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 export type TooltipRef = {
   show: () => void;
   hide: () => void;
-  toggle: () => void;
 };
 
 export type TooltipButton = {