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

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';
 
@@ -86,7 +86,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 12,
+    marginLeft: 8,
   },
 });
 

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 {
@@ -17,6 +17,7 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
+import { useScaleSize } from '../../Text/utils.ts';
 
 /**
  * default header title used for nav
@@ -31,13 +32,23 @@ const HeaderTitle: React.FC<any> = props => {
   );
 
   return (
-    <View pointerEvents={'none'} style={styles.headerTitleContainer}>
+    <View
+      pointerEvents={'none'}
+      style={[
+        styles.headerTitleContainer,
+        {
+          maxWidth: Dimensions.get('window').width - useScaleSize(172),
+        },
+      ]}
+    >
       <Animated.Text
         {...props}
         accessibilityLabel={'title_navigation_header'}
         style={[
           styles.title,
           {
+            fontSize: useScaleSize(15),
+            lineHeight: useScaleSize(22),
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
             opacity,
             color: props.tintColor,
@@ -83,7 +94,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const maxWidth = Dimensions.get('window').width - scaleSize(172);
+  const maxWidth = Dimensions.get('window').width - useScaleSize(172);
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -96,7 +107,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: {
@@ -498,8 +513,6 @@ const Verified: React.FC<any> = () => {
 
 const styles = StyleSheet.create({
   title: {
-    fontSize: scaleSize(15),
-    lineHeight: scaleSize(22),
     fontWeight: 'bold',
   },
   rowJourney: { flexDirection: 'row', width: '100%', alignItems: 'flex-start' },
@@ -513,7 +526,6 @@ const styles = StyleSheet.create({
   },
   headerTitleContainer: {
     justifyContent: 'center',
-    maxWidth: Dimensions.get('window').width - scaleSize(172),
   },
   circle: {
     width: 32,

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

@@ -1,9 +1,15 @@
 import { Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  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>(
@@ -19,8 +25,12 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
+    const BACK_WIDTH = 28;
+    const { width: screenWidth } = Dimensions.get('window');
 
     const animated = useRef(new Animated.Value(0));
+    const leftPosition = props?.leftPosition || BACK_WIDTH + 20;
+    const headerRightWidth = props?.headerRightWidth || 73;
 
     useEffect(() => {
       const listener = animatedValue?.addListener(({ value }) => {
@@ -69,7 +79,14 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
 
     return (
       <View style={styles.container}>
-        <View style={Styles.flex}>
+        <View
+          style={[
+            Styles.flex,
+            renderButtons && {
+              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+            },
+          ]}
+        >
           <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
             <InputSearch
               ref={ref}

package/Application/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {
   Modal as ModalRN,
 } from 'react-native';
 
-import { ApplicationContext } from './index';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
@@ -18,6 +18,18 @@ import BottomSheet from './BottomSheet';
 import { runOnJS } from 'react-native-reanimated';
 
 const ModalScreen: React.FC<any> = props => {
+  const context: any = useContext(MiniAppContext);
+  const { navigator } = useContext(ApplicationContext);
+
+  useEffect(
+    () => {
+      if (context?.enableHapticDialog) {
+        navigator?.maxApi?.triggerEventVibration?.('light');
+      }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }
@@ -95,6 +107,7 @@ const Modal: React.FC<ModalParams> = props => {
       visible={true}
       onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
+      isModalKit={true}
     >
       <KeyboardAvoidingView
         style={Styles.flexCenter}

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();
 
@@ -37,6 +35,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   initialParams,
   localize = new Localize({ vi: {}, en: {} }),
+  features = {
+    enableBottomTabAnimation: true,
+    enableHapticDialog: true,
+    enableForceFoundationList: false,
+    enableHapticBottomTab: true,
+    scaleSizeMaxRate: 1,
+  },
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState({});
@@ -46,6 +51,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         value={{
           ...context,
           ...currentContext,
+          features,
         }}
       >
         <Navigation