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

package/Application/BottomSheet.tsx

@@ -1,18 +1,17 @@
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {useRef, useEffect, useCallback, useContext} 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';
@@ -36,6 +35,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       x: 0,
     })
   ).current;
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
@@ -67,14 +67,11 @@ 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: 200,
+      duration: 50,
     }).start();
     return () => {
       props.route.params?.onDismiss?.();
@@ -82,7 +79,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }, []);
 
   /**
-   * handler dismiss
+   * on dismiss
+   * @param force
+   * @param callback
    */
   const onDismiss = (force = false, callback?: () => void) => {
     if (barrierDismissible && !force) {
@@ -101,15 +100,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   };
 
   /**
-   * manual close
+   * on request close
    */
-  const requestClose = useCallback((callback?: () => void) => {
+  const onRequestClose = useCallback((callback?: () => void) => {
     onDismiss(true, callback);
   }, []);
 
-  /**
-   * render header
-   */
   const renderHeader = useCallback(() => {
     return (
       <View
@@ -148,7 +144,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }, []);
 
   return (
-    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
+    <View style={styles.overlay}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
@@ -161,30 +157,25 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
-            <Screen {...props} {...props.route.params} />
+            <Screen
+              {...props}
+              {...props.route.params}
+              onRequestClose={onRequestClose}
+            />
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
           </View>
         </Animated.View>
       </KeyboardAvoidingView>
-    </Modal>
+    </View>
   );
 };
 
-export default BottomSheet;
-
 const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: 0,
-    overflow: 'hidden',
-    borderTopLeftRadius: Radius.M,
-    borderTopRightRadius: Radius.M,
-  },
-  draggableContainer: {
-    width: '100%',
-    alignItems: 'center',
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
   },
   indicator: {
     width: 40,
@@ -208,3 +199,5 @@ 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.6",
+    "version": "0.92.26-beta.7",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},