@momo-kits/foundation 0.168.1-beta.23 → 0.168.1-beta.24

package/Application/BottomSheet.tsx

@@ -53,6 +53,8 @@ const DUO_ORIENTATIONS = ['portrait', 'landscape'];
 const SIDE_COLUMN_OFFSET =
   INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
 
+const getSideInset = (inset: number) => Math.max(inset - Spacing.M, 0);
+
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -83,6 +85,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       : getDuoTopInset(insets, windowSize.width, windowSize.height),
     Spacing.XL,
   );
+  const sideInsetLeft = isDuoFloating ? getSideInset(insets.left) : 0;
+  const sideInsetRight = isDuoFloating ? getSideInset(insets.right) : 0;
+  const indicatorShift = (sideInsetRight - sideInsetLeft) / 2;
   const isIOS = Platform.OS === 'ios';
   const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
@@ -289,7 +294,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     return (
       <View {...panResponder.panHandlers}>
         <View style={{ height: INDICATOR_HEIGHT }}>
-          <View style={styles.indicator} />
+          <View
+            style={[
+              styles.indicator,
+              indicatorShift !== 0 && {
+                transform: [{ translateX: indicatorShift }],
+              },
+            ]}
+          />
         </View>
         <View
           style={[
@@ -337,6 +349,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }, [
     hasSideColumn,
     iconBack,
+    indicatorShift,
     leftOptions,
     onPressBack,
     onPressClose,
@@ -401,8 +414,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   });
 
   const sideInsetStyle = isDuoFloating && {
-    paddingLeft: Math.max(insets.left - Spacing.M, 0),
-    paddingRight: Math.max(insets.right - Spacing.M, 0),
+    paddingLeft: sideInsetLeft,
+    paddingRight: sideInsetRight,
   };
 
   const screen = (

package/package.json

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