@momo-kits/foundation 0.168.1-beta.3 → 0.168.1-beta.31

package/Application/BottomSheet.tsx

@@ -39,28 +39,28 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
-import { getDuoTopInset, isIPhoneDuo } from './device';
+import { isIPhoneDuo } from './device';
+import { useModalLayout } from './modalLayout';
 
-// iPhone Duo inner display: center the sheet instead of spanning the width
-const DUO_REGULAR_MIN_WIDTH = 600;
+const INDICATOR_HEIGHT = 16;
+const HEADER_HEIGHT = 56;
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+// foldable spec: icon button 32, icon 20
+const FOLDABLE_ICON_BUTTON_SIZE = 32;
+const FOLDABLE_ICON_SIZE = 20;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const windowSize = useWindowDimensions();
   const isDuo = isIPhoneDuo();
-  const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
-  const isPortrait = windowSize.height > windowSize.width;
+  const { isFoldable, placement, sheet, scrimOpacity } = useModalLayout();
   // 'screen' is the outer display on iPhone Duo, even when unfolded
   const screenHeight = Dimensions.get('screen').height;
   const heightDevice = isDuo ? windowSize.height : screenHeight;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
-    Spacing.XL,
-  );
   const isIOS = Platform.OS === 'ios';
   const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
@@ -83,6 +83,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
+  const onDismissRef = useRef(props.route.params?.onDismiss);
+  onDismissRef.current = props.route.params?.onDismiss;
   const [keyboardLift, setKeyboardLift] = useState(0);
 
   // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
@@ -179,15 +181,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * emit dismiss event
+   * emit dismiss event, once: folding or rotating iPhone Duo changes the
+   * window height while the sheet stays open
    */
   useEffect(() => {
-    translateY.value = heightDevice;
     openAnimation();
     return () => {
-      props.route.params?.onDismiss?.(action.current);
+      onDismissRef.current?.(action.current);
     };
-  }, [heightDevice, openAnimation, props.route.params, translateY]);
+  }, [openAnimation]);
 
   /**
    * handler dismiss
@@ -228,13 +230,30 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     return () => backHandler.remove();
   }, [barrierDismissible, onDismiss]);
 
+  const onPressBack = useCallback(() => {
+    onDismiss(true, leftOptions?.onPressIconLeft);
+  }, [leftOptions, onDismiss]);
+
+  const onPressClose = useCallback(() => {
+    action.current = 'icon_close';
+    onDismiss(true);
+  }, [onDismiss]);
+
+  const showBack = !!leftOptions?.onPressIconLeft;
+  const iconBack = leftOptions?.iconLeft ?? 'ic_back';
+
   /**
    * render header
    */
   const renderHeader = useCallback(() => {
+    const iconButtonStyle = [
+      styles.iconButton,
+      isFoldable && styles.foldableIconButton,
+    ];
+    const iconSize = isFoldable ? FOLDABLE_ICON_SIZE : undefined;
     return (
       <View {...panResponder.panHandlers}>
-        <View style={{ height: 16 }}>
+        <View style={{ height: INDICATOR_HEIGHT }}>
           <View style={styles.indicator} />
         </View>
         <View
@@ -246,14 +265,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {leftOptions?.onPressIconLeft ? (
-            <TouchableOpacity
-              style={styles.iconButton}
-              onPress={() => {
-                onDismiss(true, leftOptions.onPressIconLeft);
-              }}
-            >
-              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+          {showBack ? (
+            <TouchableOpacity style={iconButtonStyle} onPress={onPressBack}>
+              <Icon source={iconBack} size={iconSize} />
             </TouchableOpacity>
           ) : null}
 
@@ -261,9 +275,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {!leftOptions ? <View style={styles.iconButton} /> : null}
+              {!leftOptions ? <View style={iconButtonStyle} /> : null}
               <Text
-                style={[Styles.flex, { textAlign: 'center' }]}
+                style={[Styles.flex, styles.title]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -271,24 +285,22 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => {
-              action.current = 'icon_close';
-              onDismiss(true);
-            }}
-          >
-            <Icon source="navigation_close" />
+          <TouchableOpacity style={iconButtonStyle} onPress={onPressClose}>
+            <Icon source="navigation_close" size={iconSize} />
           </TouchableOpacity>
         </View>
       </View>
     );
   }, [
-    onDismiss,
+    iconBack,
+    isFoldable,
     leftOptions,
+    onPressBack,
+    onPressClose,
     options.header,
     options.title,
     panResponder.panHandlers,
+    showBack,
     theme.colors.border.default,
     useDivider,
   ]);
@@ -304,20 +316,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       opacity: interpolate(
         translateY.value,
         [0, heightDevice],
-        [1, 0],
+        [scrimOpacity, 0],
         Extrapolation.CLAMP,
       ),
     };
   });
 
-  // landscape side buttons span the full height, so inset the content; in
-  // portrait the side status bar only covers the top corner
-  const needsSideInset = isDuo && !isDuoCentered && !isPortrait;
-  const sideInsetStyle = needsSideInset && {
-    paddingLeft: insets.left,
-    paddingRight: insets.right,
-  };
-
   const screen = (
     <Screen
       {...props}
@@ -335,6 +339,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -361,29 +366,27 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: Radius.M,
-              borderTopRightRadius: Radius.M,
+              borderTopLeftRadius: sheet.radius,
+              borderTopRightRadius: sheet.radius,
               overflow: 'hidden',
             },
-            isDuo && {
-              maxHeight: windowSize.height - topGap - keyboardLift,
-              marginBottom: keyboardLift,
-            },
-            isDuoCentered && {
-              // keeps the portrait width in landscape, like system sheets
-              width: Math.min(
-                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
-                windowSize.width -
-                  Math.max(insets.left, insets.right, Spacing.L) * 2,
-              ),
-              alignSelf: 'center',
-            },
+            isDuo && { marginBottom: keyboardLift },
+            isFoldable &&
+              sheet.width !== undefined &&
+              sheet.maxHeight !== undefined && {
+                // centered in the placement area, clear of the iPhone Duo
+                // control column and on the right half when half folded
+                width: sheet.width,
+                marginLeft: placement.x + (placement.width - sheet.width) / 2,
+                maxHeight: sheet.maxHeight - keyboardLift,
+                minHeight: sheet.minHeight,
+              },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {isDuo ? (
+          {isFoldable ? (
             // content shrinks so a tall sheet keeps its header and footer
-            <View style={[styles.shrink, sideInsetStyle]}>
+            <View style={styles.shrink}>
               {renderHeader()}
               <View style={styles.shrink}>{screen}</View>
             </View>
@@ -401,7 +404,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
-                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -428,7 +430,7 @@ const styles = StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: Colors.black_20,
   },
   indicator: {
     width: 40,
@@ -440,10 +442,11 @@ const styles = StyleSheet.create({
     top: Spacing.S,
   },
   header: {
-    height: 56,
+    height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
   },
+  title: { textAlign: 'center' },
   iconButton: {
     width: 24,
     height: 24,
@@ -451,6 +454,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
+  foldableIconButton: {
+    width: FOLDABLE_ICON_BUTTON_SIZE,
+    height: FOLDABLE_ICON_BUTTON_SIZE,
+  },
   shrink: { flexShrink: 1 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });