@momo-kits/foundation 0.114.0-beta.13 → 0.114.0-beta.15

package/Application/Components/HeaderRight.tsx

@@ -12,8 +12,6 @@ import {PopupNotify} from '../../Popup';
 import {Tool, ToolGroup} from '../types';
 import {Icon} from '../../Icon';
 import {scaleSize, Text} from '../../Text';
-import {BottomSheetHelpCenter} from './BottomSheetHelpCenter';
-import {Image} from '../../Image';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 /**
@@ -56,7 +54,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
 }) => {
-  const {navigator, translate} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
@@ -134,7 +132,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         ),
       });
     } else {
-      navigator?.maxApi?.dispatchFunction?.('dismiss', undefined, undefined);
+      navigator?.maxApi?.dismiss?.(navigator?.dismissData);
     }
   };
 
@@ -174,8 +172,6 @@ const HeaderToolkitAction: React.FC<any> = ({
    * on press help center
    */
   const onPressHelpCenter = () => {
-    const appName = translate?.(context?.name);
-    const appDescription = translate?.(context?.description);
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
       ...context,
@@ -184,30 +180,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
 
-    navigator?.showBottomSheet({
-      options: {
-        header: (
-          <View style={[Styles.row, {paddingLeft: Spacing.M}]}>
-            <Image
-              source={{uri: context?.icon}}
-              style={{width: 40, height: 40, marginRight: Spacing.S}}
-            />
-            <View>
-              <Text typography={'label_default_medium'}>{appName}</Text>
-              {appDescription !== '{}' && (
-                <Text
-                  typography={'description_default_regular'}
-                  color={Colors.black_12}>
-                  {appDescription}
-                </Text>
-              )}
-            </View>
-          </View>
-        ),
-      },
-      surface: true,
-      screen: BottomSheetHelpCenter,
-    });
+    navigator?.maxApi?.dispatchFunction?.('showHelpCenter', context);
   };
 
   /**

package/Application/NavigationContainer.tsx

@@ -80,19 +80,33 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param preScreenName
    * @param screenName
    * @param action
+   * @param type
    */
   const onScreenNavigated = (
     preScreenName: string,
     screenName: string,
-    action: string
+    action: string,
+    type: 'Screen' | 'Modal' | 'BottomSheet'
   ) => {
-    console.log(preScreenName, screenName, action);
-    context?.autoTracking?.({
-      ...context,
+    console.log(preScreenName, screenName, action, type);
+
+    let data: any = {
       preScreenName,
       screenName,
-      componentName: 'Screen',
+      componentName: type,
       state: 'navigated',
+    };
+    if (type !== 'Screen') {
+      data = {
+        preScreenName,
+        screenName,
+        componentName: type,
+      };
+    }
+
+    context?.autoTracking?.({
+      ...context,
+      ...data,
       action,
     });
 
@@ -149,15 +163,19 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               isReady.current = true;
               routes.current = navigationRef.current?.getRootState?.()?.routes;
               maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-                onScreenNavigated(data?.screenName, screen?.name, 'push');
+                onScreenNavigated(
+                  data?.screenName,
+                  screen?.name,
+                  'push',
+                  'Screen'
+                );
                 maxApi?.setObserver('CURRENT_SCREEN', {
                   screenName: screen?.name,
                 });
               });
             }}
             onStateChange={state => {
-              const lastedRoute: any =
-                state?.routes?.[state?.routes?.length - 1];
+              const lastedRoute: any = state?.routes?.[state?.index];
               const oldRoute: any =
                 routes.current?.[routes.current?.length - 1];
               const lasted = lastedRoute?.params?.screen;
@@ -165,13 +183,35 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               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';
+              let action: string;
+              let type: 'Screen' | 'Modal' | 'BottomSheet';
+
+              if (lastedRoute?.name === 'Modal') {
+                type = 'Modal';
+                action = 'open';
+                if (lastedRoute?.params?.isBottomSheet) {
+                  type = 'BottomSheet';
+                }
+              } else if (oldRoute?.name === 'Modal') {
+                action = 'close';
+                type = 'Modal';
+                if (oldRoute?.params?.isBottomSheet) {
+                  type = 'BottomSheet';
+                }
+              } else {
+                type = 'Screen';
+                if (routes.current?.length > (state?.routes?.length ?? 0)) {
+                  action = 'back';
+                } else {
+                  action = 'push';
+                }
               }
-              onScreenNavigated(preScreenName, screenName, action);
-              maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+
+              onScreenNavigated(preScreenName, screenName, action, type);
+
               routes.current = state?.routes;
+              maxApi?.of?.({screenName});
+              maxApi?.setObserver('CURRENT_SCREEN', {screenName});
             }}
             independent={true}>
             <Stack.Navigator initialRouteName="Stack" headerMode="screen">

package/Application/StackScreen.tsx

@@ -6,6 +6,7 @@ import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
 import {version} from '../package.json';
+
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
 /**
@@ -69,10 +70,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
       });
     }
 
-    const subscription = props.navigation?.addListener?.('focus', () => {
-      navigator?.maxApi?.of?.({screenName});
-      navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-    });
     navigator?.maxApi?.startTraceScreenLoad?.(
       screenName,
       context,
@@ -97,7 +94,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
       onScreenLoad();
       onScreenInteraction();
       clearTimeout(tracking.current.timeoutTracking);
-      subscription?.();
     };
   }, []);
 
@@ -139,12 +135,11 @@ const StackScreen: React.FC<ScreenParams> = props => {
       });
       if (
         context.debugLastElement &&
-        lastElement.current?.children?.length > 0
+        lastElement.current?.children?.current?.length > 0
       ) {
-        console.log(JSON.stringify(lastElement.current));
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(lastElement.current?.children)
+          JSON.stringify(lastElement.current?.children?.current?.length)
         );
       }
     }

package/Input/Input.tsx

@@ -241,7 +241,7 @@ const Input = forwardRef(
           params,
           state: inputState,
         }}>
-        <View style={[style, styles.wrapper]} accessibilityLabel={componentId}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}

package/Tag/index.tsx

@@ -37,7 +37,7 @@ const Tag: FC<TagProps> = ({
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
   let sizeStyle = styles.mediumContainer;
-  const componentName = 'Title';
+  const componentName = 'Tag';
 
   const {componentId} = useComponentId(
     `${componentName}/${label}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.114.0-beta.13",
+  "version": "0.114.0-beta.15",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},