@momo-kits/foundation 0.167.1-beta.3 → 0.167.1-beta.7

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,13 @@ import Animated, {
 } from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
-import { Colors, Radius, Spacing, Styles } from '../../Consts';
+import {
+  Colors,
+  Radius,
+  Spacing,
+  Styles,
+  useHeaderFontFamily,
+} from '../../Consts';
 import {
   TitleJourneyProps,
   TitleLocationProps,
@@ -37,6 +43,7 @@ const HeaderTitle: React.FC<
   HeaderTitleExtraProps & { [key: string]: any }
 > = props => {
   const context = useContext<any>(MiniAppContext);
+  const headerFontFamily = useHeaderFontFamily();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -85,7 +92,7 @@ const HeaderTitle: React.FC<
             fontFamily: exportFontFamily(
               'bold',
               'action_xs_bold',
-              'MoMoTrustDisplay',
+              headerFontFamily,
             ),
             color: props.tintColor,
           },
@@ -130,6 +137,7 @@ 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(' ');
@@ -378,7 +386,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
-              fontFamily='MoMoTrustDisplay'
+              fontFamily={headerFontFamily}
               color={tintColor}
               numberOfLines={1}
             >
@@ -412,6 +420,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   onPress,
   isLoading,
 }) => {
+  const headerFontFamily = useHeaderFontFamily();
   const maxWidth = Dimensions.get('window').width - 172;
   const renderShimmer = () => {
     return (
@@ -449,7 +458,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
       )}
       <View style={Styles.row}>
         <Text typography="action_xs_bold" 
-          fontFamily='MoMoTrustDisplay'
+          fontFamily={headerFontFamily}
          color={tintColor} numberOfLines={1}>
           {location}
         </Text>
@@ -477,6 +486,7 @@ 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;
@@ -512,7 +522,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
             style={{ maxWidth: startWidth }}
             color={tintColor}
             numberOfLines={1}
-          fontFamily='MoMoTrustDisplay'
+          fontFamily={headerFontFamily}
 
           >
             {start}
@@ -529,7 +539,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}
-          fontFamily='MoMoTrustDisplay'
+          fontFamily={headerFontFamily}
 
             >
               {end}

package/Application/NavigationContainer.tsx

@@ -20,7 +20,10 @@ import Navigator from './Navigator';
 import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
