@momo-kits/foundation 0.167.1-duo.12 → 0.167.1-duo.13

package/Application/BottomTab/index.tsx

@@ -31,6 +31,7 @@ import { DuoTabBar } from './DuoTabBar';
 import { DuoBarCompressionProvider } from './DuoBarCompression';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
+import { getHeaderRowOptions } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -39,13 +40,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
-  const headerStyleOptions = {
-    headerStyle: {
-      height: headerHeight,
-    },
-    headerStatusBarHeight,
-  };
+  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;

package/Application/Components/HeaderExtendHeader.tsx

@@ -16,7 +16,7 @@ import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
 import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
 import { useScreenLayout } from '../../Layout';
-import { HeaderMetrics } from '../../Layout/utils';
+import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -51,17 +51,27 @@ const HeaderExtendHeader: React.FC<{
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const layout = useScreenLayout();
 
+  // the iPhone Duo status bar row keeps side bar sized back and toolkit
+  const backWidth = layout.statusBarClearance
+    ? DuoMetrics.controlSize
+    : BACK_WIDTH;
+  const toolkitWidth = layout.statusBarClearance
+    ? DuoMetrics.itemPitch * 2 + SCREEN_PADDING
+    : TOOLKIT_WIDTH;
   const leftPosition =
     inputSearchProps?.leftPosition ||
-    (layout.sideBar ? SCREEN_PADDING : BACK_WIDTH + 20);
+    (layout.sideBar ? SCREEN_PADDING : backWidth + 20);
   const headerRightWidth =
-    customHeaderRightWidth ?? (layout.sideBar ? 0 : TOOLKIT_WIDTH);
+    customHeaderRightWidth ?? (layout.sideBar ? 0 : toolkitWidth);
   const contentLeft = layout.insetLeft + SCREEN_PADDING;
   const contentRight = layout.insetLeft + layout.contentWidth;
-  const collapsedLeft = layout.insetLeft + leftPosition;
+  // collapsed on the status bar row, the search stays between its clusters
+  const collapsedLeft =
+    layout.insetLeft + leftPosition + (layout.statusBarClearance?.left ?? 0);
+  const collapsedRight = contentRight - (layout.statusBarClearance?.right ?? 0);
   const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
   const collapsedSearchWidth =
-    contentRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
+    collapsedRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
   const collapsedRaise =
     (layout.headerHeight -

package/Application/Components/HeaderLeft.tsx

@@ -6,7 +6,7 @@ import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
-import { useSideBarItemStyle } from '../../Layout/utils';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
@@ -23,6 +23,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const { navigator } = useContext(ApplicationContext);
   const sideBarStyle = useSideBarItemStyle('left', 0);
   const counterStyle = useSideBarCounterStyle();
+  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -95,6 +96,20 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     );
   }
 
