@momo-kits/foundation 0.169.1 → 0.169.3-beta.1

package/Application/BottomSheet.hooks.ts

@@ -16,43 +16,24 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useHeaderHeight } from '@react-navigation/elements';
-import { Spacing } from '../Consts';
-import { DuoMetrics, useScreenLayout } from '../Layout/utils';
 import { scheduleOnRN } from 'react-native-worklets';
 import { BottomSheetParams, NavigatorProps } from './types';
-import { getDuoTopInset, isIPhoneDuo } from './utils';
-import { DUO_REGULAR_MIN_WIDTH, getSideInset } from './BottomSheet.styles';
+import { isIPhoneDuo } from './utils';
+import { useModalLayout } from './modalLayout';
 
+/**
+ * Sheet geometry for the current window: foldable placement and size from
+ * `useModalLayout`, plus the insets and offsets the keyboard handling needs.
+ */
 export const useBottomSheetLayout = () => {
   const windowSize = useWindowDimensions();
   const isDuo = isIPhoneDuo();
-  const isDuoCentered =
-    isDuo &&
-    Math.min(windowSize.width, windowSize.height) >= DUO_REGULAR_MIN_WIDTH;
-  const isDuoFloating = isDuo && !isDuoCentered;
-  const { sideBar } = useScreenLayout();
-  const sideColumnWidth = (sideBar?.width ?? 0) - Spacing.M;
-  const sideColumn =
-    isDuoFloating &&
-    sideColumnWidth >= DuoMetrics.controlSize + Spacing.M &&
-    sideBar
-      ? sideBar
-      : undefined;
-  const hasSideColumn = !!sideColumn;
+  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 insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const topGap = Math.max(
-    sideColumn
-      ? insets.top
-      : 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;
@@ -60,17 +41,11 @@ export const useBottomSheetLayout = () => {
   return {
     windowSize,
     isDuo,
-    isDuoCentered,
-    isDuoFloating,
-    sideColumn,
-    sideColumnWidth,
-    hasSideColumn,
+    isFoldable,
+    placement,
+    sheet,
+    scrimOpacity,
     heightDevice,
-    insets,
-    topGap,
-    sideInsetLeft,
-    sideInsetRight,
-    indicatorShift,
     bottomInset,
     keyboardOffset,
   };
@@ -124,9 +99,14 @@ export const useDuoKeyboardLift = (
   return keyboardLift;
 };
 
+/**
+ * Slide of the sheet and fade of the scrim behind it, up to the
+ * `scrimOpacity` of the modal spec (lighter on foldables).
+ */
 export const useSheetAnimatedStyles = (
   translateY: SharedValue<number>,
   heightDevice: number,
+  scrimOpacity: number,
 ) => {
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -139,7 +119,7 @@ export const useSheetAnimatedStyles = (
       opacity: interpolate(
         translateY.value,
         [0, heightDevice],
-        [1, 0],
+        [scrimOpacity, 0],
         Extrapolation.CLAMP,
       ),
     };

package/Application/BottomSheet.parts.tsx

@@ -1,169 +1,90 @@
 import React from 'react';
-import {
-  PanResponderInstance,
-  ScaledSize,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
-import { Radius, Spacing, Styles } from '../Consts';
+import { PanResponderInstance, View, ViewStyle } from 'react-native';
+import { Spacing, Styles } from '../Consts';
 import layoutStyles from '../Layout/styles';
 import { Text } from '../Text';
-import { Icon } from '../Icon';
-import { InnerEdgeStyles, type SideBarLayout } from '../Layout/utils';
-import { SideBarButton } from './Components/SideBarButton';
-import {
-  INDICATOR_HEIGHT,
-  SIDE_COLUMN_OFFSET,
-  styles,
-} from './BottomSheet.styles';
+import { INDICATOR_HEIGHT, styles } from './BottomSheet.styles';
+import { ModalIconButton } from './ModalIconButton';
+import { type ModalLayout } from './modalLayout';
 import { BottomSheetParams, Theme } from './types';
 
-type SheetPartsParams = {
+type SheetHeaderParams = {
   panHandlers: PanResponderInstance['panHandlers'];
-  indicatorShift: number;
   useDivider: boolean;
   theme: Theme;
-  hasSideColumn: boolean;
   showBack: boolean;
   onPressBack: () => void;
   onPressClose: () => void;
   iconBack: string;
   options: BottomSheetParams['options'];
   leftOptions: BottomSheetParams['leftOptions'];
-  sideColumn?: SideBarLayout;
-  windowHeight: number;
-  sheetTop: number;
-  sideColumnHeight: number;
-  sideColumnWidth: number;
 };
 
+/**
+ * Drag handle and header row: back, title (or a custom header) and close, with
+ * the 32 modal icon buttons on every device.
+ */
 export const renderSheetHeader = ({
   panHandlers,
-  indicatorShift,
   useDivider,
   theme,
-  hasSideColumn,
   showBack,
   onPressBack,
   onPressClose,
   iconBack,
   options,
   leftOptions,
-}: SheetPartsParams) => {
-  const showButtons = !hasSideColumn;
-  return (
-    <View {...panHandlers}>
-      <View style={{ height: INDICATOR_HEIGHT }}>
-        <View
-          style={[
-            styles.indicator,
-            indicatorShift !== 0 && {
-              transform: [{ translateX: indicatorShift }],
-            },
-          ]}
-        />
-      </View>
-      <View
-        style={[
-          styles.header,
-          useDivider && styles.headerDivider,
-          useDivider && {
-            borderBottomColor: theme.colors.border.default,
-          },
-        ]}
-      >
-        {showButtons && showBack ? (
-          <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
-            <Icon source={iconBack} />
-          </TouchableOpacity>
-        ) : null}
-
-        {options.header ? (
-          <View style={Styles.flex}>{options.header}</View>
-        ) : (
-          <>
-            {showButtons && !leftOptions ? (
-              <View style={styles.iconButton} />
-            ) : null}
-            <Text
-              style={[
-                Styles.flex,
-                styles.title,
-                !showButtons && styles.titleInset,
-              ]}
-              numberOfLines={1}
-              typography="header_default_bold"
-            >
-              {options.title ?? ''}
-            </Text>
-          </>
-        )}
-        {showButtons ? (
-          <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
-        ) : null}
-      </View>
+}: SheetHeaderParams) => (
+  <View {...panHandlers}>
+    <View style={{ height: INDICATOR_HEIGHT }}>
+      <View style={styles.indicator} />
     </View>
-  );
-};
-
-/**
- * iPhone Duo folded: back and close move to the side bar column, drawn on
- * the part of the sheet under the side safe area. They line up with the
- * header row, stay below the status bar cluster on a tall sheet and above a
- * camera at the bottom end of the strip.
- */
-export const renderSheetSideColumn = ({
-  sideColumn,
-  windowHeight,
-  sheetTop,
-  sideColumnHeight,
-  sideColumnWidth,
-  showBack,
-  iconBack,
-  onPressBack,
-  onPressClose,
-}: SheetPartsParams) => {
-  if (!sideColumn) {
-    return null;
-  }
-  const lowestTop =
-    windowHeight - sideColumn.bottom - sideColumnHeight - sheetTop;
-  const top = Math.min(
-    Math.max(sideColumn.top - sheetTop, SIDE_COLUMN_OFFSET),
-    lowestTop,
-  );
-
-  return (
     <View
-      pointerEvents={'box-none'}
       style={[
-        styles.sideColumn,
-        sideColumn.edge === 'right' ? styles.alignRight : styles.alignLeft,
-        InnerEdgeStyles[sideColumn.edge],
-        { top, width: sideColumnWidth },
+        styles.header,
+        useDivider && styles.headerDivider,
+        useDivider && {
+          borderBottomColor: theme.colors.border.default,
+        },
       ]}
     >
       {showBack ? (
-        <SideBarButton icon={iconBack} onPress={onPressBack} />
+        <ModalIconButton icon={iconBack} onPress={onPressBack} />
       ) : null}
-      <SideBarButton icon="navigation_close" onPress={onPressClose} />
+
+      {options.header ? (
+        <View style={Styles.flex}>{options.header}</View>
+      ) : (
+        <>
+          {!leftOptions ? <View style={styles.iconButtonSpace} /> : null}
+          <Text
+            style={[Styles.flex, styles.title]}
+            numberOfLines={1}
+            typography="header_default_bold"
+          >
+            {options.title ?? ''}
+          </Text>
+        </>
+      )}
+      <ModalIconButton icon="navigation_close" onPress={onPressClose} />
     </View>
-  );
-};
+  </View>
+);
 
+/**
+ * Footer pinned under the sheet content, `null` when the sheet has none.
+ */
 export const renderSheetFooter = ({
   footerComponent,
   theme,
-  sideInsetStyle,
 }: {
   footerComponent: BottomSheetParams['footerComponent'];
   theme: Theme;
-  sideInsetStyle: any;
-}) =>
-  footerComponent && (
+}) => {
+  if (!footerComponent) {
+    return null;
+  }
+  return (
     <View
       style={[
         layoutStyles.shadow,
@@ -171,61 +92,56 @@ export const renderSheetFooter = ({
           paddingBottom: Spacing.S,
           backgroundColor: theme.colors.background.surface,
         },
-        sideInsetStyle,
       ]}
     >
       {footerComponent}
     </View>
   );
+};
 
 type SheetStyleParams = {
   backgroundColor: string;
   isDuo: boolean;
-  isDuoFloating: boolean;
-  isDuoCentered: boolean;
-  windowSize: ScaledSize;
-  topGap: number;
+  isFoldable: boolean;
+  placement: ModalLayout['placement'];
+  sheet: ModalLayout['sheet'];
   keyboardLift: number;
-  sideColumn?: SideBarLayout;
-  sideColumnHeight: number;
-  insets: EdgeInsets;
   showBaseLineDebug: boolean;
 };
 
+/**
+ * Sheet container style. On foldables the sheet is centered in the placement
+ * area, clear of the iPhone Duo control column and on the right half when half
+ * folded; the keyboard lift comes off its max height.
+ */
 export const getSheetStyle = ({
   backgroundColor,
   isDuo,
-  isDuoFloating,
-  isDuoCentered,
-  windowSize,
-  topGap,
+  isFoldable,
+  placement,
+  sheet,
   keyboardLift,
-  sideColumn,
-  sideColumnHeight,
-  insets,
   showBaseLineDebug,
-}: SheetStyleParams) => [
-  styles.sheetContainer,
-  {
-    backgroundColor,
-    borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
-    borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
-  },
-  isDuo && {
-    maxHeight: windowSize.height - topGap - keyboardLift,
-    marginBottom: keyboardLift,
-  },
-  isDuoFloating && { marginHorizontal: Spacing.M },
-  sideColumn && {
-    minHeight: SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
-  },
-  isDuoCentered && styles.centered,
-  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,
-    ),
-  },
-  showBaseLineDebug && styles.debugBaseLine,
-];
+}: SheetStyleParams) => {
+  const { width, maxHeight } = sheet;
+  let foldableStyle: ViewStyle | undefined;
+  if (isFoldable && width !== undefined && maxHeight !== undefined) {
+    foldableStyle = {
+      width,
+      marginLeft: placement.x + (placement.width - width) / 2,
+      maxHeight: maxHeight - keyboardLift,
+      minHeight: sheet.minHeight,
+    };
+  }
+  return [
+    styles.sheetContainer,
+    {
+      backgroundColor,
+      borderTopLeftRadius: sheet.radius,
+      borderTopRightRadius: sheet.radius,
+    },
+    isDuo && { marginBottom: keyboardLift },
+    foldableStyle,
+    showBaseLineDebug && styles.debugBaseLine,
+  ];
+};

