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

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.7",
+    "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,
-};