@momo-kits/foundation 0.81.7-beta.5 → 0.81.8

package/Application/Components.tsx

@@ -23,8 +23,6 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const TRIGGER_ID = "'111154000000000000";
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -151,8 +149,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   backgroundColor,
   accessibilityLabel = '',
 }) => {
-  const {navigator, appInfo} = useContext(ApplicationContext);
-  const screen_name = navigator?.ref?.current?.getCurrentRoute().name;
+  const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
@@ -165,12 +162,15 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
+    const currentRoute = navigator?.ref?.current.getCurrentRoute();
 
-    if (appInfo) {
+    if (navigator?.trackingInfo) {
       navigator?.maxApi?.trackEvent('service_icon_clicked', {
-        ...appInfo,
-        screen_name,
-        trigger_id: TRIGGER_ID,
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
+        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+        trigger_id: '111154000000000000',
         icon_name: 'back',
       });
     }
@@ -194,6 +194,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       } else {
         navigator?.ref.current?.goBack();
       }
+    } else if (navigator?.maxApi) {
+      navigator?.maxApi?.dismiss(navigator.dismissData);
     } else {
       const currentTime = new Date().getTime();
       const requestId = `navigationBackPress#${currentTime}`;
@@ -333,9 +335,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?.();
@@ -39,10 +42,8 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const TRIGGER_ID = '111012100000000000';
-  const {theme, navigator, appInfo} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalName}: ModalParams =
-    props.route.params;
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {screen, barrierDismissible, modalName} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -52,35 +53,43 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
-  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;
-
+  /**
+   * tracking
+   */
   useEffect(() => {
-    navigator?.maxApi?.trackEvent('service_component_displayed', {
-      ...appInfo,
-      screen_name,
-      trigger_id: TRIGGER_ID,
-      component_type: 'popup',
-      component_name: modalName,
-      error_code,
-    });
-
-    return () => {
-      navigator?.maxApi?.trackEvent('service_icon_clicked', {
-        ...appInfo,
+    if (navigator?.trackingInfo) {
+      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', {
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
         screen_name,
-        trigger_id: '111154100000000001',
+        trigger_id: '111012100000000000',
         component_type: 'popup',
         component_name: modalName,
         error_code,
-        icon_name: 'close',
       });
-    };
+
+      return () => {
+        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+          feature_code: navigator?.trackingInfo?.code,
+          app_id: navigator?.trackingInfo?.appId,
+          miniapp_version: navigator?.trackingInfo?.buildNumber,
+          screen_name,
+          trigger_id: '111154100000000001',
+          component_type: 'popup',
+          component_name: modalName,
+          error_code,
+          icon_name: 'close',
+        });
+      };
+    }
   }, []);
 
   const onDismiss = () => {
@@ -123,7 +132,7 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
-  const {theme, navigator, appInfo} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
   const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
@@ -214,7 +223,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
-              appInfo={appInfo}
+              trackingInfo={navigator?.trackingInfo}
               maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
@@ -258,7 +267,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,13 +23,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  appInfo,
+  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',
@@ -38,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);
@@ -54,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},
@@ -74,7 +88,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             language,
             translate,
-            appInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/Navigator.ts

@@ -4,37 +4,63 @@ import {
   HeaderToolkitProps,
   ModalParams,
   ScreenParams,
+  TrackingInfo,
 } from './types';
 
 class Navigator {
   ref?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
+  trackingInfo?: TrackingInfo;
+  dismissData?: any;
 
   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 +70,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 +96,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

@@ -4,11 +4,9 @@ import Navigation from './Navigation';
 import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 
-const TRIGGER_ID = '111378000000000000';
-
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -18,30 +16,38 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
-  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;
-  }
+  /**
+   * set options for screen
+   */
+  useLayoutEffect(() => {
+    if (options) {
+      navigation.setOptions(options);
+    }
+  }, [options]);
 
+  /**
+   * tracking for screen
+   */
   useEffect(() => {
-    if (appInfo) {
+    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', {
-        ...appInfo,
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
         screen_name: Component.name,
         pre_screen_name,
-        trigger_id: TRIGGER_ID,
+        trigger_id: '111378000000000000',
       });
     }
   }, []);
 
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [options]);
-
   return (
     <>
       <Component {...params} />

package/Application/types.ts

@@ -68,7 +68,6 @@ export type Context = {
   showGrid?: boolean;
   language?: 'vi' | 'en';
   translate?: (key: string) => string;
-  appInfo: MiniAppInfo;
 };
 
 export type LocalizationObject = {
@@ -80,11 +79,11 @@ export type LocalizationObject = {
   };
 };
 
-export type MiniAppInfo = {
-  feature_code: string;
-  app_id: string;
-  miniapp_version: number;
-  flow_partner_id?: string;
+export type TrackingInfo = {
+  [key: string]: any;
+  code: string;
+  appId: string;
+  buildNumber: number;
 };
 
 export type NavigationContainerProps = {
@@ -93,7 +92,7 @@ export type NavigationContainerProps = {
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
-  appInfo: MiniAppInfo;
+  trackingInfo?: TrackingInfo;
 };
 
 export type NavigationScreenProps = {
@@ -106,7 +105,6 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
-  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {

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/Consts/colors+spacing+radius.ts

@@ -153,9 +153,9 @@ const Spacing = {
   L: 16,
   XL: 24,
   XXL: 32,
-  Size48: 48,
-  Size56: 56,
-  Size64: 64,
+  Size3XL: 48,
+  Size4XL: 56,
+  Size5XL: 64,
 };
 
 const Radius = {

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,39 @@
+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> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemSectionList: FC<ItemSectionListProps> = ({
+  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/index.ts

@@ -6,6 +6,7 @@ import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
+import ItemSectionList from './ItemSectionList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -23,4 +24,5 @@ export {
   validateChildren,
   Item,
   ItemList,
+  ItemSectionList,
 };

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.7-beta.5",
+    "version": "0.81.8",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}