@momo-kits/foundation 0.92.26-beta.13 → 0.92.26-beta.14

package/Application/BottomSheet.tsx

@@ -1,18 +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,
-  Modal,
 } 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';
@@ -24,7 +24,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {
     screen: Screen,
     options,
-    useNativeModal = false,
     surface,
     barrierDismissible = false,
     draggable = true,
@@ -37,7 +36,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       x: 0,
     })
   ).current;
-
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
@@ -63,10 +61,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     })
   ).current;
-  let Container: any = View;
-  if (useNativeModal) {
-    Container = Modal;
-  }
+
   let backgroundColor = theme.colors.background.default;
   if (surface) {
     backgroundColor = theme.colors.background.surface;
@@ -95,20 +90,21 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     }
     setTimeout(() => {
       callback?.();
-    }, 300);
+    }, 350);
+
     Animated.timing(pan, {
       toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
-      duration: 200,
+      duration: 100,
     }).start(() => {
       navigator?.pop();
     });
   };
 
   /**
-   * on request close
+   * manual close
    */
-  const onRequestClose = useCallback((callback?: () => void) => {
+  const requestClose = useCallback((callback?: () => void) => {
     onDismiss(true, callback);
   }, []);
 
@@ -153,11 +149,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }, []);
 
   return (
-    <Container
-      transparent
-      visible={true}
-      onRequestClose={() => onDismiss()}
-      style={styles.overlay}>
+    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
@@ -173,7 +165,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <Screen
               {...props}
               {...props.route.params}
-              onRequestClose={onRequestClose}
+              requestClose={requestClose}
             />
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
@@ -181,14 +173,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           </View>
         </Animated.View>
       </KeyboardAvoidingView>
-    </Container>
+    </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,
@@ -212,5 +213,3 @@ const styles = StyleSheet.create({
     marginHorizontal: Spacing.M,
   },
 });
-
-export default BottomSheet;

package/Application/Components.tsx

@@ -314,7 +314,7 @@ const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
 
   return (
     <View style={styles.headerRightButton} onLayout={onLayout}>
-      {children ?? <HeaderToolkitAction {...props} />}
+      <HeaderToolkitAction {...props} />
     </View>
   );
 };

package/Application/types.ts

@@ -115,7 +115,6 @@ export type BottomSheetParams = {
     title: string;
     surface?: boolean;
   };
-  useNativeModal?: boolean;
   surface?: boolean;
   onDismiss?: (type?: string) => void;
   barrierDismissible?: boolean;

package/Layout/ItemList.tsx

@@ -20,7 +20,7 @@ const ItemList = forwardRef(
       contentContainerStyle,
       ...props
     }: ItemListProps,
-    ref
+    ref,
   ) => {
     const {gutterSize, numberOfColumns} = useContext(GridContext);
     const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
@@ -41,7 +41,6 @@ const ItemList = forwardRef(
       <FlatList
         ref={ref as React.RefObject<FlatList>}
         {...props}
-        key={`ItemList-${numColumns}`}
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}
@@ -50,7 +49,7 @@ const ItemList = forwardRef(
         contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
       />
     );
-  }
+  },
 );
 
 export default ItemList;

package/package.json

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