@momo-kits/foundation 0.89.6 → 0.92.1-tracking.12

package/Application/BottomTab.tsx

@@ -8,7 +8,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
-import {getStackOptions} from './utils';
+import {getAccessibilityID, getStackOptions} from './utils';
 import StackScreen from './StackScreen';
 
 const Tab = createBottomTabNavigator();
@@ -58,8 +58,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, []);
 
+  const accessibilityID = getAccessibilityID?.("tbr_main_bottom")
+
   return (
     <Tab.Navigator
+        {...accessibilityID}
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBarOptions={{
@@ -72,8 +75,10 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
+          const itemAccessibilityID = getAccessibilityID?.(`btn_tabbar_${item.name}`)
         return (
           <Tab.Screen
+              {...itemAccessibilityID}
             key={item.name}
             name={item.name}
             component={TabScreen}

package/Application/Components.tsx

@@ -29,6 +29,7 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {getAccessibilityID} from './utils';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -37,6 +38,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
+  accessibilityID = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -63,8 +65,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     }
   }, [badgeType, badgeValue]);
 
+  const ID = getAccessibilityID?.(accessibilityID);
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View {...ID} style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -90,6 +93,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      accessibilityLabel={getAccessibilityID('title_navigation_header')}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -166,10 +170,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
+        accessibilityID="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -243,7 +247,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="header_default_bold" color={tintColor}>
+        <Text
+          {...getAccessibilityID('title_navigation_header')}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -369,6 +376,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
+          accessibilityID="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -386,7 +394,6 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       );
   };
-
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
@@ -399,11 +406,15 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity onPress={onMore}>
+          <TouchableOpacity
+            {...getAccessibilityID?.('btn_navigation_more')}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity onPress={onClose}>
+          <TouchableOpacity
+            {...getAccessibilityID?.('btn_navigation_close')}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"

package/Application/ModalScreen.tsx

