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

package/index.tsx

@@ -7,14 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Animated,
-  Easing,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Animated, Easing, TouchableOpacity, View, ViewStyle } from 'react-native';
 import {
   Colors,
   Icon,
@@ -43,13 +36,11 @@ 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 });
 
@@ -193,6 +184,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       ? { bottom: 0 }
       : { top: centerVerticalOffset };
 
+  const resolvedBackground = Colors.black_17;
   const resolvedTextColor = Colors.black_01;
 
   const renderButtons = () => {
@@ -283,11 +275,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
     return (
       <View style={styles.content}>
         <View style={styles.contentHeader}>
-          <View
-            style={{
-              maxWidth: SCREEN_WIDTH - Spacing.M * 2 - 48,
-            }}
-          >
+          <View style={styles.contentTextContainer}>
             {title ? (
               <Text
                 typography={'header_s_semibold'}
@@ -331,7 +319,7 @@ const Tooltip = forwardRef<TooltipRef, TooltipProps>(function Tooltip(
       {
         width: size * 2,
         height: size * 2,
-        backgroundColor: Colors.black_17,
+        backgroundColor: resolvedBackground,
         transform: [{ rotate: '45deg' }],
         borderRadius: size / 2,
       },
@@ -394,16 +382,13 @@ 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.16",
-  "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.17",
+    "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,6 +11,7 @@ export default StyleSheet.create({
     padding: Spacing.M,
     backgroundColor: Colors.black_17,
     borderRadius: Radius.S,
+    width: 256,
   },
   text: {
     color: Colors.black_01,
@@ -24,10 +25,10 @@ export default StyleSheet.create({
     flexDirection: 'column',
   },
   title: {
-    marginBottom: Spacing.XL,
+    marginBottom: Spacing.XS / 2,
   },
   description: {
-    marginBottom: Spacing.XXS,
+    marginBottom: Spacing.XS / 2,
   },
   buttonsRow: {
     flexDirection: 'row',
@@ -36,8 +37,8 @@ export default StyleSheet.create({
     marginTop: Spacing.M,
   },
   button: {
-    marginRight: Spacing.XXS,
-    marginBottom: Spacing.XXS,
+    marginRight: Spacing.XS / 2,
+    marginBottom: Spacing.XS / 2,
   },
   textButton: {},
   iconButton: {},
@@ -52,6 +53,9 @@ export default StyleSheet.create({
   contentHeader: {
     flexDirection: 'row',
   },
+  contentTextContainer: {
+    flex: 1,
+  },
   closeIconSpacing: {
     marginLeft: Spacing.S,
   },

package/types.ts

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