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

package/Application/BottomSheet.tsx

@@ -1,14 +1,25 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   BackHandler,
   Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
+  KeyboardEvent,
+  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
   TouchableOpacity,
+  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -22,22 +33,58 @@ import Animated, {
   Easing,
   Extrapolation,
   interpolate,
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
+import { DuoMetrics, InnerEdgeStyles, useScreenLayout } from '../Layout/utils';
+import { getDuoTopInset, isIPhoneDuo } from './device';
+import { SideBarButton } from './Components/SideBarButton';
+
+// 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'];
+const SIDE_COLUMN_OFFSET =
+  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const heightDevice = Dimensions.get('screen').height;
+  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;
+  // '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 bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const topGap = Math.max(
+    sideColumn
+      ? insets.top
+      : 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;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -58,6 +105,46 @@ 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);
+  const [sheetTop, setSheetTop] = useState(windowSize.height);
+
+  // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
+  // so lift it here and shrink maxHeight by the same amount instead
+  useEffect(() => {
+    if (!isDuo || !useKeyboardAvoidingView) {
+      return;
+    }
+    const onKeyboardChange = (e: KeyboardEvent) => {
+      const overlap = windowSize.height - e.endCoordinates.screenY;
+      const lift = Math.max(
+        overlap - bottomInset - (keyboardVerticalOffset ?? 0),
+        0,
+      );
+      if (e.duration) {
+        LayoutAnimation.configureNext({
+          duration: e.duration,
+          update: {
+            duration: e.duration,
+            type: LayoutAnimation.Types[e.easing] || 'keyboard',
+          },
+        });
+      }
+      setKeyboardLift(lift);
+    };
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
+      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
+    ];
+    return () => subscriptions.forEach(sub => sub.remove());
+  }, [
+    bottomInset,
+    isDuo,
+    keyboardVerticalOffset,
+    useKeyboardAvoidingView,
+    windowSize.height,
+  ]);
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -74,7 +161,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           duration: 200,
           easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
         },
-        () => runOnJS(callback)(),
+        () => scheduleOnRN(callback),
       );
     },
     [heightDevice, translateY],
@@ -117,15 +204,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
@@ -137,9 +224,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }
       closeAnimation(() => {
         navigator?.pop();
-        runOnJS(() => {
+        scheduleOnRN(() => {
           callback?.();
-        })();
+        });
       });
     },
     [barrierDismissible, closeAnimation, navigator],
@@ -166,13 +253,42 @@ 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';
+  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]);
+
   /**
    * render header
    */
   const renderHeader = useCallback(() => {
+    const showButtons = !hasSideColumn;
     return (
       <View {...panResponder.panHandlers}>
-        <View style={{ height: 16 }}>
+        <View style={{ height: INDICATOR_HEIGHT }}>
           <View style={styles.indicator} />
         </View>
         <View
@@ -184,14 +300,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {leftOptions?.onPressIconLeft ? (
-            <TouchableOpacity
-              style={styles.iconButton}
-              onPress={() => {
-                onDismiss(true, leftOptions.onPressIconLeft);
-              }}
-            >
-              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+          {showButtons && showBack ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
+              <Icon source={iconBack} />
             </TouchableOpacity>
           ) : null}
 
@@ -199,9 +310,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {!leftOptions ? <View style={styles.iconButton} /> : null}
+              {showButtons && !leftOptions ? (
+                <View style={styles.iconButton} />
+              ) : null}
               <Text
-                style={[Styles.flex, { textAlign: 'center' }]}
+                style={[
+                  Styles.flex,
+                  styles.title,
+                  !showButtons && styles.titleInset,
+                ]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -209,28 +326,63 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => {
-              action.current = 'icon_close';
-              onDismiss(true);
-            }}
-          >
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
+          {showButtons ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
+              <Icon source="navigation_close" />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </View>
     );
   }, [
-    onDismiss,
+    hasSideColumn,
+    iconBack,
     leftOptions,
+    onPressBack,
+    onPressClose,
     options.header,
     options.title,
     panResponder.panHandlers,
+    showBack,
     theme.colors.border.default,
     useDivider,
   ]);
 
+  /**
+   * 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.
+   */
+  const renderSideColumn = () => {
+    if (!sideColumn) {
+      return null;
+    }
+    const lowestTop =
+      windowSize.height - 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 },
+        ]}
+      >
+        {showBack ? (
+          <SideBarButton icon={iconBack} onPress={onPressBack} />
+        ) : null}
+        <SideBarButton icon="navigation_close" onPress={onPressClose} />
+      </View>
+    );
+  };
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
@@ -248,6 +400,19 @@ 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),
+  };
+
+  const screen = (
+    <Screen
+      {...props}
+      {...props.route.params}
+      onRequestClose={onRequestClose}
+    />
+  );
+
   return (
     <Container
       transparent
@@ -257,6 +422,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -264,7 +430,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           android: undefined,
         })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-        enabled={useKeyboardAvoidingView}
