@momo-kits/foundation 0.167.1-beta.5 → 0.167.1-duo-test.1

package/Application/types.ts

@@ -117,7 +117,6 @@ export type Context = {
   [key: string]: any;
   theme: Theme;
   navigator?: NavigatorProps;
-  showGrid?: boolean;
   translate?: (data: string | { vi: string; en: string }) => string;
 };
 
@@ -258,6 +257,11 @@ 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 = {
@@ -329,6 +333,11 @@ 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 = {
@@ -352,3 +361,20 @@ 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,12 +16,28 @@ import type {
   StackCardInterpolationProps,
 } from '@react-navigation/stack';
 import type { NavigationState, PartialState } from '@react-navigation/native';
-import type { HeaderTitleProps, NavigationOptions } from './types';
+import type {
+  HeaderScrollOptions,
+  ScrollChange,
+  HeaderTitleProps,
+  NavigationOptions,
+} from './types';
 import { ApplicationContext } from '../Context';
 import { Colors, Spacing } from '../Consts';
-import { Animated, AppState, NativeModules, Platform } from 'react-native';
+import {
+  Animated,
+  AppState,
+  NativeModules,
+  Platform,
+} from 'react-native';
+import { useHeaderHeight } from '@react-navigation/elements';
 import type { SharedValue } from 'react-native-reanimated';
-import { useSharedValue } from 'react-native-reanimated';
+import {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import {
   MiniAppContext,
   ScreenContext,
@@ -31,6 +47,12 @@ 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,
@@ -73,8 +95,8 @@ const getStackOptions = (): StackNavigationOptions => {
       left: Spacing.S,
     },
     headerBackground: (props: any) => <HeaderBackground {...props} />,
-    headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderRight {...props} />,
+    headerLeft: (props: any) => <HeaderLeft {...props} floating />,
+    headerRight: (props: any) => <HeaderRight {...props} floating />,
     headerTintColor: Colors.black_17,
     gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
@@ -129,6 +151,7 @@ const getOptions = (
         preventBack={params.preventBack}
         onPressLeftHeader={params.onPressLeftHeader}
         onBackHandler={params.onBackHandler}
+        floating
       />
     );
     if (params.hiddenBack) {
@@ -167,7 +190,9 @@ const getOptions = (
       ...options,
       ...{
         headerRight: (props: any) => {
-          return <HeaderRight {...props} headerRight={params.headerRight} />;
+          return (
+            <HeaderRight {...props} headerRight={params.headerRight} floating />
+          );
         },
       },
     };
@@ -401,7 +426,9 @@ 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;
 };
 
@@ -475,6 +502,224 @@ const SwipeBackHaptic = () => {
   return null;
 };
 
+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,
+          headerShown: true,
+          headerBackground: () => (
+            <DuoGlassBackground animatedValue={scrollY} />
+          ),
+          headerTitle: (props: any) => <HeaderTitle {...props} />,
+        }
+      : {
+          header: undefined,
+          headerTransparent: false,
+          headerTintColor: Colors.black_17,
+          headerShown: true,
+          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,
@@ -486,5 +731,8 @@ export {
   useAppState,
   useNativeCanGoBack,
   useNormalizedSharedValue,
+  useDuoQuickReturn,
+  useHeaderScrollState,
   SwipeBackHaptic,
+  isWhiteListDesignSystem,
 };

package/Consts/index.ts

@@ -2,4 +2,3 @@ export * from './colors+spacing+radius';
 export * from './theme';
 export * from './styles';
 export const GRIDVIEW = false;
-export * from './designSystemFont';

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,
@@ -51,7 +51,7 @@ const defaultTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'MomoTrustSans',
+  font: 'SFProText',
   assets: {},
 };
 
@@ -105,17 +105,16 @@ const defaultDarkTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'MomoTrustSans',
+  font: 'SFProText',
   assets: {},
 };
 
 const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
-  showGrid: false,
   translate: () => {
     return '';
   },
 };
 
-export {defaultContext, defaultTheme, defaultDarkTheme};
+export { defaultContext, defaultTheme, defaultDarkTheme };

package/Input/Input.tsx

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

package/Input/InputMoney.tsx

@@ -9,11 +9,9 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
-  Platform,
   TextInput,
-  TextInputFocusEventData,
-  TextInputSelectionChangeEventData,
+  TextInputFocusEvent,
+  TextInputSelectionChangeEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -57,13 +55,10 @@ const caretFromDigitIndex = (display: string, digitIndex: number) => {
   return 0;
 };
 
-// Finds which range of `old` was replaced to produce `next`. `selection` is
-// the pre-edit selection on iOS and already the post-edit caret on Android,
-// where onSelectionChange fires before onChangeText.
 const detectEdit = (old: string, next: string, selection: Selection): Edit => {
   const { start, end } = selection;
   const removed = old.length - next.length;
-  const preEdit: Edit[] = [
+  const candidates: Edit[] = [
     {
       start,
       end,
@@ -72,26 +67,6 @@ const detectEdit = (old: string, next: string, selection: Selection): Edit => {
     { start: start - removed, end: start, inserted: '' },
     { start, end: start + removed, inserted: '' },
   ];
-  const postEdit: Edit[] = [];
-  const tail = next.length - start;
-  if (start === end && tail <= old.length) {
-    let prefix = 0;
-    while (
-      prefix < Math.min(start, old.length - tail) &&
-      old[prefix] === next[prefix]
-    ) {
-      prefix += 1;
-    }
-    postEdit.push({
-      start: prefix,
-      end: old.length - tail,
-      inserted: next.slice(prefix, start),
-    });
-  }
-  const candidates =
-    Platform.OS === 'android'
-      ? [...postEdit, ...preEdit]
-      : [...preEdit, ...postEdit];
   const match = candidates.find(
     e =>
       e.start >= 0 &&
@@ -196,9 +171,8 @@ const InputMoney = forwardRef(
     const selectionRef = useRef<Selection>({ start: 0, end: 0 });
     // Caret to push to native once the committed text is rendered.
     const pendingCaretRef = useRef<number | null>(null);
-    // Caret the native input reports for the raw, unformatted text. On iOS that
-    // event lands after onChangeText and must not override the formatted caret.
-    const rawCaretRef = useRef<number | null>(null);
+    const pendingSelectionRef = useRef<Selection | null>(null);
+    const editingRef = useRef(false);
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
@@ -265,10 +239,13 @@ const InputMoney = forwardRef(
     const _onChangeText = (text: string) => {
       let digits = '';
       let caretDigit = 0;
-      rawCaretRef.current = 0;
+      pendingSelectionRef.current = null;
+      editingRef.current = true;
+      setTimeout(() => {
+        editingRef.current = false;
+      });
       if (text) {
         const edit = detectEdit(displayRef.current, text, selectionRef.current);
-        rawCaretRef.current = edit.start + edit.inserted.length;
         ({ digits, caretDigit } = applyEdit(
           displayRef.current,
           edit,
@@ -281,31 +258,34 @@ const InputMoney = forwardRef(
     };
 
     // Keeps the caret out of the currency suffix.
-    const _onSelectionChange = (
-      e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
-    ) => {
+    const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
       props.onSelectionChange?.(e);
-      const { start, end } = e.nativeEvent.selection;
-      const rawCaret = rawCaretRef.current;
-      rawCaretRef.current = null;
-      if (start === end && start === rawCaret) {
-        return;
-      }
-      const display = displayRef.current;
-      const max = display ? display.length - currency.length : 0;
-      const clamped = { start: Math.min(start, max), end: Math.min(end, max) };
-      selectionRef.current = clamped;
-      if (clamped.start !== start || clamped.end !== end) {
-        inputRef.current?.setSelection(clamped.start, clamped.end);
-      }
+      if (editingRef.current) return;
+      const selection = e.nativeEvent.selection;
+      pendingSelectionRef.current = selection;
+      setTimeout(() => {
+        if (pendingSelectionRef.current !== selection) return;
+        pendingSelectionRef.current = null;
+        const { start, end } = selection;
+        const display = displayRef.current;
+        const max = display ? display.length - currency.length : 0;
+        const clamped = {
+          start: Math.min(start, max),
+          end: Math.min(end, max),
+        };
+        selectionRef.current = clamped;
+        if (clamped.start !== start || clamped.end !== end) {
+          inputRef.current?.setSelection(clamped.start, clamped.end);
+        }
+      });
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/InputPhoneNumber.tsx

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

package/Input/InputSearch.tsx

@@ -10,9 +10,8 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -166,12 +165,12 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     props.accessibilityLabel,
   );
 
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const _onFocus = (e: TextInputFocusEvent) => {
     setFocused(true);
     onFocus?.(e);
   };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const _onBlur = (e: TextInputFocusEvent) => {
     setFocused(false);
     onBlur?.(e);
   };

package/Input/InputTextArea.tsx

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