@momo-kits/foundation 0.81.23-beta.1 → 0.81.23-beta.4

package/Application/BottomTab.tsx

@@ -41,6 +41,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 return (
                   <View style={{paddingHorizontal: 16}}>
                     <Text
+                      numberOfLines={1}
                       typography={focused ? 'label_xs' : 'description_xs'}
                       color={color}>
                       {item.label}

package/Application/Components.tsx

@@ -234,6 +234,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       ]}>
       <StatusBar
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
+        translucent={true}
+        backgroundColor={'transparent'}
       />
       {!!headerImage && (
         <Image

package/Application/ModalScreen.tsx

@@ -6,7 +6,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  TouchableHighlight,
   View,
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
@@ -191,11 +190,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ...theme,
                 assets: {...theme.assets, headerBackground: undefined},
               }}
-              screen={props => (
-                <TouchableHighlight style={Styles.flex}>
-                  <Component {...props} {...params} />
-                </TouchableHighlight>
-              )}
+              screen={props => <Component {...props} {...params} />}
               options={{
                 ...options,
                 ...{

package/Application/StackScreen.tsx

@@ -53,13 +53,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
         trigger_id: '111378000000000000',
       });
 
-      return props.navigation.addListener('beforeRemove', () => {
+      return () => {
         navigator?.maxApi?.trackEvent('service_icon_clicked', {
           ...tracking,
           trigger_id: '111154000000000000',
           icon_name: 'back',
         });
-      });
+      };
     }
   }, []);
 

package/Layout/Card.tsx

@@ -140,6 +140,18 @@ const Card: React.FC<CardProps> = ({
   const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
+      {!!backgroundImage && (
+        <Image
+          source={{uri: backgroundImage}}
+          style={[
+            styles.imageBackground,
+            {
+              width: widthSection,
+              marginHorizontal: margin,
+            },
+          ]}
+        />
+      )}
       <View
         accessibilityLabel={`Card`}
         style={[
@@ -149,16 +161,12 @@ const Card: React.FC<CardProps> = ({
           {
             width: widthSection,
             marginHorizontal: margin,
-            backgroundColor: theme.colors.background.surface,
+            backgroundColor: backgroundImage
+              ? undefined
+              : theme.colors.background.surface,
           },
           useShadow && Shadow.Light,
         ]}>
-        {!!backgroundImage && (
-          <Image
-            source={{uri: backgroundImage}}
-            style={styles.imageBackground}
-          />
-        )}
         {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>

package/Popup/PopupNotify.tsx

@@ -9,6 +9,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
+  id,
   image,
   title = 'Title',
   description = 'Description',
@@ -33,29 +34,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * tracking
    */
   useEffect(() => {
-    onTracking('service_component_displayed', undefined, '111012100000000000');
-    return () => {
-      onTracking(
-        'service_popup_dismissed',
-        closeAction.current,
-        '111154100000000001',
-      );
-    };
-  }, []);
-  /**
-   * on action popup
-   * @param callback
-   */
-  const onAction = (callback?: () => void) => {
-    navigator?.pop();
-    callback?.();
-  };
-
-  const onTracking = (
-    event: string,
-    actionType: string | undefined,
-    trigger_id: string,
-  ) => {
     if (navigator?.trackingInfo) {
       const routes = navigator.ref.current?.getRootState()?.routes || [];
       const routesLength = routes.length;
@@ -63,19 +41,37 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       if (routesLength > 1) {
         screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
-      navigator?.maxApi?.trackEvent(event, {
+      const tracking = {
         feature_code: navigator?.trackingInfo?.code,
         app_id: navigator?.trackingInfo?.appId,
         miniapp_version: navigator?.trackingInfo?.buildNumber,
         flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
         screen_name,
         component_type: 'popup',
-        component_name: 'PopupNotify',
+        component_name: id,
         error_code: error ? error : undefined,
-        trigger_id,
-        action_type: actionType,
+      };
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        ...tracking,
+        trigger_id: '111012100000000000',
       });
+      return () => {
+        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+          ...tracking,
+          trigger_id: '111154100000000001',
+          action_type: closeAction.current,
+        });
+      };
     }
+  }, []);
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    navigator?.pop();
+    callback?.();
   };
 
   /**

package/Popup/PopupPromotion.tsx

@@ -7,6 +7,7 @@ import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
+  id,
   image,
   onIconClose,
 }) => {
@@ -17,21 +18,6 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * tracking
    */
   useEffect(() => {
-    onTracking('service_component_displayed', undefined, '111012100000000000');
-    return () => {
-      onTracking(
-        'service_popup_dismissed',
-        closeAction.current,
-        '111154100000000001',
-      );
-    };
-  }, []);
-
-  const onTracking = (
-    event: string,
-    actionType: string | undefined,
-    trigger_id: string,
-  ) => {
     if (navigator?.trackingInfo) {
       const routes = navigator.ref.current?.getRootState()?.routes || [];
       const routesLength = routes.length;
@@ -39,19 +25,28 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       if (routesLength > 1) {
         screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
-      navigator?.maxApi?.trackEvent(event, {
+      const tracking = {
         feature_code: navigator?.trackingInfo?.code,
         app_id: navigator?.trackingInfo?.appId,
         miniapp_version: navigator?.trackingInfo?.buildNumber,
         flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
         screen_name,
         component_type: 'popup',
-        component_name: 'PopupPromotion',
-        trigger_id,
-        action_type: actionType,
+        component_name: id,
+      };
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        ...tracking,
+        trigger_id: '111012100000000000',
       });
+      return () => {
+        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+          ...tracking,
+          trigger_id: '111154100000000001',
+          action_type: closeAction.current,
+        });
+      };
     }
-  };
+  }, []);
 
   /**
    * build close action

package/Popup/types.ts

@@ -2,6 +2,10 @@ import {TextStyle} from 'react-native';
 import React from 'react';
 
 export type PopupNotifyProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
    */
@@ -47,6 +51,11 @@ export type PopupNotifyProps = {
 };
 
 export type PopupPromotionProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
+
   /**
    * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
    */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.23-beta.1",
+    "version": "0.81.23-beta.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {