@momo-kits/foundation 0.112.1-beta.8 → 0.112.1-doc.0

package/Application/NavigationContainer.tsx

@@ -1,8 +1,13 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+import type {NavigationState} from '@react-navigation/routers';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
+  NavigationIndependentTree,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -16,7 +21,7 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext, MiniAppContext} from './index';
 import Localize from './Localize';
-import {defaultTheme, Configs} from '../Consts';
+import {defaultTheme} from '../Consts';
 
 const Stack = createStackNavigator();
 
@@ -29,12 +34,47 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localize = new Localize({vi: {}, en: {}}),
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const navigationRef = useRef<NavigationContainerRef>(null);
+  return (
+    <SafeAreaProvider>
+      <MiniAppContext.Provider value={context}>
+        <Navigation
+          screen={screen}
+          theme={theme}
+          options={options}
+          maxApi={maxApi}
+          initialParams={initialParams}
+          localize={localize}
+        />
+      </MiniAppContext.Provider>
+    </SafeAreaProvider>
+  );
+};
+
+const Navigation: React.FC<any> = ({
+  screen,
+  theme = defaultTheme,
+  options,
+  maxApi,
+  initialParams,
+  localize = new Localize({vi: {}, en: {}}),
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const navigationRef = useRef<NavigationContainerRef<any>>(null);
   const routes = useRef<any>();
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  const [currentContext, setCurrentContext] = useState({});
+  const insets = useSafeAreaInsets();
+
+  let headerBackground = context?.designConfig?.headerBar;
+  let headerGradient = theme.colors?.gradient;
+
+  if (theme.assets?.headerBackground) {
+    headerBackground = theme.assets?.headerBackground;
+  }
+  if (context?.designConfig?.headerGradient) {
+    headerGradient = context?.designConfig?.headerGradient;
+  }
 
   /**
    * inject data for navigator
@@ -50,7 +90,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
-      }
+      },
     );
 
     return () => {
@@ -58,6 +98,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  /**
+   * translate context method
+   * @param data
+   */
   const translate = (data?: string | {vi: string; en: string}) => {
     if (data && typeof data !== 'string') {
       return localize?.translateData(data);
@@ -74,7 +118,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const onScreenNavigated = (
     preScreenName: string,
     screenName: string,
-    action: string
+    action: string,
   ) => {
     console.log(preScreenName, screenName, action);
     context?.autoTracking?.({
@@ -86,9 +130,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       action,
     });
 
-    /**
-     * debug toast
-     */
     maxApi?.showToastDebug?.({
       appId: context.appId,
       message: `${screenName} screen_navigated`,
@@ -96,104 +137,129 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
-  const headerBackground = theme.assets?.headerBackground || Configs.headerBar;
-  const headerGradient = Configs?.headerGradient || theme.colors?.gradient;
+  /**
+   * onStateChange
+   * @param state
+   */
+  const onStateChange = (state: Readonly<NavigationState> | undefined) => {
+    const lastedRoute: any = state?.routes?.[state?.routes?.length - 1];
+    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;
 
-  navigator.current.setCurrentContext = setCurrentContext;
+    let action = 'push';
+    if (routes.current?.length > (state?.routes?.length ?? 0)) {
+      action = 'back';
+    }
+    onScreenNavigated(preScreenName, screenName, action);
+    maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+    routes.current = state?.routes;
+  };
+
+  /**
+   * onReady
+   */
+  const onReady = () => {
+    isReady.current = true;
+    routes.current = navigationRef.current?.getRootState?.()?.routes;
+    maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+      onScreenNavigated(data?.screenName, screen?.name, 'push');
+      maxApi?.setObserver('CURRENT_SCREEN', {
+        screenName: screen?.name,
+      });
+    });
+  };
 
   return (
-    <SafeAreaProvider>
-      <MiniAppContext.Provider
-        value={{
-          ...context,
-          ...currentContext,
-        }}>
-        <ApplicationContext.Provider
-          value={{
-            navigator: navigator.current,
-            theme: {
-              ...theme,
-              colors: {
-                ...theme.colors,
-                gradient: headerGradient,
+    <ApplicationContext.Provider
+      value={{
+        navigator: navigator.current,
+        theme: {
+          ...theme,
+          colors: {
+            ...theme.colors,
+            gradient: headerGradient,
+          },
+          assets: {
+            ...theme.assets,
+            headerBackground,
+          },
+        },
+        showGrid,
+        translate,
+      }}>
+      <NavigationIndependentTree>
+        <ReactNavigationContainer
+          theme={{
+            dark: false,
+            colors: {
+              primary: theme.colors.primary,
+              background: theme.colors.background.default,
+              card: theme.colors.background.surface,
+              text: theme.colors.text.default,
+              border: theme.colors.border.default,
+              notification: theme.colors.error.primary,
+            },
+            fonts: {
+              regular: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
               },
-              assets: {
-                ...theme.assets,
-                headerBackground,
+              medium: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
+              },
+              bold: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
+              },
+              heavy: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
               },
             },
-            showGrid,
-            translate,
-          }}>
-          <ReactNavigationContainer
-            theme={{
-              ...theme,
-              colors: {
-                ...theme.colors,
-                background: theme.colors.background.default,
-                card: theme.colors.background.surface,
-                text: theme.colors.text.default,
-                border: theme.colors.border.default,
-                notification: theme.colors.error.primary,
+          }}
+          ref={navigationRef}
+          onReady={onReady}
+          onStateChange={onStateChange}>
+          <Stack.Navigator
+            initialRouteName="Stack"
+            screenOptions={{
+              headerMode: 'screen',
+              gestureEnabled: false,
+              headerTitleAlign: 'left',
+              headerTintColor: theme.colors.text.default,
+              headerStyle: {
+                height: 52 + insets.top,
               },
-            }}
-            ref={navigationRef}
-            onReady={() => {
-              isReady.current = true;
-              routes.current = navigationRef.current?.getRootState?.()?.routes;
-              maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-                onScreenNavigated(data?.screenName, screen?.name, 'push');
-                maxApi?.setObserver('CURRENT_SCREEN', {
-                  screenName: screen?.name,
-                });
-              });
-            }}
-            onStateChange={state => {
-              const lastedRoute: any =
-                state?.routes?.[state?.routes?.length - 1];
-              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 = 'push';
-              if (routes.current?.length > (state?.routes?.length ?? 0)) {
-                action = 'back';
-              }
-              onScreenNavigated(preScreenName, screenName, action);
-              maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-              routes.current = state?.routes;
-            }}
-            independent={true}>
-            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-              <Stack.Screen
-                name="Stack"
-                component={StackScreen}
-                initialParams={{screen, initialParams}}
-                options={{
-                  ...getStackOptions(),
-                  ...(options as StackNavigationOptions),
-                }}
-              />
-              <Stack.Screen
-                name="Dialog"
-                component={StackScreen}
-                options={getDialogOptions()}
-                initialParams={{screen}}
-              />
-              <Stack.Screen
-                name="Modal"
-                component={ModalScreen}
-                options={getModalOptions()}
-                initialParams={{screen}}
-              />
-            </Stack.Navigator>
-          </ReactNavigationContainer>
-        </ApplicationContext.Provider>
-      </MiniAppContext.Provider>
-    </SafeAreaProvider>
+            }}>
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{
+                ...getStackOptions(),
+                ...(options as StackNavigationOptions),
+              }}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </NavigationIndependentTree>
+    </ApplicationContext.Provider>
   );
 };
 

package/Application/StackScreen.tsx

@@ -1,10 +1,17 @@
-import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
-import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react';
 import {Alert, InteractionManager} from 'react-native';
-import {ScreenParams} from './types';
+import {useHeaderHeight} from '@react-navigation/elements';
+import {ScreenTrackingParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
+import {version} from '../package.json';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -13,7 +20,7 @@ const runAfterInteractions = InteractionManager.runAfterInteractions;
  * @param props
  * @constructor
  */
-const StackScreen: React.FC<ScreenParams> = props => {
+const StackScreen: React.FC<any> = props => {
   const {showGrid, navigator} = useContext(ApplicationContext);
   const tracking = useRef<any>({
     timeoutLoad: undefined,
@@ -27,11 +34,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
     releaseInteraction: undefined,
     timeLoad: 0,
     timeInteraction: 0,
+    widgets: [],
+    params: undefined,
   });
+  const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
   const lastElement = useRef<any>(null);
   const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation, context);
+  const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
 
   const data = {
@@ -52,56 +62,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
     if (options) {
       navigation.setOptions(options);
     }
-  }, [options]);
-
-  /**
-   * tracking for screen
-   */
-  useEffect(() => {
-    if (['Invalid', 'screen'].includes(screenName)) {
-      navigator?.maxApi?.showPopup?.('notice', {
-        title: 'Invalid screen name',
-        message:
-          'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',
-      });
-    }
-
-    const subscription = props.navigation?.addListener?.('focus', () => {
-      navigator?.maxApi?.of?.({screenName});
-      navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-    });
-    navigator?.maxApi?.startTraceScreenLoad?.(
-      screenName,
-      context,
-      (data: any) => {
-        tracking.current.traceIdLoad = data?.traceId;
-      }
-    );
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      context,
-      (data: any) => {
-        tracking.current.traceIdInteraction = data?.traceId;
-      }
-    );
-
-    tracking.current.timeoutTracking = setTimeout(() => {
-      onScreenLoad();
-      onScreenInteraction();
-    }, 5000);
-
-    return () => {
-      onScreenLoad();
-      onScreenInteraction();
-      clearTimeout(tracking.current.timeoutTracking);
-      subscription?.();
-    };
-  }, []);
+  }, [navigation, options]);
 
   /**
    * tracking for screen load
    */
-  const onScreenLoad = () => {
+  const onScreenLoad = useCallback(() => {
     if (!tracking.current?.releaseLoad) {
       let timeLoad = tracking.current.timeLoad;
       if (timeLoad === 0) {
@@ -114,11 +80,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
         componentName: 'Screen',
         state: 'load',
         duration: timeLoad,
+        widgets: tracking.current.widgets,
+        params: tracking.current.params,
+        version: version,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
         {value: timeLoad / 1000},
-        null
+        null,
       );
       tracking.current.releaseLoad = true;
 
@@ -136,16 +105,16 @@ const StackScreen: React.FC<ScreenParams> = props => {
       ) {
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(lastElement.current?.children?.current)
+          JSON.stringify(lastElement.current?.children?.current),
         );
       }
     }
-  };
+  }, [context, navigator?.maxApi, screenName]);
 
   /**
    * tracking for screen load
    */
-  const onScreenInteraction = () => {
+  const onScreenInteraction = useCallback(() => {
     if (!tracking.current?.releaseInteraction) {
       let timeLoad = tracking.current.timeLoad;
       if (timeLoad === 0) {
@@ -162,11 +131,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'interaction',
         duration: tracking.current.timeInteraction - timeLoad,
         totalDuration: tracking.current.timeInteraction,
+        params: tracking.current.params,
+        version: version,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdInteraction,
         {value: tracking.current.timeInteraction / 1000},
-        null
+        null,
       );
       tracking.current.releaseInteraction = true;
 
@@ -179,13 +150,88 @@ const StackScreen: React.FC<ScreenParams> = props => {
         type: 'ERROR',
       });
     }
-  };
+  }, [context, navigator?.maxApi, screenName]);
+
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    if (['Invalid', 'screen'].includes(screenName)) {
+      navigator?.maxApi?.showPopup?.('notice', {
+        title: 'Invalid screen name',
+        message:
+          'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',
+      });
+    }
+
+    const subscription = props.navigation?.addListener?.('focus', () => {
+      navigator?.maxApi?.of?.({screenName});
+      navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+    });
+    navigator?.maxApi?.startTraceScreenLoad?.(
+      screenName,
+      context,
+      (item: any) => {
+        tracking.current.traceIdLoad = item?.traceId;
+      },
+    );
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      context,
+      (item: any) => {
+        tracking.current.traceIdInteraction = item?.traceId;
+      },
+    );
+
+    tracking.current.timeoutTracking = setTimeout(() => {
+      onScreenLoad();
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+      subscription?.();
+    };
+  }, [
+    context,
+    navigator?.maxApi,
+    onScreenInteraction,
+    onScreenLoad,
+    props.navigation,
+    screenName,
+  ]);
 
   return (
     <ScreenContext.Provider
       value={{
         screenName,
-        onElementLoad: (data: any) => {
+        onElementLoad: (item: any) => {
+          /**
+           * widget handle
+           */
+          if (item?.componentName === 'Widget') {
+            const index = widgets.current.findIndex(
+              (e: any) => e.componentId === item.componentId,
+            );
+            const time = Date.now() - tracking.current.startTime;
+            if (index === -1) {
+              widgets.current.push({
+                componentId: item.componentId,
+                appId: item.params?.appId,
+                code: item.params?.code,
+                start: time,
+              });
+            } else {
+              const exist = widgets.current[index];
+              widgets.current[index] = {
+                ...exist,
+                end: time,
+                duration: time - exist.start,
+              };
+            }
+            return;
+          }
           /**
            * tracking for element screen load
            */
@@ -200,14 +246,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
           /**
            * support for debug last element
            */
-          if (data?.componentName) {
-            lastElement.current = data;
+          if (item?.componentName) {
+            lastElement.current = item;
           }
 
           /**
            * for stop tracking when user interaction
            */
-          if (data?.interaction) {
+          if (item?.interaction) {
             onScreenLoad();
             onScreenInteraction();
           }
@@ -216,6 +262,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
            */
           tracking.current.timeoutLoad = setTimeout(() => {
             const time = tracking.current.endTime - tracking.current.startTime;
+            tracking.current.widgets = widgets.current;
+
             if (tracking.current.timeLoad === 0) {
               tracking.current.timeLoad = time;
             }
@@ -224,6 +272,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
             onScreenInteraction();
           }, 2000);
         },
+        onSetParams: (data: ScreenTrackingParams) => {
+          tracking.current.params = data;
+        },
       }}>
       <Component heightHeader={heightHeader} {...data} />
       {showGrid && <GridSystem />}

package/Application/index.ts

@@ -16,15 +16,17 @@ import {setAutomationID} from './utils';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
-const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const SkeletonContext = createContext({loading: false});
 
 export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
   ComponentContext,
+  SkeletonContext,
   NavigationContainer,
   Localize,
   HeaderTitle,

package/Application/types.ts

@@ -117,6 +117,11 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
+export type ScreenTrackingParams = {
+  value1?: any;
+  value2?: any;
+};
+
 export type ModalParams = {
   [key: string]: any;
   screen: React.ComponentType;

package/Application/utils.tsx

@@ -55,7 +55,8 @@ const getModalOptions = (): StackNavigationOptions => {
     headerBackground: undefined,
     cardStyle: {backgroundColor: 'transparent'},
     cardOverlayEnabled: true,
-    animationEnabled: false,
+    animation: 'none',
+    presentation: 'transparentModal',
   };
 };
 
@@ -64,7 +65,7 @@ const getModalOptions = (): StackNavigationOptions => {
  */
 const getOptions = (
   params: NavigationOptions,
-  animatedValue?: Animated.Value
+  animatedValue?: Animated.Value,
 ) => {
   let options: StackNavigationOptions = {};
 
@@ -126,7 +127,7 @@ const getOptions = (
 
 const exportHeaderTitle = (
   params: NavigationOptions,
-  animatedValue?: Animated.Value
+  animatedValue?: Animated.Value,
 ): StackNavigationOptions => {
   if (typeof params.headerTitle === 'object') {
     return {