@momo-kits/foundation 0.150.2-phuc.13 → 0.150.2-scaleSize.35

package/Application/BottomSheet.tsx

@@ -1,28 +1,17 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  KeyboardEventName,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
-  ScrollView,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ApplicationContext } from './index';
+import { ApplicationContext } from '../Context';
 import { BottomSheetParams } from './types';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
 import { Text } from '../Text';
@@ -31,12 +20,12 @@ import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
   Extrapolate,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withSpring,
   interpolate,
   runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
 } from 'react-native-reanimated';
 import layoutStyles from '../Layout/styles';
 
@@ -46,8 +35,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
   const {
@@ -59,10 +46,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     draggable = true,
     useBottomInset = true,
     useKeyboardAvoidingView = true,
-    useScrollOverflow = false,
     keyboardVerticalOffset,
     useDivider = true,
     footerComponent,
+    leftOptions,
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
@@ -116,73 +103,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   ).current;
 
   let Container: any = View;
-  let Content: any = View;
   if (useNativeModal) {
     Container = Modal;
   }
-  if (useScrollOverflow) {
-    Content = ScrollView;
-  }
   let backgroundColor = theme.colors.background.default;
   if (surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
-  const headerHeight = 90;
-
-  /**
-   * If the content height exceeds the device height,
-   * adjust bottomInset based on keyboard behavior so the BottomSheet content stays fixed
-   * whether the keyboard is open or closed.
-   */
-
-  let bottomInset: number;
-  if (keyboardHeight > 0) {
-    bottomInset =
-      Platform.select({
-        ios: 0,
-        android: 21,
-      }) ?? 0;
-  } else {
-    bottomInset =
-      Platform.select({
-        ios: Math.min(insets.bottom, 21),
-        android: -21,
-      }) ?? 0;
-  }
-
-  const maxContentSize =
-    heightDevice - headerHeight - keyboardHeight - bottomInset;
-
-  useEffect(() => {
-    let showEvent: KeyboardEventName;
-    let hideEvent: KeyboardEventName;
-
-    if (Platform.OS === 'ios') {
-      showEvent = 'keyboardWillShow';
-      hideEvent = 'keyboardWillHide';
-    } else {
-      showEvent = 'keyboardDidShow';
-      hideEvent = 'keyboardDidHide';
-    }
-    const onKeyboardShow = (e: any) => {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setKeyboardHeight(e.endCoordinates.height);
-    };
-    const onKeyboardHide = () => {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setKeyboardHeight(0);
-    };
-
-    const showSub = Keyboard.addListener(showEvent, onKeyboardShow);
-    const hideSub = Keyboard.addListener(hideEvent, onKeyboardHide);
-
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, []);
-
   /**
    * emit dismiss event
    */
@@ -194,17 +122,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   }, [heightDevice, openAnimation, props.route.params, translateY]);
 
-  /**
-   * handle content bottom sheet change
-   * @param width
-   * @param height
-   */
-  const handleContentSizeChange = (width: number, height: number) => {
-    if (contentHeight !== height) {
-      setContentHeight(height);
-    }
-  };
-
   /**
    * handler dismiss
    */
@@ -214,8 +131,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         return;
       }
       closeAnimation(() => {
+        navigator?.pop();
         runOnJS(() => {
-          navigator?.pop();
           callback?.();
         })();
       });
@@ -238,14 +155,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    */
   const renderHeader = useCallback(() => {
     return (
-      <View
-        style={{
-          backgroundColor,
-          borderTopLeftRadius: Radius.M,
-          borderTopRightRadius: Radius.M,
-        }}
-        {...panResponder.panHandlers}
-      >
+      <View {...panResponder.panHandlers}>
         <View style={{ height: 16 }}>
           <View style={styles.indicator} />
         </View>
@@ -258,11 +168,22 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
+          {leftOptions?.onPressIconLeft ? (
+            <TouchableOpacity
+              style={styles.iconButton}
+              onPress={() => {
+                onDismiss(true, leftOptions.onPressIconLeft);
+              }}
+            >
+              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+            </TouchableOpacity>
+          ) : null}
+
           {options.header ? (
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              <View style={styles.iconButton} />
+              {!leftOptions ? <View style={styles.iconButton} /> : null}
               <Text
                 style={[Styles.flex, { textAlign: 'center' }]}
                 numberOfLines={1}
@@ -285,8 +206,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       </View>
     );
   }, [
-    backgroundColor,
     onDismiss,
+    leftOptions,
     options.header,
     options.title,
     panResponder.panHandlers,
@@ -297,7 +218,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
-      maxHeight: maxContentSize,
     };
   });
 
@@ -320,6 +240,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         onDismiss();
       }}
       style={StyleSheet.absoluteFillObject}
+      isModalKit={true}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -341,19 +262,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           <Animated.View style={[styles.overlay, animatedOverlayStyle]} />
         </Pressable>
 
