@momo-kits/foundation 0.81.36-beta.4 → 0.81.36-tracking.2

package/Application/Components.tsx

@@ -183,7 +183,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const canGoBack = navigator?.ref.current?.canGoBack();
     if (!canGoBack && navigator?.trackingInfo) {
       const currentRoute = navigator?.ref?.current.getCurrentRoute();
-      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,
         miniapp_version: navigator.trackingInfo.buildNumber,

package/Application/ModalScreen.tsx

@@ -95,7 +95,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
+  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
+    props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -167,14 +168,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>
-          <View
-            style={[
-              styles.sheetContainer,
-              {
-                backgroundColor: props?.indicatorColor ?? backgroundColor,
-                paddingBottom: Math.min(insets.bottom, 20),
-              },
-            ]}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View
                 style={[
@@ -233,6 +227,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ),
               }}
             />
+            <View
+              style={{
+                height: Math.min(insets.bottom, 20),
+                backgroundColor: indicatorColor ?? backgroundColor,
+              }}
+            />
           </View>
         </BottomSheetView>
       </BottomSheetModal>

package/Application/StackScreen.tsx

@@ -5,6 +5,10 @@ import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
@@ -47,14 +51,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
         pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
 
-      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+      navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
         ...tracking,
         pre_screen_name,
         trigger_id: '111378000000000000',
       });
 
       return props.navigation.addListener('beforeRemove', () => {
-        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
           ...tracking,
           trigger_id: '111154000000000000',
           icon_name: 'back',
@@ -64,10 +68,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <>
+    <ScreenContext.Provider
+      value={{
+        screenName: Component.name,
+        elementTracking: navigator?.maxApi?.elementTracking,
+      }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/index.ts

@@ -1,20 +1,21 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
-  NavigationButton,
-  HeaderTitle,
-  HeaderLeft,
+  HeaderAnimated,
   HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
   HeaderRightAction,
+  HeaderTitle,
   HeaderToolkitAction,
-  HeaderCustom,
-  HeaderAnimated,
+  NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const ApplicationContext = createContext(defaultContext);
+
 export {
   NavigationContainer,
   ApplicationContext,

package/Button/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -16,6 +15,10 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -82,6 +85,7 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -94,6 +98,8 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
+
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -291,20 +297,32 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`Button/${title}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params: {
+          title,
+          accessibilityLabel,
+        },
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={`${screenInfo.screenName}/Button/${
+          accessibilityLabel ?? title
+        }`}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Image/index.tsx

@@ -47,6 +47,7 @@ const Image: React.FC<ImageProps> = ({
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
+        error.current = false;
         if (status !== 'loading' && loading) {
           setStatus('loading');
         }

package/Popup/PopupNotify.tsx

@@ -51,12 +51,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         component_name: id,
         error_code: error ? error : undefined,
       };
-      navigator?.maxApi?.trackEvent('service_component_displayed', {
+      navigator?.maxApi?.trackEvent?.('service_component_displayed', {
         ...tracking,
         trigger_id: '111012100000000000',
       });
       return () => {
-        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+        navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
           ...tracking,
           trigger_id: '111154100000000001',
           action_type: closeAction.current,

package/Popup/PopupPromotion.tsx

@@ -34,12 +34,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
         component_type: 'popup',
         component_name: id,
       };
-      navigator?.maxApi?.trackEvent('service_component_displayed', {
+      navigator?.maxApi?.trackEvent?.('service_component_displayed', {
         ...tracking,
         trigger_id: '111012100000000000',
       });
       return () => {
-        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+        navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
           ...tracking,
           trigger_id: '111154100000000001',
           action_type: closeAction.current,

package/package.json

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