@momo-kits/foundation 0.121.3-beta.7 → 0.121.3-beta.8

package/Application/BottomSheet.tsx

@@ -28,6 +28,7 @@ import {BottomSheetParams} from './types';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import layoutStyles from '../Layout/styles';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
@@ -51,6 +52,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useScrollOverflow = false,
     keyboardVerticalOffset,
     useDivider = true,
+    footerComponent,
   }: BottomSheetParams = props.route.params;
 
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
@@ -312,10 +314,27 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               {...props.route.params}
               onRequestClose={onRequestClose}
             />
-            {useBottomInset && (
-              <View style={{height: Math.min(insets.bottom, 21)}} />
-            )}
           </Content>
+          {footerComponent && (
+            <View
+              style={[
+                layoutStyles.shadow,
+                {
+                  paddingBottom: Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}>
+              {footerComponent}
+            </View>
+          )}
+          {useBottomInset && (
+            <View
+              style={{
+                height: Math.min(insets.bottom, 21),
+                backgroundColor: backgroundColor,
+              }}
+            />
+          )}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/BottomTab/index.tsx

@@ -1,13 +1,13 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {NavigationContainer, useFocusEffect} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {Animated, Platform, StatusBar} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
 import {exportFontFamily, Text} from '../../Text';
-import {ApplicationContext} from '../index';
+import {ApplicationContext, MiniAppContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps} from '../types';
 import {getOptions, getStackOptions} from '../utils';
@@ -17,13 +17,16 @@ const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<any> = ({route, navigation}) => {
+  const {navigator} = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const {nested, options, screen, initialParams} = route?.params;
   const useAnimation = route?.params?.useAnimation ?? true;
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
-  const opacity = new Animated.Value(opacityValue);
-  const scale = new Animated.Value(scaleValue);
+  const opacity = useRef(new Animated.Value(opacityValue)).current;
+  const scale = useRef(new Animated.Value(scaleValue)).current;
+  const screenName = screen?.name || screen?.type?.name || 'Invalid';
 
   useFocusEffect(
     React.useCallback(() => {
@@ -39,6 +42,14 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
           useNativeDriver: true,
         }),
       ]).start();
+
+      setTimeout(() => {
+        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
+          onScreenNavigated(data?.screenName, screenName);
+          navigator?.maxApi?.setObserver?.('current_screen', {screenName});
+        });
+      }, 100);
+
       return () => {
         if (navigation.getState().index !== route?.params.index) {
           Animated.parallel([
@@ -58,6 +69,45 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
     }, [navigation])
   );
 
+  useEffect(() => {
+    const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+      if (navigation.isFocused()) {
+        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
+          onScreenNavigated(data?.screenName, screenName);
+          navigator?.maxApi?.setObserver?.('current_screen', {screenName});
+        });
+      }
+    });
+
+    return () => {
+      onFocusApp?.();
+    };
+  }, []);
+
+  const onScreenNavigated = (preScreenName: string, screenName: string) => {
+    const data: any = {
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
+      action: 'push',
+    };
+
+    context?.autoTracking?.({
+      ...context,
+      ...data,
+    });
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
+
   let opacityStyle: undefined | Animated.Value = undefined;
   let scaleStyle: number | Animated.Value = 1;
   if (useAnimation) {
@@ -86,6 +136,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
               screen,
               options: stackOptions,
               initialParams,
+              bottomTab: 'nested',
             }}
             options={{...getStackOptions()}}
           />
@@ -110,6 +161,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
               screen,
               options: stackOptions,
               initialParams,
+              bottomTab: 'default',
             }}
             options={{...getStackOptions(), ...options}}
           />

package/Application/Components/HeaderRight.tsx

