@momo-kits/foundation 0.81.6 → 0.81.7-beta.2

package/Application/Components.tsx

@@ -1,6 +1,7 @@
 import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Animated,
+  BackHandler,
   DeviceEventEmitter,
   StatusBar,
   StyleSheet,
@@ -149,8 +150,29 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   accessibilityLabel = '',
 }) => {
   const {navigator} = useContext(ApplicationContext);
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBack,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
+    const currentRoute = navigator?.ref?.current.getCurrentRoute();
+
+    if (navigator?.trackingInfo) {
+      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        ...navigator?.trackingInfo,
+        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      });
+    }
+
     if (canGoBack) {
       if (preventBack) {
         navigator?.showModal({
@@ -176,6 +198,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
     onPressLeftHeader?.();
+    return true;
   };
 
   return (
@@ -308,9 +331,25 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   }
 
   useEffect(() => {
-    navigator?.getToolkit().then((toolConfig: any) => {
-      setToolConfig(toolConfig);
-    });
+    if (navigator?.toolkitConfig) {
+      setToolConfig(navigator?.toolkitConfig);
+    } else {
+      navigator?.requestApi('getToolkit', [undefined], (result: boolean) => {
+        if (result) {
+          navigator?.requestApi(
+            'getToolkitConfig',
+            [undefined],
+            (config: any) => {
+              navigator.toolkitConfig = {
+                ...config?.utilityToolConfig,
+                appCode: config?.appCode,
+              };
+              setToolConfig(navigator?.toolkitConfig);
+            },
+          );
+        }
+      });
+    }
   }, []);
 
   useEffect(() => {

package/Application/ModalScreen.tsx

@@ -26,6 +26,9 @@ import {
 import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
+  /**
+   * dismiss callback when modal | bottom sheet dismissed
+   */
   useEffect(() => {
     return () => {
       props.route.params?.onDismiss?.();
@@ -40,7 +43,7 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible}: ModalParams = props.route.params;
+  const {screen, barrierDismissible, modalName} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -50,6 +53,42 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    if (navigator?.trackingInfo) {
+      const TRIGGER_ID = '111012100000000000';
+      const navigationRoutes = props.navigation.getState()?.routes || [];
+      const routesLength = navigationRoutes.length;
+      let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      }
+      const error_code = (screen as Function)?.()?.props?.information;
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        ...navigator?.trackingInfo,
+        screen_name,
+        trigger_id: '111012100000000000',
+        component_type: 'popup',
+        component_name: modalName,
+        error_code,
+      });
+
+      return () => {
+        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+          ...navigator?.trackingInfo,
+          screen_name,
+          trigger_id: '111154100000000001',
+          component_type: 'popup',
+          component_name: modalName,
+          error_code,
+          icon_name: 'close',
+        });
+      };
+    }
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -181,6 +220,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
+              trackingInfo={navigator?.trackingInfo}
+              maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
                 assets: {...theme.assets, headerBackground: undefined},
@@ -223,7 +264,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       icon="24_navigation_close"
                       backgroundColor="transparent"
                       useBorder={false}
-                      onPress={bottomSheetRef.current?.dismiss}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
                       accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>

package/Application/Navigation.ts

@@ -14,6 +14,10 @@ class Navigation {
     this.theme = theme;
   }
 
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
   private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.({}) as React.ReactElement;
@@ -24,14 +28,21 @@ class Navigation {
         );
       }
     }
+
+    if (params.headerLeft) {
+      console.warn('headerLeft not allow override render by design system!');
+      delete params.headerLeft;
+    }
+
     return params;
   };
 
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
   setOptions = (params: NavigationOptions) => {
-    if (__DEV__) {
-      params = this.filterParams(params);
-    }
-    params = getOptions(params, this.theme);
+    params = getOptions(this.filterParams(params), this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -23,12 +23,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  trackingInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
   const [language, setLanguage] = useState<'vi' | 'en'>('vi');
 
+  /**
+   * engine only shake to enable grid view
+   */
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
       'onChangeGrid',
@@ -37,10 +41,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       },
     );
     return () => {
-      subscription.remove();
+      subscription?.remove?.();
     };
   }, []);
 
+  /**
+   * handle mini language & listen change
+   */
   useEffect(() => {
     maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
       setLanguage(lang);
@@ -53,8 +60,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
+  navigator.current.trackingInfo = trackingInfo;
 
+  /**
+   * translate
+   * @param key
+   */
   const translate = (key: string) => {
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},

package/Application/Navigator.ts

@@ -4,37 +4,62 @@ import {
   HeaderToolkitProps,
   ModalParams,
   ScreenParams,
+  TrackingInfo,
 } from './types';
 
 class Navigator {
   ref?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
+  trackingInfo?: TrackingInfo;
 
   constructor(navigation: any) {
     this.ref = navigation;
   }
 
+  /**
+   * push new stack screen
+   * @param params
+   */
   push = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.push('Stack', params));
   };
 
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
   replace = (params: ScreenParams) => {
     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));
   };
 
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
   present = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.push('Dialog', params));
   };
 
