@momo-kits/foundation 0.110.1-optimize.7 → 0.110.1-optimize.9

package/Application/BottomSheet.tsx

@@ -1,16 +1,14 @@
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {useRef, useEffect, useCallback, useContext} from 'react';
 import {
   Animated,
   Dimensions,
-  Easing,
   KeyboardAvoidingView,
-  Modal,
   PanResponder,
   Platform,
-  Pressable,
   StyleSheet,
   TouchableOpacity,
   View,
+  Modal,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {ApplicationContext} from './index';
@@ -35,7 +33,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useKeyboardAvoidingView = true,
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
-
   const pan = useRef(
     new Animated.ValueXY({
       y: heightDevice,
@@ -43,9 +40,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     })
   ).current;
 
-  const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
-  const customEasingClose = Easing.bezier(0.3, 0.0, 0.8, 0.15);
-
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
@@ -72,7 +66,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     })
   ).current;
-
   let Container: any = View;
   if (useNativeModal) {
     Container = Modal;
@@ -89,10 +82,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     Animated.timing(pan, {
       toValue: {x: 0, y: 0},
       useNativeDriver: false,
-      easing: customEasingOpen,
-      duration: 500,
+      duration: 150,
     }).start();
-
     return () => {
       props.route.params?.onDismiss?.(action.current);
     };
@@ -111,8 +102,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     Animated.timing(pan, {
       toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
-      easing: customEasingClose,
-      duration: 300,
+      duration: 200,
     }).start(() => {
       navigator?.pop();
     });
@@ -181,7 +171,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFillObject}>
+      style={styles.overlay}>
       <KeyboardAvoidingView
         behavior={Platform.select({
           ios: 'padding',
@@ -190,30 +180,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
         enabled={useKeyboardAvoidingView}
         style={[Styles.flex, {justifyContent: 'flex-end'}]}>
-        <Pressable
-          style={StyleSheet.absoluteFillObject}
+        <TouchableOpacity
+          style={Styles.flex}
+          activeOpacity={1}
           onPress={() => {
             action.current = 'touch';
             onDismiss();
-          }}>
-          <Animated.View
-            style={[
-              styles.overlay,
-              {
-                opacity: pan.y.interpolate({
-                  inputRange: [0, heightDevice],
-                  outputRange: [1, 0],
-                  extrapolate: 'clamp',
-                }),
-              },
-            ]}
-          />
-        </Pressable>
-
-        <Animated.View
-          style={{
-            transform: pan.getTranslateTransform(),
-          }}>
+          }}
+        />
+        <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
             <Screen
@@ -233,8 +208,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
 const styles = StyleSheet.create({
   overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
   },
   indicator: {
     width: 40,

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,26 +17,26 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
-  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,
-      });
+  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,
+    });
 
-      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: () => (
@@ -61,7 +61,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       }
     }
     return true;
-  };
+  }, [preventBack, onPressLeftHeader, onBackHandler, goBack]);
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(

package/Application/ModalScreen.tsx

@@ -1,10 +1,10 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {
-  Animated,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
+  View,
 } from 'react-native';
 
 import {ApplicationContext} from './index';
@@ -22,11 +22,8 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalStyle} = props.route.params;
+  const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const opacity = useRef(new Animated.Value(0)).current;
-  const scale = useRef(new Animated.Value(0.8)).current;
-
   const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
@@ -35,68 +32,65 @@ const Modal: React.FC<ModalParams> = props => {
   delete params.screen;
 
   useEffect(() => {
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 400,
-        useNativeDriver: true,
-      }),
-      Animated.spring(scale, {
-        toValue: 1,
-        useNativeDriver: true,
-      }),
-    ]).start();
-
     return () => {
       props.route.params?.onDismiss?.();
     };
-  }, [opacity, scale]);
+  }, []);
 
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
     }
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 0,
-        duration: 250,
-        useNativeDriver: true,
-      }),
-      Animated.timing(scale, {
-        toValue: 0.8,
-        duration: 250,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      navigator?.pop();
-    });
+    navigator?.pop();
   };
 
   return (
     <KeyboardAvoidingView
-      style={Styles.flexCenter}
+      style={Styles.flex}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <Pressable style={StyleSheet.absoluteFillObject} onPress={onDismiss}>
-        <Animated.View style={[styles.overlayContent, {opacity}]} />
-      </Pressable>
-      <Animated.View
-        style={[
-          {
-            opacity,
-            transform: [{scale}],
-          },
-          modalStyle,
-        ]}>
-        <Component {...params} />
-      </Animated.View>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+        <View style={styles.modalCenterStage}>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+          <View style={styles.modalContent}>
+            <Component {...params} />
+          </View>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+        </View>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+      </View>
     </KeyboardAvoidingView>
   );
 };
 
 const styles = StyleSheet.create({
-  overlayContent: {
+  container: {flex: 1, flexDirection: 'row'},
+  modalContent: {
+    maxWidth: '100%',
+    maxHeight: '80%',
+  },
+  modalCenterStage: {
+    maxWidth: '90%',
+  },
+  modalSpaceHorizontal: {
+    flex: 1,
+    minWidth: '5%',
+  },
+  modalSpaceVertical: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    minHeight: '10%',
   },
 });
 

package/Application/types.ts

@@ -1,7 +1,7 @@
 import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {ReactNode} from 'react';
-import {Animated, ViewProps, ViewStyle} from 'react-native';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
@@ -122,7 +122,6 @@ export type ModalParams = {
   screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-  modalStyle?: ViewStyle;
 };
 
 export type BottomSheetParams = {

package/Application/utils.tsx

@@ -55,6 +55,21 @@ const getModalOptions = (): StackNavigationOptions => {
     cardStyle: {backgroundColor: 'transparent'},
     cardOverlayEnabled: true,
     animationEnabled: false,
+    cardStyleInterpolator: ({current: {progress}}) => ({
+      cardStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
+      },
+      overlayStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.2, 0.4, 0.6],
+          extrapolate: 'clamp',
+        }),
+      },
+    }),
   };
 };
 
@@ -154,10 +169,19 @@ const exportHeaderTitle = (
   return {};
 };
 
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+
 export {
   getStackOptions,
   getDialogOptions,
   getModalOptions,
   getOptions,
   exportHeaderTitle,
+  formatNameLength,
 };

package/Popup/PopupNotify.tsx

@@ -1,11 +1,5 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -28,8 +22,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const {width: widthDevice} = Dimensions.get('window');
-
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
@@ -198,10 +190,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-          width: widthDevice - Spacing.XL * 2,
-        },
+        {backgroundColor: theme.colors.background.surface},
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
@@ -245,6 +234,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 const styles = StyleSheet.create({
   container: {
     borderRadius: Radius.L,
+    minWidth: '100%',
   },
   image: {
     borderTopLeftRadius: Radius.L,

package/Popup/PopupPromotion.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.110.1-optimize.7",
+  "version": "0.110.1-optimize.9",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},