@@ -1,21 +1,29 @@
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
-import {Modalize} from 'react-native-modalize';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-
-import {ApplicationContext} from '.';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Icon} from '../Icon';
-import {Text} from '../Text';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
+import {Radius, Spacing, Styles} from '../Consts';
+import {
+  ApplicationContext,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
+import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   /**
@@ -84,88 +92,141 @@ const Modal: React.FC<ModalParams> = props => {
 };
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
-  const {
-    screen: Screen,
-    options,
-    footerComponent,
-    flatListProps,
-  }: BottomSheetParams = props.route.params;
-
+  const [keyboardSnap, setKeyboardSnap] = useState(0);
+  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
+    props.route.params;
+  const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
-
   const params = {
     ...props.route.params,
     navigation,
   };
 
   delete params.screen;
-  const modalizeRef = useRef<Modalize>(null);
+
+  const snapPoints = useMemo(() => {
+    if (snapPoint) {
+      const current = parseInt(snapPoint) + keyboardSnap * 100;
+      return [`${current}%`];
+    }
+    return ['50%', '70%', '90%'];
+  }, [keyboardSnap]);
+
+  const bottomSheetRef = useRef<any>(null);
+  const mountedRef = useRef(true);
+
+  let backgroundColor = theme.colors.background.default;
+  let bottomInset = keyboardSnap * Dimensions.get('window').height;
+  if (bottomInset > 16) {
+    bottomInset -= 16;
+  }
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
 
   useEffect(() => {
-    modalizeRef.current?.open();
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
+      setKeyboardSnap(
+        e.endCoordinates.height / Dimensions.get('window').height,
+      );
+      bottomSheetRef.current?.expand();
+    });
+
+    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardSnap(0);
+    });
+
+    bottomSheetRef.current?.present();
+    return () => {
+      mountedRef.current = false;
+      keyboardDidShow.remove();
+      keyboardDidHide.remove();
+    };
   }, []);
 
-  const handleClose = () => {
-    modalizeRef?.current?.close();
-  };
+  const backdropComponent = (backdropProps: any) => (
+    <BottomSheetBackdrop
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      {...backdropProps}
+    />
+  );
 
   return (
     <SafeAreaView style={Styles.flex}>
-      <Modalize
-        keyboardAvoidingOffset={-20}
-        adjustToContentHeight
-        closeOnOverlayTap
-        closeSnapPointStraightEnabled
-        onClosed={() => {
-          navigator?.pop();
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        onDismiss={() => {
+          if (mountedRef.current) {
+            navigator?.pop();
+          }
         }}
-        ref={modalizeRef}
-        withHandle={false}
-        flatListProps={flatListProps}
-        HeaderComponent={headerDefault(
-          options?.title ?? options?.customTitle?.title ?? '',
-          handleClose,
-        )}
-        FooterComponent={footerDefault(footerComponent)}>
-        <View style={styles.bottomSheetContainer}>
-          <Screen {...props} {...params} />
-        </View>
-      </Modalize>
+        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
+        handleComponent={null}
+        backdropComponent={backdropComponent}>
+        <BottomSheetView>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              maxApi={navigator?.maxApi}
+              theme={{
+                ...theme,
+                assets: {...theme.assets, headerBackground: undefined},
+              }}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{
+                  headerLeft: (props: any) => {
+                    if (props.canGoBack) {
+                      return <HeaderLeft {...props} useBorder={false} />;
+                    }
+                  },
+                  headerTitle: (props: any) => {
+                    return <HeaderTitle {...props} />;
+                  },
+                  headerTintColor: theme.colors.text.default,
+                  headerBackground: () => (
+                    <HeaderBackground backgroundColor={backgroundColor} />
+                  ),
+                  headerTransparent: false,
+                },
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      useBorder={false}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+            <View
+              style={{
+                height: Math.min(insets.bottom, 20),
+                backgroundColor: indicatorColor ?? backgroundColor,
+              }}
+            />
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
-const headerDefault = (title: string, onClose: () => void) => {
-  return (
-    <View style={styles.header}>
-      <Text
-        style={styles.textOption}
-        numberOfLines={2}
-        typography="header_default_bold">
-        {title ?? ''}
-      </Text>
-      <TouchableOpacity style={styles.buttonClose} onPress={onClose}>
-        <Icon source="navigation_close" />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const footerDefault = (footerComponent: React.ReactNode) => {
-  const insets = useSafeAreaInsets();
-  if (!footerComponent) return;
-  return (
-    <View
-      style={{
-        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
-        paddingHorizontal: 12,
-      }}>
-      {footerComponent}
-    </View>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -202,43 +263,6 @@ const styles = StyleSheet.create({
     height: 4,
     borderRadius: Radius.S,
   },
-  bottomSheetContainer: {
-    width: '100%',
-    backgroundColor: 'white',
-    borderTopRightRadius: 16,
-    borderTopLeftRadius: 16,
-  },
-  header: {
-    height: 50,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textOption: {
-    fontSize: 16,
-    color: '#303233',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    paddingHorizontal: 60,
-  },
-  imageOption: {
-    height: 1,
-    backgroundColor: '#ebebeb',
-    width: '100%',
-    position: 'absolute',
-    bottom: 1,
-  },
-  buttonClose: {
-    padding: 12,
-    position: 'absolute',
-    right: 0,
-  },
-  icon: {
-    width: 24,
-    height: 24,
-    tintColor: '#303233',
-    backgroundColor: 'red',
-  },
 });
 
 export default ModalScreen;

package/Application/NavigationContainer.tsx

@@ -1,4 +1,5 @@
 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,
@@ -22,6 +23,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
   const context = useContext(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
@@ -67,53 +69,55 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <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}}
-              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>
+      </BottomSheetModalProvider>
     </SafeAreaProvider>
   );
 };

package/Application/StackScreen.tsx

@@ -1,29 +1,53 @@
-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 {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeout = useRef<any>();
+
   const context = useContext(MiniAppContext);
 
-  const {screen: Component, options}: ScreenParams = props.route.params;
+  const {
+    screen: Component,
+    options,
+    initialParams,
+  }: ScreenParams = 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;
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
+    InteractionManager.runAfterInteractions(() => {
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${Component.name} screen_interaction_time ${
+          Date.now() - startTime.current
+        }`,
+      });
+    });
     if (options) {
       navigation.setOptions(options);
     }
@@ -33,6 +57,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
+    if (__DEV__) {
+      if (!Component.name || Component.name === 'screen') {
+        Alert.alert(
+          'Design system',
+          `Unvalidated screen name "${Component.name}" !`,
+        );
+      }
+    }
+
     const tracking = {
       ...context,
       screen_name: Component.name,
@@ -73,10 +106,35 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <>
-      <Component heightHeader={heightHeader} {...params} />
+    <ScreenContext.Provider
+      value={{
+        appId: context.appId,
+        code: context.code,
+        screenName: Component.name,
+        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: context.appId,
+                message: `${Component.name} screen_load_time ${timeLoad.current}`,
+              });
+            }
+          }, 1000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={() => {}}
+      />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/types.ts

@@ -1,4 +1,4 @@
-import {Animated, FlatListProps, ViewProps} from 'react-native';
+import {Animated, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
@@ -94,6 +94,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
+  initialParams: Record<string, any>;
   localization?: LocalizationObject;
 };
 
@@ -118,8 +119,8 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  footerComponent?: React.ReactNode;
-  flatListProps: FlatListProps<any>;
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  indicatorColor?: string;
 }
 
 export type NavigationButtonProps = {
@@ -129,6 +130,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
+  accessibilityID?: string;
 };
 
 export type PinnedToolType = {