@momo-kits/foundation 0.167.1-beta.10 → 0.167.1-beta.11

package/Application/Components/HeaderTitle.tsx

@@ -16,16 +16,7 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
-import {
-  AnimatedCompatValue,
-  isWhiteListDesignSystem,
-  useNormalizedSharedValue,
-} from '../utils';
-
-const useHeaderFontFamily = (): string => {
-  const context = useContext<any>(MiniAppContext);
-  return isWhiteListDesignSystem(context) ? 'MoMoTrustDisplay' : 'SFProText';
-};
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
 
 type HeaderTitleInterpolate = {
   inputRange: number[];
@@ -46,7 +37,6 @@ const HeaderTitle: React.FC<
   HeaderTitleExtraProps & { [key: string]: any }
 > = props => {
   const context = useContext<any>(MiniAppContext);
-  const headerFontFamily = useHeaderFontFamily();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -95,7 +85,7 @@ const HeaderTitle: React.FC<
             fontFamily: exportFontFamily(
               'bold',
               'action_xs_bold',
-              headerFontFamily,
+              'MoMoTrustDisplay',
             ),
             color: props.tintColor,
           },
@@ -140,7 +130,6 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const headerFontFamily = useHeaderFontFamily();
   const maxWidth = Dimensions.get('window').width - 172;
   const getShortName = (name: string) => {
     const words = name.split(' ');
@@ -389,7 +378,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
-              fontFamily={headerFontFamily}
+              fontFamily='MoMoTrustDisplay'
               color={tintColor}
               numberOfLines={1}
             >
@@ -423,7 +412,6 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   onPress,
   isLoading,
 }) => {
-  const headerFontFamily = useHeaderFontFamily();
   const maxWidth = Dimensions.get('window').width - 172;
   const renderShimmer = () => {
     return (
@@ -460,12 +448,9 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
         </Text>
       )}
       <View style={Styles.row}>
-        <Text
-          typography="action_xs_bold"
-          fontFamily={headerFontFamily}
-          color={tintColor}
-          numberOfLines={1}
-        >
+        <Text typography="action_xs_bold" 
+          fontFamily='MoMoTrustDisplay'
+         color={tintColor} numberOfLines={1}>
           {location}
         </Text>
         <Icon
@@ -492,7 +477,6 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   onPress,
   isLoading,
 }) => {
-  const headerFontFamily = useHeaderFontFamily();
   const { width } = Dimensions.get('screen');
   const maxWidth = Dimensions.get('window').width - 172;
   const startWidth = width * 0.25;
@@ -528,7 +512,8 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
             style={{ maxWidth: startWidth }}
             color={tintColor}
             numberOfLines={1}
-            fontFamily={headerFontFamily}
+          fontFamily='MoMoTrustDisplay'
+
           >
             {start}
           </Text>
@@ -544,7 +529,8 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}
-              fontFamily={headerFontFamily}
+          fontFamily='MoMoTrustDisplay'
+
             >
               {end}
             </Text>

package/Application/NavigationContainer.tsx

