@momo-kits/animated-tooltip 0.154.1-beta.9 → 0.154.1-tooltip.22

package/Portal.tsx

@@ -0,0 +1,22 @@
+import { FC, ReactNode, useEffect, useRef } from 'react';
+import { usePortal } from './PortalContext';
+
+type PortalProps = {
+  children: ReactNode;
+};
+
+export const Portal: FC<PortalProps> = ({ children }) => {
+  const { addPortal, removePortal } = usePortal();
+  const keyRef = useRef(`portal-${Math.random().toString(36).substr(2, 9)}`);
+
+  useEffect(() => {
+    const key = keyRef.current;
+    addPortal(key, children);
+
+    return () => {
+      removePortal(key);
+    };
+  }, [children, addPortal, removePortal]);
+
+  return null;
+};

package/PortalContext.tsx

@@ -0,0 +1,77 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  ReactNode,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+
+type PortalContextValue = {
+  addPortal: (key: string, element: ReactNode) => void;
+  removePortal: (key: string) => void;
+};
+
+const PortalContext = createContext<PortalContextValue | null>(null);
+
+export const PortalProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [portals, setPortals] = useState<Map<string, ReactNode>>(new Map());
+
+  const addPortal = useCallback((key: string, element: ReactNode) => {
+    setPortals(prev => {
+      const next = new Map(prev);
+      next.set(key, element);
+      return next;
+    });
+  }, []);
+
+  const removePortal = useCallback((key: string) => {
+    setPortals(prev => {
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+
+  return (
+    <PortalContext.Provider value={{ addPortal, removePortal }}>
+      <View style={styles.container}>
+        {children}
+        <View 
+          style={styles.portalHost} 
+          pointerEvents="box-none"
+          collapsable={false}
+          renderToHardwareTextureAndroid
+          shouldRasterizeIOS
+        >
+          {Array.from(portals.values())}
+        </View>
+      </View>
+    </PortalContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  portalHost: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999999,
+    elevation: 999,
+  },
+});
+
+export const usePortal = () => {
+  const context = useContext(PortalContext);
+  if (!context) {
+    throw new Error('usePortal must be used within PortalProvider');
+  }
+  return context;
+};

package/index.tsx

@@ -7,7 +7,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Animated, Easing, TouchableOpacity, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  Easing,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {
   Colors,
   Icon,
@@ -19,6 +26,7 @@ import {
 import styles from './styles';
 import { TooltipPlacement, TooltipProps, TooltipRef } from './types';
 import { IconButton, PrimaryButton, SecondaryButton } from './TooltipButtons';
+import { Portal } from './Portal';
 
 const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
   {
@@ -36,11 +44,13 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     accessibilityLabel,
     onVisibleChange,
     onPressClose,
+    containerStyle,
   },
   ref,
 ) {
   const app = useContext<any>(MiniAppContext);
   const screen = useContext<any>(ScreenContext);
+  const SCREEN_WIDTH = useWindowDimensions().width;
   const arrowSize = 6;
   const [tooltipSize, setTooltipSize] = useState({ width: 0, height: 0 });
 
@@ -61,6 +71,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
   const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [anchorSize, setAnchorSize] = useState({ width: 0, height: 0 });
+  const [anchorPosition, setAnchorPosition] = useState({ x: 0, y: 0 });
+  const anchorRef = useRef<View>(null);
 
   const currentVisible = isControlled ? !!visible : internalVisible;
 
@@ -91,6 +103,13 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
 
   useEffect(() => {
     animate(currentVisible);
+    // Measure vị trí absolute của anchor khi tooltip visible
+    if (currentVisible && anchorRef.current) {
+      anchorRef.current.measureInWindow((x, y, width, height) => {
+        setAnchorPosition({ x, y });
+        setAnchorSize({ width, height });
+      });
+    }
   }, [currentVisible, animationDuration]);
 
   useEffect(() => {
@@ -157,34 +176,54 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
           }),
         };
 
-  const placementStyle: {
-    [key: string]: any;
-  } =
-    placement === 'top'
-      ? { bottom: (anchorSize.height || 0) + offset }
-      : placement === 'bottom'
-      ? { top: (anchorSize.height || 0) + offset }
-      : placement === 'left'
-      ? { right: (anchorSize.width || 0) + offset }
-      : { left: (anchorSize.width || 0) + offset };
-
-  const centerVerticalOffset =
-    (anchorSize.height || 0) / 2 - (tooltipSize.height || 0) / 2;
-
-  const alignStyle: ViewStyle =
-    placement === 'top' || placement === 'bottom'
-      ? align === 'start'
-        ? { left: 0 }
-        : align === 'end'
-        ? { right: 0 }
-        : { alignSelf: 'center' }
-      : align === 'start'
-      ? { top: 0 }
-      : align === 'end'
-      ? { bottom: 0 }
-      : { top: centerVerticalOffset };
-
-  const resolvedBackground = Colors.black_17;
+  // Tính toán vị trí absolute của tooltip
+  const getTooltipPosition = (): ViewStyle => {
+    const { x, y } = anchorPosition;
+    const { width: anchorWidth, height: anchorHeight } = anchorSize;
+    const { width: tooltipWidth, height: tooltipHeight } = tooltipSize;
+
+    let top = 0;
+    let left = 0;
+
+    // Tính theo placement
+    if (placement === 'top') {
+      top = y - tooltipHeight - offset;
+      left = x;
+    } else if (placement === 'bottom') {
+      top = y + anchorHeight + offset;
+      left = x;
+    } else if (placement === 'left') {
+      top = y;
+      left = x - tooltipWidth - offset;
+    } else {
+      // right
+      top = y;
+      left = x + anchorWidth + offset;
+    }
+
+    // Adjust theo align
+    if (placement === 'top' || placement === 'bottom') {
+      if (align === 'center') {
+        left = x + anchorWidth / 2 - tooltipWidth / 2;
+      } else if (align === 'end') {
+        left = x + anchorWidth - tooltipWidth;
+      }
+      // align === 'start' thì giữ nguyên left = x
+    } else {
+      // left hoặc right
+      if (align === 'center') {
+        top = y + anchorHeight / 2 - tooltipHeight / 2;
+      } else if (align === 'end') {
+        top = y + anchorHeight - tooltipHeight;
+      }
+      // align === 'start' thì giữ nguyên top = y
+    }
+
+    return { top, left };
+  };
+
+  const tooltipPosition = getTooltipPosition();
+
   const resolvedTextColor = Colors.black_01;
 
   const renderButtons = () => {
@@ -275,7 +314,12 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     return (
       <View style={styles.content}>
         <View style={styles.contentHeader}>
-          <View style={styles.contentTextContainer}>
+          <View
+            style={{
+              minWidth: 100,
+              maxWidth: SCREEN_WIDTH - Spacing.M * 2 - 48,
+            }}
+          >
             {title ? (
               <Text
                 typography={'header_s_semibold'}
@@ -319,7 +363,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       {
         width: size * 2,
         height: size * 2,
-        backgroundColor: resolvedBackground,
+        backgroundColor: Colors.black_17,
         transform: [{ rotate: '45deg' }],
         borderRadius: size / 2,
       },
@@ -381,14 +425,17 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
   const tooltipNode = (
     <Animated.View
       pointerEvents="auto"
+      collapsable={false}
       style={[
+        {
+          maxWidth: SCREEN_WIDTH - Spacing.M * 2,
+        },
+        containerStyle,
         styles.tooltip,
-        placementStyle,
-        alignStyle,
+        tooltipPosition,
         {
           opacity: animatedValue,
           transform: [translate],
-          backgroundColor: resolvedBackground,
         },
       ]}
       onLayout={event => setTooltipSize(event.nativeEvent.layout)}
@@ -404,13 +451,14 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       style={styles.container}
       accessibilityLabel={componentId}
     >
-      <View onLayout={event => setAnchorSize(event.nativeEvent.layout)}>
+      <View ref={anchorRef}>
         {children}
       </View>
-      {tooltipNode}
+      {currentVisible && <Portal>{tooltipNode}</Portal>}
     </View>
   );
 });
 
 export { Tooltip };
+export { PortalProvider } from './PortalContext';
 export type { TooltipProps, TooltipPlacement, TooltipRef };

package/package.json

@@ -1,16 +1,16 @@
 {
-    "name": "@momo-kits/animated-tooltip",
-    "version": "0.154.1-beta.9",
-    "private": false,
-    "main": "index.tsx",
-    "dependencies": {},
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    }
-}
+  "name": "@momo-kits/animated-tooltip",
+  "version": "0.154.1-tooltip.22",
+  "private": false,
+  "main": "index.tsx",
+  "dependencies": {},
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "react": "*",
+    "react-native": "*"
+  },
+  "license": "MoMo",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/styles.ts

@@ -7,11 +7,15 @@ export default StyleSheet.create({
   },
   tooltip: {
     position: 'absolute',
-    zIndex: 10,
+    zIndex: 999999,
+    elevation: 999,
     padding: Spacing.M,
     backgroundColor: Colors.black_17,
     borderRadius: Radius.S,
-    width: 256,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
   },
   text: {
     color: Colors.black_01,
@@ -25,20 +29,19 @@ export default StyleSheet.create({
     flexDirection: 'column',
   },
   title: {
-    marginBottom: Spacing.XS / 2,
+    marginBottom: Spacing.XS,
   },
   description: {
-    marginBottom: Spacing.XS / 2,
+    marginBottom: Spacing.M,
   },
   buttonsRow: {
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'flex-end',
-    marginTop: Spacing.M,
   },
   button: {
-    marginRight: Spacing.XS / 2,
-    marginBottom: Spacing.XS / 2,
+    marginRight: Spacing.XXS,
+    marginBottom: Spacing.XXS,
   },
   textButton: {},
   iconButton: {},
@@ -53,9 +56,6 @@ export default StyleSheet.create({
   contentHeader: {
     flexDirection: 'row',
   },
-  contentTextContainer: {
-    flex: 1,
-  },
   closeIconSpacing: {
     marginLeft: Spacing.S,
   },

package/types.ts

@@ -1,4 +1,5 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -77,5 +78,9 @@ export type TooltipProps = {
    * Triggered when the close button (X) is pressed.
    */
   onPressClose?: () => void;
-};
 
+  /**
+   * Tooltip container style.
+   */
+  containerStyle?: ViewStyle;
+};