@momo-kits/foundation 0.89.5 → 0.92.1-rc.1

package/Application/NavigationContainer.tsx

@@ -1,10 +1,10 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -12,9 +12,19 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
+
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -23,10 +33,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
-  const context = useContext(MiniAppContext);
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-  const navigator = useRef(new Navigator(navigationRef));
+  const context = useContext<any>(MiniAppContext);
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
 
@@ -67,52 +79,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{
-            navigator: navigator.current,
-            config: config.current,
-            theme,
-            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={navigator.current?.ref}
-            independent={true}>
-            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-              <Stack.Screen
-                name="Stack"
-                component={StackScreen}
-                initialParams={{screen}}
-                options={{...getStackOptions(), ...options}}
-              />
-              <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>
-      </BottomSheetModalProvider>
+      <ApplicationContext.Provider
+        value={{
+          navigator: navigator.current,
+          config: config.current,
+          theme,
+          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={navigator.current?.ref}
+          onReady={() => {
+            isReady.current = true;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{...getStackOptions(), ...options}}
+            />
+            <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>
     </SafeAreaProvider>
   );
 };

package/Application/Navigator.ts

@@ -8,13 +8,15 @@ import {
 
 class Navigator {
   ref?: any;
+  isReady?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
   toolkitCallback?: (item: any) => void;
 
-  constructor(navigation: any) {
+  constructor(navigation: any, isReady: any) {
     this.ref = navigation;
+    this.isReady = isReady;
   }
 
   /**
@@ -22,7 +24,9 @@ class Navigator {
    * @param params
    */
   push = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Stack', params));
+    }
   };
 
   /**
@@ -30,14 +34,18 @@ class Navigator {
    * @param params
    */
   replace = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.replace('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.replace('Stack', params));
+    }
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
   pop = (count?: number) => {
-    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    }
   };
 
   /**
@@ -45,7 +53,9 @@ class Navigator {
    * @param params
    */
   present = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Dialog', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Dialog', params));
