@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/libs/Tooltip/index.tsx

@@ -0,0 +1,608 @@
+import React, {
+  forwardRef, useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  Easing,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  Icon,
+  MiniAppContext,
+  ScreenContext,
+  Spacing,
+  Text,
+  useTooltipPortal,
+} from '@momo-kits/foundation';
+import styles from './styles';
+import { TooltipPlacement, TooltipProps, TooltipRef } from './types';
+import { IconButton, PrimaryButton, SecondaryButton } from './TooltipButtons';
+
+const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
+  {
+    children,
+    title,
+    description,
+    buttons = [],
+    placement = 'top',
+    align = 'center',
+    accessibilityLabel,
+    onVisibleChange,
+    onPressClose,
+    containerStyle,
+  },
+  ref,
+) {
+  const ANIMATION_DURATION = 180;
+  const TOOLTIP_OFFSET = Spacing.S;
+  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 });
+
+  // Portal integration
+  const portal = useTooltipPortal();
+  const portalId = useRef(
+    `tooltip-${Math.random().toString(36).substr(2, 9)}`,
+  ).current;
+
+  // Internal ref for anchor - no ref required from consumer
+  const anchorRef = useRef<View>(null);
+
+  // Anchor position from measureInWindow
+  const [anchorPosition, setAnchorPosition] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+
+  // Portal host position for relative calculation
+  const [hostPosition, setHostPosition] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const componentName = 'Tooltip';
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+
+    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+  }, [accessibilityLabel, app, screen, componentName]);
+
+  // 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);
+
+  const clearTimers = () => {
+    if (showTimer.current) {
+      clearTimeout(showTimer.current);
+    }
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+  };
+
+  const setVisibility = useCallback((nextVisible: boolean) => {
+    if (visibleRef.current !== nextVisible) {
+      visibleRef.current = nextVisible;
+      forceUpdate(); // Trigger re-render to update portal
+      onVisibleChange?.(nextVisible);
+    }
+  },[onVisibleChange]);
+
+  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 (visibleRef.current && !hasSize) {
+      // Don't animate yet, wait for onLayout
+      return;
+    }
+    animate(visibleRef.current);
+  }, [tooltipSize, animate]);
+
+  // Preload anchor measurement on mount for faster initial display
+  useEffect(() => {
+    // Measure immediately on mount to have position ready
+    const timer = setTimeout(() => {
+      // Measure host position first
+      if (portal.hostRef?.current) {
+        portal.hostRef.current.measureInWindow((hostX, hostY) => {
+          setHostPosition({ x: hostX, y: hostY });
+        });
+      }
+
+      anchorRef.current?.measureInWindow((x, y, width, height) => {
+        if (x !== 0 || y !== 0 || width !== 0 || height !== 0) {
+          setAnchorPosition({ x, y, width, height });
+        }
+      });
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [portal.hostRef]);
+
+  useEffect(() => {
+    if (!visibleRef.current) {
+      setAnchorPosition({ x: 0, y: 0, width: 0, height: 0 });
+      setHostPosition({ x: 0, y: 0 });
+      return;
+    }
+
+    let rafId: number | null = null;
+    let lastPosition = { x: 0, y: 0, width: 0, height: 0 };
+    let lastHostPosition = { x: 0, y: 0 };
+    let isMounted = true; // Track mounted state
+    let isActive = true; // Track active state for early cancellation
+
+    const measureAnchor = () => {
+      // Check flags before any work
+      if (!isMounted || !isActive || !anchorRef.current) {
+        return;
+      }
+
+      // Measure portal host position first
+      if (portal.hostRef?.current) {
+        portal.hostRef.current.measureInWindow((hostX, hostY) => {
+          if (!isMounted || !isActive) return;
+
+          if (hostX !== lastHostPosition.x || hostY !== lastHostPosition.y) {
+            lastHostPosition = { x: hostX, y: hostY };
+            setHostPosition({ x: hostX, y: hostY });
+          }
+        });
+      }
+
+      anchorRef.current.measureInWindow((x, y, width, height) => {
+        // Double-check flags in callback
+        if (!isMounted || !isActive) return;
+
+        // Only update if position changed (to avoid unnecessary re-renders)
+        if (
+          x !== lastPosition.x ||
+          y !== lastPosition.y ||
+          width !== lastPosition.width ||
+          height !== lastPosition.height
+        ) {
+          lastPosition = { x, y, width, height };
+          setAnchorPosition({ x, y, width, height });
+        }
+      });
+    };
+
+    // Defer measurement to next frame (single measurement, not polling)
+    rafId = requestAnimationFrame(measureAnchor);
+
+    return () => {
+      // Set flags immediately to stop all pending work
+      isMounted = false;
+      isActive = false;
+
+      // Cancel any pending animation frame
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    };
+  }, [portal.hostRef]);
+
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      animatedValue.stopAnimation();
+    };
+  }, [animatedValue]);
+
+  const handleShow = useCallback(() => {
+    clearTimers();
+    showTimer.current = setTimeout(() => {
+      // Measure host position first
+      if (portal.hostRef?.current) {
+        portal.hostRef.current.measureInWindow((hostX, hostY) => {
+          setHostPosition({ x: hostX, y: hostY });
+        });
+      }
+
+      // Measure anchor position before showing tooltip
+      anchorRef.current?.measureInWindow((x, y, width, height) => {
+        setAnchorPosition({ x, y, width, height });
+        setVisibility(true);
+      });
+    }, ANIMATION_DURATION);
+  }, [portal.hostRef, setVisibility]);
+
+  const handleHide = useCallback(() => {
+    clearTimers();
+    hideTimer.current = setTimeout(
+      () => setVisibility(false),
+      ANIMATION_DURATION,
+    );
+  }, [setVisibility]);
+
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      show: handleShow,
+      hide: handleHide,
+    }),
+    [handleHide, handleShow],
+  );
+
+  const translate =
+    placement === 'top'
+      ? {
+        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],
+            }),
+          };
+
+  const placementStyle = useMemo((): {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  } => {
+    const { x, y, width, height } = anchorPosition;
+    const { width: tooltipWidth, height: tooltipHeight } = tooltipSize;
+
+    let position: { top?: number; left?: number; right?: number } = {};
+
+    // Vertical positioning (relative to portal host)
+    if (placement === 'top') {
+      position.top = y - tooltipHeight - TOOLTIP_OFFSET - hostPosition.y;
+    } else if (placement === 'bottom') {
+      position.top = y + height + TOOLTIP_OFFSET - hostPosition.y;
+    } else {
+      // For left/right placement, calculate vertical center alignment
+      if (align === 'start') {
+        position.top = y - hostPosition.y;
+      } else if (align === 'end') {
+        position.top = y + height - tooltipHeight - hostPosition.y;
+      } else {
+        // center
+        position.top = y + height / 2 - tooltipHeight / 2 - hostPosition.y;
+      }
+    }
+
+    // Horizontal positioning (relative to portal host)
+    if (placement === 'left') {
+      position.left = x - tooltipWidth - TOOLTIP_OFFSET - hostPosition.x;
+    } else if (placement === 'right') {
+      position.left = x + width + TOOLTIP_OFFSET - hostPosition.x;
+    } else {
+      // For top/bottom placement, calculate horizontal alignment
+      if (align === 'start') {
+        position.left = x - hostPosition.x;
+      } else if (align === 'end') {
+        position.left = x + width - tooltipWidth - hostPosition.x;
+      } else {
+        // center
+        position.left = x + width / 2 - tooltipWidth / 2 - hostPosition.x;
+      }
+    }
+
+    return position;
+  }, [anchorPosition, tooltipSize, placement, TOOLTIP_OFFSET, hostPosition.y, hostPosition.x, align]);
+
+  const renderButtons = () => {
+    if (!buttons.length) {
+      return null;
+    }
+
+    if (buttons.length === 1) {
+      const btn = buttons[0];
+      const onPress = btn.onPress ?? (() => { });
+      return (
+        <View style={styles.buttonsRow}>
+          <View
+            style={[
+              styles.button,
+              btn.icon ? styles.iconButton : styles.textButton,
+            ]}
+          >
+            {btn.icon ? (
+              <IconButton icon={btn.icon} onPress={onPress} />
+            ) : (
+              <PrimaryButton title={btn.title || ''} onPress={onPress} />
+            )}
+          </View>
+        </View>
+      );
+    }
+
+    if (buttons.length === 2) {
+      const [first, second] = buttons;
+      const firstPress = first.onPress ?? (() => { });
+      const secondPress = second.onPress ?? (() => { });
+      const bothIcon = !!first.icon && !!second.icon;
+
+      return (
+        <View style={styles.buttonsRow}>
+          {bothIcon ? (
+            <View style={styles.buttonRowContainer}>
+              <IconButton
+                icon={second.icon as string}
+                onPress={secondPress}
+                style={styles.buttonSpacing}
+              />
+              <IconButton icon={first.icon as string} onPress={firstPress} />
+            </View>
+          ) : (
+            <View style={styles.buttonRowContainer}>
+              <SecondaryButton
+                title={second.title || ''}
+                onPress={secondPress}
+                style={styles.buttonSpacing}
+              />
+              <PrimaryButton title={first.title || ''} onPress={firstPress} />
+            </View>
+          )}
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.buttonsRow}>
+        {buttons.map((btn, idx) => {
+          const isIcon = !!btn.icon;
+          const key = btn.title || btn.icon || `${idx}`;
+          const onPress = btn.onPress ?? (() => { });
+
+          return (
+            <View
+              key={key}
+              style={[
+                styles.button,
+                isIcon ? styles.iconButton : styles.textButton,
+              ]}
+            >
+              {isIcon ? (
+                <IconButton icon={btn.icon as string} onPress={onPress} />
+              ) : (
+                <PrimaryButton title={btn.title || ''} onPress={onPress} />
+              )}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <View style={styles.content}>
+        <View style={styles.contentHeader}>
+          <View
+            style={{
+              minWidth: 100,
+              maxWidth: SCREEN_WIDTH - Spacing.M * 2 - 48,
+            }}
+          >
+            {title ? (
+              <Text
+                typography={'header_s_semibold'}
+                color={Colors.black_01}
+                style={styles.title}
+              >
+                {title}
+              </Text>
+            ) : null}
+            {description ? (
+              <Text
+                typography={'description_default_regular'}
+                color={Colors.black_01}
+                style={styles.description}
+              >
+                {description}
+              </Text>
+            ) : null}
+          </View>
+          <TouchableOpacity
+            onPress={onPressClose}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            style={styles.closeIconSpacing}
+          >
+            <Icon
+              source={'navigation_close'}
+              size={20}
+              color={Colors.black_01}
+            />
+          </TouchableOpacity>
+        </View>
+        {renderButtons()}
+      </View>
+    );
+  };
+
+  const getArrowStyle: () => object[] = () => {
+    const size = arrowSize;
+    const common = [
+      styles.arrow,
+      {
+        width: size * 2,
+        height: size * 2,
+        backgroundColor: Colors.black_17,
+        transform: [{ rotate: '45deg' }],
+        borderRadius: size / 2,
+      },
+    ];
+
+    switch (placement) {
+      case 'top':
+        return [
+          ...common,
+          {
+            bottom: -(size - 1),
+            ...(align === 'start'
+              ? { left: size + Spacing.M }
+              : align === 'end'
+                ? { right: size + Spacing.M }
+                : { alignSelf: 'center' }),
+          },
+        ];
+      case 'bottom':
+        return [
+          ...common,
+          {
+            top: -(size - 1),
+            ...(align === 'start'
+              ? { left: size + Spacing.M }
+              : align === 'end'
+                ? { right: size + Spacing.M }
+                : { alignSelf: 'center' }),
+          },
+        ];
+      case 'left':
+        return [
+          ...common,
+          {
+            right: -(size - 1),
+            ...(align === 'start'
+              ? { top: size + Spacing.M }
+              : align === 'end'
+                ? { bottom: size + Spacing.M }
+                : { top: (tooltipSize.height || 0) / 2 - size }),
+          },
+        ];
+      case 'right':
+      default:
+        return [
+          ...common,
+          {
+            left: -(size - 1),
+            ...(align === 'start'
+              ? { top: size + Spacing.M }
+              : align === 'end'
+                ? { bottom: size + Spacing.M }
+                : { top: (tooltipSize.height || 0) / 2 - size }),
+          },
+        ];
+    }
+  };
+
+  useEffect(() => {
+    let isActive = true; // Track if effect is still active
+
+    if (!visibleRef.current) {
+      portal.unregister(portalId, true); // Immediate cleanup when hiding
+      return;
+    }
+
+    const hasMeasurement =
+      anchorPosition.x !== 0 ||
+      anchorPosition.y !== 0 ||
+      anchorPosition.width !== 0 ||
+      anchorPosition.height !== 0;
+
+    if (!hasMeasurement) {
+      return;
+    }
+
+    const content = (
+      <>
+        <TouchableWithoutFeedback onPress={handleHide}>
+          <View
+            style={{
+              position: 'absolute',
+              top: -9999,
+              left: -9999,
+              right: -9999,
+              bottom: -9999,
+            }}
+          />
+        </TouchableWithoutFeedback>
+
+        <Animated.View
+          pointerEvents="auto"
+          style={[
+            {
+              maxWidth: SCREEN_WIDTH - Spacing.M * 2,
+            },
+            containerStyle,
+            styles.tooltip,
+            placementStyle,
+            {
+              opacity: animatedValue,
+              transform: [translate],
+            },
+          ]}
+          onLayout={event => {
+            if (isActive) {
+              setTooltipSize(event.nativeEvent.layout);
+            }
+          }}
+        >
+          {renderContent()}
+          <View style={getArrowStyle()} />
+        </Animated.View>
+      </>
+    );
+
+    portal.register(portalId, content);
+
+    return () => {
+      isActive = false;
+      portal.unregister(portalId, true);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibleRef.current, anchorPosition, placement, align, tooltipSize]);
+
+  return (
+    <View style={styles.container} accessibilityLabel={componentId}>
+      <View ref={anchorRef} style={styles.anchorView}>
+        {children}
+      </View>
+    </View>
+  );
+});
+
+export { Tooltip };
+export type { TooltipProps, TooltipPlacement, TooltipRef };

package/src/libs/Tooltip/package.json

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

package/src/libs/Tooltip/publish.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+

package/src/libs/Tooltip/styles.ts

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  tooltip: {
+    position: 'absolute',
+    padding: Spacing.M,
+    backgroundColor: Colors.black_17,
+    borderRadius: Radius.S,
+  },
+  text: {
+    color: Colors.black_01,
+  },
+  arrow: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
+  content: {
+    flexDirection: 'column',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  description: {
+    marginBottom: Spacing.M,
+  },
+  buttonsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+  },
+  button: {
+    marginRight: Spacing.XXS,
+    marginBottom: Spacing.XXS,
+  },
+  textButton: {},
+  iconButton: {},
+  // New styles from inline
+  buttonRowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  buttonSpacing: {
+    marginRight: Spacing.S,
+  },
+  contentHeader: {
+    flexDirection: 'row',
+  },
+  closeIconSpacing: {
+    marginLeft: Spacing.S,
+  },
+  // TooltipButtons styles
+  secondaryButtonContainer: {
+    paddingHorizontal: Spacing.M,
+    paddingVertical: Spacing.S,
+  },
+  iconButtonContainer: {
+    borderRadius: Radius.XL,
+    backgroundColor: Colors.black_01,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  anchorView: {
+    alignSelf: 'flex-start',
+  },
+});