@momo-kits/foundation 0.167.1-beta.5 → 0.167.1-duo-test.1

package/Layout/index.ts

@@ -1,7 +1,7 @@
 import Card from './Card';
 import Section from './Section';
-import GridSystem from './GridSystem';
-import { validateChildren } from './utils';
+import { useScreenLayout, validateChildren } from './utils';
+import type { ScreenLayout, SideBarEdge, SideBarLayout } from './utils';
 import { createContext } from 'react';
 import { GridContextProps } from './types';
 import Item from './Item';
@@ -18,14 +18,14 @@ const GridContext = createContext<GridContextProps>({
   getSizeSpan: () => 0,
 });
 
-export type { ScreenProps };
+export type { ScreenProps, ScreenLayout, SideBarEdge, SideBarLayout };
 
 export {
   GridContext,
   Card,
   Section,
-  GridSystem,
   validateChildren,
+  useScreenLayout,
   Item,
   ItemList,
   ItemSectionList,

package/Layout/styles.ts

@@ -91,5 +91,10 @@ export default StyleSheet.create({
       },
     }),
   },
+  footerClip: {
+    marginTop: -Spacing.XL,
+    paddingTop: Spacing.XL,
+    overflow: 'hidden',
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Layout/utils.ts

@@ -1,5 +1,11 @@
-import React, { Fragment, ReactElement } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { Fragment, ReactElement, useContext } from 'react';
+import { Platform, useWindowDimensions, ViewStyle } from 'react-native';
+import {
+  EdgeInsets,
+  SafeAreaInsetsContext,
+} from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
+import { ReservedRegion, ReservedRegionsContext } from './ReservedRegions';
 
 /**
  * validate children type
@@ -38,10 +44,464 @@ const validateChildren = (
   }
 };
 
+/**
+ * Header geometry
+ * - barHeight: navigation bar row below the status bar
+ * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
+ * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
+ * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
+ *   5pt side margins on iOS from 414pt wide
+ */
+const HeaderMetrics = {
+  barHeight: 52,
+  iPhoneMinHeight: 72,
+  statusBarMinInset: 20,
+  largeWidth: 414,
+  largeMargin: 5,
+};
+
+/**
+ * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
+ * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
+ *   iPhone is 1.77 or taller
+ * - innerMinHeight: window height from which the inner display is in use (outer display
+ *   is 466pt tall in landscape, inner display 669pt)
+ * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
+ *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
+ * - firstItemTop: with the status bar in the strip, the first control sits under the
+ *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
+ *   y 98 on the inner display in landscape)
+ * - outerHeaderHeight / outerCameraCenterY: on the outer display in portrait the header
+ *   is 4pt taller than iPhoneMinHeight and its title lines up with the camera punchout
+ *   (y 24–66 at the top of the strip)
+ * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
+ *   controls start this far from the top and stay this far above the bottom, unless a
+ *   reserved region (the camera at either end) asks for more
+ * - innerStatusBarCenterY / innerStatusBarWidth: on the inner display in portrait the
+ *   clock and connectivity cluster sits at the top right corner (x 550–643 of 669, clock
+ *   digits centered on y 47); its reserved region, when reported, is taller than the glyphs
+ */
+const DuoMetrics = {
+  maxAspectRatio: 1.6,
+  innerMinHeight: 600,
+  controlSize: 48,
+  itemPitch: 50,
+  firstItemTop: 170,
+  firstItemTopLandscape: 120,
+  outerHeaderHeight: 76,
+  outerCameraCenterY: 45,
+  edgeInset: 24,
+  innerStatusBarCenterY: 47,
+  innerStatusBarWidth: 120,
+};
+
+const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+/**
+ * how far system regions reach into a side strip from its top and from its bottom end
+ * (e.g. the camera, which sits at either end depending on the rotation), and the center
+ * y of the region reaching furthest from the top
+ */
+const getStripOcclusion = (
+  regions: ReservedRegion[],
+  stripLeft: number,
+  stripRight: number,
+  windowHeight: number,
+) =>
+  regions.reduce(
+    (occlusion, region) => {
+      const overlapsStrip =
+        region.x < stripRight && region.x + region.width > stripLeft;
+      if (!overlapsStrip) {
+        return occlusion;
+      }
+      const centerY = region.y + region.height / 2;
+      if (centerY < windowHeight / 2) {
+        if (region.y + region.height > occlusion.top) {
+          occlusion.top = region.y + region.height;
+          occlusion.topCenter = centerY;
+        }
+      } else {
+        occlusion.bottom = Math.max(occlusion.bottom, windowHeight - region.y);
+      }
+      return occlusion;
+    },
+    { top: 0, topCenter: 0, bottom: 0 },
+  );
+
+/**
+ * how far the clock and battery clusters of a status bar on the top edge reach in from
+ * each side. `undefined` without reserved regions there
+ */
+const getStatusBarClusters = (
+  regions: ReservedRegion[],
+  windowWidth: number,
+  topInset: number,
+) => {
+  const midX = windowWidth / 2;
+  const clusters = regions.filter(
+    region =>
+      region.y < topInset &&
+      region.y + region.height <= topInset &&
+      (region.x + region.width <= midX || region.x >= midX),
+  );
+  if (!clusters.length) {
+    return undefined;
+  }
+
+  return clusters.reduce(
+    (result, region) => {
+      if (region.x < midX) {
+        result.left = Math.max(result.left, region.x + region.width);
+      } else {
+        result.right = Math.max(result.right, windowWidth - region.x);
+      }
+      return result;
+    },
+    { left: 0, right: 0 },
+  );
+};
+
+const isIPhone = () =>
+  Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
+
+/**
+ * Header height and the room it keeps above the bar row for the status bar. On iPhone the
+ * header is at least iPhoneMinHeight, and with the status bar off the top edge the row
+ * spans the whole header, so the title stays vertically centered.
+ */
+const getHeaderLayout = (topInset: number) => {
+  const height = HeaderMetrics.barHeight + topInset;
+  if (!isIPhone()) {
+    return { headerHeight: height, headerStatusBarHeight: topInset };
+  }
+
+  return {
+    headerHeight: Math.max(height, HeaderMetrics.iPhoneMinHeight),
+    headerStatusBarHeight:
+      topInset < HeaderMetrics.statusBarMinInset ? 0 : topInset,
+  };
+};
+
+/**
+ * Header whose bar row is centered on a window y, at least iPhoneMinHeight tall and
+ * reaching 8pt below a side bar control centered there
+ */
+const getCenteredHeaderLayout = (centerY: number) => {
+  const headerHeight = Math.max(
+    HeaderMetrics.iPhoneMinHeight,
+    centerY + DuoMetrics.controlSize / 2 + Spacing.S,
+  );
+  return {
+    headerHeight,
+    headerStatusBarHeight: Math.max(0, centerY * 2 - headerHeight),
+  };
+};
+
+export type SideBarEdge = 'left' | 'right';
+
+export type SideBarLayout = {
+  /**
+   * Edge holding the side bar, the one with the larger safe-area inset.
+   */
+  edge: SideBarEdge;
+
+  /**
+   * Width of the side bar column, the safe-area inset on that edge.
+   */
+  width: number;
+
+  /**
+   * Window y of the first side bar item, below the navigation bar and the side status bar.
+   */
+  top: number;
+
+  /**
+   * Room to keep free above the window bottom, clear of a camera at the bottom end.
+   */
+  bottom: number;
+};
+
+export type ScreenLayout = {
+  /**
+   * Window width, from useWindowDimensions.
+   */
+  width: number;
+
+  /**
+   * Window height, from useWindowDimensions.
+   */
+  height: number;
+
+  /**
+   * `true` when running on iPhone Duo, outer or inner display.
+   */
+  isIPhoneDuo: boolean;
+
+  /**
+   * Raw safe-area insets.
+   */
+  insets: EdgeInsets;
+
+  /**
+   * Horizontal insets the screen content keeps clear of. 0 outside iPhone Duo.
+   */
+  insetLeft: number;
+  insetRight: number;
+
+  /**
+   * Width available to the screen content: window width minus the horizontal insets.
+   */
+  contentWidth: number;
+
+  /**
+   * Header height: the top safe-area inset plus the navigation bar row, at least 72pt on iPhone.
+   */
+  headerHeight: number;
+
+  /**
+   * Room above the navigation bar row for the status bar, the rest of headerHeight is
+   * the row, which centers the title vertically. 0 when the status bar is not on top.
+   */
+  headerStatusBarHeight: number;
+
+  /**
+   * Side column holding the back button and the toolkit, when iPhone Duo moves the
+   * bars to the side. `undefined` while the bars stay horizontal.
+   */
+  sideBar?: SideBarLayout;
+
+  /**
+   * Room the header row keeps from each side for the clock and battery clusters, when
+   * iPhone Duo puts the row on the status bar (inner display in portrait).
+   */
+  statusBarClearance?: StatusBarClearance;
+};
+
+export type StatusBarClearance = {
+  left: number;
+  right: number;
+};
+
+/**
+ * Detect iPhone Duo from the window shape and the safe area: a phone idiom window
+ * near square, or a phone with asymmetric side insets (slab iPhones report equal
+ * left / right insets in landscape, iPhone Duo moves the status bar to one side).
+ */
+const isIPhoneDuoLayout = (
+  width: number,
+  height: number,
+  insets: EdgeInsets,
+) => {
+  if (!isIPhone()) {
+    return false;
+  }
+
+  const shortSide = Math.min(width, height);
+  const aspectRatio = shortSide > 0 ? Math.max(width, height) / shortSide : 0;
+  const isSquare = aspectRatio > 0 && aspectRatio < DuoMetrics.maxAspectRatio;
+
+  return isSquare || insets.left !== insets.right;
+};
+
+/**
+ * Screen layout for the current window: iPhone Duo detection, horizontal content insets,
+ * content width and the side bar. Follows the window through fold, unfold, rotation and
+ * Split View since it reads useWindowDimensions and the safe-area context.
+ */
+const useScreenLayout = (): ScreenLayout => {
+  const { width, height } = useWindowDimensions();
+  const insets = useContext(SafeAreaInsetsContext) ?? NO_INSETS;
+  const reservedRegions = useContext(ReservedRegionsContext);
+
+  let headerLayout = getHeaderLayout(insets.top);
+  const isIPhoneDuo = isIPhoneDuoLayout(width, height, insets);
+  if (!isIPhoneDuo) {
+    return {
+      width,
+      height,
+      isIPhoneDuo,
+      insets,
+      insetLeft: 0,
+      insetRight: 0,
+      contentWidth: width,
+      ...headerLayout,
+    };
+  }
+
+  let statusBarClearance: StatusBarClearance | undefined;
+  const isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight;
+  if (isInnerPortrait && insets.top >= HeaderMetrics.statusBarMinInset) {
+    // the row shares the status bar band, between its clusters
+    const clusters = getStatusBarClusters(
+      reservedRegions,
+      width,
+      insets.top,
+    ) ?? { left: 0, right: DuoMetrics.innerStatusBarWidth + Spacing.S };
+    // center on the clock digits, the region center sits above them
+    headerLayout = {
+      headerHeight: DuoMetrics.innerStatusBarCenterY * 2,
+      headerStatusBarHeight: 0,
+    };
+    statusBarClearance = clusters;
+  }
+
+  const sideInset = Math.max(insets.left, insets.right);
+  let sideBar: SideBarLayout | undefined;
+  // narrower strips cannot host a control 12pt from the inner edge
+  if (sideInset >= DuoMetrics.controlSize + Spacing.M) {
+    const edge = insets.right >= insets.left ? 'right' : 'left';
+    const stripLeft = edge === 'right' ? width - sideInset : 0;
+    // keep controls clear of the camera and of the status bar cluster, which grows for
+    // calls and Live Activities. Region frames already include the system's margin
+    const occlusion = getStripOcclusion(
+      reservedRegions,
+      stripLeft,
+      stripLeft + sideInset,
+      height,
+    );
+
+    let top = statusBarClearance
+      ? headerLayout.headerHeight + Spacing.M
+      : insets.top + HeaderMetrics.barHeight + Spacing.M;
+    if (insets.top < HeaderMetrics.statusBarMinInset) {
+      // status bar lives in the strip: start under its cluster, as the native bar does
+      const isLandscape = width > height;
+      if (!isLandscape) {
+        top = DuoMetrics.firstItemTop;
+      } else if (height >= DuoMetrics.innerMinHeight) {
+        top = DuoMetrics.firstItemTopLandscape;
+      } else {
+        // outer display in landscape: no status bar in the strip, the title row centers
+        // on the camera when it sits at the top end, otherwise on the back button
+        top = DuoMetrics.edgeInset;
+        const titleCenterY =
+          occlusion.top > top
+            ? occlusion.topCenter
+            : top + DuoMetrics.controlSize / 2;
+        headerLayout = getCenteredHeaderLayout(titleCenterY);
+      }
+
+      if (height > width && width < DuoMetrics.innerMinHeight) {
+        // outer display: the row starts below the top so the title centers on the camera
+        headerLayout = {
+          headerHeight: DuoMetrics.outerHeaderHeight,
+          headerStatusBarHeight:
+            DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight,
+        };
+      }
+    }
+
+    sideBar = {
+      edge,
+      width: sideInset,
+      top: Math.max(top, occlusion.top),
+      bottom: Math.max(DuoMetrics.edgeInset, occlusion.bottom),
+    };
+  }
+
+  return {
+    width,
+    height,
+    isIPhoneDuo,
+    insets,
+    insetLeft: insets.left,
+    insetRight: insets.right,
+    contentWidth: width - insets.left - insets.right,
+    ...headerLayout,
+    sideBar,
+    statusBarClearance,
+  };
+};
+
+/**
+ * Header row options for react-navigation: its height, the room for the status bar, and
+ * on iPhone Duo inner portrait the buttons kept clear of the clock and battery clusters
+ */
+const getHeaderRowOptions = ({
+  headerHeight,
+  headerStatusBarHeight,
+  statusBarClearance,
+  sideBar,
+}: ScreenLayout) => ({
+  headerStyle: { height: headerHeight },
+  headerStatusBarHeight,
+  // side bar controls are absolute within the containers, padding would not move them
+  ...(statusBarClearance &&
+    !sideBar && {
+      headerLeftContainerStyle: { paddingLeft: statusBarClearance.left },
+      headerRightContainerStyle: { paddingRight: statusBarClearance.right },
+    }),
+});
+
+/**
+ * Side margin @react-navigation/elements Header adds to its content row
+ */
+const getHeaderMargin = (width: number) =>
+  Platform.OS === 'ios' && width >= HeaderMetrics.largeWidth
+    ? HeaderMetrics.largeMargin
+    : 0;
+
+/**
+ * Absolute style that floats a header item into the side bar, relative to the header
+ * container (left or right) rendering it, 12pt from the strip's inner edge.
+ * `undefined` while there is no side bar.
+ * @param container header container rendering the item
+ * @param slot position in the side bar, 0 for back, 1 for the toolkit below it
+ */
+const useSideBarItemStyle = (
+  container: 'left' | 'right',
+  slot: number,
+): ViewStyle | undefined => {
+  const { width, insets, headerStatusBarHeight, sideBar } = useScreenLayout();
+  if (!sideBar) {
+    return undefined;
+  }
+
+  const margin = getHeaderMargin(width);
+  const columnLeft = sideBar.edge === 'left' ? 0 : width - sideBar.width;
+  const top =
+    sideBar.top -
+    headerStatusBarHeight +
+    slot * (DuoMetrics.controlSize + Spacing.M);
+  const innerEdgeStyle: ViewStyle =
+    sideBar.edge === 'right'
+      ? { alignItems: 'flex-start', paddingLeft: Spacing.M }
+      : { alignItems: 'flex-end', paddingRight: Spacing.M };
+
+  if (container === 'left') {
+    return {
+      position: 'absolute',
+      top,
+      left: columnLeft - margin - insets.left,
+      width: sideBar.width,
+      ...innerEdgeStyle,
+    };
+  }
+
+  const containerRight = width - margin - insets.right;
+  return {
+    position: 'absolute',
+    top,
+    right: containerRight - (columnLeft + sideBar.width),
+    width: sideBar.width,
+    ...innerEdgeStyle,
+  };
+};
+
 const useGridSystem = () => {
-  const windowSize = useWindowDimensions();
-  const numberOfColumns = windowSize.width > 600 ? 24 : 12;
+  const { contentWidth } = useScreenLayout();
+  const numberOfColumns = contentWidth > 600 ? 24 : 12;
   return { numberOfColumns };
 };
 
-export { useGridSystem, validateChildren };
+export {
+  DuoMetrics,
+  HeaderMetrics,
+  getHeaderMargin,
+  getHeaderRowOptions,
+  useGridSystem,
+  useScreenLayout,
+  useSideBarItemStyle,
+  validateChildren,
+};

package/Popup/PopupNotify.tsx

@@ -1,11 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
@@ -13,7 +7,8 @@ import { Icon } from '../Icon';
 import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
-import { runOnJS } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -29,7 +24,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -50,7 +46,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       onRequestClose?.(callback);
     } else {
       navigator?.pop();
-      runOnJS(() => callback?.())();
+      scheduleOnRN(() => callback?.());
     }
   };
 
