@momo-kits/animated-tooltip 0.153.2

package/TooltipButtons.tsx

@@ -0,0 +1,67 @@
+import React, { FC } from 'react';
+import { TouchableOpacity } from 'react-native';
+import {
+  Button,
+  ButtonProps,
+  Colors,
+  Icon,
+  IconButton as FoundationIconButton,
+  IconButtonProps,
+  Radius,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+
+const PrimaryButton: FC<ButtonProps> = ({ title, onPress }) => {
+  return (
+    <Button
+      full={false}
+      title={title}
+      onPress={onPress}
+      type={'secondary'}
+      size={'medium'}
+    />
+  );
+};
+
+const SecondaryButton: FC<ButtonProps> = ({ title, onPress, style }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        {
+          paddingHorizontal: Spacing.M,
+          paddingVertical: Spacing.S,
+        },
+        style,
+      ]}
+      onPress={onPress}
+    >
+      <Text color={Colors.black_01} typography={'action_s_bold'}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const IconButton: FC<IconButtonProps> = ({ icon, onPress, style }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        {
+          width: 36,
+          height: 36,
+          borderRadius: Radius.XL,
+          backgroundColor: Colors.black_01,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+    >
+      <Icon source={icon} />
+    </TouchableOpacity>
+  );
+};
+
+export { PrimaryButton, SecondaryButton, IconButton };

package/index.tsx

@@ -0,0 +1,410 @@
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Animated, Easing, View, ViewStyle } from 'react-native';
+import {
+  Colors,
+  Icon,
+  MiniAppContext,
+  ScreenContext,
+  Spacing,
+  Text,
+} 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',
+    visible,
+    showDelay = 120,
+    hideDelay = 120,
+    animationDuration = 180,
+    offset = 8,
+    accessibilityLabel,
+    onVisibleChange,
+  },
+  ref,
+) {
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+  const arrowSize = 6;
+  const [tooltipSize, setTooltipSize] = useState({ width: 0, height: 0 });
+
+  const componentName = 'Tooltip';
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+
+    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+  }, [accessibilityLabel, app, screen, componentName]);
+
+  const isControlled = typeof visible === 'boolean';
+  const [internalVisible, setInternalVisible] = useState(false);
+  const animatedValue = useRef(
+    new Animated.Value(visible ?? internalVisible ? 1 : 0),
+  ).current;
+  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 currentVisible = isControlled ? !!visible : internalVisible;
+
+  const clearTimers = () => {
+    if (showTimer.current) {
+      clearTimeout(showTimer.current);
+    }
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+  };
+
+  const setVisibility = (nextVisible: boolean) => {
+    if (!isControlled) {
+      setInternalVisible(nextVisible);
+    }
+    onVisibleChange?.(nextVisible);
+  };
+
+  const animate = (nextVisible: boolean) => {
+    Animated.timing(animatedValue, {
+      toValue: nextVisible ? 1 : 0,
+      duration: animationDuration,
+      useNativeDriver: true,
+      easing: nextVisible ? Easing.out(Easing.quad) : Easing.in(Easing.quad),
+    }).start();
+  };
+
+  useEffect(() => {
+    animate(currentVisible);
+  }, [currentVisible, animationDuration]);
+
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      animatedValue.stopAnimation();
+    };
+  }, []);
+
+  const handleShow = () => {
+    clearTimers();
+    showTimer.current = setTimeout(() => setVisibility(true), showDelay);
+  };
+
+  const handleHide = () => {
+    clearTimers();
+    hideTimer.current = setTimeout(() => setVisibility(false), hideDelay);
+  };
+
+  const handleToggle = () => {
+    if (currentVisible) {
+      handleHide();
+    } else {
+      handleShow();
+    }
+  };
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      show: handleShow,
+      hide: handleHide,
+      toggle: handleToggle,
+    }),
+    [currentVisible, showDelay, hideDelay],
+  );
+
+  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: {
+    [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;
+  const resolvedTextColor = Colors.black_01;
+
+  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={{ flexDirection: 'row', alignItems: 'center' }}>
+              <IconButton
+                icon={second.icon as string}
+                onPress={secondPress}
+                style={{ marginRight: Spacing.S }}
+              />
+              <IconButton icon={first.icon as string} onPress={firstPress} />
+            </View>
+          ) : (
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <SecondaryButton
+                title={second.title || ''}
+                onPress={secondPress}
+                style={{ marginRight: Spacing.S }}
+              />
+              <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={{ flexDirection: 'row' }}>
+          <View style={{ flex: 1 }}>
+            {title ? (
+              <Text
+                typography={'header_s_semibold'}
+                color={resolvedTextColor}
+                style={styles.title}
+              >
+                {title}
+              </Text>
+            ) : null}
+            {description ? (
+              <Text
+                typography={'description_default_regular'}
+                color={resolvedTextColor}
+                style={styles.description}
+              >
+                {description}
+              </Text>
+            ) : null}
+          </View>
+          <Icon
+            source={'navigation_close'}
+            size={20}
+            color={Colors.black_01}
+            style={{ marginLeft: Spacing.S }}
+          />
+        </View>
+        {renderButtons()}
+      </View>
+    );
+  };
+
+  const getArrowStyle: () => object[] = () => {
+    const size = arrowSize;
+    const common = [
+      styles.arrow,
+      {
+        width: size * 2,
+        height: size * 2,
+        backgroundColor: resolvedBackground,
+        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 }),
+          },
+        ];
+    }
+  };
+
+  const tooltipNode = (
+    <Animated.View
+      pointerEvents="auto"
+      style={[
+        styles.tooltip,
+        placementStyle,
+        alignStyle,
+        {
+          opacity: animatedValue,
+          transform: [translate],
+          backgroundColor: resolvedBackground,
+        },
+      ]}
+      onLayout={event => setTooltipSize(event.nativeEvent.layout)}
+    >
+      {renderContent()}
+      <View style={getArrowStyle()} />
+    </Animated.View>
+  );
+
+  return (
+    <View
+      pointerEvents={'box-none'}
+      style={styles.container}
+      accessibilityLabel={componentId}
+    >
+      <View onLayout={event => setAnchorSize(event.nativeEvent.layout)}>
+        {children}
+      </View>
+      {tooltipNode}
+    </View>
+  );
+});
+
+export { Tooltip };
+export type { TooltipProps, TooltipPlacement, TooltipRef };

