@momo-kits/foundation 0.80.8-beta.11 → 0.80.8-beta.13

package/Application/Components.tsx

@@ -1,6 +1,5 @@
 import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
-  Alert,
   Animated,
   DeviceEventEmitter,
   Platform,
@@ -276,8 +275,7 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validateType = (child: React.ReactElement) => {
     const valid = child?.type === NavigationButton || child?.type == Fragment;
     if (__DEV__ && !valid) {
-      Alert.alert(
-        'Rule',
+      console.warn(
         'HeaderRightAction contains element type of NavigationButton, Please check again.',
       );
     }

package/Application/ModalScreen.tsx

@@ -1,11 +1,12 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
-  Keyboard,
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
@@ -90,6 +91,7 @@ const Modal: React.FC<ModalParams> = props => {
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
+  const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
@@ -102,28 +104,41 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const snapPoints = useMemo(() => {
     if (snapPoint) {
-      return [snapPoint];
+      const current = parseInt(snapPoint) + keyboardSnap * 100;
+      return [`${current}%`];
     }
     return ['50%', '70%', '90%'];
-  }, []);
+  }, [keyboardSnap]);
 
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
   let backgroundColor = theme.colors.background.default;
+  let bottomInset = keyboardSnap * Dimensions.get('window').height;
+  if (bottomInset > 16) {
+    bottomInset -= 16;
+  }
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
   useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () =>
-      bottomSheetRef.current?.expand(),
-    );
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
+      setKeyboardSnap(
+        e.endCoordinates.height / Dimensions.get('window').height,
+      );
+      bottomSheetRef.current?.expand();
+    });
+
+    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardSnap(0);
+    });
 
     bottomSheetRef.current?.present();
     return () => {
       mountedRef.current = false;
       keyboardDidShow.remove();
+      keyboardDidHide.remove();
     };
   }, []);
 
@@ -145,6 +160,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
+        bottomInset={bottomInset}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>

package/Layout/Card.tsx

@@ -7,7 +7,7 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Radius, Shadow, Spacing} from '../Consts';
+import {Colors, Shadow, Spacing} from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -140,15 +140,12 @@ const Card: React.FC<CardProps> = ({
       <View
         accessibilityLabel={`Card`}
         style={[
-          {
-            backgroundColor: theme.colors.background.surface,
-            borderRadius: Radius.M,
-          },
           style,
           styles.card,
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
+            backgroundColor: theme.colors.background.surface,
           },
           useShadow && Shadow.Light,
         ]}>

package/Layout/Screen.tsx

@@ -24,6 +24,7 @@ import {
   HeaderTitle,
 } from '../Application';
 import Navigation from '../Application/Navigation';
+import styles from './styles';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -238,14 +239,7 @@ const Screen = forwardRef(
       <View
         style={[Styles.flex, {backgroundColor}]}
         accessibilityLabel={`ScreenContainer`}>
-        <View
-          style={{
-            position: 'absolute',
-            width: '100%',
-            maxHeight: 215,
-          }}>
-          {renderHeader()}
-        </View>
+        <View style={styles.screenBanner}>{renderHeader()}</View>
         <KeyboardAvoidingView
           style={[Styles.flex, {paddingTop: marginHeader}]}
           enabled={enableKeyboardAvoidingView}

package/Layout/styles.ts

@@ -1,7 +1,12 @@
 import {StyleSheet} from 'react-native';
-import {Spacing} from '../Consts';
+import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
+  screenBanner: {
+    position: 'absolute',
+    width: '100%',
+    maxHeight: 215,
+  },
   boxGrid: {
     position: 'absolute',
     top: 0,
@@ -35,6 +40,7 @@ export default StyleSheet.create({
   card: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    borderRadius: Radius.M,
     paddingTop: undefined,
     paddingBottom: undefined,
     paddingLeft: undefined,

package/Layout/utils.ts

@@ -1,4 +1,4 @@
-import {Alert, Dimensions} from 'react-native';
+import {Dimensions} from 'react-native';
 import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 
 /**
@@ -17,14 +17,12 @@ const validateChildren = (
       childrenType => child?.type === childrenType || child?.type == Fragment,
     );
     if (!valid) {
-      Alert.alert(
-        'Component Kits',
+      console.warn(
         `Wrong children type for this component, expected are ${childrenTypes
           .map(type => type.displayName)
           .join(', ')}.`,
       );
     }
-    return valid;
   };
 
   if (Array.isArray(children)) {

package/package.json

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