+  /**
+   * show a modal popup
+   * @param params
+   */
   showModal = (params: ModalParams) => {
     this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
+  /**
+   * show a bottom sheet
+   * @param params
+   */
   showBottomSheet = (params: BottomSheetParams) => {
     this.ref.current.dispatch(
       StackActions.push('Modal', {
@@ -44,10 +69,17 @@ class Navigator {
     );
   };
 
+  /**
+   * pop all screen route
+   */
   popToTop = () => {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
   reset = (params: ScreenParams) => {
     this.ref.current.dispatch(
       CommonActions.reset({
@@ -63,36 +95,17 @@ class Navigator {
     );
   };
 
+  /**
+   * request max api for mini app
+   * @param func
+   * @param args
+   * @param callback
+   */
   requestApi = (func: any, args: any = [], callback: any) => {
     if (this.maxApi) {
       this.maxApi[func]?.(...args, callback);
-    } else {
-      const instance: any = global;
-      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
     }
   };
-
-  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
-    return new Promise(resolve => {
-      if (this.toolkitConfig) {
-        resolve(this.toolkitConfig);
-        return;
-      }
-      this.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
-            this.toolkitConfig = {
-              ...config?.utilityToolConfig,
-              appCode: config?.appCode,
-            };
-            resolve(this.toolkitConfig);
-          });
-        } else {
-          resolve(undefined);
-        }
-      });
-    });
-  };
 }
 
 export default Navigator;

package/Application/StackScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
@@ -6,7 +6,7 @@ import {GridSystem} from '../Layout';
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -16,12 +16,36 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
+  /**
+   * set options for screen
+   */
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }
   }, [options]);
 
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    if (navigator?.trackingInfo) {
+      const navigationRoutes = props.navigation.getState()?.routes || [];
+      const routesLength = navigationRoutes.length;
+      let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        pre_screen_name =
+          navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      }
+      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+        ...navigator?.trackingInfo,
+        screen_name: Component.name,
+        pre_screen_name,
+        trigger_id: '111378000000000000',
+      });
+    }
+  }, []);
+
   return (
     <>
       <Component {...params} />

package/Application/types.ts

@@ -79,12 +79,20 @@ export type LocalizationObject = {
   };
 };
 
+export type TrackingInfo = {
+  [key: string]: any;
+  feature_code: string;
+  app_id: string;
+  miniapp_version: number;
+};
+
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
   localization?: LocalizationObject;
+  trackingInfo?: TrackingInfo;
 };
 
 export type NavigationScreenProps = {
@@ -97,10 +105,12 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
+  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
+  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }

package/Application/utils.tsx

@@ -13,6 +13,9 @@ import {
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
+/**
+ * default options for stack screen
+ */
 const getStackOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
@@ -24,6 +27,9 @@ const getStackOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * default options for dialog screen
+ */
 const getDialogOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
@@ -35,6 +41,9 @@ const getDialogOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * default options for modal screen
+ */
 const getModalOptions = (): StackNavigationOptions => {
   return {
     headerShown: false,
@@ -60,6 +69,9 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * build react-navigation options
+ */
 const getOptions = (params: NavigationOptions, theme: Theme) => {
   let options = {};
 

package/Layout/Card.tsx

@@ -145,6 +145,7 @@ const Card: React.FC<CardProps> = ({
         accessibilityLabel={`Card`}
         style={[
           style,
+          styles.protectedStyle,
           styles.card,
           {
             width: widthSection,

package/Layout/ItemSectionList.tsx

@@ -0,0 +1,45 @@
+import React, {FC, useContext} from 'react';
+import {SectionList, SectionListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemSectionListProps extends SectionListProps<any> {
+  /**
+   * Require key support number columns change grid system
+   */
+
+  key: string;
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemSectionList: FC<ItemSectionListProps> = ({
+  key,
+  renderItem,
+  widthSpan,
+  style,
+  contentContainerStyle,
+  ...props
+}) => {
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const _renderItem = (item: any) => {
+    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+  };
+
+  return (
+    <SectionList
+      {...props}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+    />
+  );
+};
+
+export default ItemSectionList;

package/Layout/Section.tsx

@@ -22,11 +22,6 @@ export interface SectionProps extends ViewProps {
    */
   useMargin?: boolean;
 
-  /**
-   * Optional. Background color for the Section component.
-   */
-  backgroundColor?: string;
-
   /**
    * Optional. Background image for the Section component.
    */
@@ -36,8 +31,8 @@ export interface SectionProps extends ViewProps {
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
-  backgroundColor,
   backgroundImage,
+  style,
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -156,13 +151,16 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         accessibilityLabel={`Section`}
-        style={{
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          backgroundColor: backgroundColor,
-        }}>
+        style={[
+          style,
+          styles.protectedStyle,
+          {
+            width: widthSection,
+            marginHorizontal: gridContext.margin,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Layout/styles.ts

@@ -45,19 +45,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
-    paddingTop: undefined,
-    paddingBottom: undefined,
-    paddingLeft: undefined,
-    paddingRight: undefined,
-    paddingVertical: undefined,
-    paddingHorizontal: undefined,
     padding: 12,
-    margin: undefined,
-    marginTop: undefined,
-    marginBottom: undefined,
-    marginLeft: undefined,
-    marginRight: undefined,
-    marginVertical: undefined,
   },
   item: {
     overflow: 'hidden',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.6",
+    "version": "0.81.7-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -38,6 +38,7 @@
         "metro-react-native-babel-preset": "^0.64.0",
         "react-test-renderer": "17.0.1",
         "typescript": "^4.0.3",
+        "@momo-platform/versions": "4.1.11",
         "react-scanner": "^1.1.0"
     },
     "author": "@momo-kits/foundation",