@@ -172,18 +168,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     }
   };
 
-  return (
-    <View
-      accessibilityLabel={'popup_notify'}
-      style={[
-        styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-          width: widthDevice - Spacing.XL * 2,
-        },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
+  const body = (
+    <>
       {!!image && <Image source={{ uri: image }} style={styles.image} />}
       <View style={styles.content}>
         <Text
@@ -225,6 +211,30 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           </View>
         )}
       </View>
+    </>
+  );
+
+  return (
+    <View
+      accessibilityLabel={'popup_notify'}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          width: popupWidth,
+          maxHeight,
+        },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {maxHeight === undefined ? (
+        body
+      ) : (
+        // scrolls when iPhone Duo landscape is too short; actions stay visible
+        <ScrollView style={styles.body} bounces={false}>
+          {body}
+        </ScrollView>
+      )}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -242,6 +252,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
+  body: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/PopupPromotion.tsx

@@ -1,10 +1,16 @@
 import React, { useContext, useRef } from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PopupPromotionProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
+
+const ASPECT_RATIO = 0.72;
+const ICON_CLOSE_SIZE = 20;
+// close button row under the image: marginTop + vertical padding + icon
+const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
@@ -14,7 +20,13 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
+  // fit the portrait image by height when iPhone Duo leaves too little room
+  const imageWidth =
+    maxHeight === undefined
+      ? popupWidth
+      : Math.min(popupWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO);
   const closeAction = useRef('touch_outside');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -69,7 +81,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   return (
     <View
       accessibilityLabel={'popup_promotion'}
-      style={showBaseLineDebug && styles.debugBaseLine}
+      style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
       <TouchableOpacity onPress={() => onAction(onActionClick)}>
         <Image
@@ -80,7 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           style={[
             styles.container,
             {
-              width: widthDevice - Spacing.XL * 2,
+              width: imageWidth,
             },
           ]}
         />
@@ -92,7 +104,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.72,
+    aspectRatio: ASPECT_RATIO,
     width: '100%',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
@@ -103,11 +115,11 @@ const styles = StyleSheet.create({
     marginTop: Spacing.S,
   },
   iconButton: {
-    padding: 8,
+    padding: Spacing.S,
   },
   iconClose: {
-    width: 20,
-    height: 20,
+    width: ICON_CLOSE_SIZE,
+    height: ICON_CLOSE_SIZE,
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: Radius.M,