@momo-kits/foundation 0.169.7-beta.8 → 0.169.7-beta.9

package/Layout/screenHeader.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { StatusBar, StatusBarStyle } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
-import type { SharedValue } from 'react-native-reanimated';
 import Navigation from '../Application/Navigation';
 import { AnimatedHeader, SearchHeaderProps } from '../Application/types';
 import { exportHeaderTitle } from '../Application/navigationOptions';
@@ -13,11 +12,6 @@ import {
   SearchHeader,
 } from '../Application';
 import { DuoGlassBackground } from '../Application/Components/DuoGlassBackground';
-import {
-  type HeaderContentLayout,
-  useHeaderFrameOptions,
-  useHeaderLayout,
-} from '../Application/headerLayout';
 import { getHeaderMargin } from './utils';
 import { ANIMATED_BANNER_HEIGHT } from './screenTypes';
 import { HeaderType } from './types';
@@ -35,31 +29,6 @@ type ScreenHeaderParams = {
   gradientColor?: string;
   headerBackground?: string;
   layoutOffset: number;
-  contentLayout?: HeaderContentLayout;
-};
-
-/**
- * Transparent header for an `inputSearchProps` Screen: its title fades out over the
- * first 50pt of scroll while the search collapses into the bar.
- */
-const getSearchTitleOptions = (
-  sharedValue: SharedValue<number>,
-): StackNavigationOptions => {
-  return {
-    headerShown: true,
-    headerTransparent: true,
-    headerBackground: () => null,
-    headerTitle: (props: any) => (
-      <HeaderTitle
-        {...props}
-        interpolate={{
-          inputRange: [0, 50],
-          outputRange: [1, 0],
-        }}
-        animatedValue={sharedValue}
-      />
-    ),
-  };
 };
 
 /**
@@ -79,12 +48,9 @@ export const useScreenHeader = ({
   gradientColor,
   headerBackground,
   layoutOffset,
-  contentLayout,
 }: ScreenHeaderParams) => {
   const currentTint = useRef<string | undefined>(undefined);
   const appliedHeaderMode = useRef<string | undefined>(undefined);
-  const headerLayout = useHeaderLayout(contentLayout);
-  const frameOptions = useHeaderFrameOptions(contentLayout);
 
   // keepTitle leaves a title the screen set itself when the same type is re-applied
   const setHeaderType = useCallback(
@@ -113,7 +79,21 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = getSearchTitleOptions(sharedValue);
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                  }}
+                  animatedValue={sharedValue}
+                />
+              ),
+            };
           }
           break;
 
@@ -147,7 +127,21 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = getSearchTitleOptions(sharedValue);
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                  }}
+                  animatedValue={sharedValue}
+                />
+              ),
+            };
           }
       }
 
@@ -155,11 +149,7 @@ export const useScreenHeader = ({
         delete options.headerTitle;
       }
 
-      navigation?.instance?.setOptions({
-        header: undefined,
-        ...frameOptions,
-        ...options,
-      });
+      navigation?.instance?.setOptions({ header: undefined, ...options });
     },
     [
       gradientColor,
@@ -170,7 +160,6 @@ export const useScreenHeader = ({
       useShadowHeader,
       hasSideBar,
       quickReturnOptions,
-      frameOptions,
     ],
   );
 
@@ -218,7 +207,7 @@ export const useScreenHeader = ({
         };
       }
 
-      navigation?.instance?.setOptions({ ...frameOptions, ...options });
+      navigation?.instance?.setOptions(options);
     },
     [
       gradientColor,
@@ -229,23 +218,32 @@ export const useScreenHeader = ({
       hasSideBar,
       layoutOffset,
       quickReturnOptions,
-      frameOptions,
     ],
   );
 
   const setAnimatedSearch = useCallback(() => {
-    const options = getSearchTitleOptions(sharedValue);
-    navigation?.instance?.setOptions({
-      header: undefined,
-      ...frameOptions,
-      ...options,
-    });
-  }, [navigation?.instance, sharedValue, frameOptions]);
+    const options: StackNavigationOptions = {
+      headerShown: true,
+      headerTransparent: true,
+      headerBackground: () => null,
+      headerTitle: (props: any) => (
+        <HeaderTitle
+          {...props}
+          interpolate={{
+            inputRange: [0, 50],
+            outputRange: [1, 0],
+          }}
+          animatedValue={sharedValue}
+        />
+      ),
+    };
+
+    navigation?.instance?.setOptions({ header: undefined, ...options });
+  }, [navigation?.instance, sharedValue]);
 
-  // the search field spans the content (or the stretch frame), clear of the side bar
-  // and status bar clusters
+  // the search field spans the content, clear of the side bar and status bar clusters
   const setSearchHeader = (params: SearchHeaderProps) => {
-    let searchWidth = headerLayout.frameWidth;
+    let searchWidth = layout.width - 24;
     let searchLeft = Spacing.M;
     if (layout.sideBar) {
       searchWidth = layout.contentWidth - Spacing.M * 2;
@@ -256,7 +254,6 @@ export const useScreenHeader = ({
       searchWidth -= clearance.left + clearance.right;
     }
     const options: StackNavigationOptions = {
-      ...frameOptions,
       headerRight: undefined,
       headerTitleContainerStyle: {
         width: searchWidth,

package/Layout/screenTypes.ts

@@ -9,7 +9,6 @@ import {
 import { FloatingButtonProps } from './FloatingButton';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
-import type { HeaderContentLayout } from '../Application/headerLayout';
 
 export const ANIMATED_BANNER_HEIGHT = 210;
 
@@ -78,17 +77,10 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header. Defaults to the toolkit width (84), or 0 when
+   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
    * iPhone Duo floats the toolkit into its side bar.
    */