+import {
+  useDefaultRegularFontFamily,
+  useResolvedFontFamily,
+} from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -104,6 +107,7 @@ const Navigation: React.FC<any> = ({
   const [showGrid, setShowGrid] = useState(false);
   const insets = useSafeAreaInsets();
   const defaultRegularFontFamily = useDefaultRegularFontFamily();
+  const themeFont = useResolvedFontFamily(theme.font);
   const syncCanGoBack = useNativeCanGoBack();
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
@@ -156,6 +160,7 @@ const Navigation: React.FC<any> = ({
         navigator: navigator.current,
         theme: {
           ...theme,
+          font: themeFont,
           colors: {
             ...theme.colors,
             gradient: headerGradient,

package/Application/WidgetContainer.tsx

@@ -3,7 +3,10 @@ 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 {
+  resolveFontFamily,
+  useDefaultRegularFontFamily,
+} from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -90,6 +93,11 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               navigator: navigator.current,
               theme: {
                 ...theme,
+                font: resolveFontFamily(
+                  theme.font,
+                  mergedContext?.designSystemConfig?.isWhiteListDesignSystem ===
+                    true,
+                ),
                 colors: {
                   ...theme.colors,
                   gradient: headerGradient,

package/Consts/designSystemFont.ts

@@ -3,36 +3,23 @@ import { MiniAppContext } from '../Context';
 
 export const NEW_DEFAULT_FONT_FAMILY = 'MomoTrustSans';
 export const LEGACY_DEFAULT_FONT_FAMILY = 'SFProText';
+const HEADER_FONT_FAMILY = 'MoMoTrustDisplay';
 
-/**
- * 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;
-};
+export const resolveFontFamily = (font: string, isWhiteList: boolean): string =>
+  isWhiteList ? NEW_DEFAULT_FONT_FAMILY : font;
+
+export const useResolvedFontFamily = (font: string): string =>
+  resolveFontFamily(font, useIsDesignSystemWhiteList());
 
-/** 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`;
+  `${useResolvedFontFamily(LEGACY_DEFAULT_FONT_FAMILY)}-Regular`;
+
+export const useHeaderFontFamily = (): string =>
+  useIsDesignSystemWhiteList()
+    ? HEADER_FONT_FAMILY
+    : LEGACY_DEFAULT_FONT_FAMILY;

package/Consts/theme.ts

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

package/Input/InputMoney.tsx

@@ -4,13 +4,16 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import {
   NativeSyntheticEvent,
+  Platform,
   TextInput,
   TextInputFocusEventData,
+  TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -32,9 +35,124 @@ import {
 } from './common';
 import { InputMoneyProps } from './index';
 import styles from './styles';
-import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
 
+type Selection = { start: number; end: number };
+type Edit = { start: number; end: number; inserted: string };
+
+const countDigits = (text: string) => text.replace(/\D/g, '').length;
+
+const groupDigits = (digits: string) =>
+  digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+
+// Caret position right after the `digitIndex`-th digit of `display`.
+const caretFromDigitIndex = (display: string, digitIndex: number) => {
+  let count = 0;
+  for (let i = 0; i < display.length && count < digitIndex; i++) {
+    if (/\d/.test(display[i])) {
+      count += 1;
+      if (count === digitIndex) return i + 1;
+    }
+  }
+  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[] = [
+    {
+      start,
+      end,
+      inserted: next.slice(start, next.length - (old.length - end)),
+    },
+    { 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 &&
+      e.end >= e.start &&
+      e.end <= old.length &&
+      old.slice(0, e.start) + e.inserted + old.slice(e.end) === next,
+  );
+  if (match) return match;
+
+  let prefix = 0;
+  while (
+    prefix < Math.min(old.length, next.length) &&
+    old[prefix] === next[prefix]
+  ) {
+    prefix += 1;
+  }
+  let suffix = 0;
+  while (
+    suffix < Math.min(old.length, next.length) - prefix &&
+    old[old.length - 1 - suffix] === next[next.length - 1 - suffix]
+  ) {
+    suffix += 1;
+  }
+  return {
+    start: prefix,
+    end: old.length - suffix,
+    inserted: next.slice(prefix, next.length - suffix),
+  };
+};
+
+// Applies `edit` to the digits of `display`. Separators and currency are never
+// deleted: removing a separator deletes the digit before it instead, removing
+// only the currency leaves the digits untouched.
+const applyEdit = (display: string, edit: Edit, digitLimit: number) => {
+  const digits = display.replace(/\D/g, '');
+  let left = countDigits(display.slice(0, edit.start));
+  let removed = countDigits(display.slice(edit.start, edit.end));
+  const inserted = edit.inserted.replace(/\D/g, '');
+  if (
+    !removed &&
+    !inserted &&
+    left > 0 &&
+    display.slice(edit.start, edit.end).includes('.')
+  ) {
+    left -= 1;
+    removed = 1;
+  }
+  const next = digits.slice(0, left) + inserted + digits.slice(left + removed);
+  const trimmed = next.replace(/^0+(?=\d)/, '');
+  if ((!removed && !inserted) || trimmed.length > digitLimit) {
+    return { digits, caretDigit: left };
+  }
+  return {
+    digits: trimmed,
+    caretDigit: Math.max(
+      0,
+      left + inserted.length - (next.length - trimmed.length),
+    ),
+  };
+};
+
 const InputMoney = forwardRef(
   (
     {
@@ -73,7 +191,14 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
-    const [lastDisplayValue, setLastDisplayValue] = useState('');
+    const [commitCount, setCommitCount] = useState(0);
+    const displayRef = useRef('');
+    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 inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
@@ -91,25 +216,36 @@ const InputMoney = forwardRef(
 
     useEffect(() => {
       if (value !== undefined && typeof value === 'string') {
-        const cleanValue = value.replace(/\D/g, '');
+        const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
         if (cleanValue !== numericValue) {
-          setNumericValue(cleanValue);
-          updateDisplayValue(cleanValue);
+          commit(cleanValue, cleanValue.length);
         }
       }
     }, [value]);
 
-    useEffect(() => {
-      setLastDisplayValue(displayValue);
-    }, [displayValue]);
-
-    const updateDisplayValue = (numeric: string) => {
-      if (!numeric) {
-        setDisplayValue('');
-        return;
+    // Always set the caret imperatively: a controlled `selection` prop is only
+    // sent to native when it differs from the last native selection, so it is
+    // skipped whenever a stale selection event already reported the same value.
+    useLayoutEffect(() => {
+      const caret = pendingCaretRef.current;
+      if (caret === null) return;
+      pendingCaretRef.current = null;
+      if (inputRef.current?.isFocused()) {
+        inputRef.current.setSelection(caret, caret);
       }
-      const formatted = formatNumberToMoney(Number(numeric));
-      setDisplayValue(formatted ? `${formatted}${currency}` : '');
+    }, [commitCount]);
+
+    const commit = (digits: string, caretDigit: number) => {
+      const display = digits ? `${groupDigits(digits)}${currency}` : '';
+      const caret = caretFromDigitIndex(display, caretDigit);
+      const changed = digits !== numericValue;
+      displayRef.current = display;
+      selectionRef.current = { start: caret, end: caret };
+      pendingCaretRef.current = caret;
+      setCommitCount(count => count + 1);
+      setDisplayValue(display);
+      setNumericValue(digits);
+      return changed;
     };
 
     const parseInputText = (text: string): string => {
@@ -119,47 +255,49 @@ const InputMoney = forwardRef(
       return textWithoutCurrency.replace(/[^\d]/g, '');
     };
 
-    const updateNumericValue = (val: string) => {
-      let next = val.replace(/[^\d]/g, '');
-      if (next.length > digitLimit) next = next.slice(0, digitLimit);
-      if (/^\d*$/.test(next)) {
-        setNumericValue(next);
-        updateDisplayValue(next);
-        onChangeText?.(next);
-      }
-    };
-
     const onClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      setDisplayValue('');
-      setNumericValue('');
+      commit('', 0);
       onChangeText?.('');
     };
 
     const _onChangeText = (text: string) => {
-      if (!text) {
-        setDisplayValue('');
-        setNumericValue('');
-        onChangeText?.('');
+      let digits = '';
+      let caretDigit = 0;
+      rawCaretRef.current = 0;
+      if (text) {
+        const edit = detectEdit(displayRef.current, text, selectionRef.current);
+        rawCaretRef.current = edit.start + edit.inserted.length;
+        ({ digits, caretDigit } = applyEdit(
+          displayRef.current,
+          edit,
+          digitLimit,
+        ));
+      }
+      if (commit(digits, caretDigit)) {
+        onChangeText?.(digits);
+      }
+    };
+
+    // Keeps the caret out of the currency suffix.
+    const _onSelectionChange = (
+      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;
       }
-      if (text.length < lastDisplayValue.length) {
-        const lastChar = lastDisplayValue.charAt(lastDisplayValue.length - 1);
-        const isRemovingCurrency =
-          lastDisplayValue.endsWith(currency) || lastChar === ' ';
-        const isRemovingDot = lastChar === '.';
-        if (isRemovingCurrency || isRemovingDot) {
-          const currentNumericValue = numericValue;
-          if (currentNumericValue.length > 0) {
-            const newNumericValue = currentNumericValue.slice(0, -1);
-            updateNumericValue(newNumericValue);
-            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);
       }
-      const newNumericValue = parseInputText(text);
-      updateNumericValue(newNumericValue);
     };
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -174,13 +312,16 @@ const InputMoney = forwardRef(
 
     const _setText = (text: string) => {
       if (!text) {
-        setDisplayValue('');
-        setNumericValue('');
+        commit('', 0);
         onChangeText?.('');
         return;
       }
-      const newNumericValue = parseInputText(text);
-      updateNumericValue(newNumericValue);
+      const digits = parseInputText(text)
+        .replace(/^0+(?=\d)/, '')
+        .slice(0, digitLimit);
+      if (commit(digits, digits.length)) {
+        onChangeText?.(digits);
+      }
     };
 
     useImperativeHandle(ref, () => {
@@ -247,6 +388,7 @@ const InputMoney = forwardRef(
               textBreakStrategy="highQuality"
               value={displayValue}
               onChangeText={_onChangeText}
+              onSelectionChange={_onSelectionChange}
               onFocus={_onFocus}
               onBlur={_onBlur}
               placeholder={placeholder}

package/Text/index.tsx

@@ -8,6 +8,7 @@ import {
   SkeletonContext,
 } from '../Context';
 import {
+  LEGACY_DEFAULT_FONT_FAMILY,
   NEW_DEFAULT_FONT_FAMILY,
   useResolvedFontFamily,
 } from '../Consts/designSystemFont';
@@ -118,8 +119,11 @@ 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 = useResolvedFontFamily(newFontFamily ?? theme.font);
-  const resolvedDefaultFamily = useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY);
+  const defaultFontFamily = useResolvedFontFamily(theme.font);
+  const font = newFontFamily ?? defaultFontFamily;
+  const resolvedDefaultFamily = useResolvedFontFamily(
+    LEGACY_DEFAULT_FONT_FAMILY,
+  );
   let fontFamily: string;
 
   switch (font) {
@@ -162,9 +166,6 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
-    // fontFamily da mang san weight. Tren Android, ReactFontManager doi
-    // `fonts/<family>_bold.ttf` khi fontWeight >= 700; file do khong ton tai nen
-    // font se roi ve font he thong. Bo fontWeight de Android dung dung file.
     fontWeight: undefined,
   };
 };

package/package.json

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