@momo-kits/foundation 0.154.1-test.18 → 0.154.2-beta.4

package/Application/StackScreen.tsx

@@ -7,6 +7,7 @@ import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
 import { useAppState } from './utils';
+import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal.tsx';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -111,6 +112,11 @@ const StackScreen: React.FC<any> = props => {
           );
         }
       });
+    } else {
+      navigator?.maxApi?.setDataObserver?.('current_screen', {
+        screenName,
+        startTime,
+      });
     }
 
     navigator?.maxApi?.startTraceScreenLoad?.(
@@ -407,8 +413,11 @@ const StackScreen: React.FC<any> = props => {
         },
       }}
     >
-      <Component heightHeader={heightHeader} {...data} />
-      {showGrid && <GridSystem />}
+      <TooltipPortalProvider>
+        <Component heightHeader={heightHeader} {...data} />
+        {showGrid && <GridSystem />}
+        <TooltipPortalHost />
+      </TooltipPortalProvider>
     </ScreenContext.Provider>
   );
 };

package/Application/TooltipPortal.tsx

@@ -0,0 +1,125 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  ReactNode,
+  useMemo,
+  useReducer,
+  useRef,
+  RefObject,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+
+interface TooltipPortalContextValue {
+  register: (id: string, content: ReactNode) => void;
+  unregister: (id: string, immediate?: boolean) => void;
+  portals: Map<string, ReactNode>;
+  hostRef: RefObject<View | null>;
+}
+
+const TooltipPortalContext = createContext<TooltipPortalContextValue | null>(
+  null,
+);
+
+export const TooltipPortalProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  // Use ref for synchronous updates + reducer for manual re-renders
+  const portalsRef = useRef<Map<string, ReactNode>>(new Map());
+  const hostRef = useRef<View>(null);
+  const [updateCounter, forceUpdate] = useReducer((x: number) => x + 1, 0);
+  const pendingUpdateRef = useRef<NodeJS.Timeout | null>(null);
+
+  const register = useCallback((id: string, content: ReactNode) => {
+    portalsRef.current.set(id, content);
+    forceUpdate(); // Trigger re-render to show new content
+  }, []);
+
+  const unregister = useCallback((id: string, immediate = false) => {
+    const hasItem = portalsRef.current.has(id);
+    if (!hasItem) return; // Already removed
+
+    portalsRef.current.delete(id);
+
+    // Clear any pending updates
+    if (pendingUpdateRef.current) {
+      clearTimeout(pendingUpdateRef.current);
+      pendingUpdateRef.current = null;
+    }
+
+    if (immediate) {
+      forceUpdate();
+    } else {
+      // Debounce normal updates to avoid excessive re-renders
+      pendingUpdateRef.current = setTimeout(() => {
+        forceUpdate();
+        pendingUpdateRef.current = null;
+      }, 0) as unknown as NodeJS.Timeout;
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ register, unregister, portals: portalsRef.current, hostRef }),
+    [register, unregister, updateCounter], // Include updateCounter to refresh context
+  );
+
+  return (
+    <TooltipPortalContext.Provider value={value}>
+      {children}
+    </TooltipPortalContext.Provider>
+  );
+};
+
+export const TooltipPortalHost: React.FC = () => {
+  const context = useContext(TooltipPortalContext);
+
+  if (!context) {
+    if (__DEV__) {
+      console.warn(
+        'TooltipPortalHost must be used within TooltipPortalProvider',
+      );
+    }
+    return null;
+  }
+
+  const { portals, hostRef } = context;
+
+  return (
+    <View ref={hostRef} style={styles.hostContainer} pointerEvents="box-none">
+      {Array.from(portals.entries()).map(([id, content]) => (
+        <React.Fragment key={id}>{content}</React.Fragment>
+      ))}
+    </View>
+  );
+};
+
+export const useTooltipPortal = () => {
+  const context = useContext(TooltipPortalContext);
+
+  if (!context) {
+    if (__DEV__) {
+      console.warn(
+        'useTooltipPortal must be used within TooltipPortalProvider. Tooltips may not appear correctly.',
+      );
+    }
+    // Return no-op functions if context is missing
+    return {
+      register: () => {},
+      unregister: () => {},
+      hostRef: null,
+    };
+  }
+
+  return context;
+};
+
+const styles = StyleSheet.create({
+  hostContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+  },
+});

package/Application/index.ts

@@ -17,6 +17,7 @@ import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
+import { useTooltipPortal } from './TooltipPortal';
 
 export {
   NavigationContainer,
@@ -29,4 +30,5 @@ export {
   Navigator,
   exportHeaderTitle,
   ScaleSizeProvider,
+  useTooltipPortal,
 };

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.154.1-test.18",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {},
-  "keywords": [
-    "@momo-kits/foundation"
-  ],
-  "dependencies": {
-    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-    "@react-navigation/bottom-tabs": "7.4.2",
-    "@react-navigation/core": "7.12.1",
-    "@react-navigation/elements": "2.5.2",
-    "@react-navigation/native": "7.1.14",
-    "@react-navigation/routers": "7.4.1",
-    "@react-navigation/stack": "7.4.2",
-    "react-native-gesture-handler": "2.27.1",
-    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-    "react-native-reanimated": "4.1.0",
-    "react-native-safe-area-context": "5.5.2",
-    "@shopify/flash-list": "2.1.0",
-    "lottie-react-native": "7.2.4"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@types/color": "3.0.6"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MoMo"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.154.2-beta.4",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {},
+    "keywords": [
+        "@momo-kits/foundation"
+    ],
+    "dependencies": {
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "@react-navigation/bottom-tabs": "7.4.2",
+        "@react-navigation/core": "7.12.1",
+        "@react-navigation/elements": "2.5.2",
+        "@react-navigation/native": "7.1.14",
+        "@react-navigation/routers": "7.4.1",
+        "@react-navigation/stack": "7.4.2",
+        "react-native-gesture-handler": "2.27.1",
+        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-reanimated": "4.1.0",
+        "react-native-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@types/color": "3.0.6"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "MoMo"
+}