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

package/Application/Components/SideBarButton.tsx

@@ -0,0 +1,128 @@
+import React, { ReactNode, useContext } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { NavigationButtonProps } from '../types';
+import { ApplicationContext } from '../../Context';
+import { Colors, Radius, Shadow, Spacing } from '../../Consts';
+import { Icon } from '../../Icon';
+import { BadgeDot } from '../../Badge';
+import { DuoMetrics } from '../../Layout/utils';
+
+const SIDE_BAR_ICON_SIZE = 24;
+
+/**
+ * glass material for side bar controls: dark glass under light icons (banner headers),
+ * light glass otherwise
+ */
+const getGlassStyle = (tintColor?: string) =>
+  tintColor === Colors.black_01 || tintColor === 'white'
+    ? styles.glassDark
+    : styles.glassLight;
+
+/**
+ * 48pt glass circle used for a single control in the iPhone Duo side bar
+ */
+const SideBarButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  showBadge = false,
+  style,
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  return (
+    <View>
+      <TouchableOpacity
+        {...props}
+        style={[styles.control, getGlassStyle(tintColor), style]}
+      >
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={SIDE_BAR_ICON_SIZE}
+        />
+      </TouchableOpacity>
+      {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
+    </View>
+  );
+};
+
+/**
+ * 48pt wide glass capsule grouping related controls, one item per 50pt
+ */
+const SideBarGroup: React.FC<{
+  tintColor?: string;
+  style?: StyleProp<ViewStyle>;
+  children: ReactNode;
+}> = ({ tintColor, style, children }) => {
+  const count = React.Children.toArray(children).length;
+  const height =
+    count > 1 ? count * DuoMetrics.itemPitch : DuoMetrics.controlSize;
+
+  return (
+    <View style={[styles.control, getGlassStyle(tintColor), { height }, style]}>
+      {children}
+    </View>
+  );
+};
+
+/**
+ * icon item inside a SideBarGroup
+ */
+const SideBarGroupItem: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  return (
+    <TouchableOpacity {...props} style={styles.groupItem}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={SIDE_BAR_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  control: {
+    width: DuoMetrics.controlSize,
+    height: DuoMetrics.controlSize,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  glassLight: {
+    backgroundColor: Colors.black_01 + 'D9',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_20 + '14',
+    ...Shadow.Light,
+  },
+  glassDark: {
+    backgroundColor: Colors.black_20 + '80',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_01 + '33',
+  },
+  groupItem: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: Spacing.XXS,
+    right: Spacing.XXS,
+  },
+});
+
+export { SideBarButton, SideBarGroup, SideBarGroupItem };

package/Application/ModalScreen.tsx

@@ -16,7 +16,7 @@ import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { runOnJS } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -106,7 +106,7 @@ const Modal: React.FC<ModalParams> = props => {
         }),
       ]).start(() => {
         navigator?.pop();
-        runOnJS(callback)();
+        scheduleOnRN(callback);
       });
     },
     [navigator, opacity, scale],

package/Application/NavigationContainer.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
-  useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -13,17 +12,17 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
-import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
+import {
+  getModalOptions,
+  getStackOptions,
+  isWhiteListDesignSystem,
+  useNativeCanGoBack,
+} from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import {
-  useDefaultRegularFontFamily,
-  useResolvedFontFamily,
-} from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -31,6 +30,7 @@ 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';
 
 const Stack = createStackNavigator();
 
@@ -104,11 +104,11 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const [showGrid, setShowGrid] = useState(false);
-  const insets = useSafeAreaInsets();
-  const defaultRegularFontFamily = useDefaultRegularFontFamily();
-  const themeFont = useResolvedFontFamily(theme.font);
+  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
   const syncCanGoBack = useNativeCanGoBack();