-        <Animated.View style={animatedStyle}>
+        <Animated.View
+          style={[
+            animatedStyle,
+            {
+              backgroundColor,
+              borderTopLeftRadius: Radius.M,
+              borderTopRightRadius: Radius.M,
+              overflow: 'hidden',
+            },
+          ]}
+        >
           {renderHeader()}
-          <Content
-            scrollEnabled={contentHeight + 20 > maxContentSize}
-            style={{ backgroundColor: backgroundColor }}
-            onContentSizeChange={handleContentSizeChange}
-          >
-            <Screen
-              {...props}
-              {...props.route.params}
-              onRequestClose={onRequestClose}
-            />
-          </Content>
+          <Screen
+            {...props}
+            {...props.route.params}
+            onRequestClose={onRequestClose}
+          />
           {footerComponent && (
             <View
               style={[

package/Application/BottomTab/Badge.tsx

@@ -77,6 +77,18 @@ export function Badge({
   const borderRadius = size / 2;
   const fontSize = Math.floor((size * 3) / 4);
 
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(children));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(children) > 99) {
+      return '99+';
+    }
+    return children;
+  };
+
   return (
     <Animated.Text
       numberOfLines={1}
@@ -103,8 +115,9 @@ export function Badge({
         styles.container,
         restStyle,
       ]}
-      {...rest}>
-      {children}
+      {...rest}
+    >
+      {formatTitle()}
     </Animated.Text>
   );
 }

package/Application/BottomTab/BottomTabBar.tsx

@@ -14,8 +14,8 @@ import { Colors, Radius, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
-import { ApplicationContext } from '../index';
 import CustomBottomTabItem from './CustomBottomTabItem';
+import { ApplicationContext } from '../../Context';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import {
+  BottomTabBarButtonProps,
+  BottomTabNavigationOptions,
+} from '@react-navigation/bottom-tabs';
+import { Route } from '@react-navigation/native';
 import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 
-import { Route } from '@react-navigation/native';
-import { BottomTabBarButtonProps, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
-
 type LabelType = NonNullable<BottomTabNavigationOptions['tabBarLabel']>;
 
 interface CustomBottomTabItemProps {

package/Application/BottomTab/TabBarIcon.tsx

@@ -1,4 +1,4 @@
-import type {Route} from '@react-navigation/native';
+import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
   type StyleProp,
@@ -8,8 +8,8 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import {Badge} from './Badge';
-import {Colors} from '../../Consts';
+import { Badge } from './Badge';
+import { Colors } from '../../Consts';
 
 type Props = {
   route: Route<string>;
@@ -60,14 +60,15 @@ export function TabBarIcon({
             // Workaround for react-native >= 0.54 layout bug
             minWidth: iconSize,
           },
-        ]}>
+        ]}
+      >
         {renderIcon({
           focused: true,
           size: iconSize,
           color: activeTintColor ?? Colors.black_20,
         })}
       </View>
-      <View style={[styles.icon, {opacity: inactiveOpacity}]}>
+      <View style={[styles.icon, { opacity: inactiveOpacity }]}>
         {renderIcon({
           focused: false,
           size: iconSize,
@@ -78,7 +79,8 @@ export function TabBarIcon({
         visible={badge != null}
         size={badge === '' ? 12 : iconSize * 0.75}
         allowFontScaling={allowFontScaling}
-        style={[styles.badge, badgeStyle]}>
+        style={[styles.badge, badgeStyle]}
+      >
         {badge}
       </Badge>
     </View>

package/Application/BottomTab/index.tsx

@@ -5,13 +5,7 @@ import {
   useFocusEffect,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   Animated,
@@ -24,11 +18,11 @@ import {
 import { Colors } from '../../Consts';
 import { Icon } from '../../Icon';
 import { exportFontFamily, Text } from '../../Text';
-import { ApplicationContext, MiniAppContext } from '../index';
 import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
-import { getOptions, getStackOptions } from '../utils';
+import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -37,7 +31,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const useAnimation = route?.params?.useAnimation ?? true;
   const insets = useSafeAreaInsets();
 
   const opacityValue = 0.3;
@@ -45,12 +38,13 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const opacity = useRef(new Animated.Value(opacityValue)).current;
   const scale = useRef(new Animated.Value(scaleValue)).current;
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
+  const { isBackgroundToForeground } = useAppState();
 
-  const onScreenNavigated = useCallback(
-    (preScreenName: string, screenName: string) => {
+  const onScreenNavigated = (pre: string, current: string) => {
+    if (!isBackgroundToForeground) {
       const data: any = {
-        preScreenName,
-        screenName,
+        preScreenName: pre,
+        screenName: current,
         componentName: 'Screen',
         state: 'navigated',
         action: 'push',
@@ -69,80 +63,82 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         message: `${screenName} screen_navigated`,
         type: 'ERROR',
       });
-    },
-    [context, navigator?.maxApi],
-  );
+    }
+  };
 
   useFocusEffect(
-    React.useCallback(() => {
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(scale, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start();
+    React.useCallback(
+      () => {
+        Animated.parallel([
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+          Animated.timing(scale, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
 
-      setTimeout(() => {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      }, 100);
+        setTimeout(() => {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }, 100);
 
-      return () => {
-        if (navigation.getState().index !== route?.params.index) {
-          Animated.parallel([
-            Animated.timing(opacity, {
-              toValue: opacityValue,
-              duration: 200,
-              useNativeDriver: true,
-            }),
-            Animated.timing(scale, {
-              toValue: scaleValue,
-              duration: 200,
-              useNativeDriver: true,
-            }),
-          ]).start();
-        }
-      };
-    }, [
-      navigation,
-      navigator?.maxApi,
-      onScreenNavigated,
-      opacity,
-      route?.params.index,
-      scale,
-      screenName,
-    ]),
+        return () => {
+          if (navigation.getState().index !== route?.params.index) {
+            Animated.parallel([
+              Animated.timing(opacity, {
+                toValue: opacityValue,
+                duration: 200,
+                useNativeDriver: true,
+              }),
+              Animated.timing(scale, {
+                toValue: scaleValue,
+                duration: 200,
+                useNativeDriver: true,
+              }),
+            ]).start();
+          }
+        };
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    ),
   );
 
-  useEffect(() => {
-    const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-      if (navigation.isFocused()) {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      }
-    });
-
-    return () => {
-      onFocusApp?.remove?.();
-    };
-  }, [navigation, navigator?.maxApi, onScreenNavigated, screenName]);
+  useEffect(
+    () => {
+      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }
+      });
 
-  let opacityStyle: undefined | Animated.Value;
-  let scaleStyle: number | Animated.Value = 1;
-  if (useAnimation) {
-    opacityStyle = opacity;
-    scaleStyle = scale;
-  }
+      return () => {
+        onFocusApp?.remove?.();
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   let stackOptions = {};
   if (options) {
@@ -155,8 +151,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         style={[
           styles.container,
           {
-            opacity: opacityStyle,
-            transform: [{ scale: scaleStyle }],
+            opacity,
+            transform: [{ scale }],
           },
         ]}
       >
@@ -188,8 +184,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       style={[
         styles.container,
         {
-          opacity: opacityStyle,
-          transform: [{ scale: scaleStyle }],
+          opacity,
+          transform: [{ scale }],
         },
       ]}
     >
@@ -227,7 +223,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
-  useAnimation = true,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
   const dimensions = useWindowDimensions();
@@ -340,7 +335,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={`BottomTab-${item.name}`}
             name={item.name}
             component={TabScreen}
-            initialParams={{ ...item, nested, index, useAnimation }}
+            initialParams={{ ...item, nested, index }}
             listeners={handler}
             options={{
               tabBarLabel: ({ focused, color }) => {

package/Application/Components/BackgroundImageView.tsx

@@ -2,7 +2,7 @@ import React, { FC, useContext } from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
-import { ApplicationContext } from '../index';
+import { ApplicationContext } from '../../Context';
 
 type BackgroundImageViewProps = {
   useShadowHeader: boolean;

package/Application/Components/HeaderAnimated.tsx

@@ -1,9 +1,9 @@
-import {Animated, StyleSheet, View} from 'react-native';
-import {HeaderAnimatedProps} from '../types';
-import React, {useContext} from 'react';
-import {Image} from '../../Image';
-import {MiniAppContext} from '../index';
-import {Colors} from '../../Consts';
+import { Animated, StyleSheet, View } from 'react-native';
+import { type HeaderAnimatedProps } from '../types';
+import React, { useContext } from 'react';
+import { Image } from '../../Image';
+import { MiniAppContext } from '../../Context';
+import { Colors } from '../../Consts';
 
 /**
  * default header banner for header animated
@@ -38,9 +38,10 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
         styles.container,
         {
           opacity: opacity,
-          transform: [{scale}, {translateY}],
+          transform: [{ scale }, { translateY }],
         },
-      ]}>
+      ]}
+    >
       {children ?? (
         <Image
           source={{
@@ -63,7 +64,7 @@ const Verified: React.FC<any> = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {width: '100%', aspectRatio: 16 / 9},
+  container: { width: '100%', aspectRatio: 16 / 9 },
   verifiedDot: {
     width: 4,
     height: 4,
@@ -72,7 +73,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
   },
-  full: {width: '100%', height: '100%'},
+  full: { width: '100%', height: '100%' },
 });
 
-export {HeaderAnimated};
+export { HeaderAnimated };

package/Application/Components/HeaderBackground.tsx

@@ -2,7 +2,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { Animated, StyleSheet, View } from 'react-native';
 import React, { useContext } from 'react';
 import { HeaderBackgroundProps } from '../types';
-import { ApplicationContext } from '../index';
+import { ApplicationContext } from '../../Context';
 import { Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';