@momo-kits/foundation 0.169.7 → 0.169.9-beta.1

package/Layout/screenHeader.tsx

@@ -1,6 +1,7 @@
 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';
@@ -12,6 +13,11 @@ 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';
@@ -29,6 +35,31 @@ 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}
+      />
+    ),
+  };
 };
 
 /**
@@ -48,9 +79,12 @@ 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(
@@ -79,21 +113,7 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                  }}
-                  animatedValue={sharedValue}
-                />
-              ),
-            };
+            options = getSearchTitleOptions(sharedValue);
           }
           break;
 
@@ -127,21 +147,7 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                  }}
-                  animatedValue={sharedValue}
-                />
-              ),
-            };
+            options = getSearchTitleOptions(sharedValue);
           }
       }
 
@@ -149,7 +155,11 @@ export const useScreenHeader = ({
         delete options.headerTitle;
       }
 
-      navigation?.instance?.setOptions({ header: undefined, ...options });
+      navigation?.instance?.setOptions({
+        header: undefined,
+        ...frameOptions,
+        ...options,
+      });
     },
     [
       gradientColor,
@@ -160,6 +170,7 @@ export const useScreenHeader = ({
       useShadowHeader,
       hasSideBar,
       quickReturnOptions,
+      frameOptions,
     ],
   );
 
@@ -207,7 +218,7 @@ export const useScreenHeader = ({
         };
       }
 
-      navigation?.instance?.setOptions(options);
+      navigation?.instance?.setOptions({ ...frameOptions, ...options });
     },
     [
       gradientColor,
@@ -218,32 +229,23 @@ export const useScreenHeader = ({
       hasSideBar,
       layoutOffset,
       quickReturnOptions,
+      frameOptions,
     ],
   );
 
   const setAnimatedSearch = useCallback(() => {
-    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]);
+    const options = getSearchTitleOptions(sharedValue);
+    navigation?.instance?.setOptions({
+      header: undefined,
+      ...frameOptions,
+      ...options,
+    });
+  }, [navigation?.instance, sharedValue, frameOptions]);
 
-  // the search field spans the content, clear of the side bar and status bar clusters
+  // the search field spans the content (or the stretch frame), clear of the side bar
+  // and status bar clusters
   const setSearchHeader = (params: SearchHeaderProps) => {
-    let searchWidth = layout.width - 24;
+    let searchWidth = headerLayout.frameWidth;
     let searchLeft = Spacing.M;
     if (layout.sideBar) {
       searchWidth = layout.contentWidth - Spacing.M * 2;
@@ -254,6 +256,7 @@ export const useScreenHeader = ({
       searchWidth -= clearance.left + clearance.right;
     }
     const options: StackNavigationOptions = {
+      ...frameOptions,
       headerRight: undefined,
       headerTitleContainerStyle: {
         width: searchWidth,

package/Layout/screenTypes.ts

@@ -9,6 +9,7 @@ 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;
 
@@ -77,10 +78,17 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
+   * Optional. Width of the right header. Defaults to the toolkit width (84), or 0 when
    * iPhone Duo floats the toolkit into its side bar.
    */
-  headerRightWidth?: 0 | 73 | 110 | number;
+  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;
 
   /**
    * Optional. Props for the floating action button.

package/package.json

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