package/Application/BottomSheet.styles.ts

@@ -1,17 +1,10 @@
 import { StyleSheet } from 'react-native';
 import { Colors, Radius, Spacing } from '../Consts';
-import { DuoMetrics } from '../Layout/utils';
-
-// iPhone Duo inner display: center the sheet instead of spanning the width
-export const DUO_REGULAR_MIN_WIDTH = 600;
+import { MODAL_ICON_BUTTON_SIZE } from './ModalIconButton';
 
 export const INDICATOR_HEIGHT = 16;
 export const HEADER_HEIGHT = 56;
 export const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-export const SIDE_COLUMN_OFFSET =
-  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
-
-export const getSideInset = (inset: number) => Math.max(inset - Spacing.M, 0);
 
 export const styles = StyleSheet.create({
   container: {
@@ -20,7 +13,7 @@ export const styles = StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: Colors.black_20,
   },
   indicator: {
     width: 40,
@@ -35,25 +28,16 @@ export const styles = StyleSheet.create({
     height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
+    paddingHorizontal: Spacing.M,
+    gap: Spacing.S,
   },
   title: { textAlign: 'center' },
-  titleInset: { paddingHorizontal: Spacing.M },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
+  iconButtonSpace: {
+    width: MODAL_ICON_BUTTON_SIZE,
+    height: MODAL_ICON_BUTTON_SIZE,
   },
   shrink: { flexShrink: 1 },
-  sideColumn: {
-    position: 'absolute',
-    gap: Spacing.M,
-  },
-  alignRight: { right: 0 },
-  alignLeft: { left: 0 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   headerDivider: { borderBottomWidth: 1 },
   sheetContainer: { overflow: 'hidden' },
-  centered: { alignSelf: 'center' },
 });

package/Application/BottomSheet.tsx

@@ -1,23 +1,15 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   KeyboardAvoidingView,
   Modal,
   PanResponder,
   Platform,
   Pressable,
-  StatusBar,
   StyleSheet,
   View,
 } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { BottomSheetParams } from './types';
-import { Spacing } from '../Consts';
 import Animated, {
   Easing,
   useSharedValue,
@@ -25,7 +17,6 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
-import { DuoMetrics } from '../Layout/utils';
 import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
 import {
   useBottomSheetLayout,
@@ -37,7 +28,6 @@ import {
   getSheetStyle,
   renderSheetFooter,
   renderSheetHeader,
-  renderSheetSideColumn,
 } from './BottomSheet.parts';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
@@ -46,17 +36,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {
     windowSize,
     isDuo,
-    isDuoCentered,
-    isDuoFloating,
-    sideColumn,
-    sideColumnWidth,
-    hasSideColumn,
+    isFoldable,
+    placement,
+    sheet,
+    scrimOpacity,
     heightDevice,
-    insets,
-    topGap,
-    sideInsetLeft,
-    sideInsetRight,
-    indicatorShift,
     bottomInset,
     keyboardOffset,
   } = useBottomSheetLayout();
@@ -82,7 +66,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const translateY = useSharedValue(heightDevice);
   const onDismissRef = useRef(props.route.params?.onDismiss);
   onDismissRef.current = props.route.params?.onDismiss;
-  const [sheetTop, setSheetTop] = useState(windowSize.height);
   const keyboardLift = useDuoKeyboardLift(
     isDuo,
     useKeyboardAvoidingView,
@@ -170,52 +153,25 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const showBack = !!leftOptions?.onPressIconLeft;
   const iconBack = leftOptions?.iconLeft ?? 'ic_back';
-  const sideColumnCount = showBack ? 2 : 1;
-  const sideColumnHeight =
-    sideColumnCount * DuoMetrics.controlSize +
-    (sideColumnCount - 1) * Spacing.M;
-  const coversStatusBar = !!sideColumn && sheetTop < sideColumn.top;
 
-  useEffect(() => {
-    if (!coversStatusBar) {
-      return;
-    }
-    const entry = StatusBar.pushStackEntry({
-      barStyle: theme.dark ? 'light-content' : 'dark-content',
-      animated: true,
-    });
-    return () => StatusBar.popStackEntry(entry);
-  }, [coversStatusBar, theme.dark]);
-
-  const partsParams = {
+  const headerParams = {
     panHandlers: panResponder.panHandlers,
-    indicatorShift,
     useDivider,
     theme,
-    hasSideColumn,
     showBack,
     onPressBack,
     onPressClose,
     iconBack,
     options,
     leftOptions,
-    sideColumn,
-    windowHeight: windowSize.height,
-    sheetTop,
-    sideColumnHeight,
-    sideColumnWidth,
   };
 
   const { animatedStyle, animatedOverlayStyle } = useSheetAnimatedStyles(
     translateY,
     heightDevice,
+    scrimOpacity,
   );
 
-  const sideInsetStyle = isDuoFloating && {
-    paddingLeft: sideInsetLeft,
-    paddingRight: sideInsetRight,
-  };
-
   const screen = (
     <Screen
       {...props}
@@ -256,39 +212,32 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
-          onLayout={
-            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
-          }
           style={[
             animatedStyle,
             getSheetStyle({
               backgroundColor,
               isDuo,
-              isDuoFloating,
-              isDuoCentered,
-              windowSize,
-              topGap,
+              isFoldable,
+              placement,
+              sheet,
               keyboardLift,
-              sideColumn,
-              sideColumnHeight,
-              insets,
               showBaseLineDebug,
             }),
           ]}
         >
-          {isDuo ? (
+          {isFoldable ? (
             // content shrinks so a tall sheet keeps its header and footer
-            <View style={[styles.shrink, sideInsetStyle]}>
-              {renderSheetHeader(partsParams)}
+            <View style={styles.shrink}>
+              {renderSheetHeader(headerParams)}
               <View style={styles.shrink}>{screen}</View>
             </View>
           ) : (
             <>
-              {renderSheetHeader(partsParams)}
+              {renderSheetHeader(headerParams)}
               {screen}
             </>
           )}
-          {renderSheetFooter({ footerComponent, theme, sideInsetStyle })}
+          {renderSheetFooter({ footerComponent, theme })}
           {useBottomInset && (
             <View
               style={{
@@ -297,7 +246,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
-          {renderSheetSideColumn(partsParams)}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>