@momo-kits/foundation 0.169.6 → 0.169.7-beta.10

package/Layout/Card.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenLayout } from './utils';
+import { GRID_GUTTER, GRID_MARGIN } from './constants';
+import { useGridSystem } from './useGridSystem';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { Image } from '../Image';
 import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Radius, Shadow, Spacing } from '../Consts';
+import { Radius, Shadow } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -20,10 +21,6 @@ export interface CardProps extends ViewProps {
   useShadow?: boolean;
 }
 
-/**
- * Surface card across the content width minus 12pt margins, with its own grid for child
- * Items; optional background image and light shadow.
- */
 const Card: React.FC<CardProps> = ({
   children,
   style,
@@ -32,19 +29,19 @@ const Card: React.FC<CardProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns } = useGridSystem();
-  const { contentWidth } = useScreenLayout();
+  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
 
-  const gutterSize = 8;
-  const margin = 12;
-  const widthSection = contentWidth - margin * 2;
-  const innerWidth = widthSection - margin * 2;
-  const columnsWidth = innerWidth - gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
+  const gutterSize = GRID_GUTTER;
+  const margin = GRID_MARGIN;
+  const widthSection = gridWidth - margin * 2;
+  let sizePerSpan =
+    (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
+      numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: Spacing.S,
+    gutterSize: GRID_GUTTER,
     sizePerSpan,
     getSizeSpan: span => {
       return sizePerSpan * span + gutterSize * (span - 1);
@@ -63,7 +60,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginHorizontal: gridOffset + margin,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/FloatingButton.tsx

@@ -31,10 +31,6 @@ export interface FloatingButtonProps {
   renderComponent?: () => React.ReactNode;
 }
 
-/**
- * Floating action button above the screen bottom. With a label and a scroll value it
- * shrinks to its icon while scrolling down and expands again on scroll up.
- */
 export const FloatingButton: React.FC<FloatingButtonProps> = ({
   renderComponent,
   label = '',

package/Layout/Item.tsx

@@ -7,20 +7,16 @@ import { SpanNumber } from './types';
 
 export interface ItemProps extends ViewProps {
   /**
-   * Width in grid columns (1-12). Defaults to the full row.
+   * Represents the width of the Card component in terms of span numbers (1-36, out of the grid's 12, 24 or 36 columns).
    */
   widthSpan?: SpanNumber;
 
   /**
-   * Optional. Height in grid spans (1-12). Unset keeps the content height.
+   * Optional. Represents the height of the Card component in terms of span numbers (1-36, out of the grid's 12, 24 or 36 columns).
    */
   heightSpan?: SpanNumber;
 }
 
-/**
- * Grid cell sized from the enclosing GridContext; outlined when the mini app turns on
- * the baseline debug feature.
- */
 const Item: React.FC<ItemProps> = ({
   widthSpan,
   heightSpan,

package/Layout/ItemList.tsx

@@ -7,16 +7,12 @@ import { SpanNumber } from './types';
 
 export interface ItemListProps extends FlatListProps<any> {
   /**
-   * Width of each item in grid columns (1-12). Defaults to the full row.
+   * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
   data: any[];
 }
 
-/**
- * FlatList on the grid: `widthSpan` sets how many items share a row, and every item but
- * the first of a row gets the gutter on its left.
- */
 const ItemList = forwardRef(
   (
     {
@@ -34,9 +30,6 @@ const ItemList = forwardRef(
     const indexBegin = props?.data?.map(
       (_i: any, index: number) => index * numColumns,
     );
-    const defaultKeyExtractor = (item: any, index: number) => {
-      return (item?.id ?? item?.key ?? index).toString();
-    };
     const _renderItem = (item: any) => {
       if (indexBegin?.includes(item?.index)) {
         return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
@@ -53,7 +46,12 @@ const ItemList = forwardRef(
         ref={ref as React.RefObject<FlatList>}
         {...props}
         key={`ItemList-${numColumns}`}
-        keyExtractor={(props as any)?.keyExtractor ?? defaultKeyExtractor}
+        keyExtractor={
+          // prefer caller's keyExtractor; fallback to common id/key/index
+          (props as any)?.keyExtractor ??
+          ((item: any, index: number) =>
+            (item?.id ?? item?.key ?? index).toString())
+        }
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}

package/Layout/ItemSectionList.tsx

@@ -7,12 +7,11 @@ import { SpanNumber } from './types';
 
 export interface ItemSectionListProps extends SectionListProps<any> {
   /**
-   * Width of each item in grid columns (1-12). Defaults to the full row.
+   * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
 }
 
-/** SectionList whose items sit on the grid, `widthSpan` columns wide, a gutter apart. */
 const ItemSectionList: FC<ItemSectionListProps> = ({
   renderItem,
   widthSpan,

package/Layout/ReservedRegions.tsx

@@ -19,43 +19,43 @@ try {
 }
 
 /**
- * Screen regions the system currently occludes, relative to the provider, which fills
- * the root view so they line up with window coordinates.
+ * screen regions the system currently occludes, relative to the provider, which fills
+ * the root view so they line up with window coordinates
  */
 const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
 
 /**
- * Vertical seam splitting the display into left and right halves, e.g. iPhone Duo
- * half folded. `undefined` while the display is flat or the system reports none.
+ * vertical seam splitting the display into left and right halves, e.g. iPhone Duo
+ * half folded. `undefined` while the display is flat or the system reports none
  */
 const HingeContext = createContext<ReservedRegion | undefined>(undefined);
 
-/** Frame of the vertical hinge (see HingeContext), `undefined` while the display is flat. */
 const useHinge = () => useContext(HingeContext);
 
 /**
- * Provides the occlusion regions and the vertical division (hinge) reported by the native
- * provider.
+ * keeps the occlusion regions and the vertical division reported by the native provider
  */
 const OcclusionRegions: React.FC<{
   useRegions: NativeReservedRegions['useReservedRegions'];
   children: ReactNode;
 }> = ({ useRegions, children }) => {
   const regions = useRegions();
-  const occlusion = useMemo(() => {
-    return regions
-      .filter(region => region.kind === 'occlusion')
-      .map(region => region.frame);
-  }, [regions]);
-  const hinge = useMemo(() => {
-    const division = regions.find(region => {
-      if (region.kind !== 'division') {
-        return false;
-      }
-      return region.frame.height > region.frame.width;
-    });
-    return division?.frame;
-  }, [regions]);
+  const occlusion = useMemo(
+    () =>
+      regions
+        .filter(region => region.kind === 'occlusion')
+        .map(region => region.frame),
+    [regions],
+  );
+  const hinge = useMemo(
+    () =>
+      regions.find(
+        region =>
+          region.kind === 'division' &&
+          region.frame.height > region.frame.width,
+      )?.frame,
+    [regions],
+  );
 
   return (
     <ReservedRegionsContext.Provider value={occlusion}>
@@ -65,8 +65,8 @@ const OcclusionRegions: React.FC<{
 };
 
 /**
- * Tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
- * cluster growing for a call or a Live Activity.
+ * tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
+ * cluster growing for a call or a Live Activity
  */
 const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
   children,
@@ -75,8 +75,8 @@ const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
     return <>{children}</>;
   }
 
-  const NativeProvider = nativeLib.ReservedRegionsProvider;
-  const { useReservedRegions } = nativeLib;
+  const { ReservedRegionsProvider: NativeProvider, useReservedRegions } =
+    nativeLib;
   return (
     <NativeProvider style={styles.container}>
       <OcclusionRegions useRegions={useReservedRegions}>

package/Layout/Screen.tsx

@@ -37,10 +37,6 @@ import { useScreenQuickReturn } from './screenQuickReturn';
 
 export type { ScreenProps };
 
-/**
- * Screen container: sets the navigation header, lays children on the grid, and adds the
- * scroll view, floating button and footer, with iPhone Duo side bar and tab bar insets.
- */
 const Screen = forwardRef(
   (
     {
@@ -112,12 +108,14 @@ const Screen = forwardRef(
     const isIOS = Platform.OS === 'ios';
     const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
     const hasSideBar = !!layout.sideBar;
-    const isPlainHeader = headerType === 'default' || headerType === 'extended';
-    const hasCustomHeader = !!animatedHeader || !!inputSearchProps;
-    const useDuoGlass = hasSideBar && isPlainHeader && !hasCustomHeader;
+    const useDuoGlass =
+      hasSideBar &&
+      (headerType === 'default' || headerType === 'extended') &&
+      !animatedHeader &&
+      !inputSearchProps;
 
-    const hasOverlayHeader = useDuoGlass || !!animatedHeader;
-    const useQuickReturn = hasSideBar && scrollable && hasOverlayHeader;
+    const useQuickReturn =
+      hasSideBar && scrollable && (useDuoGlass || !!animatedHeader);
     const { quickReturnOptions, snapQuickReturnHeader } = useScreenQuickReturn(
       sharedValue,
       useQuickReturn,
@@ -125,10 +123,18 @@ const Screen = forwardRef(
     );
 
     let keyboardOffset = heightHeader - bottomInset;
-    if (headerType === 'extended' || hasCustomHeader || useDuoGlass) {
+    if (
+      headerType === 'extended' ||
+      animatedHeader ||
+      inputSearchProps ||
+      useDuoGlass
+    ) {
       keyboardOffset = -bottomInset;
     }
 
+    /**
+     * inject params for screen tracking
+     */
     screen?.onSetParams?.(trackingParams);
 
     const { setSearchHeader, currentTint } = useScreenHeader({
@@ -146,7 +152,9 @@ const Screen = forwardRef(
       layoutOffset,
     });
 
-    // mutates the content node so callers keep its methods plus the header setters
+    /**
+     * expose ref for screen
+     */
     useImperativeHandle(ref, () => {
       return Object.assign(screenRef.current || {}, {
         setOptions: (params: NavigationOptions) => {
@@ -157,18 +165,19 @@ const Screen = forwardRef(
       });
     });
 
-    const scrollHandlers = createScrollHandlers({
-      scrollable,
-      animatedValue: animatedValue.current,
-      sharedValue,
-      scrollViewProps,
-      animatedHeader,
-      inputSearchProps,
-      currentTint,
-      navigation,
-      snapQuickReturnHeader,
-      ref,
-    });
+    const { handleScroll, handleScrollEnd, handleMomentumScrollEnd } =
+      createScrollHandlers({
+        scrollable,
+        animatedValue: animatedValue.current,
+        sharedValue,
+        scrollViewProps,
+        animatedHeader,
+        inputSearchProps,
+        currentTint,
+        navigation,
+        snapQuickReturnHeader,
+        ref,
+      });
     const Component: any = scrollable ? Animated.ScrollView : View;
 
     const getHeight = () => {
@@ -198,35 +207,6 @@ const Screen = forwardRef(
       floatingButtonBottom = 12 + duoTabInset;
     }
 
-    const renderHeaderLayer = () => {
-      if (useDuoGlass) {
-        return (
-          <DuoScrollGradient
-            animatedValue={sharedValue}
-            gradientColor={gradientColor}
-            headerBackground={headerBackground}
-            heightHeader={heightHeader}
-            extended={headerType === 'extended'}
-            followScroll={useQuickReturn}
-          />
-        );
-      }
-      return (
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          headerRightWidth={headerRightWidth}
-          animatedValue={sharedValue}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-          useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
-        />
-      );
-    };
-
     return (
       <View
         style={[
@@ -237,7 +217,29 @@ const Screen = forwardRef(
           },
         ]}
       >
-        {renderHeaderLayer()}
+        {useDuoGlass ? (
+          <DuoScrollGradient
+            animatedValue={sharedValue}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+            heightHeader={heightHeader}
+            extended={headerType === 'extended'}
+            followScroll={useQuickReturn}
+          />
+        ) : (
+          <HeaderExtendHeader
+            headerType={headerType}
+            heightHeader={heightHeader}
+            headerRightWidth={headerRightWidth}
+            animatedValue={sharedValue}
+            inputSearchProps={inputSearchProps}
+            navigation={navigation}
+            inputSearchRef={inputSearchRef}
+            useShadowHeader={useShadowHeader}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+          />
+        )}
 
         <KeyboardAvoidingView
           style={[
@@ -257,9 +259,9 @@ const Screen = forwardRef(
             {...scrollViewProps}
             ref={screenRef}
             showsVerticalScrollIndicator={false}
-            onScroll={scrollHandlers.handleScroll}
-            onScrollEndDrag={scrollHandlers.handleScrollEnd}
-            onMomentumScrollEnd={scrollHandlers.handleMomentumScrollEnd}
+            onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            onMomentumScrollEnd={handleMomentumScrollEnd}
             scrollEventThrottle={16}
             style={[
               Styles.flex,

package/Layout/Section.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenLayout } from './utils';
+import { GRID_GUTTER, GRID_MARGIN } from './constants';
+import { useGridSystem } from './useGridSystem';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import styles from './styles';
 import { Image } from '../Image';
-import { Spacing } from '../Consts';
 
 export interface SectionProps extends ViewProps {
   /**
@@ -15,8 +15,8 @@ export interface SectionProps extends ViewProps {
   expanded?: boolean;
 
   /**
-   * Optional. If `true`, 12pt side margins are applied to the Section component.
-   * Defaults to `true`.
+   * Optional. If `true`, margin will be applied to the Section component.
+   * Defaults to `false` if not provided.
    */
   useMargin?: boolean;
 
@@ -26,10 +26,6 @@ export interface SectionProps extends ViewProps {
   backgroundImage?: string;
 }
 
-/**
- * Content-wide grid row (12 or 24 columns) with optional side margins; child Items size
- * themselves from its GridContext.
- */
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
@@ -37,22 +33,22 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { numberOfColumns } = useGridSystem();
-  const { contentWidth } = useScreenLayout();
+  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
 
-  const gutterSize = 12;
+  const gutterSize = GRID_GUTTER;
   let margin = 0;
   if (useMargin) {
-    margin = 12;
+    margin = GRID_MARGIN;
   }
-  const widthSection = contentWidth - margin * 2;
+  const widthSection = gridWidth - margin * 2;
 
-  const columnsWidth = widthSection - gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
+  const sizePerSpan =
+    (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: Spacing.M,
+    gutterSize: GRID_GUTTER,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + gutterSize * (span - 1);
@@ -70,7 +66,7 @@ const Section: React.FC<SectionProps> = ({
           styles.rowWrap,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginHorizontal: gridOffset + margin,
             gap: gutterSize,
           },
         ]}

package/Layout/TrackingScope.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { TrackingScopeContext } from '../Context';
 
-/** Names a tracking scope; components inside prefix their component ids with it. */
 const TrackingScope = ({
   scopeName,
   children,

package/Layout/constants.ts

@@ -0,0 +1,19 @@
+const GRID_MARGIN = 12;
+const GRID_GUTTER = 12;
+const GRID_PHONE_MAX_WIDTH = 600;
+const GRID_TABLET_MIN_WIDTH = 800;
+const GRID_DESKTOP_MIN_WIDTH = 1100;
+const GRID_PHONE_COLUMNS = 12;
+const GRID_TABLET_COLUMNS = 24;
+const GRID_DESKTOP_COLUMNS = 36;
+
+export {
+  GRID_DESKTOP_COLUMNS,
+  GRID_DESKTOP_MIN_WIDTH,
+  GRID_GUTTER,
+  GRID_MARGIN,
+  GRID_PHONE_COLUMNS,
+  GRID_PHONE_MAX_WIDTH,
+  GRID_TABLET_COLUMNS,
+  GRID_TABLET_MIN_WIDTH,
+};

package/Layout/screenContent.tsx

@@ -9,8 +9,7 @@ import { AnimatedHeader } from '../Application/types';
 type ContentInset = { insetLeft: number; insetRight: number };
 
 /**
- * Wraps each screen child (Fragments flattened) in a view with the screen's top spacing
- * and side insets; a child with `useMargin: false` gets no top spacing.
+ * build content for screen for grid rule
  */
 export const renderContent = (content: any, layout: ContentInset): any => {
   const results = validateChildren(content, [undefined]);
@@ -65,8 +64,7 @@ export const renderContent = (content: any, layout: ContentInset): any => {
 };
 
 /**
- * Animated banner from `animatedHeader.component`, clipped to the banner height plus
- * `layoutOffset`. Nothing without a component.
+ * render top navigation banner
  */
 export const renderAnimatedHeader = (
   animatedHeader: AnimatedHeader | undefined,

package/Layout/screenFooter.tsx

@@ -16,10 +16,6 @@ type ScreenFooterProps = {
   surfaceColor: string;
 };
 
-/**
- * Screen footer on the surface color with a top shadow, padded above the home indicator,
- * or above the floating tab bar on a tab screen.
- */
 export const ScreenFooter = ({
   footer,
   marginFooter,
@@ -30,34 +26,28 @@ export const ScreenFooter = ({
   duoTabInset,
   bottomInset,
   surfaceColor,
-}: ScreenFooterProps) => {
-  let bottomSpace = bottomInset;
-  if (isTab && duoTabInset) {
-    bottomSpace = duoTabInset;
-  }
-
-  return (
+}: ScreenFooterProps) => (
+  <View
+    pointerEvents={'box-none'}
+    style={[
+      hasContentInset && styles.footerClip,
+      {
+        marginLeft: insetLeft,
+        marginRight: insetRight,
+      },
+    ]}
+  >
     <View
-      pointerEvents={'box-none'}
       style={[
-        hasContentInset && styles.footerClip,
+        styles.shadow,
         {
-          marginLeft: insetLeft,
-          marginRight: insetRight,
+          paddingBottom:
+            (isTab && duoTabInset ? duoTabInset : bottomInset) + Spacing.S,
+          backgroundColor: surfaceColor,
         },
       ]}
     >
-      <View
-        style={[
-          styles.shadow,
-          {
-            paddingBottom: bottomSpace + Spacing.S,
-            backgroundColor: surfaceColor,
-          },
-        ]}
-      >
-        <Section useMargin={marginFooter}>{footer}</Section>
-      </View>
+      <Section useMargin={marginFooter}>{footer}</Section>
     </View>
-  );
-};
+  </View>
+);