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

package/Application/BottomSheet.tsx

@@ -50,7 +50,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useKeyboardAvoidingView = true,
     useScrollOverflow = false,
     keyboardVerticalOffset,
-    useDivider,
+    useDivider = true,
   }: BottomSheetParams = props.route.params;
 
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
@@ -218,7 +218,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     return (
       <View
         style={{
-          backgroundColor: 'red',
+          backgroundColor,
           borderTopLeftRadius: Radius.M,
           borderTopRightRadius: Radius.M,
         }}

package/Application/Components/HeaderRight.tsx

@@ -55,6 +55,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   useShortcut = false,
   useMore = false,
   tools = [],
+  useCloseIcon = false,
 }) => {
   const {navigator} = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -104,14 +105,22 @@ const HeaderToolkitAction: React.FC<any> = ({
   );
 
   const onDismiss = () => {
-    if (isWhiteList) {
-      navigator?.maxApi?.dispatchFunction?.('dismissAll');
-    } else {
+    if (useCloseIcon) {
       navigator?.maxApi?.dispatchFunction?.(
         'dismiss',
         navigator?.dismissData,
         undefined
       );
+    } else {
+      if (isWhiteList) {
+        navigator?.maxApi?.dispatchFunction?.('dismissAll');
+      } else {
+        navigator?.maxApi?.dispatchFunction?.(
+          'dismiss',
+          navigator?.dismissData,
+          undefined
+        );
+      }
     }
   };
 
@@ -260,6 +269,12 @@ 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 && (
@@ -296,13 +311,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           onPress={onClose}
           style={styles.toolkitButton}
           hitSlop={{top: 7, bottom: 7, left: 0, right: 7}}>
-          <Icon
-            color={tintColor}
-            source={
-              isWhiteList ? '16_basic_home' : '16_navigation_close_circle'
-            }
-            size={20}
-          />
+          <Icon color={tintColor} source={iconRight} size={20} />
         </TouchableOpacity>
       </View>
     </View>

package/Application/ModalScreen.tsx

@@ -96,7 +96,7 @@ const Modal: React.FC<ModalParams> = props => {
       style={StyleSheet.absoluteFillObject}>
       <KeyboardAvoidingView
         style={Styles.flexCenter}
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
         <Pressable
           style={StyleSheet.absoluteFillObject}
           onPress={() => onDismiss(undefined, barrierDismissible)}>

package/Application/StackScreen.tsx

@@ -26,6 +26,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     traceIdInteraction: undefined,
     releaseLoad: undefined,
     releaseInteraction: undefined,
+    releaseUserInteraction: undefined,
     timeLoad: 0,
     timeInteraction: 0,
     widgets: [],
@@ -183,6 +184,36 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   };
 
+  /**
+   * tracking for first interaction by user
+   */
+  const onFirstInteraction = (action: string) => {
+    if (!tracking.current?.releaseUserInteraction) {
+      let timeLoad = tracking.current.timeLoad;
+      if (timeLoad === 0) {
+        timeLoad = tracking.current.endTime - tracking.current.startTime;
+      }
+      context?.autoTracking?.({
+        ...context,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        duration: timeLoad,
+        action,
+      });
+      tracking.current.releaseUserInteraction = true;
+
+      /**
+       * debug
+       */
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${screenName} user_interaction ${timeLoad}`,
+        type: 'ERROR',
+      });
+    }
+  };
+
   return (
     <ScreenContext.Provider
       value={{
@@ -237,6 +268,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
           if (data?.interaction) {
             onScreenLoad();
             onScreenInteraction();
+            onFirstInteraction(data?.action);
           }
           /**
            * timeout for handle tracking screen

package/Application/index.ts

@@ -21,6 +21,9 @@ 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});
+const TrackingScopeContext = createContext<{scopeName?: string}>({
+  scopeName: undefined,
+});
 
 export {
   ApplicationContext,
@@ -39,4 +42,5 @@ export {
   HeaderAnimated,
   setAutomationID,
   useComponentId,
+  TrackingScopeContext,
 };

package/Application/types.ts

@@ -192,6 +192,7 @@ export type HeaderRightToolkit = {
   tools?: ToolGroup[];
   preventClose?: PopupNotifyProps;
   useMore?: boolean;
+  useCloseIcon?: boolean;
 };
 
 export interface HeaderBackProps extends NavigationButtonProps {

package/Application/utils.tsx

@@ -13,7 +13,7 @@ import {
 import {HeaderTitleProps, NavigationOptions} from './types';
 import {Colors} from '../Consts';
 import {Animated, Platform} from 'react-native';
-import {MiniAppContext, ScreenContext} from './index';
+import {MiniAppContext, ScreenContext, TrackingScopeContext} from './index';
 
 /**
  * default options for stack screen
@@ -173,12 +173,13 @@ const setAutomationID = (accessibilityLabel = '') => {
 const useComponentId = (componentName: string, accessibilityLabel?: string) => {
   const app = useContext<any>(MiniAppContext);
   const screen = useContext<any>(ScreenContext);
+  const {scopeName} = useContext<any>(TrackingScopeContext);
 
   const componentId = useMemo(() => {
     if (accessibilityLabel) {
       return accessibilityLabel;
     }
-    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+    return `${app.appId}/${app.code}/${screen.screenName}/${scopeName}/${componentName}`;
   }, [componentName, accessibilityLabel, app, screen]);
 
   return {componentId};

package/Layout/TrackingScope.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {TrackingScopeContext} from '../Application';
+
+const TrackingScope = ({
+  scopeName,
+  children,
+}: {
+  scopeName: string;
+  children: any;
+}) => {
+  return (
+    <TrackingScopeContext.Provider value={{scopeName}}>
+      {children}
+    </TrackingScopeContext.Provider>
+  );
+};
+
+export {TrackingScope};

package/Layout/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.121.3-beta.6",
+  "version": "0.121.3-beta.7",
   "minimumDeployTarget": 32,
   "deploymentTarget": 121,
   "description": "React Native Component Kits",