@momo-kits/foundation 0.92.26-beta.4 → 0.92.26-beta.6

package/Application/BottomSheet.tsx

@@ -1,17 +1,18 @@
-import React, {useRef, useEffect, useCallback, useContext} from 'react';
+import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
   Animated,
   Dimensions,
   KeyboardAvoidingView,
+  Modal,
   PanResponder,
   Platform,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {ApplicationContext} from './index';
 import {BottomSheetParams} from './types';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
@@ -66,17 +67,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     backgroundColor = theme.colors.background.surface;
   }
 
+  /**
+   * emit dismiss event
+   */
   useEffect(() => {
     Animated.timing(pan, {
       toValue: {x: 0, y: 0},
       useNativeDriver: false,
-      duration: 50,
+      duration: 200,
     }).start();
     return () => {
       props.route.params?.onDismiss?.();
     };
   }, []);
 
+  /**
+   * handler dismiss
+   */
   const onDismiss = (force = false, callback?: () => void) => {
     if (barrierDismissible && !force) {
       return;
@@ -93,10 +100,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     });
   };
 
+  /**
+   * manual close
+   */
   const requestClose = useCallback((callback?: () => void) => {
     onDismiss(true, callback);
   }, []);
 
+  /**
+   * render header
+   */
   const renderHeader = useCallback(() => {
     return (
       <View
@@ -135,7 +148,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }, []);
 
   return (
-    <View style={styles.overlay}>
+    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
@@ -148,25 +161,30 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
-            <Screen
-              {...props}
-              {...props.route.params}
-              // requestClose={requestClose}
-            />
+            <Screen {...props} {...props.route.params} />
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
           </View>
         </Animated.View>
       </KeyboardAvoidingView>
-    </View>
+    </Modal>
   );
 };
 
+export default BottomSheet;
+
 const styles = StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'flex-end',
+  container: {
+    width: '100%',
+    height: 0,
+    overflow: 'hidden',
+    borderTopLeftRadius: Radius.M,
+    borderTopRightRadius: Radius.M,
+  },
+  draggableContainer: {
+    width: '100%',
+    alignItems: 'center',
   },
   indicator: {
     width: 40,
@@ -190,5 +208,3 @@ const styles = StyleSheet.create({
     marginHorizontal: Spacing.M,
   },
 });
-
-export default BottomSheet;

package/package.json

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