@momo-kits/foundation 0.111.1-beta.1 → 0.111.1-beta.2

package/Application/BottomSheet.tsx

@@ -90,7 +90,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       toValue: {x: 0, y: 0},
       useNativeDriver: false,
       easing: customEasingOpen,
-      duration: 500,
+      duration: 350,
     }).start();
 
     return () => {
@@ -112,7 +112,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
       easing: customEasingClose,
-      duration: 300,
+      duration: 200,
     }).start(() => {
       navigator?.pop();
     });

package/Application/Components/HeaderBackground.tsx

@@ -43,14 +43,23 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     <View style={Styles.flex}>
       <Animated.View
         style={[
-          Styles.flex,
           useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
           {
             backgroundColor: theme.colors.background.surface,
             opacity: opacityBackground,
-            overflow: 'hidden',
+            height: '100%',
+            width: '100%',
           },
-        ]}>
+        ]}
+      />
+      <Animated.View
+        style={{
+          position: 'absolute',
+          zIndex: 1,
+          height: '100%',
+          width: '100%',
+          overflow: 'hidden',
+        }}>
         {theme?.assets?.headerBackground && (
           <Image
             style={styles.headerBackground}

package/Application/Components/HeaderExtendHeader.tsx

@@ -99,8 +99,18 @@ const HeaderExtendHeader: React.FC<{
               ? styles.shadowHeader
               : styles.dividerHeader,
             {
+              position: 'absolute',
+              width: '100%',
+              zIndex: 1,
+              height: heightHeader,
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
+            },
+          ]}
+        />
+        <Animated.View
+          style={[
+            {
               position: 'absolute',
               width: '100%',
               height: heightHeader,
@@ -136,7 +146,6 @@ const HeaderExtendHeader: React.FC<{
             </LinearGradientAnimated>
           )}
         </Animated.View>
-
         <Animated.View
           style={{
             justifyContent: 'flex-end',
@@ -185,6 +194,16 @@ const HeaderExtendHeader: React.FC<{
               height: heightHeader,
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
+            },
+          ]}
+        />
+        <Animated.View
+          style={[
+            {
+              position: 'absolute',
+              width: '100%',
+              zIndex: 1,
+              height: heightHeader,
               overflow: 'hidden',
             },
           ]}>

package/Application/Components/HeaderLeft.tsx

@@ -1,6 +1,6 @@
 import {BackHandler, StyleSheet, View} from 'react-native';
 import {HeaderBackProps} from '../types';
-import React, {useContext, useEffect} from 'react';
+import React, {useCallback, useContext, useEffect} from 'react';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {PopupNotify} from '../../Popup';
 import {NavigationButton} from './NavigationButton';
@@ -17,35 +17,26 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      goBackSafe
-    );
+  const goBack = useCallback(() => {
+    const canGoBack = navigator?.ref?.current?.canGoBack?.();
+    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    context?.autoTracking?.({
+      ...context,
+      componentName: 'IconButton',
+      componentId: 'navigation_back',
+      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+    });
 
-    return () => backHandler.remove();
-  }, []);
-
-  const goBackSafe = () => {
-    const goBack = () => {
-      const canGoBack = navigator?.ref?.current?.canGoBack?.();
-      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-      context?.autoTracking?.({
-        ...context,
-        componentName: 'IconButton',
-        componentId: 'navigation_back',
-        screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-      });
-
-      if (canGoBack) {
-        navigator?.ref?.current?.goBack?.();
-      } else if (navigator?.maxApi) {
-        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
-      } else {
-        (global as any)?.miniAppApi?.dispatch?.('dismiss', context);
-      }
-    };
+    if (canGoBack) {
+      navigator?.ref?.current?.goBack?.();
+    } else if (navigator?.maxApi) {
+      navigator?.maxApi?.dismiss?.(navigator?.dismissData);
+    } else {
+      (global as any)?.miniAppApi?.dispatch?.('dismiss', context);
+    }
+  }, [navigator, context]);
 
+  const goBackSafe = useCallback(() => {
     if (preventBack) {
       navigator?.showModal({
         screen: () => (
@@ -70,7 +61,16 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       }
     }
     return true;
-  };
+  }, [preventBack, onPressLeftHeader, onBackHandler, goBack]);
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBackSafe
+    );
+
+    return () => backHandler.remove();
+  }, [goBackSafe]);
 
   return (
     <View style={styles.headerLeft}>

package/Application/ModalScreen.tsx

@@ -1,7 +1,6 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {
   Animated,
-  Dimensions,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -13,7 +12,6 @@ import {Styles} from '../Consts';
 import Navigation from './Navigation';
 import {ModalParams} from './types';
 import BottomSheet from './BottomSheet';
-import {Spacing} from '@momo-kits/foundation';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -28,7 +26,6 @@ const Modal: React.FC<ModalParams> = props => {
   const Component = useRef(screen).current;
   const opacity = useRef(new Animated.Value(0)).current;
   const scale = useRef(new Animated.Value(0.8)).current;
-  const {width: widthDevice} = Dimensions.get('window');
 
   const navigation = new Navigation(props.navigation);
   const params = {
@@ -62,12 +59,12 @@ const Modal: React.FC<ModalParams> = props => {
     Animated.parallel([
       Animated.timing(opacity, {
         toValue: 0,
-        duration: 250,
+        duration: 200,
         useNativeDriver: true,
       }),
       Animated.timing(scale, {
         toValue: 0.8,
-        duration: 250,
+        duration: 200,
         useNativeDriver: true,
       }),
     ]).start(() => {
@@ -87,7 +84,6 @@ const Modal: React.FC<ModalParams> = props => {
           {
             opacity,
             transform: [{scale}],
-            maxWidth: widthDevice - Spacing.XL * 2,
           },
           modalStyle,
         ]}>

package/Application/utils.tsx

@@ -26,6 +26,32 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
+    cardStyleInterpolator: ({current: {progress}, layouts}) => ({
+      cardStyle: {
+        transform: [
+          {
+            translateX: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [layouts.screen.width, 0],
+            }),
+          },
+        ],
+      },
+    }),
+    transitionSpec: {
+      open: {
+        animation: 'timing',
+        config: {
+          duration: 300,
+        },
+      },
+      close: {
+        animation: 'timing',
+        config: {
+          duration: 300,
+        },
+      },
+    },
   };
 };
 

package/Input/InputTextArea.tsx

@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   useContext,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -54,6 +55,10 @@ const InputTextArea = forwardRef(
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = useRef<TextInput | null>(null);
 
+    useEffect(() => {
+      setInputValue(value ?? '');
+    }, [value]);
+
     const onClearText = () => {
       inputRef?.current?.clear();
       _onChangeText('');
@@ -137,7 +142,7 @@ const InputTextArea = forwardRef(
                 maxLength={maxLength}
                 textBreakStrategy="highQuality"
                 multiline={true}
-                value={value}
+                value={inputValue}
                 onChangeText={_onChangeText}
                 onFocus={_onFocus}
                 onBlur={_onBlur}

package/Popup/PopupPromotion.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Dimensions, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
@@ -13,6 +13,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
+  const {width: widthDevice} = Dimensions.get('window');
   const closeAction = useRef('touch_outside');
 
   /**
@@ -83,7 +84,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
         source={{
           uri: image,
         }}
-        style={styles.container}
+        style={[
+          styles.container,
+          {
+            width: widthDevice - Spacing.XL * 2,
+          },
+        ]}
       />
       {buildCloseIcon()}
     </View>

package/Text/index.tsx

@@ -176,16 +176,19 @@ const exportFontFamily = (
   let newFontFamily;
 
   switch (fontWeight) {
-    case 'bold': {
+    case 'bold':
+    case 'Bold':
       typography = 'action_xs_bold';
       break;
-    }
-    case 'regular': {
+
+    case 'regular':
+    case 'Regular':
       typography = 'body_default_regular';
       break;
-    }
+
     default: {
       typography = 'body_default_regular';
+      break;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.111.1-beta.1",
+  "version": "0.111.1-beta.2",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},