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

package/src/libs/Tooltip/index.tsx

@@ -1,608 +0,0 @@
-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

@@ -1,16 +0,0 @@
-{
-    "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

@@ -1,18 +0,0 @@
-#!/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

@@ -1,70 +0,0 @@
-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',
-  },
-});