@momo-kits/foundation 0.102.6-beta.9 → 0.102.7-beta.0

package/Application/Components.tsx

@@ -35,6 +35,7 @@ import {Badge, BadgeDot} from '../Badge';
 import {HeaderType} from '../Layout/types';
 import Navigation from './Navigation';
 import {InputRef, InputSearch, InputSearchProps} from '../Input';
+import {BadgeDotAnimation} from '../Badge';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -71,6 +72,11 @@ 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} />;
@@ -763,6 +769,11 @@ 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

@@ -17,7 +17,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const {showGrid, navigator} = useContext(ApplicationContext);
   const tracking = useRef<any>({
     timeoutLoad: undefined,
-    interaction: undefined,
+    timeoutInteraction: undefined,
+    timeoutTracking: undefined,
     startTime: Date.now(),
     endTime: Date.now(),
     traceIdLoad: undefined,
@@ -43,6 +44,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   delete data.initialParams;
 
   const screenName = Component?.name || Component?.type?.name || 'Invalid';
+  const routes = props.navigation.getState()?.routes || [];
 
   /**
    * set options for screen
@@ -71,16 +73,19 @@ const StackScreen: React.FC<ScreenParams> = props => {
         navigator?.showModal({screen: EmptyScreen});
       }, 300);
     }
-    navigator?.maxApi?.of?.({screenName});
-    props.navigation?.addListener?.('focus', () => {
+
+    const subscription = props.navigation?.addListener?.('focus', () => {
+      navigator?.maxApi?.of?.({screenName});
       navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-        if (data) {
-          Alert.alert('getDataObserver', JSON.stringify(data));
+        let preScreenName = data?.screenName;
+        if (routes?.length > 1) {
+          const screen = routes?.[routes?.length - 2]?.params?.screen;
+          preScreenName = screen?.name || screen?.type?.name || 'Invalid';
         }
+        onScreenNavigated(preScreenName);
         navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
       });
     });
-
     navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
       tracking.current.traceIdLoad = data?.traceId;
     });
@@ -90,9 +95,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
         tracking.current.traceIdInteraction = data?.traceId;
       }
     );
+
+    tracking.current.timeoutTracking = setTimeout(() => {
+      onScreenLoad();
+      onScreenInteraction();
+    }, 5000);
+
     return () => {
       onScreenLoad();
       onScreenInteraction();
+      clearTimeout(tracking.current.timeoutTracking);
+      subscription?.();
     };
   }, []);
 
@@ -111,7 +124,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
         code: context.code,
         buildNumber: context.buildNumber,
         screenName,
-        action: 'push',
         componentName: 'Screen',
         state: 'load',
         duration: tracking.current.timeLoad,
@@ -158,6 +170,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         componentName: 'Screen',
         state: 'interaction',
         duration: tracking.current.timeInteraction - tracking.current.timeLoad,
+        totalDuration: tracking.current.timeInteraction,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdInteraction,
@@ -180,6 +193,30 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   };
 
+  /**
+   * tracking for screen navigated
+   */
+  const onScreenNavigated = (preScreenName: string) => {
+    context.autoTracking?.({
+      appId: context.appId,
+      code: context.code,
+      buildNumber: context.buildNumber,
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
+    });
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
+
   return (
     <ScreenContext.Provider
       value={{
@@ -187,8 +224,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
         onElementLoad: () => {
           clearTimeout(tracking.current.timeoutLoad);
           tracking.current.endTime = Date.now();
-          tracking.current.interaction?.cancel?.();
-          tracking.current.interaction =
+          tracking.current.timeoutInteraction?.cancel?.();
+          tracking.current.timeoutInteraction =
             InteractionManager.runAfterInteractions(() => {
               tracking.current.timeInteraction =
                 Date.now() - tracking.current.startTime;

package/Application/types.ts

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

package/Badge/BadgeDotAnimation.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
-import {Animated, StyleSheet, View} from 'react-native';
+import {Animated, View} from 'react-native';
 import {BadgeDotProps} from './types';
-import CommonStyle from './styles';
+import styles from './styles';
 
 const DURATION = 500;
 
@@ -11,7 +11,8 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
   const waveScaleAnim = useRef(new Animated.Value(1)).current;
   const waveOpacityAnim = useRef(new Animated.Value(0)).current;
 
-  const dotStyle = size === 'small' ? styles.dotSmall : styles.dot;
+  const dotStyle =
+    size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
   const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
 
   useEffect(() => {
@@ -67,7 +68,7 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
   }, []);
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.dotAnimationContainer, style]}>
       {/* Wave Animation */}
       <Animated.View
         style={[
@@ -91,32 +92,4 @@ const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
   );
 };
 
-const styles = StyleSheet.create({
-  ...CommonStyle,
-  container: {
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  dot: {
-    ...CommonStyle.dot,
-    borderWidth: 0,
-  },
-  dotSmall: {
-    ...CommonStyle.dotSmall,
-    borderWidth: 0,
-  },
-  wave: {
-    ...CommonStyle.dot,
-    opacity: 0,
-    position: 'absolute',
-    borderWidth: 0,
-  },
-  waveSmall: {
-    ...CommonStyle.dotSmall,
-    borderWidth: 0,
-    position: 'absolute',
-  },
-});
-
 export default BadgeDotAnimation;

package/Badge/index.tsx

@@ -1,7 +1,8 @@
 import Badge from './Badge';
 import BadgeDot from './BadgeDot';
 import BadgeRibbon from './BadgeRibbon';
+import BadgeDotAnimation from './BadgeDotAnimation';
 import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
 
-export {Badge, BadgeRibbon, BadgeDot};
+export {Badge, BadgeRibbon, BadgeDot, BadgeDotAnimation};
 export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -2,6 +2,10 @@ import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
+const DOT_SIZE = 16;
+
+const DOT_SMALL_SIZE = 10;
+
 export default StyleSheet.create({
   badge: {
     paddingHorizontal: Spacing.XS,
@@ -15,21 +19,61 @@ export default StyleSheet.create({
     borderColor: Colors.black_01,
     alignSelf: 'baseline',
   },
+  dotAnimationContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   dot: {
-    width: 16,
-    height: 16,
+    width: DOT_SIZE,
+    height: DOT_SIZE,
     borderWidth: 2,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: 8,
+    borderRadius: DOT_SIZE / 2,
   },
   dotSmall: {
-    width: 10,
-    height: 10,
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
     borderWidth: 1,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: 5,
+    borderRadius: DOT_SMALL_SIZE / 2,
+  },
+  dotAnimation: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    borderWidth: 0,
+  },
+  dotAnimationSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+  },
+  wave: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    opacity: 0,
+    position: 'absolute',
+    borderWidth: 0,
+  },
+  waveSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+    position: 'absolute',
   },
   ribbon: {
     alignSelf: 'baseline',

package/index.ts

@@ -49,6 +49,7 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
+export * from './Rating';
 
 /**
  * export trick for keep old mini app working

package/package.json

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