+  const isWhiteList = isWhiteListDesignSystem(context);
+  const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -124,23 +124,6 @@ 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
@@ -160,7 +143,7 @@ const Navigation: React.FC<any> = ({
         navigator: navigator.current,
         theme: {
           ...theme,
-          font: themeFont,
+          font: fontFamily,
           colors: {
             ...theme.colors,
             gradient: headerGradient,
@@ -170,7 +153,6 @@ const Navigation: React.FC<any> = ({
             headerBackground,
           },
         },
-        showGrid,
         translate,
       }}
     >
@@ -188,19 +170,19 @@ const Navigation: React.FC<any> = ({
             },
             fonts: {
               regular: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               medium: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               bold: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               heavy: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
             },
@@ -220,8 +202,9 @@ const Navigation: React.FC<any> = ({
               headerTitleAlign: 'center',
               headerTintColor: theme.colors.text.default,
               headerStyle: {
-                height: 52 + insets.top,
+                height: headerHeight,
               },
+              headerStatusBarHeight,
             }}
           >
             <Stack.Screen
@@ -244,11 +227,13 @@ const Navigation: React.FC<any> = ({
                 cardStyle: {
                   backgroundColor: theme.colors.background.default,
                 },
-                headerLeft: (props: any) => <HeaderLeft {...props} />,
+                headerLeft: (props: any) => <HeaderLeft {...props} floating />,
                 headerBackground: (props: any) => (
                   <HeaderBackground {...props} />
                 ),
-                headerRight: (props: any) => <HeaderRight {...props} />,
+                headerRight: (props: any) => (
+                  <HeaderRight {...props} floating />
+                ),
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}

package/Application/Navigator.ts

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

package/Application/StackScreen.tsx

@@ -4,7 +4,6 @@ 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 } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
@@ -17,7 +16,7 @@ const runAfterInteractions = InteractionManager.runAfterInteractions;
  * @constructor
  */
 const StackScreen: React.FC<any> = props => {
-  const { showGrid, navigator } = useContext(ApplicationContext);
+  const { navigator } = useContext(ApplicationContext);
   const tracking = useRef<any>({
     mounted: false,
     timeoutLoad: undefined,
@@ -42,6 +41,7 @@ const StackScreen: React.FC<any> = props => {
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
+
   const {
     screen: Component,
     options,
@@ -411,10 +411,7 @@ const StackScreen: React.FC<any> = props => {
     >
       <TooltipPortalProvider>
         <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>

package/Application/WidgetContainer.tsx

@@ -3,10 +3,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import {
-  resolveFontFamily,
-  useDefaultRegularFontFamily,
-} from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -14,7 +10,7 @@ import {
   NavigationContainerRef,
   NavigationIndependentTree,
 } from '@react-navigation/native';
-import { getModalOptions } from './utils';
+import { getModalOptions, isWhiteListDesignSystem } from './utils';
 import { createStackNavigator } from '@react-navigation/stack';
 import ModalScreen from './ModalScreen';
 import { View } from 'react-native';
@@ -46,7 +42,6 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
-  const defaultRegularFontFamily = useDefaultRegularFontFamily();
 
   useEffect(() => {
     const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
@@ -83,6 +78,9 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
     ...context,
     ...currentContext,
   };
+  const isWhiteList = isWhiteListDesignSystem(mergedContext);
+  const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
 
   return (
     <View style={{ height: height ?? '100%', minHeight: 1 }}>
@@ -93,11 +91,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               navigator: navigator.current,
               theme: {
                 ...theme,
-                font: resolveFontFamily(
-                  theme.font,
-                  mergedContext?.designSystemConfig?.isWhiteListDesignSystem ===
-                    true,
-                ),
+                font: fontFamily,
                 colors: {
                   ...theme.colors,
                   gradient: headerGradient,
@@ -124,19 +118,19 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
                   },
                   fonts: {
                     regular: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     medium: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     bold: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     heavy: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                   },

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 = {

package/Application/utils.tsx

@@ -73,8 +73,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 +129,7 @@ const getOptions = (
         preventBack={params.preventBack}
         onPressLeftHeader={params.onPressLeftHeader}
         onBackHandler={params.onBackHandler}
+        floating
       />
     );
     if (params.hiddenBack) {
@@ -167,7 +168,9 @@ const getOptions = (
       ...options,
       ...{
         headerRight: (props: any) => {
-          return <HeaderRight {...props} headerRight={params.headerRight} />;
+          return (
+            <HeaderRight {...props} headerRight={params.headerRight} floating />
+          );
         },
       },
     };
@@ -475,6 +478,9 @@ const SwipeBackHaptic = () => {
   return null;
 };
 
+const isWhiteListDesignSystem = (context: any): boolean =>
+  context?.designSystemConfig?.isWhiteListDesignSystem === true;
+
 export {
   getStackOptions,
   getModalOptions,
@@ -487,4 +493,5 @@ export {
   useNativeCanGoBack,
   useNormalizedSharedValue,
   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,
@@ -112,10 +112,9 @@ 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,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);
     };