@momo-kits/animated-tooltip 0.154.1-beta.14 → 0.154.1-beta.16

package/index.tsx

@@ -7,7 +7,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Animated, Easing, TouchableOpacity, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  Easing,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {
   Colors,
   Icon,
@@ -36,11 +43,13 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     accessibilityLabel,
     onVisibleChange,
     onPressClose,
+    containerStyle,
   },
   ref,
 ) {
   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 });
 
@@ -184,7 +193,6 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       ? { bottom: 0 }
       : { top: centerVerticalOffset };
 
-  const resolvedBackground = Colors.black_17;
   const resolvedTextColor = Colors.black_01;
 
   const renderButtons = () => {
@@ -275,7 +283,11 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     return (
       <View style={styles.content}>
         <View style={styles.contentHeader}>
-          <View style={styles.contentTextContainer}>
+          <View
+            style={{
+              maxWidth: SCREEN_WIDTH - Spacing.M * 2 - 48,
+            }}
+          >
             {title ? (
               <Text
                 typography={'header_s_semibold'}
@@ -319,7 +331,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       {
         width: size * 2,
         height: size * 2,
-        backgroundColor: resolvedBackground,
+        backgroundColor: Colors.black_17,
         transform: [{ rotate: '45deg' }],
         borderRadius: size / 2,
       },
@@ -382,13 +394,16 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     <Animated.View
       pointerEvents="auto"
       style={[
+        {
+          maxWidth: SCREEN_WIDTH - Spacing.M * 2,
+        },
+        containerStyle,
         styles.tooltip,
         placementStyle,
         alignStyle,
         {
           opacity: animatedValue,
           transform: [translate],
-          backgroundColor: resolvedBackground,
         },
       ]}
       onLayout={event => setTooltipSize(event.nativeEvent.layout)}

package/package.json

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

@@ -11,7 +11,6 @@ export default StyleSheet.create({
     padding: Spacing.M,
     backgroundColor: Colors.black_17,
     borderRadius: Radius.S,
-    width: 256,
   },
   text: {
     color: Colors.black_01,
@@ -25,10 +24,10 @@ export default StyleSheet.create({
     flexDirection: 'column',
   },
   title: {
-    marginBottom: Spacing.XS / 2,
+    marginBottom: Spacing.XL,
   },
   description: {
-    marginBottom: Spacing.XS / 2,
+    marginBottom: Spacing.XXS,
   },
   buttonsRow: {
     flexDirection: 'row',
@@ -37,8 +36,8 @@ export default StyleSheet.create({
     marginTop: Spacing.M,
   },
   button: {
-    marginRight: Spacing.XS / 2,
-    marginBottom: Spacing.XS / 2,
+    marginRight: Spacing.XXS,
+    marginBottom: Spacing.XXS,
   },
   textButton: {},
   iconButton: {},
@@ -53,9 +52,6 @@ export default StyleSheet.create({
   contentHeader: {
     flexDirection: 'row',
   },
-  contentTextContainer: {
-    flex: 1,
-  },
   closeIconSpacing: {
     marginLeft: Spacing.S,
   },

package/types.ts

@@ -1,4 +1,5 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -77,5 +78,9 @@ export type TooltipProps = {
    * Triggered when the close button (X) is pressed.
    */
   onPressClose?: () => void;
-};
 
+  /**
+   * Tooltip container style.
+   */
+  containerStyle?: ViewStyle;
+};