@momo-kits/foundation 0.102.6-beta.4 → 0.102.6-beta.6

package/Application/Components.tsx

@@ -35,7 +35,6 @@ import {Badge, BadgeDot} from '../Badge';
 import {HeaderType} from '../Layout/types';
 import Navigation from './Navigation';
 import {InputRef, InputSearch, InputSearchProps} from '../Input';
-import BadgeDotAnimation from '../Badge/BadgeDotAnimation';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -72,11 +71,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     if (badgeType === 'dot') {
       return <BadgeDot size="small" style={styles.badgeDot} />;
     }
-    if (badgeType === 'dot-animation') {
-      return (
-        <BadgeDotAnimation size="small" style={styles.badgeDotAnimation} />
-      );
-    }
 
     if (isNumber(badgeValue)) {
       return <Badge label={badgeValue} style={styles.badge} />;
@@ -769,11 +763,6 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
-  badgeDotAnimation: {
-    position: 'absolute',
-    top: -Spacing.XS,
-    right: -Spacing.XS,
-  },
   extendedHeader: {
     aspectRatio: 1.75,
     position: 'absolute',

package/Application/StackScreen.tsx

@@ -8,80 +8,6 @@ import {GridSystem} from '../Layout';
 import {Text} from '../Text';
 import {Colors, Radius, Spacing} from '../Consts';
 
-/**
- * Empty screen for unvalidated screen name
- * @constructor
- */
-const EmptyScreen: React.FC = () => {
-  return (
-    <View
-      style={{
-        backgroundColor: Colors.black_01,
-        padding: Spacing.M,
-        borderRadius: Radius.M,
-      }}>
-      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
-      <Text
-        typography={'description_default_regular'}
-        style={{paddingVertical: Spacing.S}}>
-        Your screen has not been rendered because Platform has not detected the
-        screen name. Please migrate to support this feature.
-      </Text>
-      <Text typography={'header_default'} style={{width: '100%'}}>
-        Possible fixes:
-      </Text>
-      <View style={{marginLeft: Spacing.S}}>
-        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
-        <Text typography={'body_default_regular'}>
-          2. Screen name refactoring
-        </Text>
-        <View style={{marginLeft: Spacing.S}}>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với các screen push/import dạng arrow function ={'>'} đổi thành
-            named function
-          </Text>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với các screen import dạng High Order Component ={'>'} rename
-            generic function thành named function
-          </Text>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
-            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
-            khảo theo docs
-          </Text>
-        </View>
-      </View>
-      <Text typography={'header_s_semibold'}>More information: </Text>
-      <Text
-        typography={'body_default_regular'}
-        color={Colors.blue_01}
-        onPress={() => {
-          Linking.openURL(
-            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
-          );
-        }}>
-        Mini App: vn.momo.uikits/dev
-      </Text>
-      <Text
-        typography={'body_default_regular'}
-        color={Colors.blue_01}
-        onPress={() => {
-          Linking.openURL(
-            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
-          );
-        }}>
-        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
-      </Text>
-    </View>
-  );
-};
-
 /**
  * container for stack screen
  * @param props
@@ -99,8 +25,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
     traceIdInteraction: undefined,
     releaseLoad: undefined,
     releaseInteraction: undefined,
-    timeoutLoad: undefined,
-    timeoutInteraction: undefined,
   });
   const interaction = useRef<any>();
   const context = useContext<any>(MiniAppContext);
@@ -135,15 +59,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
       };
     }
     navigation.setOptions(defaultOptions);
-    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
-      tracked.current.traceIdLoad = data?.traceId;
-    });
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      (data: any) => {
-        tracked.current.traceIdInteraction = data?.traceId;
-      }
-    );
   }, [options]);
 
   /**
@@ -156,16 +71,22 @@ const StackScreen: React.FC<ScreenParams> = props => {
       }, 300);
     }
     navigator?.maxApi?.of?.({screenName});
-    tracked.current.timeoutLoad = setTimeout(() => {
-      onScreenLoad();
-    }, 5000);
-    tracked.current.timeoutInteraction = setTimeout(() => {
-      onScreenInteraction();
-    }, 5000);
-
+    navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: string) => {
+      if (data) {
+        Alert.alert('getDataObserver', data);
+      }
+      navigator?.maxApi?.setObserver('CURRENT_SCREEN', screenName);
+    });
+    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
+      tracked.current.traceIdLoad = data?.traceId;
+    });
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      (data: any) => {
+        tracked.current.traceIdInteraction = data?.traceId;
+      }
+    );
     return () => {
-      clearTimeout(tracked.current.timeoutLoad);
-      clearTimeout(tracked.current.timeoutInteraction);
       onScreenLoad();
       onScreenInteraction();
     };
@@ -201,8 +122,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
        * debug
        */
       navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
+        appId: context.appId,
         message: `${screenName} screen_load_time ${timeLoad.current}`,
+        type: 'ERROR',
       });
       if (timeLoad.current <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen load time");
@@ -242,8 +164,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
        * debug toast
        */
       navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
+        appId: context.appId,
         message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+        type: 'ERROR',
       });
       if (timeInteraction.current <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen interaction time");
@@ -266,6 +189,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
             if (timeLoad.current === 0) {
               timeLoad.current = endTime.current - startTime.current;
             }
+            onScreenLoad();
+            onScreenInteraction();
           }, 2000);
         },
       }}>