+    }
   };
 
   /**
@@ -53,7 +63,9 @@ class Navigator {
    * @param params
    */
   showModal = (params: ModalParams) => {
-    this.ref.current.dispatch(StackActions.push('Modal', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Modal', params));
+    }
   };
 
   /**
@@ -61,19 +73,23 @@ class Navigator {
    * @param params
    */
   showBottomSheet = (params: BottomSheetParams) => {
-    this.ref.current.dispatch(
-      StackActions.push('Modal', {
-        ...params,
-        isBottomSheet: true,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        }),
+      );
+    }
   };
 
   /**
    * pop all screen route
    */
   popToTop = () => {
-    this.ref.current.dispatch(StackActions.popToTop());
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
   };
 
   /**
@@ -82,12 +98,14 @@ class Navigator {
    * @param params
    */
   navigate = (name: string, params: any) => {
-    this.ref.current.dispatch(
-      CommonActions.navigate({
-        name,
-        params,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        }),
+      );
+    }
   };
 
   /**
@@ -95,18 +113,20 @@ class Navigator {
    * @param params
    */
   reset = (params: ScreenParams) => {
-    this.ref.current.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [
-          {
-            name: 'Stack',
-            key: `Stack_${new Date().getTime()}`,
-            params,
-          },
-        ],
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'Stack',
+              key: `Stack_${new Date().getTime()}`,
+              params,
+            },
+          ],
+        }),
+      );
+    }
   };
 
   /**

package/Application/StackScreen.tsx

@@ -1,29 +1,54 @@
-import React, {useContext, useEffect, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
+
+const {
+  ScreenContext,
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
-  const context = useContext(MiniAppContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeout = useRef<any>();
+
+  const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options}: ScreenParams = props.route.params;
+  const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
-  const params = {
+  const data = {
     ...props.route.params,
+    ...initialParams,
     navigation,
   };
 
-  delete params.screen;
+  delete data.screen;
+  delete data.initialParams;
+
+  const screenName = Component?.name || Component?.type?.name || '';
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
+    const host = (global as any).miniAppApi?.currentHost || {};
+    host.screenName = screenName;
+    InteractionManager.runAfterInteractions(() => {
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${
+          Date.now() - startTime.current
+        }`,
+      });
+    });
     if (options) {
       navigation.setOptions(options);
     }
@@ -33,9 +58,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
+    if (__DEV__) {
+      if (!screenName || screenName === 'screen') {
+        Alert.alert(
+          'Design system',
+          `Unvalidated screen name "${screenName}" !`,
+        );
+      }
+    }
+
     const tracking = {
       ...context,
-      screen_name: Component.name,
+      screen_name: screenName,
     };
 
     const routes = props.navigation.getState()?.routes || [];
@@ -45,26 +79,63 @@ const StackScreen: React.FC<ScreenParams> = props => {
       pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
 
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+    const params = {
       ...tracking,
       pre_screen_name,
       trigger_id: '111378000000000000',
+    };
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
+    navigator?.maxApi?.showToastDebug?.({
+      appId: `auto - ${context.appId}`,
+      message: `${screenName} service_frame_displayed`,
+      params,
     });
 
     return props.navigation.addListener('beforeRemove', () => {
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+      const params = {
         ...tracking,
         trigger_id: '111154000000000000',
         icon_name: 'back',
+      };
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} service_icon_clicked`,
+        params,
       });
     });
   }, []);
 
   return (
-    <>
-      <Component heightHeader={heightHeader} {...params} />
+    <ScreenContext.Provider
+      value={{
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        autoTracking: (data: any) => {
+          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
+        },
+        onElementLoad: () => {
+          endTime.current = Date.now();
+          clearTimeout(timeout.current);
+          timeout.current = setTimeout(() => {
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+              navigator?.maxApi?.showToastDebug?.({
+                appId: `auto - ${context.appId}`,
+                message: `${screenName} screen_load_time ${timeLoad.current}`,
+              });
+            }
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={() => {}}
+      />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/index.ts

@@ -4,10 +4,8 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderLeft,
   HeaderRightAction,
   HeaderTitle,
-  HeaderToolkitAction,
   NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
@@ -32,10 +30,8 @@ export {
   BottomTab,
   NavigationButton,
   HeaderTitle,
-  HeaderLeft,
   HeaderBackground,
   HeaderRightAction,
-  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,9 +1,9 @@
-import {Animated} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -95,6 +95,7 @@ export type NavigationContainerProps = {
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
+  initialParams?: any;
 };
 
 export type NavigationScreenProps = {
@@ -118,8 +119,8 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
+  footerComponent?: React.ReactNode;
+  flatListProps: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {
@@ -129,6 +130,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
+  accessibilityID?: string;
 };
 
 export type PinnedToolType = {
@@ -152,6 +154,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   toolkitParams?: {
     pinnedTool?: PinnedToolType;
     runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
   };
 }
 
@@ -183,11 +186,10 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;
@@ -208,6 +210,13 @@ export type BottomTabProps = {
     tabPress?: any;
     focus?: any;
   };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
 };
 
 export type AnimatedHeader = {

package/Application/utils.tsx

@@ -12,7 +12,8 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-
+import {Platform} from 'react-native';
+const isIOS = Platform.OS === 'ios';
 /**
  * default options for stack screen
  */
@@ -126,19 +127,14 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params.toolkitParams) {
     options = {
       ...options,
       headerRight: (props: any) => {
-        return (
-          <HeaderToolkitAction
-            preventBack={params.preventBack}
-            pinnedTool={params.toolkitParams?.pinnedTool}
-            runtimeTools={params.toolkitParams?.runtimeTools}
-            {...props}
-          />
-        );
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
       },
     };
+  }
 
   return {
     ...params,
@@ -146,4 +142,63 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const getAccessibilityID = (
+  key = '',
+  override: string | undefined = undefined,
+) => {
+  if (isIOS) {
+    return {
+      accessible: true,
+      testID: override || key,
+    };
+  } else {
+    return {
+      accessibilityLabel: override || key,
+    };
+  }
+};
+
+const formatComponentName = (word = '') => {
+  const accentsMap = {
+    a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
+    A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
+    e: 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
+    E: 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
+    i: 'í|ì|ỉ|ĩ|ị',
+    I: 'Í|Ì|Ỉ|Ĩ|Ị',
+    o: 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
+    O: 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
+    u: 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
+    U: 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
+    y: 'ý|ỳ|ỷ|ỹ|ỵ',
+    Y: 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
+    d: 'đ',
+    D: 'Đ',
+  };
+
+  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
+    const accents = new RegExp(accentGroup, 'g');
+    word = word.replace(accents, nonAccent);
+  }
+
+  word = word.replace(/\s+/g, '_').toLowerCase();
+
+  return word;
+};
+
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatComponentName,
+  formatNameLength,
+  getAccessibilityID,
+};

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xs_bold'}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>