@momo-kits/foundation 0.167.1-beta.7 → 0.167.1-duo.12

package/Layout/Screen.tsx

@@ -9,6 +9,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from 'react';
 import {
@@ -21,11 +22,14 @@ import {
   ScrollViewProps,
   StatusBar,
   StatusBarStyle,
-  useWindowDimensions,
   View,
   ViewProps,
 } from 'react-native';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
+import {
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
@@ -44,7 +48,7 @@ import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
 import { exportHeaderTitle, getOptions } from '../Application/utils';
-import { validateChildren } from './utils';
+import { getHeaderMargin, useScreenLayout, validateChildren } from './utils';
 import Section from './Section';
 import {
   HeaderBackground,
@@ -53,6 +57,12 @@ import {
   HeaderTitle,
   SearchHeader,
 } from '../Application';
+import {
+  DuoGlassBackground,
+  DuoScrollGradient,
+} from '../Application/Components/DuoGlassBackground';
+import { DuoQuickReturnHeader } from '../Application/Components/DuoQuickReturnHeader';
+import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -118,7 +128,8 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header.
+   * 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 | 73 | 110 | number;
 
@@ -187,7 +198,7 @@ const Screen = forwardRef(
       footerComponent: Footer,
       marginFooter = true,
       layoutOffset = -56,
-      headerRightWidth = 73,
+      headerRightWidth,
       backgroundColor,
       headerType = 'default',
       floatingButtonProps,
@@ -204,8 +215,8 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const { width: widthDevice } = useWindowDimensions();
-    const { theme, navigator } = useContext(ApplicationContext);
+    const layout = useScreenLayout();
+    const { theme } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const frame = useSafeAreaFrame();
@@ -245,15 +256,66 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const currentTint = useRef<string | undefined>(undefined);
-    
+
     const isTab = !!screen?.bottomTab;
+    // Duo floating tab bar overlays the tab content instead of taking layout space
+    const duoTabInset = useDuoTabBarInset();
 
     let handleScroll;
     let Component: any = View;
 
-    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    const bottomInset =
+      Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    const hasSideBar = !!layout.sideBar;
+    // iPhone Duo: content scrolls under a glass header instead of starting below it
+    const useDuoGlass =
+      hasSideBar &&
+      (headerType === 'default' || headerType === 'extended') &&
+      !animatedHeader &&
+      !inputSearchProps;
+
+    // iPhone Duo: the header leaves with the content and returns on a reverse scroll
+    const useQuickReturn =
+      hasSideBar && scrollable && (useDuoGlass || !!animatedHeader);
+    const headerHide = useSharedValue(0);
+    const lastScrollY = useSharedValue(0);
+
+    useAnimatedReaction(
+      () => sharedValue.value,
+      y => {
+        const delta = y - lastScrollY.value;
+        lastScrollY.value = y;
+        if (!useQuickReturn || y <= 0) {
+          headerHide.value = 0;
+          return;
+        }
+        headerHide.value = Math.min(
+          Math.max(headerHide.value + delta, 0),
+          heightHeader,
+        );
+      },
+      [useQuickReturn, heightHeader],
+    );
+
+    const quickReturnOptions: StackNavigationOptions = useMemo(
+      () =>
+        useQuickReturn
+          ? {
+              header: (props: any) => (
+                <DuoQuickReturnHeader {...props} offset={headerHide} />
+              ),
+            }
+          : { header: undefined },
+      [useQuickReturn, headerHide],
+    );
+
     let keyboardOffset = heightHeader - bottomInset;
-    if (headerType === 'extended' || animatedHeader || inputSearchProps) {
+    if (
+      headerType === 'extended' ||
+      animatedHeader ||
+      inputSearchProps ||
+      useDuoGlass
+    ) {
       keyboardOffset = -bottomInset;
     }
 
@@ -280,9 +342,13 @@ const Screen = forwardRef(
 
           case 'extended':
             options = {
+              ...quickReturnOptions,
               headerShown: true,
               headerTransparent: true,
-              headerBackground: () => null,
+              headerBackground: () =>
+                hasSideBar ? (
+                  <DuoGlassBackground animatedValue={sharedValue} />
+                ) : null,
               headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             if (inputSearchProps) {
@@ -305,6 +371,19 @@ const Screen = forwardRef(
             break;
 
           default:
+            if (hasSideBar && !inputSearchProps) {
+              options = {
+                ...quickReturnOptions,
+                headerTransparent: true,
+                headerTintColor: Colors.black_17,
+                headerShown: true,
+                headerBackground: () => (
+                  <DuoGlassBackground animatedValue={sharedValue} />
+                ),
+                headerTitle: (props: any) => <HeaderTitle {...props} />,
+              };
+              break;
+            }
             options = {
               headerTransparent: false,
               headerTintColor: Colors.black_17,
@@ -339,7 +418,7 @@ const Screen = forwardRef(
             }
         }
 
-        navigation?.instance?.setOptions(options);
+        navigation?.instance?.setOptions({ header: undefined, ...options });
       },
       [
         gradientColor,
@@ -348,6 +427,8 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        quickReturnOptions,
       ],
     );
 
@@ -363,18 +444,26 @@ const Screen = forwardRef(
         }
 
         options = {
+          ...quickReturnOptions,
           headerTintColor: currentTint.current ?? Colors.black_17,
           headerTransparent: true,
-          headerBackground: (props: any) => (
-            <HeaderBackground
-              {...props}
-              animatedValue={sharedValue}
-              useGradient={false}
-              useShadowHeader={useShadowHeader}
-              headerBackground={headerBackground}
-              gradientColor={gradientColor}
-            />
-          ),
+          headerBackground: (props: any) =>
+            hasSideBar ? (
+              // glass shows once the banner has scrolled under the header
+              <DuoGlassBackground
+                animatedValue={sharedValue}
+                fadeStart={Math.max(210 + layoutOffset - heightHeader, 0)}
+              />
+            ) : (
+              <HeaderBackground
+                {...props}
+                animatedValue={sharedValue}
+                useGradient={false}
+                useShadowHeader={useShadowHeader}
+                headerBackground={headerBackground}
+                gradientColor={gradientColor}
+              />
+            ),
           headerTitle: (props: any) => {
             return <HeaderTitle {...props} />;
           },
@@ -395,6 +484,10 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        layoutOffset,
+        heightHeader,
+        quickReturnOptions,
       ],
     );
 
@@ -418,14 +511,20 @@ const Screen = forwardRef(
         ),
       };
 
-      navigation?.instance?.setOptions(options);
+      navigation?.instance?.setOptions({ header: undefined, ...options });
     }, [navigation?.instance, sharedValue]);
 
     /**
      * export search header
      */
     const setSearchHeader = (params: SearchHeaderProps) => {
-      const searchWidth = widthDevice - 24;
+      let searchWidth = layout.width - 24;
+      let searchLeft = Spacing.M;
+      if (layout.sideBar) {
+        // back floats in the side bar: the search spans the content width
+        searchWidth = layout.contentWidth - Spacing.M * 2;
+        searchLeft = Spacing.M - getHeaderMargin(layout.width);
+      }
       const options: StackNavigationOptions = {
         headerRight: undefined,
         headerTitleContainerStyle: {
@@ -437,10 +536,10 @@ const Screen = forwardRef(
           marginHorizontal: 0,
           marginVertical: 0,
           margin: 0,
-          left: Spacing.M,
+          left: searchLeft,
         },
         headerLeft: (props: any) =>
-          params?.hiddenBack ? null : <HeaderLeft {...props} />,
+          params?.hiddenBack ? null : <HeaderLeft {...props} floating />,
         headerTitle: () => (
           <SearchHeader {...params} animatedValue={sharedValue} />
         ),
@@ -540,8 +639,36 @@ const Screen = forwardRef(
      * handle scroll end
      * @param e
      */
+    /**
+     * a half-shown quick return header settles fully in or out
+     */
+    const snapQuickReturnHeader = (offsetY: number) => {
+      const hide = headerHide.value;
+      // above heightHeader the header still sits on the content
+      if (
+        !useQuickReturn ||
+        offsetY < heightHeader ||
+        hide <= 0 ||
+        hide >= heightHeader
+      ) {
+        return;
+      }
+      headerHide.value = withTiming(
+        hide > heightHeader / 2 ? heightHeader : 0,
+        { duration: 200 },
+      );
+    };
+
+    const handleMomentumScrollEnd = (
+      e: NativeSyntheticEvent<NativeScrollEvent>,
+    ) => {
+      snapQuickReturnHeader(e.nativeEvent.contentOffset.y);
+      scrollViewProps?.onMomentumScrollEnd?.(e);
+    };
+
     const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetY = e.nativeEvent.contentOffset.y;
+      snapQuickReturnHeader(offsetY);
       if (inputSearchProps && offsetY < 100 && offsetY > 0) {
         Animated.timing(animatedValue.current, {
           toValue: 0,
@@ -591,6 +718,8 @@ const Screen = forwardRef(
                 key={`ScreenItem${index}`}
                 style={{
                   marginTop: space,
+                  marginLeft: layout.insetLeft,
+                  marginRight: layout.insetRight,
                   flex: item.props?.expanded ? 1 : undefined,
                 }}
                 onLayout={item.props?.onLayout}
@@ -611,6 +740,8 @@ const Screen = forwardRef(
             key={`ScreenItem`}
             style={{
               marginTop: space,
+              marginLeft: layout.insetLeft,
+              marginRight: layout.insetRight,
               flex: item?.props?.expanded ? 1 : undefined,
             }}
             onLayout={item?.props?.onLayout}
@@ -637,6 +768,15 @@ const Screen = forwardRef(
       return newHeight;
     };
 
+    // without the grid, the content container keeps clear of the horizontal insets.
+    // Only set when there are insets, so a caller's paddingHorizontal is never overridden.
+    const hasContentInset = layout.insetLeft > 0 || layout.insetRight > 0;
+    const contentInsetStyle = !useGridLayout &&
+      hasContentInset && {
+        paddingLeft: layout.insetLeft,
+        paddingRight: layout.insetRight,
+      };
+
     return (
       <View
         style={[
@@ -649,21 +789,36 @@ const Screen = forwardRef(
           },
         ]}
       >
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          headerRightWidth={headerRightWidth}
-          animatedValue={sharedValue}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-          useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
-        />
+        {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={Styles.flex}
+          style={[
+            Styles.flex,
+            useDuoGlass &&
+              (!scrollable || !!Header) && { paddingTop: heightHeader },
+          ]}
           enabled={enableKeyboardAvoidingView}
           keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
@@ -679,10 +834,24 @@ const Screen = forwardRef(
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
+            onMomentumScrollEnd={handleMomentumScrollEnd}
             scrollEventThrottle={16}
-            style={[Styles.flex]}
+            style={[
+              Styles.flex,
+              !scrollable && contentInsetStyle,
+              !scrollable &&
+                !Footer &&
+                isTab &&
+                !!duoTabInset && { paddingBottom: duoTabInset },
+            ]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+              scrollable &&
+                !Footer &&
+                isTab &&
+                !!duoTabInset && { paddingBottom: duoTabInset },
+              scrollable && contentInsetStyle,
+              useDuoGlass && !Header && { paddingTop: heightHeader },
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -692,28 +861,51 @@ const Screen = forwardRef(
           </Component>
 
           {floatingButtonProps && (
-            <View>
+            <View
+              style={{
+                marginLeft: layout.insetLeft,
+                marginRight: layout.insetRight,
+              }}
+            >
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
+                bottom={
+                  Footer || isTab
+                    ? 12 + (Footer ? 0 : duoTabInset)
+                    : bottomInset + Spacing.S
+                }
               />
             </View>
           )}
 
           {Footer && (
+            // with side insets, the clip keeps the shadow off the side bar, only the top one shows
             <View
+              pointerEvents={'box-none'}
               style={[
-                styles.shadow,
+                hasContentInset && styles.footerClip,
                 {
-                  paddingBottom: bottomInset + Spacing.S,
-                  backgroundColor: theme.colors.background.surface,
+                  marginLeft: layout.insetLeft,
+                  marginRight: layout.insetRight,
                 },
               ]}
             >
-              {/* The footer inset is a caller decision, not a platform one — a footer
-                  that carries its own horizontal padding passes `marginFooter={false}`. */}
-              <Section useMargin={marginFooter}>{Footer}</Section>
+              <View
+                style={[
+                  styles.shadow,
+                  {
+                    paddingBottom:
+                      (isTab && duoTabInset ? duoTabInset : bottomInset) +
+                      Spacing.S,
+                    backgroundColor: theme.colors.background.surface,
+                  },
+                ]}
+              >
+                {/* The footer inset is a caller decision, not a platform one — a footer
+                    that carries its own horizontal padding passes `marginFooter={false}`. */}
+                <Section useMargin={marginFooter}>{Footer}</Section>
+              </View>
             </View>
           )}
         </KeyboardAvoidingView>

package/Layout/Section.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
-import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
 import { Image } from '../Image';
 import { Spacing } from '../Consts';
@@ -34,18 +33,15 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { showGrid } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
     margin = 12;
   }
-  let widthSection = Dimensions.get('window').width;
-  if (useMargin) {
-    widthSection = widthSection - margin * 2;
-  }
+  const widthSection = contentWidth - margin * 2;
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -60,13 +56,6 @@ const Section: React.FC<SectionProps> = ({
     },
   };
 
-  /**
-   * render overlay only dev mode
-   */
-  const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGridSection} />;
-  };
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -90,9 +79,7 @@ const Section: React.FC<SectionProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {/* Render only allowed children as valid React elements */}
         {children}
-        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/index.ts

@@ -1,7 +1,7 @@
 import Card from './Card';
 import Section from './Section';
-import GridSystem from './GridSystem';
-import { validateChildren } from './utils';
+import { useScreenLayout, validateChildren } from './utils';
+import type { ScreenLayout, SideBarEdge, SideBarLayout } from './utils';
 import { createContext } from 'react';
 import { GridContextProps } from './types';
 import Item from './Item';
@@ -18,14 +18,14 @@ const GridContext = createContext<GridContextProps>({
   getSizeSpan: () => 0,
 });
 
-export type { ScreenProps };
+export type { ScreenProps, ScreenLayout, SideBarEdge, SideBarLayout };
 
 export {
   GridContext,
   Card,
   Section,
-  GridSystem,
   validateChildren,
+  useScreenLayout,
   Item,
   ItemList,
   ItemSectionList,

package/Layout/styles.ts

@@ -91,5 +91,10 @@ export default StyleSheet.create({
       },
     }),
   },
+  footerClip: {
+    marginTop: -Spacing.XL,
+    paddingTop: Spacing.XL,
+    overflow: 'hidden',
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });