@momo-kits/foundation 0.81.25 → 0.81.27-beta.1

package/Application/Components.tsx

@@ -183,6 +183,17 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const canGoBack = navigator?.ref.current?.canGoBack();
     if (!canGoBack && navigator?.trackingInfo) {
       const currentRoute = navigator?.ref?.current.getCurrentRoute();
+      alert(
+        JSON.stringify({
+          feature_code: navigator.trackingInfo.code,
+          app_id: navigator.trackingInfo.appId,
+          miniapp_version: navigator.trackingInfo.buildNumber,
+          flow_partner_id: navigator.trackingInfo.flowPartnerId,
+          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+          trigger_id: '111154000000000000',
+          icon_name: 'back',
+        }),
+      );
       navigator?.maxApi?.trackEvent('service_icon_clicked', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,

package/Application/StackScreen.tsx

@@ -47,6 +47,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
         pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
 
+      alert(
+        JSON.stringify({
+          ...tracking,
+          pre_screen_name,
+          trigger_id: '111378000000000000',
+        }),
+      );
       navigator?.maxApi?.trackEvent('service_frame_displayed', {
         ...tracking,
         pre_screen_name,
@@ -54,6 +61,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
       });
 
       return props.navigation.addListener('beforeRemove', () => {
+        alert(
+          JSON.stringify({
+            ...tracking,
+            trigger_id: '111154000000000000',
+            icon_name: 'back',
+          }),
+        );
         navigator?.maxApi?.trackEvent('service_icon_clicked', {
           ...tracking,
           trigger_id: '111154000000000000',

package/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {BadgeProps} from './types';
 import styles from './styles';
-import {Colors} from '../Consts';
+import {Colors, Spacing} from '../Consts';
 import {Text} from '../Text';
 
 const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {

package/Badge/styles.ts

@@ -4,15 +4,13 @@ import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
   badge: {
-    paddingHorizontal: Spacing.XS,
     borderRadius: Radius.M,
     justifyContent: 'center',
-    alignItems: 'center',
     height: scaleSize(16),
     flexDirection: 'row',
-    borderWidth: 1,
     borderColor: Colors.black_01,
-    alignSelf: 'baseline',
+    paddingHorizontal: Spacing.XS,
+    alignItems: 'center',
   },
   dot: {
     width: 16,

package/Layout/Screen.tsx

@@ -28,6 +28,7 @@ import Navigation from '../Application/Navigation';
 import styles from './styles';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
 import {Image} from '../Image';
+import {HeaderType} from './types';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -47,9 +48,9 @@ export interface ScreenProps extends ViewProps {
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Set type of header.
    */
-  useExtendedHeader?: boolean;
+  headerType?: HeaderType;
 
   /**
    * Optional. Props for the animated component or bool used top navigation animated.
@@ -89,13 +90,13 @@ const Screen = forwardRef(
       enableKeyboardAvoidingView = false,
       scrollable = false,
       navigation,
-      useExtendedHeader,
       animatedHeader,
       scrollViewProps,
       headerComponent: Header,
       footerComponent: Footer,
       layoutOffset = -56,
       backgroundColor,
+      headerType = 'default',
     }: ScreenProps,
     ref,
   ) => {
@@ -111,23 +112,14 @@ const Screen = forwardRef(
     let keyboardVerticalOffset = heightHeader - 20;
     animatedValue.current = undefined;
 
-    if (useExtendedHeader || animatedHeader) {
+    if (headerType == 'extended' || animatedHeader) {
       keyboardVerticalOffset = -20;
     }
 
-    if (useExtendedHeader) {
+    if (headerType == 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
 
-    useEffect(() => {
-      if (useExtendedHeader) {
-        navigation?.setOptions({
-          headerTransparent: true,
-          headerBackground: () => null,
-        });
-      }
-    }, [useExtendedHeader]);
-
     useEffect(() => {
       if (animatedHeader) {
         styleAnimatedHeader = {
@@ -168,6 +160,69 @@ const Screen = forwardRef(
       }
     }, [animatedHeader]);
 
+    useEffect(() => {
+      if (!animatedHeader) {
+        let headerOptions: NavigationOptions = {};
+        switch (headerType) {
+          case 'none':
+            headerOptions = {
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerShown: false,
+            };
+            break;
+
+          case 'surface':
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: theme.colors.text.default,
+              headerBackground: (props: any) => (
+                <HeaderBackground
+                  {...props}
+                  image={null}
+                  backgroundColor={theme.colors.background.surface}
+                  useBorder={true}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+              headerTitle: (props: any) => (
+                <HeaderTitle {...props} animatedValue={animatedValue.current} />
+              ),
+            };
+            break;
+
+          case 'extended':
+            headerOptions = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: () => null,
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
+            };
+            break;
+
+          default:
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: (props: any) => <HeaderBackground {...props} />,
+            };
+        }
+
+        navigation?.setOptions(headerOptions);
+        const current: any = navigation;
+        const parent = current?.getParent?.();
+        if (parent) {
+          return current?.addListener?.('focus', () => {
+            const stackNavigation = new Navigation(parent, theme);
+            stackNavigation?.setOptions(headerOptions);
+          });
+        }
+      }
+    }, [headerType]);
+
     /**
      * animated when use scroll && animated value
      */
@@ -292,11 +347,13 @@ const Screen = forwardRef(
           </Component>
           {Footer && (
             <View
-              style={{
-                paddingTop: Spacing.S,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-                backgroundColor: theme.colors.background.surface,
-              }}>
+              style={[
+                styles.footerContainer,
+                {
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}>
               <Section>{Footer}</Section>
             </View>
           )}

package/Layout/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius} from '../Consts';
+import {Platform, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   extendedHeader: {
@@ -45,7 +45,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
-
     padding: 12,
   },
   item: {
@@ -81,4 +80,18 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
+  footerContainer: {
+    paddingTop: Spacing.S,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowColor: Colors.black_20,
+        shadowOffset: {width: 0, height: -2},
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+      },
+    }),
+  },
 });

package/Layout/types.ts

@@ -1,3 +1,5 @@
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
+
 export type GridContextProps = {
   /**
    * Represents the number of columns in the grid.

package/package.json

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