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

package/Application/NavigationContainer.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
+  useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -12,6 +13,7 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
+import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
@@ -30,9 +32,6 @@ import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { type EdgeInsets } from 'react-native-safe-area-context';
-import { useScreenLayout } from '../Layout';
-import { getHeaderRowOptions } from '../Layout/utils';
-import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
 
@@ -78,19 +77,17 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         frame: { x: 0, y: 0, width: 0, height: 0 },
       }}
     >
-      <ReservedRegionsProvider>
-        <MiniAppContext.Provider value={mergedContext}>
-          <Navigation
-            screen={screen}
-            theme={theme}
-            options={options}
-            maxApi={maxApi}
-            setCurrentContext={setCurrentContext}
-            initialParams={initialParams}
-            localize={localize}
-          />
-        </MiniAppContext.Provider>
-      </ReservedRegionsProvider>
+      <MiniAppContext.Provider value={mergedContext}>
+        <Navigation
+          screen={screen}
+          theme={theme}
+          options={options}
+          maxApi={maxApi}
+          setCurrentContext={setCurrentContext}
+          initialParams={initialParams}
+          localize={localize}
+        />
+      </MiniAppContext.Provider>
     </SafeAreaProvider>
   );
 };
@@ -108,7 +105,8 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const headerRowOptions = getHeaderRowOptions(useScreenLayout());
+  const [showGrid, setShowGrid] = useState(false);
+  const insets = useSafeAreaInsets();
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
@@ -128,6 +126,23 @@ const Navigation: React.FC<any> = ({
    */
   navigator.current.maxApi = maxApi;
 
+  /**
+   * handle mini language & listen change
+   * engine only shake to enable grid view
+   */
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      'onChangeGrid',
+      enable => {
+        setShowGrid(!!enable);
+      },
+    );
+
+    return () => {
+      subscription?.remove?.();
+    };
+  }, []);
+
   /**
    * translate context method
    * @param data
@@ -157,6 +172,7 @@ const Navigation: React.FC<any> = ({
             headerBackground,
           },
         },
+        showGrid,
         translate,
       }}
     >
@@ -205,7 +221,9 @@ const Navigation: React.FC<any> = ({
               gestureEnabled: false,
               headerTitleAlign: 'center',
               headerTintColor: theme.colors.text.default,
-              ...headerRowOptions,
+              headerStyle: {
+                height: 52 + insets.top,
+              },
             }}
           >
             <Stack.Screen
@@ -228,13 +246,11 @@ const Navigation: React.FC<any> = ({
                 cardStyle: {
                   backgroundColor: theme.colors.background.default,
                 },
-                headerLeft: (props: any) => <HeaderLeft {...props} floating />,
+                headerLeft: (props: any) => <HeaderLeft {...props} />,
                 headerBackground: (props: any) => (
                   <HeaderBackground {...props} />
                 ),
-                headerRight: (props: any) => (
-                  <HeaderRight {...props} floating />
-                ),
+                headerRight: (props: any) => <HeaderRight {...props} />,
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}

package/Application/Navigator.ts

@@ -118,7 +118,9 @@ class Navigator {
   navigate = (name: string) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
-        CommonActions.navigate(name)
+        CommonActions.navigate({
+          name,
+        })
       );
     }
   };

package/Application/StackScreen.tsx

@@ -1,27 +1,12 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Alert,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
-import Animated from 'react-native-reanimated';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
+import { Alert, InteractionManager } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
 import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
+import { GridSystem } from '../Layout';
 import { version } from '../package.json';
-import { SwipeBackHaptic, useAppState, useHeaderScrollState } from './utils';
-import { ScrollObserverView } from './Components/OptionalScrollObserver';
-import { useScreenLayout } from '../Layout/utils';
+import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
@@ -32,7 +17,7 @@ const runAfterInteractions = InteractionManager.runAfterInteractions;
  * @constructor
  */
 const StackScreen: React.FC<any> = props => {
-  const { navigator } = useContext(ApplicationContext);
+  const { showGrid, navigator } = useContext(ApplicationContext);
   const tracking = useRef<any>({
     mounted: false,
     timeoutLoad: undefined,
@@ -57,7 +42,6 @@ const StackScreen: React.FC<any> = props => {
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
-
   const {
     screen: Component,
     options,
@@ -67,24 +51,6 @@ const StackScreen: React.FC<any> = props => {
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
   const { isBackgroundToForeground } = useAppState();
-  const layout = useScreenLayout();
-
-  /**
-   * iPhone Duo: a screen without <Screen> keeps clear of the side bar and, with the
-   * native scroll observer, gets the quick return header, so mini apps need no change
-   */
-  const canAutoLayout = Platform.OS === 'ios' && !bottomTab;
-  const Observer: React.ComponentType<any> = ScrollObserverView ?? View;
-  const headerClaimed = useRef(false);
-  const [autoHeader, setAutoHeader] = useState(false);
-  const syncHeader = useCallback(() => {
-    setAutoHeader(
-      canAutoLayout && layout.isIPhoneDuo && !headerClaimed.current,
-    );
-  }, [canAutoLayout, layout.isIPhoneDuo]);
-  // parent effects run after the screen's, so a claim made on mount is already in
-  useEffect(syncHeader, [syncHeader]);
-  const headerScroll = useHeaderScrollState({ navigation }, autoHeader);
 
   const data = {
     ...initialParams,
@@ -441,38 +407,18 @@ const StackScreen: React.FC<any> = props => {
         onSetParams: (item: ScreenTrackingParams) => {
           tracking.current.params = item;
         },
-        claimHeader: () => {
-          headerClaimed.current = true;
-        },
-        syncHeader,
       }}
     >
       <TooltipPortalProvider>
-        {canAutoLayout ? (
-          // the tree stays the same whether auto layout is on, so the screen never remounts
-          <Observer
-            enabled={autoHeader}
-            pointerEvents={'box-none'}
-            style={styles.flex}
-            onScrollChange={headerScroll.onScrollChange}
-          >
-            {headerScroll.background}
-            <Animated.View style={[styles.flex, headerScroll.contentStyle]}>
-              <Component heightHeader={heightHeader} {...data} />
-            </Animated.View>
-          </Observer>
-        ) : (
-          <Component heightHeader={heightHeader} {...data} />
-        )}
+        <Component heightHeader={heightHeader} {...data} />
+        {showGrid && <GridSystem />}
         <TooltipPortalHost />
+        {/* a leaf on purpose: it subscribes to CardAnimationContext, which changes on every
+            Card render, and must not pull this screen into those renders */}
         <SwipeBackHaptic />
       </TooltipPortalProvider>
     </ScreenContext.Provider>
   );
 };
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export default StackScreen;

package/Application/types.ts

@@ -117,6 +117,7 @@ export type Context = {
   [key: string]: any;
   theme: Theme;
   navigator?: NavigatorProps;
+  showGrid?: boolean;
   translate?: (data: string | { vi: string; en: string }) => string;
 };
 
@@ -257,11 +258,6 @@ export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   onBackHandler?: (goBack: () => void) => void;
-  /**
-   * Optional. If `true`, the button floats into the iPhone Duo side bar while the
-   * device shows one. Set when the button is rendered by the navigation header.
-   */
-  floating?: boolean;
 }
 
 export type HeaderBackgroundProps = {
@@ -333,11 +329,6 @@ export type BottomTabProps = {
     blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
-  /**
-   * iPhone Duo: when the side bar can't hold both bars, which one starts compressed;
-   * tapping the compressed one swaps them. Defaults to 'toolbar'
-   */
-  compressionBehavior?: 'toolbar' | 'tabBar';
 };
 
 export type FloatingButtonProps = {
@@ -361,20 +352,3 @@ export interface SearchHeaderProps extends InputSearchProps {
   renderButtons?: () => ReactNode;
   hiddenBack?: boolean;
 }
-
-export type HeaderScrollOptions = {
-  /**
-   * Navigation of the screen whose header follows the scroll.
-   */
-  navigation?: Navigation;
-  useShadowHeader?: boolean;
-  gradientColor?: string;
-  headerBackground?: string;
-};
-
-export type ScrollChange = {
-  y: number;
-  contentHeight: number;
-  viewportHeight: number;
-  phase: 'scroll' | 'dragEnd' | 'momentumEnd' | 'takeOver';
-};

package/Application/utils.tsx

@@ -16,23 +16,12 @@ import type {
   StackCardInterpolationProps,
 } from '@react-navigation/stack';
 import type { NavigationState, PartialState } from '@react-navigation/native';
-import type {
-  HeaderScrollOptions,
-  ScrollChange,
-  HeaderTitleProps,
-  NavigationOptions,
-} from './types';
+import type { HeaderTitleProps, NavigationOptions } from './types';
 import { ApplicationContext } from '../Context';
 import { Colors, Spacing } from '../Consts';
 import { Animated, AppState, NativeModules, Platform } from 'react-native';
-import { useHeaderHeight } from '@react-navigation/elements';
 import type { SharedValue } from 'react-native-reanimated';
-import {
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 import {
   MiniAppContext,
   ScreenContext,
@@ -42,12 +31,6 @@ import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
-import {
-  DuoGlassBackground,
-  DuoScrollGradient,
-} from './Components/DuoGlassBackground';
-import { DuoQuickReturnHeader } from './Components/DuoQuickReturnHeader';
-import { useScreenLayout } from '../Layout/utils';
 
 const forStackTransitionWithOverlay = (
   props: StackCardInterpolationProps,
@@ -90,8 +73,8 @@ const getStackOptions = (): StackNavigationOptions => {
       left: Spacing.S,
     },
     headerBackground: (props: any) => <HeaderBackground {...props} />,
-    headerLeft: (props: any) => <HeaderLeft {...props} floating />,
-    headerRight: (props: any) => <HeaderRight {...props} floating />,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
@@ -146,7 +129,6 @@ const getOptions = (
         preventBack={params.preventBack}
         onPressLeftHeader={params.onPressLeftHeader}
         onBackHandler={params.onBackHandler}
-        floating
       />
     );
     if (params.hiddenBack) {
@@ -185,9 +167,7 @@ const getOptions = (
       ...options,
       ...{
         headerRight: (props: any) => {
-          return (
-            <HeaderRight {...props} headerRight={params.headerRight} floating />
-          );
+          return <HeaderRight {...props} headerRight={params.headerRight} />;
         },
       },
     };
@@ -421,9 +401,7 @@ const getSwipeGestureValue = (
 };
 
 const readAnimatedValue = (node: unknown, fallback: number): number => {
-  const value = (
-    node as { __getValue?: () => unknown } | undefined
-  )?.__getValue?.();
+  const value = (node as { __getValue?: () => unknown } | undefined)?.__getValue?.();
   return typeof value === 'number' ? value : fallback;
 };
 
@@ -500,218 +478,6 @@ const SwipeBackHaptic = () => {
 const isWhiteListDesignSystem = (context: any): boolean =>
   context?.designSystemConfig?.isWhiteListDesignSystem === true;
 
-/**
- * iPhone Duo: the header leaves with the content and returns on a reverse scroll
- */
-const useDuoQuickReturn = (
-  scrollY: SharedValue<number>,
-  enabled: boolean,
-  heightHeader: number,
-) => {
-  const headerHide = useSharedValue(0);
-  const lastScrollY = useSharedValue(0);
-
-  useAnimatedReaction(
-    () => scrollY.value,
-    y => {
-      const delta = y - lastScrollY.value;
-      lastScrollY.value = y;
-      if (!enabled || y <= 0) {
-        headerHide.value = 0;
-        return;
-      }
-      headerHide.value = Math.min(
-        Math.max(headerHide.value + delta, 0),
-        heightHeader,
-      );
-    },
-    [enabled, heightHeader],
-  );
-
-  const quickReturnOptions: StackNavigationOptions = useMemo(
-    () =>
-      enabled
-        ? {
-            header: (props: any) => (
-              <DuoQuickReturnHeader {...props} offset={headerHide} />
-            ),
-          }
-        : { header: undefined },
-    [enabled, headerHide],
-  );
-
-  /**
-   * a half-shown quick return header settles fully in or out
-   */
-  const snap = useCallback(
-    (offsetY: number) => {
-      const hide = headerHide.value;
-      // above heightHeader the header still sits on the content
-      if (
-        !enabled ||
-        offsetY < heightHeader ||
-        hide <= 0 ||
-        hide >= heightHeader
-      ) {
-        return;
-      }
-      headerHide.value = withTiming(
-        hide > heightHeader / 2 ? heightHeader : 0,
-        { duration: 200 },
-      );
-    },
-    [enabled, heightHeader, headerHide],
-  );
-
-  /**
-   * moves the reference point without counting it as a scroll
-   */
-  const resync = useCallback(
-    (y: number) => {
-      lastScrollY.value = y;
-    },
-    [lastScrollY],
-  );
-
-  return { headerHide, quickReturnOptions, snap, resync };
-};
-
-/**
- * Header scroll state for screens that render their own scroll views instead of
- * `<Screen scrollable>`, such as one ScrollView per TabView page.
- */
-/**
- * header scroll state fed by any scroll source; off, it leaves the header and content alone
- */
-const useHeaderScrollState = (
-  {
-    navigation,
-    useShadowHeader = true,
-    gradientColor,
-    headerBackground,
-  }: HeaderScrollOptions,
-  enabled: boolean,
-) => {
-  const layout = useScreenLayout();
-  const heightHeader = useHeaderHeight();
-  const scrollY = useSharedValue(0);
-  const hasSideBar = !!layout.sideBar;
-  const duo = enabled && hasSideBar;
-
-  const viewportHeight = useRef<number | undefined>(undefined);
-  const { headerHide, quickReturnOptions, snap, resync } = useDuoQuickReturn(
-    scrollY,
-    duo,
-    heightHeader,
-  );
-
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const options: StackNavigationOptions = hasSideBar
-      ? {
-          ...quickReturnOptions,
-          headerTransparent: true,
-          headerTintColor: Colors.black_17,
-          headerBackground: () => (
-            <DuoGlassBackground animatedValue={scrollY} />
-          ),
-          headerTitle: (props: any) => <HeaderTitle {...props} />,
-        }
-      : {
-          header: undefined,
-          headerTransparent: false,
-          headerTintColor: Colors.black_17,
-          headerBackground: (props: any) => (
-            <HeaderBackground
-              {...props}
-              animatedValue={scrollY}
-              useShadowHeader={useShadowHeader}
-              headerBackground={headerBackground}
-              gradientColor={gradientColor}
-            />
-          ),
-          headerTitle: (props: any) => <HeaderTitle {...props} />,
-        };
-
-    navigation?.instance?.setOptions(options);
-  }, [
-    enabled,
-    navigation?.instance,
-    hasSideBar,
-    quickReturnOptions,
-    scrollY,
-    useShadowHeader,
-    headerBackground,
-    gradientColor,
-  ]);
-
-  const setScrollOffset = useCallback(
-    (y: number) => {
-      resync(y);
-      scrollY.value = y;
-    },
-    [scrollY, resync],
-  );
-
-  const onScrollChange = useCallback(
-    ({
-      y: offsetY,
-      contentHeight,
-      viewportHeight: height,
-      phase,
-    }: ScrollChange) => {
-      // the bottom bounce is not a reverse scroll
-      const maxY = Math.max(contentHeight - height, 0);
-      const y = Math.min(offsetY, maxY);
-      if (phase === 'takeOver') {
-        viewportHeight.current = height;
-        setScrollOffset(y);
-        return;
-      }
-      if (phase !== 'scroll') {
-        snap(offsetY);
-        return;
-      }
-      // the quick return resizes the viewport; pinned at the bottom, the offset
-      // iOS clamps to the new size is not a scroll
-      const resized = height !== viewportHeight.current;
-      viewportHeight.current = height;
-      if (resized && offsetY >= maxY - 1) {
-        resync(y);
-      }
-      scrollY.value = y;
-    },
-    [scrollY, snap, resync, setScrollOffset],
-  );
-
-  const { insetLeft, insetRight } = layout;
-  const contentStyle = useAnimatedStyle(
-    () =>
-      enabled
-        ? {
-            paddingLeft: insetLeft,
-            paddingRight: insetRight,
-            paddingTop: hasSideBar ? heightHeader - headerHide.value : 0,
-          }
-        : { paddingLeft: 0, paddingRight: 0, paddingTop: 0 },
-    [enabled, hasSideBar, heightHeader, insetLeft, insetRight],
-  );
-
-  const background = duo ? (
-    <DuoScrollGradient
-      animatedValue={scrollY}
-      gradientColor={gradientColor}
-      headerBackground={headerBackground}
-      heightHeader={heightHeader}
-      followScroll
-    />
-  ) : null;
-
-  return { scrollY, onScrollChange, setScrollOffset, background, contentStyle };
-};
-
 export {
   getStackOptions,
   getModalOptions,
@@ -723,8 +489,6 @@ export {
   useAppState,
   useNativeCanGoBack,
   useNormalizedSharedValue,
-  useDuoQuickReturn,
-  useHeaderScrollState,
   SwipeBackHaptic,
   isWhiteListDesignSystem,
 };

package/Consts/theme.ts

@@ -1,5 +1,5 @@
-import type { Context, Theme } from '../Application/types';
-import { Colors } from './colors+spacing+radius';
+import type {Context, Theme} from '../Application/types';
+import {Colors} from './colors+spacing+radius';
 
 const defaultTheme: Theme = {
   dark: false,
@@ -112,9 +112,10 @@ const defaultDarkTheme: Theme = {
 const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
+  showGrid: false,
   translate: () => {
     return '';
   },
 };
 
-export { defaultContext, defaultTheme, defaultDarkTheme };
+export {defaultContext, defaultTheme, defaultDarkTheme};

package/Input/Input.tsx

@@ -6,8 +6,9 @@ import React, {
   useState,
 } from 'react';
 import {
+  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEvent,
+  TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -101,12 +102,12 @@ const Input = forwardRef(
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/InputMoney.tsx

@@ -9,9 +9,10 @@ import React, {
   useState,
 } from 'react';
 import {
+  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEvent,
-  TextInputSelectionChangeEvent,
+  TextInputFocusEventData,
+  TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -258,7 +259,9 @@ const InputMoney = forwardRef(
     };
 
     // Keeps the caret out of the currency suffix.
-    const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
+    const _onSelectionChange = (
+      e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
+    ) => {
       props.onSelectionChange?.(e);
       if (editingRef.current) return;
       const selection = e.nativeEvent.selection;
@@ -280,12 +283,12 @@ const InputMoney = forwardRef(
       });
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(false);
       onBlur?.(e);
     };