@@ -280,4 +205,78 @@ const StackScreen: React.FC<ScreenParams> = props => {
   );
 };
 
+/**
+ * Empty screen for unvalidated screen name
+ * @constructor
+ */
+const EmptyScreen: React.FC = () => {
+  return (
+    <View
+      style={{
+        backgroundColor: Colors.black_01,
+        padding: Spacing.M,
+        borderRadius: Radius.M,
+      }}>
+      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
+      <Text
+        typography={'description_default_regular'}
+        style={{paddingVertical: Spacing.S}}>
+        Your screen has not been rendered because Platform has not detected the
+        screen name. Please migrate to support this feature.
+      </Text>
+      <Text typography={'header_default'} style={{width: '100%'}}>
+        Possible fixes:
+      </Text>
+      <View style={{marginLeft: Spacing.S}}>
+        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
+        <Text typography={'body_default_regular'}>
+          2. Screen name refactoring
+        </Text>
+        <View style={{marginLeft: Spacing.S}}>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen push/import dạng arrow function ={'>'} đổi thành
+            named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen import dạng High Order Component ={'>'} rename
+            generic function thành named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
+            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
+            khảo theo docs
+          </Text>
+        </View>
+      </View>
+      <Text typography={'header_s_semibold'}>More information: </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
+          );
+        }}>
+        Mini App: vn.momo.uikits/dev
+      </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
+          );
+        }}>
+        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
+      </Text>
+    </View>
+  );
+};
+
 export default StackScreen;

package/Application/types.ts

@@ -129,7 +129,7 @@ export type NavigationButtonProps = {
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number' | 'dot-animation';
+  badgeType?: 'dot' | 'number';
   badgeValue?: number;
   accessibilityLabel?: string;
 };
@@ -137,7 +137,7 @@ export type NavigationButtonProps = {
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot' | 'dot-animation';
+  badgeType?: 'number' | 'dot';
 };
 
 export type RuntimeToolType = {

package/Badge/BadgeDotAnimation.tsx

@@ -27,7 +27,7 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
             useNativeDriver: true,
           }),
           Animated.spring(scaleAnim, {
-            toValue: 1.2,
+            toValue: 1.1,
             friction: 5,
             tension: 30,
             useNativeDriver: true,
@@ -36,7 +36,7 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
         Animated.sequence([
           Animated.timing(waveScaleAnim, {
             toValue: 2.5,
-            duration: DURATION * 1.3,
+            duration: DURATION * 3,
             useNativeDriver: true,
           }),
           Animated.timing(waveScaleAnim, {
@@ -48,7 +48,7 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
         Animated.sequence([
           Animated.timing(waveOpacityAnim, {
             toValue: 0.3, // Wave becomes visible
-            duration: DURATION * 0.7,
+            duration: DURATION * 2,
             useNativeDriver: true,
           }),
           Animated.timing(waveOpacityAnim, {
@@ -64,7 +64,7 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
     return () => {
       animation.stop();
     };
-  }, [scaleAnim, waveScaleAnim, waveOpacityAnim]);
+  }, []);
 
   return (
     <View style={[styles.container, style]}>

package/package.json

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