+        enabled={useKeyboardAvoidingView && !isDuo}
         contentContainerStyle={styles.container}
         style={styles.container}
       >
@@ -279,23 +445,50 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
+          onLayout={
+            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
+          }
           style={[
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: Radius.M,
-              borderTopRightRadius: Radius.M,
+              borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
+              borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
               overflow: 'hidden',
             },
+            isDuo && {
+              maxHeight: windowSize.height - topGap - keyboardLift,
+              marginBottom: keyboardLift,
+            },
+            isDuoFloating && { marginHorizontal: Spacing.M },
+            sideColumn && {
+              minHeight:
+                SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
+            },
+            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',
+            },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {renderHeader()}
-          <Screen
-            {...props}
-            {...props.route.params}
-            onRequestClose={onRequestClose}
-          />
+          {isDuo ? (
+            // content shrinks so a tall sheet keeps its header and footer
+            <View style={[styles.shrink, sideInsetStyle]}>
+              {renderHeader()}
+              <View style={styles.shrink}>{screen}</View>
+            </View>
+          ) : (
+            <>
+              {renderHeader()}
+              {screen}
+            </>
+          )}
           {footerComponent && (
             <View
               style={[
@@ -304,6 +497,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
+                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -317,6 +511,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
+          {renderSideColumn()}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
@@ -342,10 +537,12 @@ const styles = StyleSheet.create({
     top: Spacing.S,
   },
   header: {
-    height: 56,
+    height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
   },
+  title: { textAlign: 'center' },
+  titleInset: { paddingHorizontal: Spacing.M },
   iconButton: {
     width: 24,
     height: 24,
@@ -353,6 +550,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
+  shrink: { flexShrink: 1 },
+  sideColumn: {
+    position: 'absolute',
+    gap: Spacing.M,
+  },
+  alignRight: { right: 0 },
+  alignLeft: { left: 0 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,11 +58,13 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
+  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth =
+    (widthDevice - insets.left - insets.right) /
+    (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
-  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -246,7 +248,8 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
         },
         style,
       ]}

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -116,17 +116,15 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
     });
   };
 
+  const background = focused ? activeBackgroundColor : inactiveBackgroundColor;
+
   return (
     <TouchableOpacity
       onPress={onPress}
       onLongPress={onLongPress}
       style={[
         styles.container,
-        {
-          backgroundColor: focused
-            ? activeBackgroundColor
-            : inactiveBackgroundColor,
-        },
+        { backgroundColor: background },
         style,
         showBaseLineDebug && styles.debugBaseLine,
       ]}

package/Application/BottomTab/DuoBarCompression.tsx

@@ -0,0 +1,135 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { Spacing } from '../../Consts';
+import { useScreenLayout } from '../../Layout';
+import { DuoMetrics } from '../../Layout/utils';
+
+export type DuoBarCompressionBehavior = 'toolbar' | 'tabBar';
+
+type DuoBarCompression = {
+  toolbarCompressed: boolean;
+  tabBarCompressed: boolean;
+  // the open rail needs the toolbar button slot too: only Back stays
+  toolbarHidden?: boolean;
+  // tapping the compressed bar expands it and compresses the other one
+  expandToolbar?: () => void;
+  expandTabBar?: () => void;
+  // a rail opened from the compressed state closes once a tab is picked
+  onTabSelected?: () => void;
+  // header buttons report their full height so the tab bar knows what is left
+  setToolbarHeight?: (height: number) => void;
+};
+
+const RAIL_PADDING = 6;
+const RAIL_GAP = Spacing.XXS;
+// space kept between the top and the bottom groups (HIG Vertical controls)
+const GROUP_GAP = Spacing.M;
+// Back, then the right toolkit: help + home capsule
+const DEFAULT_TOOLBAR_HEIGHT =
+  DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
+// Back, then the single button the toolbar folds into
+const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
+
+const NO_COMPRESSION: DuoBarCompression = {
+  toolbarCompressed: false,
+  tabBarCompressed: false,
+};
+
+const DuoBarCompressionContext =
+  createContext<DuoBarCompression>(NO_COMPRESSION);
+
+/**
+ * height of the vertical tab rail, plus the QR button under it
+ */
+const getRailHeight = (tabCount: number, hasQr: boolean) =>
+  2 * RAIL_PADDING +
+  tabCount * DuoMetrics.controlSize +
+  Math.max(tabCount - 1, 0) * RAIL_GAP +
+  (hasQr ? Spacing.M + DuoMetrics.controlSize : 0);
+
+/**
+ * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
+ * iPhone Duo: Vertical controls):
+ * - both fit: both stay whole
+ * - one fits whole beside the other compressed: one is compressed, tapping it swaps them
+ * - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+ *   again once a tab is picked)
+ */
+const DuoBarCompressionProvider: React.FC<{
+  behavior?: DuoBarCompressionBehavior;
+  tabCount: number;
+  hasQr: boolean;
+  children: ReactNode;
+}> = ({ behavior = 'toolbar', tabCount, hasQr, children }) => {
+  const { height, sideBar } = useScreenLayout();
+  const [toolbarHeight, setToolbarHeight] = useState(DEFAULT_TOOLBAR_HEIGHT);
+  // 'toolbar' compression keeps the tab bar whole until the toolbar is tapped
+  const [expanded, setExpanded] = useState<'toolbar' | 'tabBar'>(
+    behavior === 'toolbar' ? 'tabBar' : 'toolbar',
+  );
+  // bar opened for a moment while both rest compressed
+  const [opened, setOpened] = useState<'toolbar' | 'tabBar'>();
+
+  const value = useMemo(() => {
+    if (!sideBar) {
+      return NO_COMPRESSION;
+    }
+    const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
+    const tabBar = getRailHeight(tabCount, hasQr);
+    const compressedTabBar = getRailHeight(1, hasQr) - 2 * RAIL_PADDING;
+    const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
+
+    if (fits(toolbarHeight, tabBar)) {
+      return { ...NO_COMPRESSION, setToolbarHeight };
+    }
+    const canSwap =
+      fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) &&
+      fits(toolbarHeight, compressedTabBar);
+    if (canSwap) {
+      return {
+        toolbarCompressed: expanded === 'tabBar',
+        tabBarCompressed: expanded === 'toolbar',
+        expandToolbar: () => setExpanded('toolbar'),
+        expandTabBar: () => setExpanded('tabBar'),
+        setToolbarHeight,
+      };
+    }
+
+    const open = {
+      expandToolbar: () => setOpened('toolbar'),
+      expandTabBar: () => setOpened('tabBar'),
+      setToolbarHeight,
+    };
+    // an opened rail always shows, even when only the gap between the groups is short:
+    // it closes again once a tab is picked
+    if (opened === 'tabBar') {
+      return {
+        ...open,
+        toolbarCompressed: true,
+        toolbarHidden: true,
+        tabBarCompressed: false,
+        onTabSelected: () => setOpened(undefined),
+      };
+    }
+    return {
+      ...open,
+      toolbarCompressed: opened !== 'toolbar',
+      tabBarCompressed: true,
+    };
+  }, [expanded, opened, hasQr, height, sideBar, tabCount, toolbarHeight]);
+
+  return (
+    <DuoBarCompressionContext.Provider value={value}>
+      {children}
+    </DuoBarCompressionContext.Provider>
+  );
+};
+
+const useDuoBarCompression = () => useContext(DuoBarCompressionContext);
+
+export { DuoBarCompressionProvider, useDuoBarCompression };