@@ -105,22 +105,14 @@ const HeaderToolkitAction: React.FC<any> = ({
   );
 
   const onDismiss = () => {
-    if (useCloseIcon) {
+    if (useCloseIcon && !isWhiteList) {
       navigator?.maxApi?.dispatchFunction?.(
         'dismiss',
         navigator?.dismissData,
         undefined
       );
     } else {
-      if (isWhiteList) {
-        navigator?.maxApi?.dispatchFunction?.('dismissAll');
-      } else {
-        navigator?.maxApi?.dispatchFunction?.(
-          'dismiss',
-          navigator?.dismissData,
-          undefined
-        );
-      }
+      navigator?.maxApi?.dispatchFunction?.('dismissAll');
     }
   };
 
@@ -269,12 +261,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     group?.items?.some?.(tool => tool?.showBadge)
   );
 
-  const iconRight = useCloseIcon
-    ? '16_navigation_close_circle'
-    : isWhiteList
-    ? '16_basic_home'
-    : '16_navigation_close_circle';
-
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -311,7 +297,15 @@ const HeaderToolkitAction: React.FC<any> = ({
           onPress={onClose}
           style={styles.toolkitButton}
           hitSlop={{top: 7, bottom: 7, left: 0, right: 7}}>
-          <Icon color={tintColor} source={iconRight} size={20} />
+          <Icon
+            color={tintColor}
+            source={
+              useCloseIcon && !isWhiteList
+                ? '16_navigation_close_circle'
+                : '16_basic_home'
+            }
+            size={20}
+          />
         </TouchableOpacity>
       </View>
     </View>

package/Application/NavigationContainer.tsx

@@ -30,7 +30,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
-  const routes = useRef<any>(undefined);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
@@ -62,21 +61,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       }
     );
 
-    const onFocusApp = maxApi?.listen?.('onFocusApp', () => {
-      const routes = navigationRef.current?.getRootState?.()?.routes;
-      const currentRoute: any = routes?.[routes?.length - 1];
-      const current = currentRoute?.params?.screen;
-      const screenName = current?.name ?? current?.type?.name;
-
-      maxApi?.getDataObserver?.('current_screen', (data: any) => {
-        onScreenNavigated(data?.screenName, screenName, 'push', 'Screen');
-        maxApi?.setObserver?.('current_screen', {screenName});
-      });
-    });
-
     return () => {
       subscription?.remove?.();
-      onFocusApp?.remove?.();
     };
   }, []);
 
@@ -87,49 +73,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     return localize?.translate(data as string);
   };
 