-  headerRightWidth?: 0 | 84 | 124 | number;
-
-  /**
-   * Optional. `stretch` centers back, title or search and the right cluster of the
-   * header in a 600pt frame on wide windows (foldable inner display, tablet); the
-   * background and status bar stay full width. Defaults to `grid`.
-   */
-  contentLayout?: HeaderContentLayout;
+  headerRightWidth?: 0 | 73 | 110 | number;
 
   /**
    * Optional. Props for the floating action button.

package/Layout/types.ts

@@ -13,7 +13,43 @@ export type ScreenRef = {
    */
   setSearchHeader: (params: SearchHeaderProps) => void;
 };
-export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type SpanNumber =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | 25
+  | 26
+  | 27
+  | 28
+  | 29
+  | 30
+  | 31
+  | 32
+  | 33
+  | 34
+  | 35
+  | 36;
 
 export type GridContextProps = {
   /**

package/Layout/useGridSystem.ts

@@ -0,0 +1,49 @@
+import {
+  GRID_DESKTOP_COLUMNS,
+  GRID_DESKTOP_MIN_WIDTH,
+  GRID_PHONE_COLUMNS,
+  GRID_PHONE_MAX_WIDTH,
+  GRID_TABLET_COLUMNS,
+  GRID_TABLET_MIN_WIDTH,
+} from './constants';
+import { useScreenLayout } from './utils';
+
+/**
+ * Column count for a content width: 12 below 800pt, 24 below 1100pt, 36 from there
+ */
+const getGridColumns = (width: number) => {
+  if (width >= GRID_DESKTOP_MIN_WIDTH) {
+    return GRID_DESKTOP_COLUMNS;
+  }
+  if (width >= GRID_TABLET_MIN_WIDTH) {
+    return GRID_TABLET_COLUMNS;
+  }
+  return GRID_PHONE_COLUMNS;
+};
+
+/**
+ * Grid width for a content width: the 12-column grid stops at 600pt and is centered,
+ * the wider grids fill the content
+ */
+const getGridWidth = (width: number) => {
+  if (width < GRID_TABLET_MIN_WIDTH) {
+    return Math.min(width, GRID_PHONE_MAX_WIDTH);
+  }
+  return width;
+};
+
+/**
+ * Grid for the current content width: column count, grid width and the horizontal
+ * offset that centers a grid narrower than the content
+ */
+const useGridSystem = () => {
+  const { contentWidth } = useScreenLayout();
+  const gridWidth = getGridWidth(contentWidth);
+  return {
+    numberOfColumns: getGridColumns(contentWidth),
+    gridWidth,
+    gridOffset: (contentWidth - gridWidth) / 2,
+  };
+};
+
+export { useGridSystem };

package/Layout/utils.ts

@@ -357,13 +357,6 @@ const useSideBarItemStyle = (
   };
 };
 
