@momo-kits/foundation 0.81.1-optimize.10 → 0.81.1-optimize.11

package/Application/BottomSheet.tsx

@@ -29,6 +29,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     snapPoint = 'content',
     draggable = true,
     dragOnContent = false,
+    useBottomInset = true,
   }: BottomSheetParams = props.route.params;
   const [modalVisible, setModalVisible] = useState(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
@@ -58,7 +59,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     }),
   ).current;
-  const estimate = useRef(0.9);
+  const [estimate, setEstimate] = useState(0.9);
+  const timeoutMount = useRef<any>();
 
   let backgroundColor = theme.colors.background.default;
   if (surface) {
@@ -69,14 +71,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * handle open & emit dismiss event
    */
   useEffect(() => {
-    setTimeout(() => {
+    clearTimeout(timeoutMount.current);
+    timeoutMount.current = setTimeout(() => {
       const mapSnapPoint: any = {
         '30%': 0.3,
         '50%': 0.5,
         '70%': 0.7,
         '90%': 0.9,
       };
-      const point = mapSnapPoint[snapPoint] ?? estimate.current;
+      const point = mapSnapPoint[snapPoint] ?? estimate;
       setModalVisible(true);
       Animated.timing(animatedHeight, {
         useNativeDriver: false,
@@ -84,12 +87,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         duration: 300,
       }).start();
     }, 100);
+  }, [estimate]);
 
+  /**
+   * emit dismiss event
+   */
+  useEffect(() => {
     return () => {
       props.route.params?.onDismiss?.();
     };
   }, []);
-
   /**
    * handler dismiss
    */
@@ -163,7 +170,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </View>
             )}
             <Screen {...props} {...props.route.params} />
-            <View style={{height: Math.min(insets.bottom, 21)}} />
+            {useBottomInset && (
+              <View style={{height: Math.min(insets.bottom, 21)}} />
+            )}
           </Animated.View>
         </KeyboardAvoidingView>
       </Modal>
@@ -171,11 +180,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <View
           style={styles.estimate}
           onLayout={e => {
-            estimate.current =
-              (e.nativeEvent.layout.height + 68) / heightDevice;
+            const current = (e.nativeEvent.layout.height + 68) / heightDevice;
+            if (current != estimate) {
+              setEstimate(current);
+            }
           }}>
           <Screen {...props} {...props.route.params} />
-          <View style={{height: Math.min(insets.bottom, 21)}} />
+          {useBottomInset && (
+            <View style={{height: Math.min(insets.bottom, 21)}} />
+          )}
         </View>
       )}
     </>

package/Application/types.ts

@@ -120,6 +120,7 @@ export type BottomSheetParams = {
   barrierDismissible?: boolean;
   draggable?: boolean;
   dragOnContent?: boolean;
+  useBottomInset?: boolean;
 };
 
 export type NavigationButtonProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1-optimize.10",
+    "version": "0.81.1-optimize.11",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},