-  /**
-   * navigation state route change handle
-   * @param preScreenName
-   * @param screenName
-   * @param action
-   * @param type
-   */
-  const onScreenNavigated = (
-    preScreenName: string,
-    screenName: string,
-    action: string,
-    type: 'Screen' | 'Modal' | 'BottomSheet'
-  ) => {
-    let data: any = {
-      preScreenName,
-      screenName,
-      componentName: type,
-      state: 'navigated',
-    };
-    if (type !== 'Screen') {
-      data = {
-        preScreenName,
-        screenName,
-        componentName: type,
-      };
-    }
-
-    context?.autoTracking?.({
-      ...context,
-      ...data,
-      action,
-    });
-
-    /**
-     * debug toast
-     */
-    maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${screenName} screen_navigated`,
-      type: 'ERROR',
-    });
-  };
-
   navigator.current.setCurrentContext = setCurrentContext;
 
   return (
@@ -171,56 +114,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             ref={navigationRef}
             onReady={() => {
               isReady.current = true;
-              routes.current = navigationRef.current?.getRootState?.()?.routes;
-              const screenName = screen?.name ?? (screen as any)?.type?.name;
-              maxApi?.getDataObserver?.('current_screen', (data: any) => {
-                onScreenNavigated(
-                  data?.screenName,
-                  screenName,
-                  'push',
-                  'Screen'
-                );
-                maxApi?.setObserver?.('current_screen', {screenName});
-              });
-            }}
-            onStateChange={state => {
-              const lastedRoute: any = state?.routes?.[state?.index];
-              const oldRoute: any =
-                routes.current?.[routes.current?.length - 1];
-              const lasted = lastedRoute?.params?.screen;
-              const previous = oldRoute?.params?.screen;
-              const preScreenName = previous?.name ?? previous?.type?.name;
-              const screenName = lasted?.name ?? lasted?.type?.name;
-
-              let action: string;
-              let type: 'Screen' | 'Modal' | 'BottomSheet';
-
-              if (lastedRoute?.name === 'Modal') {
-                type = 'Modal';
-                action = 'open';
-                if (lastedRoute?.params?.isBottomSheet) {
-                  type = 'BottomSheet';
-                }
-              } else if (oldRoute?.name === 'Modal') {
-                action = 'close';
-                type = 'Modal';
-                if (oldRoute?.params?.isBottomSheet) {
-                  type = 'BottomSheet';
-                }
-              } else {
-                type = 'Screen';
-                if (routes.current?.length > (state?.routes?.length ?? 0)) {
-                  action = 'back';
-                } else {
-                  action = 'push';
-                }
-              }
-
-              onScreenNavigated(preScreenName, screenName, action, type);
-
-              routes.current = state?.routes;
-              maxApi?.of?.({screenName});
-              maxApi?.setObserver?.('current_screen', {screenName});
             }}
             independent={true}>
             <Stack.Navigator initialRouteName="Stack" headerMode="screen">

package/Application/StackScreen.tsx

@@ -17,9 +17,11 @@ const runAfterInteractions = InteractionManager.runAfterInteractions;
 const StackScreen: React.FC<ScreenParams> = props => {
   const {showGrid, navigator} = useContext(ApplicationContext);
   const tracking = useRef<any>({
+    mounted: false,
     timeoutLoad: undefined,
     timeoutInteraction: undefined,
     timeoutTracking: undefined,
+    timeoutLoading: undefined,
     startTime: Date.now(),
     endTime: Date.now(),
     traceIdLoad: undefined,
@@ -27,15 +29,24 @@ const StackScreen: React.FC<ScreenParams> = props => {
     releaseLoad: undefined,
     releaseInteraction: undefined,
     releaseUserInteraction: undefined,
+    releaseLoading: false,
     timeLoad: 0,
     timeInteraction: 0,
+    timeStartLoading: 0,
+    timeEndLoading: 0,
     widgets: [],
     params: undefined,
+    lastElement: undefined,
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
-  const lastElement = useRef<any>(null);
-  const {screen: Component, options, initialParams} = props.route.params;
+
+  const {
+    screen: Component,
+    options,
+    initialParams,
+    bottomTab,
+  } = props.route.params;
   const navigation = new Navigation(props.navigation, context);
   const heightHeader = useHeaderHeight();
 
@@ -63,6 +74,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
+    let focusScreen: any;
+    let onFocusApp: any;
     if (['Invalid', 'screen'].includes(screenName)) {
       navigator?.maxApi?.showPopup?.('notice', {
         title: 'Invalid screen name',
@@ -71,6 +84,26 @@ const StackScreen: React.FC<ScreenParams> = props => {
       });
     }
 
+    if (!bottomTab) {
+      focusScreen = props.navigation.addListener('focus', () => {
+        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
+          onScreenNavigated(data?.screenName, screenName);
+          navigator?.maxApi?.setObserver?.('current_screen', {screenName});
+        });
+      });
+      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (props.navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {screenName});
+            }
+          );
+        }
+      });
+    }
+
     navigator?.maxApi?.startTraceScreenLoad?.(
       screenName,
       context,
@@ -94,10 +127,41 @@ const StackScreen: React.FC<ScreenParams> = props => {
     return () => {
       onScreenLoad();
       onScreenInteraction();
+      clearTimeout(tracking.current.timeoutLoad);
+      clearTimeout(tracking.current.timeoutInteraction);
       clearTimeout(tracking.current.timeoutTracking);
+      clearTimeout(tracking.current.timeoutLoading);
+      focusScreen?.();
+      onFocusApp?.();
     };
   }, []);
 
+  const onScreenNavigated = (preScreenName: string, screenName: string) => {
+    const data: any = {
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
+      action: tracking.current?.mounted ? 'back' : 'push',
+    };
+
+    context?.autoTracking?.({
+      ...context,
+      ...data,
+    });
+
+    tracking.current.mounted = true;
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
+
   /**
    * tracking for screen load
    */
@@ -117,7 +181,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         widgets: tracking.current.widgets,
         params: tracking.current.params,
         version: version,
-        lastElement: lastElement.current,
+        lastElement: tracking.current.lastElement,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
@@ -134,10 +198,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
         message: `${screenName} screen_load_time ${timeLoad}`,
         type: 'ERROR',
       });
-      if (__DEV__ && lastElement.current?.children?.current?.length > 0) {
+      if (
+        __DEV__ &&
+        tracking.current.lastElement?.children?.current?.length > 0
+      ) {
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(lastElement.current?.children?.current)
+          JSON.stringify(tracking.current.lastElement?.children?.current)
         );
       }
     }
@@ -189,10 +256,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   const onFirstInteraction = (action: string) => {
     if (!tracking.current?.releaseUserInteraction) {
-      let timeLoad = tracking.current.timeLoad;
-      if (timeLoad === 0) {
-        timeLoad = tracking.current.endTime - tracking.current.startTime;
-      }
+      const timeLoad = tracking.current.endTime - tracking.current.startTime;
       context?.autoTracking?.({
         ...context,
         screenName,
@@ -214,6 +278,22 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   };
 
+  const onScreenLoading = () => {
+    if (!tracking.current?.releaseLoading) {
+      const timeLoad =
+        tracking.current.timeEndLoading - tracking.current.timeStartLoading;
+      context?.autoTracking?.({
+        ...context,
+        screenName,
+        componentName: 'Screen',
+        state: 'loading',
+        duration: timeLoad,
+        loadingType: 'skeleton',
+      });
+      tracking.current.releaseLoading = true;
+    }
+  };
+
   return (
     <ScreenContext.Provider
       value={{
@@ -244,6 +324,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
             }
             return;
           }
+
           /**
            * tracking for element screen load
            */
@@ -259,7 +340,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
            * support for debug last element
            */
           if (data?.componentName) {
-            lastElement.current = data;
+            tracking.current.lastElement = data;
           }
 
           /**
@@ -285,6 +366,26 @@ const StackScreen: React.FC<ScreenParams> = props => {
             onScreenInteraction();
           }, 2000);
         },
+        onLoading: (loading: boolean) => {
+          if (loading && tracking.current.timeStartLoading === 0) {
+            tracking.current.timeStartLoading = Date.now();
+          }
+
+          /**
+           * tracking for loading screen
+           */
+          clearTimeout(tracking.current.timeoutLoading);
+          if (!loading) {
+            tracking.current.timeEndLoading = Date.now();
+          }
+
+          /**
+           * timeout for handle tracking screen
+           */
+          tracking.current.timeoutLoading = setTimeout(() => {
+            onScreenLoading();
+          }, 2000);
+        },
         onSetParams: (data: ScreenTrackingParams) => {
           tracking.current.params = data;
         },

package/Application/types.ts

@@ -159,6 +159,7 @@ export type BottomSheetParams = {
   keyboardVerticalOffset?: number;
   useScrollOverflow?: boolean;
   useDivider?: boolean;
+  footerComponent?: React.ReactNode;
 };
 
 export interface NavigationButtonProps extends TouchableOpacityProps {

package/Skeleton/index.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Animated,
   Easing,
@@ -12,9 +12,10 @@ import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
 import {Colors, Styles} from '../Consts';
 import styles from './styles';
-import {SkeletonContext} from '../Application';
+import {ScreenContext, SkeletonContext} from '../Application';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
+  const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
   const PRIMARY_COLOR = Colors.black_05;
   const HIGHLIGHT_COLOR1 = Colors.black_05;
@@ -33,14 +34,16 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
         duration: 1000,
         easing: Easing.linear,
         useNativeDriver: Platform.OS !== 'web',
-      }),
+      })
     );
   }, [beginShimmerPosition]);
 
   useEffect(() => {
     animatedValue.start();
+    screen?.onLoading?.(true);
     return () => {
       animatedValue.stop();
+      screen?.onLoading?.(false);
     };
   }, [animatedValue]);
 
@@ -49,6 +52,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
       setWidth(newWidth);
     }
   };
+
   return (
     <View style={[styles.container, style]}>
       <View

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.121.3-beta.7",
+  "version": "0.121.3-beta.8",
   "minimumDeployTarget": 32,
-  "deploymentTarget": 121,
+  "deploymentTarget": 125,
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},