@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1

package/Layout/Screen.tsx

@@ -21,6 +21,7 @@ import {
   ScrollViewProps,
   StatusBar,
   StatusBarStyle,
+  useWindowDimensions,
   View,
   ViewProps,
 } from 'react-native';
@@ -42,12 +43,8 @@ import { FloatingButton, FloatingButtonProps } from './FloatingButton';
 import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
-import {
-  exportHeaderTitle,
-  getOptions,
-  useDuoQuickReturn,
-} from '../Application/utils';
-import { getHeaderMargin, useScreenLayout, validateChildren } from './utils';
+import { exportHeaderTitle, getOptions } from '../Application/utils';
+import { validateChildren } from './utils';
 import Section from './Section';
 import {
   HeaderBackground,
@@ -56,11 +53,6 @@ import {
   HeaderTitle,
   SearchHeader,
 } from '../Application';
-import {
-  DuoGlassBackground,
-  DuoScrollGradient,
-} from '../Application/Components/DuoGlassBackground';
-import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -126,8 +118,7 @@ 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
-   * iPhone Duo floats the toolkit into its side bar.
+   * Optional. Width of the right header.
    */
   headerRightWidth?: 0 | 73 | 110 | number;
 
@@ -196,7 +187,7 @@ const Screen = forwardRef(
       footerComponent: Footer,
       marginFooter = true,
       layoutOffset = -56,
-      headerRightWidth,
+      headerRightWidth = 73,
       backgroundColor,
       headerType = 'default',
       floatingButtonProps,
@@ -213,8 +204,8 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const layout = useScreenLayout();
-    const { theme } = useContext(ApplicationContext);
+    const { width: widthDevice } = useWindowDimensions();
+    const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const frame = useSafeAreaFrame();
@@ -254,37 +245,15 @@ 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 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 { quickReturnOptions, snap: snapQuickReturnHeader } =
-      useDuoQuickReturn(sharedValue, useQuickReturn, heightHeader);
-
+    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
     let keyboardOffset = heightHeader - bottomInset;
-    if (
-      headerType === 'extended' ||
-      animatedHeader ||
-      inputSearchProps ||
-      useDuoGlass
-    ) {
+    if (headerType === 'extended' || animatedHeader || inputSearchProps) {
       keyboardOffset = -bottomInset;
     }
 
@@ -292,12 +261,6 @@ const Screen = forwardRef(
      * inject params for screen tracking
      */
     screen?.onSetParams?.(trackingParams);
-    // the screen drives its header, the stack screen's scroll observer stays off
-    screen?.claimHeader?.();
-    useEffect(() => {
-      screen?.syncHeader?.();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
 
     /**
      * export options for screen
@@ -317,13 +280,9 @@ const Screen = forwardRef(
 
           case 'extended':
             options = {
-              ...quickReturnOptions,
               headerShown: true,
               headerTransparent: true,
-              headerBackground: () =>
-                hasSideBar ? (
-                  <DuoGlassBackground animatedValue={sharedValue} />
-                ) : null,
+              headerBackground: () => null,
               headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             if (inputSearchProps) {
@@ -346,19 +305,6 @@ 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,
@@ -393,7 +339,7 @@ const Screen = forwardRef(
             }
         }
 
-        navigation?.instance?.setOptions({ header: undefined, ...options });
+        navigation?.instance?.setOptions(options);
       },
       [
         gradientColor,
@@ -402,8 +348,6 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
-        hasSideBar,
-        quickReturnOptions,
       ],
     );
 
@@ -419,26 +363,18 @@ const Screen = forwardRef(
         }
 
         options = {
-          ...quickReturnOptions,
           headerTintColor: currentTint.current ?? Colors.black_17,
           headerTransparent: true,
-          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}
-              />
-            ),
+          headerBackground: (props: any) => (
+            <HeaderBackground
+              {...props}
+              animatedValue={sharedValue}
+              useGradient={false}
+              useShadowHeader={useShadowHeader}
+              headerBackground={headerBackground}
+              gradientColor={gradientColor}
+            />
+          ),
           headerTitle: (props: any) => {
             return <HeaderTitle {...props} />;
           },
@@ -459,10 +395,6 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
-        hasSideBar,
-        layoutOffset,
-        heightHeader,
-        quickReturnOptions,
       ],
     );
 
@@ -486,24 +418,14 @@ const Screen = forwardRef(
         ),
       };
 
-      navigation?.instance?.setOptions({ header: undefined, ...options });
+      navigation?.instance?.setOptions(options);
     }, [navigation?.instance, sharedValue]);
 
     /**
      * export search header
      */
     const setSearchHeader = (params: SearchHeaderProps) => {
-      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);
-      }
-      if (layout.statusBarClearance) {
-        searchWidth -=
-          layout.statusBarClearance.left + layout.statusBarClearance.right;
-      }
+      const searchWidth = widthDevice - 24;
       const options: StackNavigationOptions = {
         headerRight: undefined,
         headerTitleContainerStyle: {
@@ -515,10 +437,10 @@ const Screen = forwardRef(
           marginHorizontal: 0,
           marginVertical: 0,
           margin: 0,
-          left: searchLeft,
+          left: Spacing.M,
         },
         headerLeft: (props: any) =>
-          params?.hiddenBack ? null : <HeaderLeft {...props} floating />,
+          params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
           <SearchHeader {...params} animatedValue={sharedValue} />
         ),
@@ -614,16 +536,12 @@ const Screen = forwardRef(
       );
     }
 
-    const handleMomentumScrollEnd = (
-      e: NativeSyntheticEvent<NativeScrollEvent>,
-    ) => {
-      snapQuickReturnHeader(e.nativeEvent.contentOffset.y);
-      scrollViewProps?.onMomentumScrollEnd?.(e);
-    };
-
+    /**
+     * handle scroll end
+     * @param 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,
@@ -673,8 +591,6 @@ 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}
@@ -695,8 +611,6 @@ const Screen = forwardRef(
             key={`ScreenItem`}
             style={{
               marginTop: space,
-              marginLeft: layout.insetLeft,
-              marginRight: layout.insetRight,
               flex: item?.props?.expanded ? 1 : undefined,
             }}
             onLayout={item?.props?.onLayout}
@@ -723,15 +637,6 @@ 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={[
@@ -744,36 +649,21 @@ const Screen = forwardRef(
           },
         ]}
       >
-        {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}
-          />
-        )}
+        <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,
-            useDuoGlass &&
-              (!scrollable || !!Header) && { paddingTop: heightHeader },
-          ]}
+          style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
           keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
@@ -789,24 +679,10 @@ const Screen = forwardRef(
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
-            onMomentumScrollEnd={handleMomentumScrollEnd}
             scrollEventThrottle={16}
-            style={[
-              Styles.flex,
-              !scrollable && contentInsetStyle,
-              !scrollable &&
-                !Footer &&
-                isTab &&
-                !!duoTabInset && { paddingBottom: duoTabInset },
-            ]}
+            style={[Styles.flex]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
-              scrollable &&
-                !Footer &&
-                isTab &&
-                !!duoTabInset && { paddingBottom: duoTabInset },
-              scrollable && contentInsetStyle,
-              useDuoGlass && !Header && { paddingTop: heightHeader },
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -816,51 +692,28 @@ const Screen = forwardRef(
           </Component>
 
           {floatingButtonProps && (
-            <View
-              style={{
-                marginLeft: layout.insetLeft,
-                marginRight: layout.insetRight,
-              }}
-            >
+            <View>
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={
-                  Footer || isTab
-                    ? 12 + (Footer ? 0 : duoTabInset)
-                    : bottomInset + Spacing.S
-                }
+                bottom={Footer || isTab ? 12 : 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={[
-                hasContentInset && styles.footerClip,
+                styles.shadow,
                 {
-                  marginLeft: layout.insetLeft,
-                  marginRight: layout.insetRight,
+                  paddingBottom: bottomInset + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
                 },
               ]}
             >
-              <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>
+              {/* 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>
           )}
         </KeyboardAvoidingView>

package/Layout/Section.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenLayout } from './utils';
+import React, { useContext } from 'react';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } 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';
@@ -33,15 +34,18 @@ 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;
   }
-  const widthSection = contentWidth - margin * 2;
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) {
+    widthSection = widthSection - margin * 2;
+  }
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -56,6 +60,13 @@ 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
@@ -79,7 +90,9 @@ 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 { useScreenLayout, validateChildren } from './utils';
-import type { ScreenLayout, SideBarEdge, SideBarLayout } from './utils';
+import GridSystem from './GridSystem';
+import { validateChildren } 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, ScreenLayout, SideBarEdge, SideBarLayout };
+export type { ScreenProps };
 
 export {
   GridContext,
   Card,
   Section,
+  GridSystem,
   validateChildren,
-  useScreenLayout,
   Item,
   ItemList,
   ItemSectionList,

package/Layout/styles.ts

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