@momo-kits/animated-tooltip 0.153.2 → 0.154.1-beta.0

package/TooltipButtons.tsx

@@ -5,12 +5,11 @@ import {
   ButtonProps,
   Colors,
   Icon,
-  IconButton as FoundationIconButton,
   IconButtonProps,
-  Radius,
-  Spacing,
   Text,
+  useScaleSize,
 } from '@momo-kits/foundation';
+import styles from './styles';
 
 const PrimaryButton: FC<ButtonProps> = ({ title, onPress }) => {
   return (
@@ -27,13 +26,7 @@ const PrimaryButton: FC<ButtonProps> = ({ title, onPress }) => {
 const SecondaryButton: FC<ButtonProps> = ({ title, onPress, style }) => {
   return (
     <TouchableOpacity
-      style={[
-        {
-          paddingHorizontal: Spacing.M,
-          paddingVertical: Spacing.S,
-        },
-        style,
-      ]}
+      style={[styles.secondaryButtonContainer, style]}
       onPress={onPress}
     >
       <Text color={Colors.black_01} typography={'action_s_bold'}>
@@ -48,14 +41,8 @@ const IconButton: FC<IconButtonProps> = ({ icon, onPress, style }) => {
     <TouchableOpacity
       onPress={onPress}
       style={[
-        {
-          width: 36,
-          height: 36,
-          borderRadius: Radius.XL,
-          backgroundColor: Colors.black_01,
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
+        { width: useScaleSize(36), height: useScaleSize(36) },
+        styles.iconButtonContainer,
         style,
       ]}
     >

package/index.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Animated, Easing, View, ViewStyle } from 'react-native';
+import { Animated, Easing, TouchableOpacity, View, ViewStyle } from 'react-native';
 import {
   Colors,
   Icon,
@@ -35,6 +35,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     offset = 8,
     accessibilityLabel,
     onVisibleChange,
+    onPressClose,
   },
   ref,
 ) {
@@ -221,20 +222,20 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       return (
         <View style={styles.buttonsRow}>
           {bothIcon ? (
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <View style={styles.buttonRowContainer}>
               <IconButton
                 icon={second.icon as string}
                 onPress={secondPress}
-                style={{ marginRight: Spacing.S }}
+                style={styles.buttonSpacing}
               />
               <IconButton icon={first.icon as string} onPress={firstPress} />
             </View>
           ) : (
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <View style={styles.buttonRowContainer}>
               <SecondaryButton
                 title={second.title || ''}
                 onPress={secondPress}
-                style={{ marginRight: Spacing.S }}
+                style={styles.buttonSpacing}
               />
               <PrimaryButton title={first.title || ''} onPress={firstPress} />
             </View>
@@ -273,8 +274,8 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
   const renderContent = () => {
     return (
       <View style={styles.content}>
-        <View style={{ flexDirection: 'row' }}>
-          <View style={{ flex: 1 }}>
+        <View style={styles.contentHeader}>
+          <View style={styles.contentTextContainer}>
             {title ? (
               <Text
                 typography={'header_s_semibold'}
@@ -294,12 +295,17 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
               </Text>
             ) : null}
           </View>
-          <Icon
-            source={'navigation_close'}
-            size={20}
-            color={Colors.black_01}
-            style={{ marginLeft: Spacing.S }}
-          />
+          <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>

package/package.json

@@ -1,17 +1,16 @@
 {
-  "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/"
-  }
-}
-
+    "name": "@momo-kits/animated-tooltip",
+    "version": "0.154.1-beta.0",
+    "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

@@ -42,4 +42,32 @@ export default StyleSheet.create({
   },
   textButton: {},
   iconButton: {},
+  // New styles from inline
+  buttonRowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  buttonSpacing: {
+    marginRight: Spacing.S,
+  },
+  contentHeader: {
+    flexDirection: 'row',
+  },
+  contentTextContainer: {
+    flex: 1,
+  },
+  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',
+  },
 });

package/types.ts

@@ -73,5 +73,9 @@ export type TooltipProps = {
    * Triggered when visibility changes.
    */
   onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Triggered when the close button (X) is pressed.
+   */
+  onPressClose?: () => void;
 };