+  // on the status bar row the controls keep the side bar size
+  if (statusBarClearance) {
+    return (
+      <View style={styles.headerLeft}>
+        <SideBarButton
+          accessibilityLabel="btn_navigation_back"
+          icon="arrow-back"
+          tintColor={tintColor}
+          onPress={goBackSafe}
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -14,7 +14,7 @@ import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import Animated from 'react-native-reanimated';
-import { useSideBarItemStyle } from '../../Layout/utils';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
@@ -85,6 +85,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   const context = useContext<any>(MiniAppContext);
   const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
     useDuoBarCompression();
+  const { statusBarClearance } = useScreenLayout();
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -358,6 +359,39 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   }
 
+  // on the status bar row the controls keep the side bar size
+  if (statusBarClearance) {
+    return (
+      <View style={styles.sideBarRow}>
+        {useShortcut && (
+          <SideBarButton
+            disabled={isLoading}
+            icon={iconShortcut}
+            onPress={shortcutOnPress}
+            tintColor={tintColor}
+            showBadge={showBadge}
+          />
+        )}
+        <SideBarGroup tintColor={tintColor} horizontal>
+          {useHelpCenter && (
+            <SideBarGroupItem
+              accessibilityLabel={'btn_navigation_help_center'}
+              icon={'help_center'}
+              tintColor={tintColor}
+              onPress={onPressHelpCenter}
+            />
+          )}
+          <SideBarGroupItem
+            accessibilityLabel={'btn_navigation_close'}
+            icon={closeIcon}
+            tintColor={tintColor}
+            onPress={onClose}
+          />
+        </SideBarGroup>
+      </View>
+    );
+  }
+
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -471,6 +505,10 @@ const styles = StyleSheet.create({
   sideBarColumn: {
     gap: Spacing.M,
   },
+  sideBarRow: {
+    flexDirection: 'row',
+    gap: Spacing.M,
+  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.tsx

@@ -33,15 +33,29 @@ const useHeaderFontFamily = (): string => {
  */
 const HEADER_ACTIONS_WIDTH = 172;
 
+/**
+ * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
+ */
+const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
+
 /**
  * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
  */
 const useTitleMaxWidth = () => {
-  const { width, contentWidth, sideBar } = useScreenLayout();
+  const { width, contentWidth, sideBar, statusBarClearance } =
+    useScreenLayout();
+  const clearance = statusBarClearance
+    ? statusBarClearance.left + statusBarClearance.right
+    : 0;
   if (sideBar) {
-    return contentWidth - Spacing.M * 2;
+    return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH;
+  return (
+    width -
+    HEADER_ACTIONS_WIDTH -
+    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
+    clearance
+  );
 };
 
 type HeaderTitleInterpolate = {

package/Application/Components/SearchHeader.tsx

@@ -8,6 +8,7 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
 import { useScreenLayout } from '../../Layout';
+import { DuoMetrics } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -22,8 +23,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const BACK_WIDTH = 28;
     const layout = useScreenLayout();
+    // the iPhone Duo status bar row keeps a side bar sized back button
+    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
@@ -34,6 +36,10 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     if (layout.sideBar) {
       searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
     }
+    if (layout.statusBarClearance) {
+      searchMaxWidth -=
+        layout.statusBarClearance.left + layout.statusBarClearance.right;
+    }
 
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);

package/Application/Components/SideBarButton.tsx

@@ -54,19 +54,30 @@ const SideBarButton: React.FC<NavigationButtonProps> = ({
 };
 
 /**
- * 48pt wide glass capsule grouping related controls, one item per 50pt
+ * 48pt glass capsule grouping related controls, one item per 50pt, laid out vertically
+ * in the side bar or horizontally on a header row
  */
 const SideBarGroup: React.FC<{
   tintColor?: string;
+  horizontal?: boolean;
   style?: StyleProp<ViewStyle>;
   children: ReactNode;
-}> = ({ tintColor, style, children }) => {
+}> = ({ tintColor, horizontal = false, style, children }) => {
   const count = React.Children.toArray(children).length;
-  const height =
+  const length =
     count > 1 ? count * DuoMetrics.itemPitch : DuoMetrics.controlSize;
 
   return (
-    <View style={[styles.control, getGlassStyle(tintColor), { height }, style]}>
+    <View
+      style={[
+        styles.control,
+        getGlassStyle(tintColor),
+        horizontal
+          ? { width: length, flexDirection: 'row' }
+          : { height: length },
+        style,
+      ]}
+    >
       {children}
     </View>
   );

package/Application/NavigationContainer.tsx

@@ -31,6 +31,7 @@ import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { type EdgeInsets } from 'react-native-safe-area-context';
 import { useScreenLayout } from '../Layout';
+import { getHeaderRowOptions } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
@@ -107,7 +108,7 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
+  const headerRowOptions = getHeaderRowOptions(useScreenLayout());
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
@@ -204,10 +205,7 @@ const Navigation: React.FC<any> = ({
               gestureEnabled: false,
               headerTitleAlign: 'center',
               headerTintColor: theme.colors.text.default,
-              headerStyle: {
-                height: headerHeight,
-              },
-              headerStatusBarHeight,
+              ...headerRowOptions,
             }}
           >
             <Stack.Screen

package/Layout/Screen.tsx

@@ -525,6 +525,10 @@ const Screen = forwardRef(
         searchWidth = layout.contentWidth - Spacing.M * 2;
         searchLeft = Spacing.M - getHeaderMargin(layout.width);
       }
+      if (layout.statusBarClearance) {
+        searchWidth -=
+          layout.statusBarClearance.left + layout.statusBarClearance.right;
+      }
       const options: StackNavigationOptions = {
         headerRight: undefined,
         headerTitleContainerStyle: {

package/Layout/utils.ts

@@ -77,6 +77,9 @@ const HeaderMetrics = {
  * - 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,
@@ -88,6 +91,8 @@ const DuoMetrics = {
   outerHeaderHeight: 76,
   outerCameraCenterY: 45,
   edgeInset: 24,
+  innerStatusBarCenterY: 47,
+  innerStatusBarWidth: 120,
 };
 
 const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -124,6 +129,39 @@ const getStripOcclusion = (
     { 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';
 
@@ -232,6 +270,17 @@ export type ScreenLayout = {
    * 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;
 };
 
 /**
@@ -280,6 +329,23 @@ const useScreenLayout = (): ScreenLayout => {
     };
   }
 
+  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
@@ -295,7 +361,9 @@ const useScreenLayout = (): ScreenLayout => {
       height,
     );
 
-    let top = insets.top + HeaderMetrics.barHeight + Spacing.M;
+    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;
@@ -342,9 +410,30 @@ const useScreenLayout = (): ScreenLayout => {
     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
  */
@@ -410,6 +499,7 @@ export {
   DuoMetrics,
   HeaderMetrics,
   getHeaderMargin,
+  getHeaderRowOptions,
   useGridSystem,
   useScreenLayout,
   useSideBarItemStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-duo.12",
+    "version": "0.167.1-duo.13",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},