-/** Column count of the content grid: 24 on content wider than 600pt, otherwise 12. */
-const useGridSystem = () => {
-  const { contentWidth } = useScreenLayout();
-  const numberOfColumns = contentWidth > 600 ? 24 : 12;
-  return { numberOfColumns };
-};
-
 export type { ScreenLayout, SideBarEdge, SideBarLayout, StatusBarClearance };
 
 export {
@@ -372,7 +365,6 @@ export {
   InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
-  useGridSystem,
   useScreenLayout,
   useSideBarItemStyle,
   validateChildren,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.7-beta.8",
+    "version": "0.169.7-beta.9",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Application/headerLayout.ts

@@ -1,158 +0,0 @@
-import { useMemo } from 'react';
-import { useWindowDimensions, type ViewStyle } from 'react-native';
-import type { StackNavigationOptions } from '@react-navigation/stack';
-import { Spacing } from '../Consts';
-import { getHeaderMargin } from '../Layout/utils';
-import { FOLDABLE_MIN_WIDTH } from './modalLayout';
-import { isIPhoneDuo } from './utils';
-
-// Top navigation spec, shared with the Compose / SwiftUI kits
-const HEADER_FRAME_MAX_WIDTH = 600;
-
-/**
- * Top navigation geometry on every device
- * - buttonSize / iconSize: round back and shortcut buttons, icons inside them and the pill
- * - pillWidth / pillHeight: help center | home capsule
- * - clusterWidth: shortcut, gap and pill on the right of the bar
- * - searchHeight: search field inside the header
- * - titleGap: space between back and the title, and the title and the right cluster
- * - sidePadding: bar edge to back and to the right cluster
- * - gradientHeight: header gradient, kept at the phone height on wide windows
- * - bannerWidth: animated banner image, kept at the phone width on wide windows
- */
-const HeaderBarMetrics = {
-  buttonSize: 32,
-  iconSize: 20,
-  pillWidth: 72,
-  pillHeight: 32,
-  clusterWidth: 112,
-  searchHeight: 32,
-  titleGap: Spacing.S,
-  sidePadding: Spacing.M,
-  gradientHeight: 154,
-  bannerWidth: 375,
-};
-
-/**
- * `grid` keeps the header row at the bar edges, `stretch` centers it in a 600pt
- * frame on wide windows. Background and status bar always span the window.
- */
-type HeaderContentLayout = 'grid' | 'stretch';
-
-type HeaderLayout = typeof HeaderBarMetrics & {
-  /**
-   * Window whose short side is at least 600 (Galaxy Z Fold / Pixel Fold inner
-   * display, tablets), iPhone Duo excluded. Phones, landscape included, are not.
-   */
-  isWide: boolean;
-  /**
-   * Window edge to back and to the right cluster: `sidePadding`, or centering the
-   * row in the 600pt frame with `stretch` on a wide window.
-   */
-  frameInset: number;
-  /**
-   * Header row width between the two `frameInset`s.
-   */
-  frameWidth: number;
-};
-
-type HeaderLayoutInput = {
-  width: number;
-  height: number;
-  isDuo: boolean;
-  contentLayout?: HeaderContentLayout;
-};
-
-/**
- * Header geometry for a window, pure so it can be tested without a device.
- */
-const getHeaderLayout = ({
-  width,
-  height,
-  isDuo,
-  contentLayout = 'grid',
-}: HeaderLayoutInput): HeaderLayout => {
-  const { sidePadding } = HeaderBarMetrics;
-  const isWide = !isDuo && Math.min(width, height) >= FOLDABLE_MIN_WIDTH;
-  let frameInset = sidePadding;
-  if (isWide && contentLayout === 'stretch') {
-    const centered = (width - HEADER_FRAME_MAX_WIDTH) / 2;
-    frameInset = Math.max(sidePadding, centered);
-  }
-  return {
-    ...HeaderBarMetrics,
-    isWide,
-    frameInset,
-    frameWidth: width - frameInset * 2,
-  };
-};
-
-/**
- * Widest a title can be between back and the right cluster of the header row.
- */
-const getTitleBudget = (layout: HeaderLayout) => {
-  const { buttonSize, titleGap, clusterWidth } = layout;
-  return layout.frameWidth - buttonSize - titleGap * 2 - clusterWidth;
-};
-
-/**
- * Header geometry for the current window; follows fold, unfold and rotation.
- */
-const useHeaderLayout = (contentLayout?: HeaderContentLayout): HeaderLayout => {
-  const { width, height } = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
-  return useMemo(() => {
-    return getHeaderLayout({ width, height, isDuo, contentLayout });
-  }, [width, height, isDuo, contentLayout]);
-};
-
-const TITLE_CONTAINER_RESET: ViewStyle = {
-  marginLeft: 0,
-  marginEnd: 0,
-  marginStart: 0,
-  marginHorizontal: 0,
-  marginVertical: 0,
-  margin: 0,
-};
-
-/**
- * React Navigation container styles that keep back, title and the right cluster
- * in the `stretch` frame. `undefined` for `grid`, and on iPhone Duo, which keeps
- * its own header row.
- */
-const useHeaderFrameOptions = (
-  contentLayout?: HeaderContentLayout,
-): StackNavigationOptions | undefined => {
-  const layout = useHeaderLayout(contentLayout);
-  const { width } = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
-  return useMemo(() => {
-    if (contentLayout !== 'stretch' || isDuo) {
-      return undefined;
-    }
-    // the header content row already sits this far in on large iOS windows
-    const shift = layout.frameInset - layout.sidePadding;
-    const containerShift = Math.max(0, shift - getHeaderMargin(width));
-    return {
-      headerLeftContainerStyle: { paddingLeft: containerShift },
-      headerRightContainerStyle: { paddingRight: containerShift },
-      headerTitleContainerStyle: {
-        ...TITLE_CONTAINER_RESET,
-        left: layout.titleGap,
-        maxWidth: getTitleBudget(layout),
-      },
-    };
-  }, [contentLayout, isDuo, layout, width]);
-};
-
-export type { HeaderContentLayout, HeaderLayout };
-
-export {
-  HeaderBarMetrics,
-  HEADER_FRAME_MAX_WIDTH,
-  TITLE_CONTAINER_RESET,
-  getHeaderLayout,
-  getTitleBudget,
-  useHeaderLayout,
-  useHeaderFrameOptions,
-};