@momo-kits/foundation 0.81.26 → 0.81.27-beta.3

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
      */
@@ -294,8 +349,19 @@ const Screen = forwardRef(
             <View
               style={{
                 paddingTop: Spacing.S,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
+                paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                 backgroundColor: theme.colors.background.surface,
+                ...Platform.select({
+                  android: {
+                    elevation: 4,
+                  },
+                  ios: {
+                    shadowColor: Colors.black_20,
+                    shadowOffset: {width: 0, height: -2},
+                    shadowOpacity: 0.1,
+                    shadowRadius: 3,
+                  },
+                }),
               }}>
               <Section>{Footer}</Section>
             </View>

package/Layout/types.ts

@@ -19,3 +19,5 @@ export type GridContextProps = {
    */
   getSizeSpan: (span: number) => number;
 };
+
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';

package/package.json

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