@momo-kits/foundation 0.89.5 → 0.92.1-beta.16

package/Application/Components.tsx

@@ -15,7 +15,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
@@ -29,6 +29,11 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {getAccessibilityID} from './utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -37,6 +42,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
+  accessibilityID = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -64,7 +70,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View
+      {...getAccessibilityID(accessibilityID)}
+      style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -90,6 +98,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      {...getAccessibilityID('title_navigation_header')}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -104,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -120,13 +129,19 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const goBack = () => {
       const canGoBack = navigator?.ref.current?.canGoBack();
       if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current.getCurrentRoute();
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+        const params = {
           ...context,
           screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
           trigger_id: '111154000000000000',
           icon_name: 'back',
+        };
+        navigator?.maxApi?.showToastDebug?.({
+          appId: `auto - ${context.appId}`,
+          message: 'service_icon_clicked',
+          params,
         });
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       }
       if (canGoBack) {
         navigator?.ref.current?.goBack();
@@ -160,10 +175,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}
@@ -237,7 +252,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}>
@@ -284,10 +302,10 @@ const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
   runtimeTools = [],
-  preventBack,
+  preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
+  const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
@@ -331,15 +349,15 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
 
   const onClose = () => {
-    if (preventBack) {
+    if (preventClose) {
       navigator?.showModal({
         screen: () => (
           <PopupNotify
-            {...preventBack}
+            {...preventClose}
             primary={{
-              title: preventBack.primary.title,
+              title: preventClose.primary.title,
               onPress: () => {
-                preventBack?.primary.onPress();
+                preventClose?.primary.onPress();
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
@@ -363,6 +381,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
+          accessibilityID="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -380,7 +399,6 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       );
   };
-
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
@@ -393,11 +411,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"
@@ -415,7 +437,7 @@ const HeaderToolkitAction: React.FC<any> = ({
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
-  onPress,
+  children,
 }) => {
   const scale = animatedValue.interpolate({
     inputRange: [-300, 0, 300],
@@ -434,21 +456,21 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
 
   return (
-    <TouchableOpacity onPress={onPress}>
-      <Animated.View
-        style={{
-          height: 210,
-          opacity: opacity,
-          transform: [{scale}, {translateY}],
-        }}>
+    <Animated.View
+      style={{
+        height: 210,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      {children ?? (
         <Image
           source={{
             uri: image,
           }}
           style={{width: '100%', height: '100%'}}
         />
-      </Animated.View>
-    </TouchableOpacity>
+      )}
+    </Animated.View>
   );
 };
 

package/Application/ModalScreen.tsx

@@ -1,29 +1,21 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef} 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 {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+
+import {ApplicationContext} from '.';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
 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 => {
   /**
@@ -92,141 +84,88 @@ const Modal: React.FC<ModalParams> = props => {
 };
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
-  const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
-    props.route.params;
-  const Component = useRef(screen).current;
+  const {
+    screen: Screen,
+    options,
+    footerComponent,
+    flatListProps,
+  }: BottomSheetParams = props.route.params;
+
   const navigation = new Navigation(props.navigation, theme);
+
   const params = {
     ...props.route.params,
     navigation,
   };
 
   delete params.screen;
-
-  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;
-  }
+  const modalizeRef = useRef<Modalize>(null);
 
   useEffect(() => {
-    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();
-    };
+    modalizeRef.current?.open();
   }, []);
 
-  const backdropComponent = (backdropProps: any) => (
-    <BottomSheetBackdrop
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      {...backdropProps}
-    />
-  );
+  const handleClose = () => {
+    modalizeRef?.current?.close();
+  };
 
   return (
     <SafeAreaView style={Styles.flex}>
-      <BottomSheetModal
-        ref={bottomSheetRef}
-        snapPoints={snapPoints}
-        onDismiss={() => {
-          if (mountedRef.current) {
-            navigator?.pop();
-          }
+      <Modalize
+        keyboardAvoidingOffset={-20}
+        adjustToContentHeight
+        closeOnOverlayTap
+        closeSnapPointStraightEnabled
+        onClosed={() => {
+          navigator?.pop();
         }}
-        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>
+        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>
     </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: {
@@ -263,6 +202,43 @@ 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,10 +1,10 @@
 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,
   NavigationContainerRef,
 } from '@react-navigation/native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -12,9 +12,19 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
+
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -23,10 +33,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
-  const context = useContext(MiniAppContext);
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-  const navigator = useRef(new Navigator(navigationRef));
+  const context = useContext<any>(MiniAppContext);
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
 
@@ -67,52 +79,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <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}
-            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>
     </SafeAreaProvider>
   );
 };