@momo-kits/foundation 0.110.1-optimize.1 → 0.110.1-optimize.10

package/Application/BottomSheet.tsx

@@ -30,6 +30,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     barrierDismissible = false,
     draggable = true,
     useBottomInset = true,
+    useKeyboardAvoidingView = true,
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
   const pan = useRef(
@@ -172,8 +173,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }}
       style={styles.overlay}>
       <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        behavior={Platform.select({
+          ios: 'padding',
+          android: undefined,
+        })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
+        enabled={useKeyboardAvoidingView}
         style={[Styles.flex, {justifyContent: 'flex-end'}]}>
         <TouchableOpacity
           style={Styles.flex}

package/Application/Components/HeaderBackground.tsx

@@ -16,12 +16,12 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
-  gradientColor,
+  gradientColor: customGradientColor,
   headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const linearGradientColor = gradientColor ?? theme.colors.gradient;
+  const gradientColor = customGradientColor ?? theme.colors.gradient;
 
   let headerImage = headerBackground ?? theme.assets?.headerBackground;
   if (image === null) {
@@ -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}
@@ -60,9 +69,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         )}
       </Animated.View>
       <View style={styles.gradientContainer}>
-        {useGradient && (
+        {useGradient && !!gradientColor && (
           <LinearGradientAnimated
-            colors={[linearGradientColor, linearGradientColor + '00']}
+            colors={[gradientColor, gradientColor + '00']}
             style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!headerImage && (
               <Image

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,
@@ -122,19 +132,20 @@ const HeaderExtendHeader: React.FC<{
             styles.headerBox,
             {height: headerType === 'extended' ? height : heightHeader},
           ]}>
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-            {!!theme.assets?.headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{uri: theme.assets?.headerBackground}}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
+          {!!gradientColor && (
+            <LinearGradientAnimated
+              colors={[gradientColor, gradientColor + '00']}
+              style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+              {!!theme.assets?.headerBackground && (
+                <Image
+                  style={styles.headerBackground}
+                  source={{uri: theme.assets?.headerBackground}}
+                  loading={false}
+                />
+              )}
+            </LinearGradientAnimated>
+          )}
         </Animated.View>
-
         <Animated.View
           style={{
             justifyContent: 'flex-end',
@@ -183,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',
             },
           ]}>
@@ -194,17 +215,19 @@ const HeaderExtendHeader: React.FC<{
             />
           )}
         </Animated.View>
-        <LinearGradientAnimated
-          colors={[gradientColor, gradientColor + '00']}
-          style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-          {!!headerBackground && (
-            <Image
-              style={styles.headerBackground}
-              source={{uri: headerBackground}}
-              loading={false}
-            />
-          )}
-        </LinearGradientAnimated>
+        {!!gradientColor && (
+          <LinearGradientAnimated
+            colors={[gradientColor, gradientColor + '00']}
+            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+            {!!headerBackground && (
+              <Image
+                style={styles.headerBackground}
+                source={{uri: headerBackground}}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
+        )}
         <View style={{height: heightHeader}} />
         <Verified />
       </>

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/Components/HeaderTitle.tsx

@@ -228,7 +228,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
       }
     }
 
-    if (typeof image === 'string') {
+    if (typeof image === 'string' && image) {
       return <Image source={{uri: image}} style={styles.circle} />;
     }
 

package/Application/NavigationContainer.tsx

@@ -34,7 +34,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  let config = null;
+
+  let config: any = null;
   try {
     config = JSON.parse(
       NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM') || ''
@@ -72,11 +73,18 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     return localize?.translate(data as string);
   };
 
+  /**
+   * navigation state route change handle
+   * @param preScreenName
+   * @param screenName
+   * @param action
+   */
   const onScreenNavigated = (
     preScreenName: string,
     screenName: string,
     action: string
   ) => {
+    console.log(preScreenName, screenName, action);
     context?.autoTracking?.({
       ...context,
       preScreenName,
@@ -96,6 +104,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
+  const headerBackground = config?.headerBar || theme.assets?.headerBackground;
+  const headerGradient = config?.headerGradient || theme.colors?.gradient;
+
   return (
     <SafeAreaProvider>
       <ApplicationContext.Provider
@@ -103,9 +114,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           navigator: navigator.current,
           theme: {
             ...theme,
+            colors: {
+              ...theme.colors,
+              gradient: headerGradient,
+            },
             assets: {
-              headerBackground:
-                theme.assets?.headerBackground || config?.headerBar,
+              ...theme.assets,
+              headerBackground,
             },
           },
           showGrid,
@@ -127,25 +142,25 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           onReady={() => {
             isReady.current = true;
             routes.current = navigationRef.current?.getRootState?.()?.routes;
+            maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+              onScreenNavigated(data?.screenName, screen?.name, 'push');
+              maxApi?.setObserver('CURRENT_SCREEN', {screenName: screen?.name});
+            });
           }}
           onStateChange={state => {
             const lastedRoute: any = state?.routes?.[state?.routes?.length - 1];
             const oldRoute: any = routes.current?.[routes.current?.length - 1];
             const lasted = lastedRoute?.params?.screen;
             const previous = oldRoute?.params?.screen;
-            if (routes.current?.length < (state?.routes?.length ?? 0)) {
-              onScreenNavigated(
-                previous?.name ?? previous?.type?.name,
-                lasted?.name ?? lasted?.type?.name,
-                'push'
-              );
-            } else if (routes.current?.length > (state?.routes?.length ?? 0)) {
-              onScreenNavigated(
-                previous?.name ?? previous?.type?.name,
-                lasted?.name ?? lasted?.type?.name,
-                'back'
-              );
+            const preScreenName = previous?.name ?? previous?.type?.name;
+            const screenName = lasted?.name ?? lasted?.type?.name;
+
+            let action = 'push';
+            if (routes.current?.length > (state?.routes?.length ?? 0)) {
+              action = 'back';
             }
+            onScreenNavigated(preScreenName, screenName, action);
+            maxApi?.setObserver('CURRENT_SCREEN', {screenName});
             routes.current = state?.routes;
           }}
           independent={true}>

package/Application/StackScreen.tsx

@@ -207,7 +207,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
           /**
            * for stop tracking when user interaction
            */
-          if (data.interaction) {
+          if (data?.interaction) {
             onScreenLoad();
             onScreenInteraction();
           }
@@ -225,7 +225,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
           }, 2000);
         },
       }}>
-      <Component heightHeader={heightHeader} {...data} />
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>
   );

package/Application/types.ts

@@ -137,6 +137,7 @@ export type BottomSheetParams = {
   barrierDismissible?: boolean;
   draggable?: boolean;
   useBottomInset?: boolean;
+  useKeyboardAvoidingView?: boolean;
   keyboardVerticalOffset?: number;
 };
 

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/Input/styles.ts

@@ -123,6 +123,7 @@ export default StyleSheet.create({
   textButton: {marginLeft: Spacing.L},
   divider: {
     width: 1,
+    height: 20,
     marginLeft: Spacing.XS,
   },
   moneyInput: {

package/Text/index.tsx

@@ -111,6 +111,9 @@ const getTypoStyle = (typo: Typography, newFontFamily?: string) => {
       fontFamily = `${font}-${MomoTrustSans[fontWeight]}${style}`;
       break;
     }
+    case 'Montserrat-Bold':
+    case 'iCielPanton-Black':
+    case 'iCielBCCubano-Normal':
     case 'MomoTrustDisplay':
     case 'MomoSignature': {
       fontFamily = font;
@@ -173,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.110.1-optimize.1",
+  "version": "0.110.1-optimize.10",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},