@@ -17,14 +17,10 @@ import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
-import {
-  getModalOptions,
-  getStackOptions,
-  isWhiteListDesignSystem,
-  useNativeCanGoBack,
-} from './utils';
+import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
+import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -107,10 +103,8 @@ const Navigation: React.FC<any> = ({
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const insets = useSafeAreaInsets();
+  const defaultRegularFontFamily = useDefaultRegularFontFamily();
   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;
 
@@ -162,7 +156,6 @@ const Navigation: React.FC<any> = ({
         navigator: navigator.current,
         theme: {
           ...theme,
-          font: fontFamily,
           colors: {
             ...theme.colors,
             gradient: headerGradient,
@@ -190,19 +183,19 @@ const Navigation: React.FC<any> = ({
             },
             fonts: {
               regular: {
-                fontFamily: navigationFontFamily,
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
               medium: {
-                fontFamily: navigationFontFamily,
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
               bold: {
-                fontFamily: navigationFontFamily,
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
               heavy: {
-                fontFamily: navigationFontFamily,
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
             },

package/Application/WidgetContainer.tsx

@@ -3,6 +3,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
+import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -10,7 +11,7 @@ import {
   NavigationContainerRef,
   NavigationIndependentTree,
 } from '@react-navigation/native';
-import { getModalOptions, isWhiteListDesignSystem } from './utils';
+import { getModalOptions } from './utils';
 import { createStackNavigator } from '@react-navigation/stack';
 import ModalScreen from './ModalScreen';
 import { View } from 'react-native';
@@ -42,6 +43,7 @@ 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) => {
@@ -78,9 +80,6 @@ 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 }}>
@@ -91,7 +90,6 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               navigator: navigator.current,
               theme: {
                 ...theme,
-                font: fontFamily,
                 colors: {
                   ...theme.colors,
                   gradient: headerGradient,
@@ -118,19 +116,19 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
                   },
                   fonts: {
                     regular: {
-                      fontFamily: navigationFontFamily,
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                     medium: {
-                      fontFamily: navigationFontFamily,
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                     bold: {
-                      fontFamily: navigationFontFamily,
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                     heavy: {
-                      fontFamily: navigationFontFamily,
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                   },

package/Application/utils.tsx

@@ -475,9 +475,6 @@ const SwipeBackHaptic = () => {
   return null;
 };
 
-const isWhiteListDesignSystem = (context: any): boolean =>
-  context?.designSystemConfig?.isWhiteListDesignSystem === true;
-
 export {
   getStackOptions,
   getModalOptions,
@@ -490,5 +487,4 @@ export {
   useNativeCanGoBack,
   useNormalizedSharedValue,
   SwipeBackHaptic,
-  isWhiteListDesignSystem,
 };

package/Consts/designSystemFont.ts

@@ -0,0 +1,38 @@
+import { useContext } from 'react';
+import { MiniAppContext } from '../Context';
+
+export const NEW_DEFAULT_FONT_FAMILY = 'MomoTrustSans';
+export const LEGACY_DEFAULT_FONT_FAMILY = 'SFProText';
+
+/**
+ * Font thuoc bo design system moi. Ngoai whitelist thi ha het ve font cu:
+ * MoMoTrustDisplay chi duoc dung tu commit header title 5bfde6251 (DS-791),
+ * truoc do header lay font theo theme.
+ */
+const NEW_FONT_FAMILIES = [NEW_DEFAULT_FONT_FAMILY, 'MoMoTrustDisplay'];
+
+/**
+ * Cờ whitelist design system, host đẩy xuống qua `decorateProps`
+ * (`designSystemConfig.isWhiteListDesignSystem`). Ngoài whitelist thì kit giữ
+ * nguyên font cũ.
+ */
+export const useIsDesignSystemWhiteList = (): boolean => {
+  const context = useContext<any>(MiniAppContext);
+  return context?.designSystemConfig?.isWhiteListDesignSystem === true;
+};
+
+/**
+ * Hạ font mặc định mới về font cũ khi user không nằm trong whitelist.
+ * Font do caller chỉ định tường minh (MoMoSignature, AlegreyaSans...) giữ nguyên.
+ */
+export const useResolvedFontFamily = (font: string): string => {
+  const isWhiteList = useIsDesignSystemWhiteList();
+  if (NEW_FONT_FAMILIES.includes(font) && !isWhiteList) {
+    return LEGACY_DEFAULT_FONT_FAMILY;
+  }
+  return font;
+};
+
+/** Tên file font Regular tương ứng với nhánh whitelist đang áp dụng. */
+export const useDefaultRegularFontFamily = (): string =>
+  `${useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY)}-Regular`;

package/Consts/index.ts

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

package/Consts/theme.ts

@@ -51,7 +51,7 @@ const defaultTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'SFProText',
+  font: 'MomoTrustSans',
   assets: {},
 };
 
@@ -105,7 +105,7 @@ const defaultDarkTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'SFProText',
+  font: 'MomoTrustSans',
   assets: {},
 };
 

package/Input/InputMoney.tsx

@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput,
   TextInputFocusEventData,
   TextInputSelectionChangeEventData,
@@ -57,13 +56,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 +68,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 +172,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 +240,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,
@@ -285,19 +263,24 @@ const InputMoney = forwardRef(
       e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
     ) => {
       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>) => {

package/Text/index.tsx

@@ -7,6 +7,10 @@ import {
   MiniAppContext,
   SkeletonContext,
 } from '../Context';
+import {
+  NEW_DEFAULT_FONT_FAMILY,
+  useResolvedFontFamily,
+} from '../Consts/designSystemFont';
 import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
 
@@ -114,7 +118,8 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
   const { fontWeight, fontSize, fontStyle, lineHeight } = typoStyle;
   const style = FontStyle[fontStyle ?? 'normal'];
-  const font = newFontFamily ?? theme.font;
+  const font = useResolvedFontFamily(newFontFamily ?? theme.font);
+  const resolvedDefaultFamily = useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY);
   let fontFamily: string;
 
   switch (font) {
@@ -143,7 +148,11 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
       break;
     }
     default: {
-      fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
+      fontFamily = `${resolvedDefaultFamily}-${
+        resolvedDefaultFamily === NEW_DEFAULT_FONT_FAMILY
+          ? MomoTrustSans[fontWeight]
+          : SFProText[fontWeight]
+      }`;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-beta.10",
+    "version": "0.167.1-beta.11",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},