@momo-kits/foundation 0.151.2-beta.1 → 0.152.1-beta.1

package/Application/BottomSheet.tsx

@@ -11,7 +11,7 @@ import {
   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';

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();
@@ -44,9 +38,10 @@ 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(
-    (pre: string, current: string) => {
+  const onScreenNavigated = (pre: string, current: string) => {
+    if (!isBackgroundToForeground) {
       const data: any = {
         preScreenName: pre,
         screenName: current,
@@ -68,9 +63,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         message: `${screenName} screen_navigated`,
         type: 'ERROR',
       });
-    },
-    [context, navigator?.maxApi, screenName],
-  );
+    }
+  };
 
   useFocusEffect(
     React.useCallback(

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';

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,19 +1,19 @@
-import React, {Ref, useContext, useEffect, useRef} from 'react';
+import React, { Ref, useContext, useEffect, useRef } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, MiniAppContext} from '../index';
-import {Animated, Dimensions, Platform, StyleSheet, View} from 'react-native';
-import {HeaderType} from '../../Layout/types';
-import {InputRef, InputSearch} from '../../Input';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { HeaderType } from '../../Layout/types';
+import { InputRef, InputSearch } from '../../Input';
 import Navigation from '../Navigation';
-import {Colors, Radius, Spacing} from '../../Consts';
-import {Image} from '../../Image';
-import {SearchHeaderProps} from '../types';
+import { Colors, Radius, Spacing } from '../../Consts';
+import { Image } from '../../Image';
+import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
-const {width: screenWidth} = Dimensions.get('window');
+const { width: screenWidth } = Dimensions.get('window');
 const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
 
 /**
@@ -42,7 +42,7 @@ const HeaderExtendHeader: React.FC<{
   gradientColor: customGradientColor,
   headerBackground: customBackground,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const animated = useRef(new Animated.Value(0));
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
@@ -60,7 +60,7 @@ const HeaderExtendHeader: React.FC<{
   });
 
   useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
+    const listener = animatedValue.addListener(({ value }) => {
       animated.current.setValue(value);
     });
     return () => {
@@ -95,8 +95,8 @@ const HeaderExtendHeader: React.FC<{
 
   if (inputSearchProps) {
     return (
-      <View style={{zIndex: 0}}>
-        <Animated.View style={{height: height}} />
+      <View style={{ zIndex: 0 }}>
+        <Animated.View style={{ height: height }} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -106,16 +106,18 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View
           style={[
             styles.headerBox,
-            {height: headerType === 'extended' ? height : heightHeader},
-          ]}>
+            { height: headerType === 'extended' ? height : heightHeader },
+          ]}
+        >
           {!!gradientColor && (
             <LinearGradientAnimated
               colors={[gradientColor, gradientColor + '00']}
-              style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+              style={[styles.extendedHeader, { opacity: opacityGradient }]}
+            >
               {!!theme.assets?.headerBackground && (
                 <Image
                   style={styles.headerBackground}
-                  source={{uri: theme.assets?.headerBackground}}
+                  source={{ uri: theme.assets?.headerBackground }}
                   loading={false}
                 />
               )}
@@ -128,10 +130,11 @@ const HeaderExtendHeader: React.FC<{
             height,
             position: 'absolute',
             zIndex: 2,
-          }}>
+          }}
+        >
           <Animated.View
             style={{
-              transform: [{translateX}],
+              transform: [{ translateX }],
               marginVertical: Spacing.S,
               width: animated.current.interpolate({
                 inputRange: [0, 100],
@@ -141,8 +144,9 @@ const HeaderExtendHeader: React.FC<{
                 ],
                 extrapolate: 'clamp',
               }),
-            }}>
-            <Animated.View style={{backgroundColor, borderRadius: Radius.XL}}>
+            }}
+          >
+            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
@@ -159,7 +163,7 @@ const HeaderExtendHeader: React.FC<{
 
   if (headerType === 'extended') {
     return (
-      <View style={{zIndex: 0}}>
+      <View style={{ zIndex: 0 }}>
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -169,17 +173,18 @@ const HeaderExtendHeader: React.FC<{
         {!!gradientColor && (
           <LinearGradientAnimated
             colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+            style={[styles.extendedHeader, { opacity: opacityGradient }]}
+          >
             {!!headerBackground && (
               <Image
                 style={styles.headerBackground}
-                source={{uri: headerBackground}}
+                source={{ uri: headerBackground }}
                 loading={false}
               />
             )}
           </LinearGradientAnimated>
         )}
-        <View style={{height: heightHeader}} />
+        <View style={{ height: heightHeader }} />
         <Verified />
       </View>
     );
@@ -223,4 +228,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export {HeaderExtendHeader};
+export { HeaderExtendHeader };

package/Application/Components/HeaderLeft.tsx

@@ -1,7 +1,7 @@
 import { BackHandler, StyleSheet, View } from 'react-native';
 import { HeaderBackProps } from '../types';
 import React, { useCallback, useContext, useEffect } from 'react';
-import { ApplicationContext, MiniAppContext } from '../index';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 

package/Application/Components/HeaderRight.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useEffect, useState} from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import {
   Platform,
   StyleSheet,
@@ -6,12 +6,13 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext, NavigationButton} from '../index';
-import {Colors, Spacing, Styles} from '../../Consts';
-import {PopupNotify} from '../../Popup';
-import {Tool, ToolGroup} from '../types';
-import {Icon} from '../../Icon';
-import {scaleSize, Text} from '../../Text';
+import { NavigationButton } from './NavigationButton';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Colors, Spacing, Styles } from '../../Consts';
+import { PopupNotify } from '../../Popup';
+import { Tool, ToolGroup } from '../types';
+import { Icon } from '../../Icon';
+import { scaleSize, Text } from '../../Text';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 
@@ -19,9 +20,9 @@ const DID_SYNC_NEW_HOME = 'did_sync_new_home';
  * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
-  const {translate} = useContext(ApplicationContext);
-  const {headerRight = {}} = props;
-  const {useOnBoarding = false, buttonOnBoarding, onPress} = headerRight;
+  const { translate } = useContext(ApplicationContext);
+  const { headerRight = {} } = props;
+  const { useOnBoarding = false, buttonOnBoarding, onPress } = headerRight;
 
   if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
@@ -57,7 +58,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   tools = [],
   useCloseIcon = false,
 }) => {
-  const {navigator} = useContext(ApplicationContext);
+  const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
@@ -71,7 +72,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     () =>
       navigator?.maxApi?.dispatchFunction?.(
         'isFavoriteApp',
-        {code: context?.code},
+        { code: context?.code },
         (result: boolean) => {
           setIsFavorite(result);
         },
@@ -109,7 +110,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       navigator?.maxApi?.dispatchFunction?.(
         'dismiss',
         navigator?.dismissData,
-        undefined
+        undefined,
       );
     } else {
       navigator?.maxApi?.dispatchFunction?.('dismissAll');
@@ -169,7 +170,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         },
         context,
       },
-      ({success}: {success: boolean}) => {
+      ({ success }: { success: boolean }) => {
         if (success) {
           setIsFavorite(expected);
         }
@@ -279,24 +280,27 @@ const HeaderToolkitAction: React.FC<any> = ({
           {
             width: context.appId !== 'vn.momo.helpcenter' ? 65 : 28,
           },
-        ]}>
+        ]}
+      >
         {context.appId !== 'vn.momo.helpcenter' && (
           <>
             <TouchableOpacity
               accessibilityLabel={'btn_navigation_help_center'}
               style={styles.toolkitButton}
               onPress={onPressHelpCenter}
-              hitSlop={{top: 7, bottom: 7, left: 7, right: 0}}>
+              hitSlop={{ top: 7, bottom: 7, left: 7, right: 0 }}
+            >
               <Icon color={tintColor} source={'help_center'} size={20} />
             </TouchableOpacity>
-            <View style={[styles.divider, {backgroundColor: tintColor}]} />
+            <View style={[styles.divider, { backgroundColor: tintColor }]} />
           </>
         )}
         <TouchableOpacity
           accessibilityLabel={'btn_navigation_close'}
           onPress={onClose}
           style={styles.toolkitButton}
-          hitSlop={{top: 7, bottom: 7, left: 0, right: 7}}>
+          hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
+        >
           <Icon
             color={tintColor}
             source={
@@ -359,7 +363,7 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderColor: Colors.black_01,
   },
-  headerButton: {paddingHorizontal: 4},
+  headerButton: { paddingHorizontal: 4 },
   headerRightButton: {
     flexDirection: 'row',
     justifyContent: 'center',
@@ -454,4 +458,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export {HeaderRight};
+export { HeaderRight };

package/Application/Components/HeaderTitle.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext, MiniAppContext } from '../index';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, scaleSize, Text } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import {
@@ -96,7 +96,11 @@ const TitleUser: React.FC<TitleUserProps> = ({
       switch (image.length) {
         case 1: {
           return image.map((i: string) => (
-            <Image key={`avatar-${i}`} source={{ uri: i }} style={styles.circle} />
+            <Image
+              key={`avatar-${i}`}
+              source={{ uri: i }}
+              style={styles.circle}
+            />
           ));
         }
         case 2: {

package/Application/Components/NavigationButton.tsx

@@ -1,10 +1,10 @@
-import {NavigationButtonProps} from '../types';
-import React, {useContext} from 'react';
-import {ApplicationContext, MiniAppContext} from '../index';
-import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {Colors, Spacing} from '../../Consts';
-import {Icon} from '../../Icon';
-import {BadgeDot} from '../../Badge';
+import { NavigationButtonProps } from '../types';
+import React, { useContext } from 'react';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { Colors, Spacing } from '../../Consts';
+import { Icon } from '../../Icon';
+import { BadgeDot } from '../../Badge';
 
 /**
  * default navigation button used header nav
@@ -15,7 +15,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   showBadge = false,
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {};
   if (tintColor === Colors.black_01) {
     buttonStyle = {
@@ -25,11 +25,12 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <View style={{width: 28}}>
+    <View style={{ width: 28 }}>
       <TouchableOpacity
         {...props}
         style={[styles.navigationButton, buttonStyle]}
-        hitSlop={{top: 7, bottom: 7, left: 7, right: 7}}>
+        hitSlop={{ top: 7, bottom: 7, left: 7, right: 7 }}
+      >
         <Icon
           source={icon}
           color={tintColor ?? theme.colors.text.default}
@@ -81,4 +82,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export {NavigationButton};
+export { NavigationButton };

package/Application/Components/SearchHeader.tsx

@@ -3,7 +3,7 @@ import { InputRef, InputSearch } from '../../Input';
 import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import React, { useContext, useEffect, useRef } from 'react';
 import { SearchHeaderProps } from '../types';
-import { ApplicationContext, MiniAppContext } from '../index';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(

package/Application/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {
   Modal as ModalRN,
 } from 'react-native';
 
-import { ApplicationContext, MiniAppContext } from './index';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';

package/Application/NavigationContainer.tsx

@@ -18,15 +18,13 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
-import {
-  ApplicationContext,
-  HeaderBackground,
-  HeaderTitle,
-  MiniAppContext,
-} from './index';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
-import { HeaderLeft, HeaderRight } from './Components';
+import { HeaderLeft } from './Components/HeaderLeft';
+import { HeaderRight } from './Components/HeaderRight';
+import { HeaderTitle } from './Components/HeaderTitle';
+import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();