@momo-kits/foundation 0.92.1-tracking.9 → 0.92.2-tracking.2

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 {
@@ -30,7 +30,10 @@ import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 import {getAccessibilityID} from './utils';
-const accessibilityID = getAccessibilityID("title_navigation_header")
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -66,9 +69,10 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     }
   }, [badgeType, badgeValue]);
 
-  const ID = getAccessibilityID?.(accessibilityID);
   return (
-    <View {...ID} style={{width: scaleSize(28)}}>
+    <View
+      {...getAccessibilityID(accessibilityID)}
+      style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -91,11 +95,10 @@ const HeaderTitle: React.FC<any> = props => {
     extrapolate: 'clamp',
   });
 
-
   return (
     <Animated.Text
       {...props}
-      {...accessibilityID}
+      {...getAccessibilityID('title_navigation_header')}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -110,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -124,26 +127,25 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBackSafe = () => {
     const goBack = () => {
-      const canGoBack = navigator?.ref.current?.canGoBack();
-      if (!canGoBack) {
-        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: context.appId,
-          message: 'service_icon_clicked',
-          params,
-        });
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
-      }
+      const canGoBack = navigator?.ref?.current?.canGoBack?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      const params = {
+        appId: context.appId,
+        code: context.code,
+        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();
+        navigator?.ref?.current?.goBack?.();
       } else if (navigator?.maxApi) {
-        navigator?.maxApi?.dismiss(navigator.dismissData);
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
       } else {
         const currentTime = new Date().getTime();
         const requestId = `navigationBackPress#${currentTime}`;
@@ -250,8 +252,9 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
         <Text
-            {...accessibilityID}
-            typography="header_default_bold" color={tintColor}>
+          {...getAccessibilityID('title_navigation_header')}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -301,7 +304,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
+  const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
@@ -408,13 +411,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-            {...getAccessibilityID?.('btn_navigation_more')}
+            {...getAccessibilityID('btn_navigation_more')}
             onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            {...getAccessibilityID?.('btn_navigation_close')}
+            {...getAccessibilityID('btn_navigation_close')}
             onPress={onClose}>
             <Icon
               color={tintColor}
@@ -433,7 +436,6 @@ const HeaderToolkitAction: React.FC<any> = ({
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
-  onPress,
   children,
 }) => {
   const scale = animatedValue.interpolate({
@@ -453,23 +455,21 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
 
   return (
-    <TouchableOpacity onPress={onPress} disabled={!onPress}>
-      <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
+      style={{
+        height: 210,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      {children ?? (
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={{width: '100%', height: '100%'}}
+        />
+      )}
+    </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 React, {useEffect, useRef, useState} from 'react';
 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,15 @@ 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';
 
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
+
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -25,7 +31,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localization,
   initialParams,
 }) => {
-  const context = useContext(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
@@ -59,7 +64,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = context?.language ?? 'vi';
+    const language: 'vi' | 'en' = 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},
@@ -69,55 +74,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}
-            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>
+      <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>
   );
 };