package/package.json

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

package/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/styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  tooltip: {
+    position: 'absolute',
+    zIndex: 10,
+    padding: Spacing.M,
+    backgroundColor: Colors.black_17,
+    borderRadius: Radius.S,
+    width: 256,
+  },
+  text: {
+    color: Colors.black_01,
+  },
+  arrow: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
+  content: {
+    flexDirection: 'column',
+  },
+  title: {
+    marginBottom: Spacing.XS / 2,
+  },
+  description: {
+    marginBottom: Spacing.XS / 2,
+  },
+  buttonsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    marginTop: Spacing.M,
+  },
+  button: {
+    marginRight: Spacing.XS / 2,
+    marginBottom: Spacing.XS / 2,
+  },
+  textButton: {},
+  iconButton: {},
+});

package/types.ts

@@ -0,0 +1,77 @@
+import {ReactNode} from 'react';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export type TooltipRef = {
+  show: () => void;
+  hide: () => void;
+  toggle: () => void;
+};
+
+export type TooltipButton = {
+  title?: string;
+  icon?: string;
+  onPress?: () => void;
+};
+
+export type TooltipProps = {
+  /**
+   * Element that the tooltip is anchored to.
+   */
+  children: ReactNode;
+  /**
+   * Title displayed at the top of the tooltip.
+   */
+  title?: string;
+  /**
+   * Description text shown under the title.
+   */
+  description?: string;
+  /**
+   * Action buttons rendered at the bottom of the tooltip.
+   */
+  buttons?: TooltipButton[];
+  /**
+   * Tooltip position relative to the anchor element.
+   * @default 'top'
+   */
+  placement?: TooltipPlacement;
+  /**
+   * Cross-axis alignment (start/center/end).
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * Controlled visibility. Internal state is ignored when provided.
+   */
+  visible?: boolean;
+  /**
+   * Delay (ms) before showing the tooltip.
+   * @default 120
+   */
+  showDelay?: number;
+  /**
+   * Delay (ms) before hiding the tooltip.
+   * @default 120
+   */
+  hideDelay?: number;
+  /**
+   * Duration (ms) of the show/hide animation.
+   * @default 180
+   */
+  animationDuration?: number;
+  /**
+   * Gap between the tooltip and its anchor.
+   * @default 8
+   */
+  offset?: number;
+  /**
+   * Accessibility label for the component.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Triggered when visibility changes.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+};
+