@momo-kits/foundation 0.168.1-rn862.1 → 0.168.2-rn.88.0

package/Application/StackScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
-import { Alert, InteractionManager } from 'react-native';
+import { Alert } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
@@ -8,7 +8,12 @@ import { version } from '../package.json';
 import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
-const runAfterInteractions = InteractionManager.runAfterInteractions;
+// RN 0.87+: InteractionManager đã bị xoá khỏi react-native → thay bằng requestIdleCallback.
+// Giữ nguyên shape trả về { cancel } để code bên dưới (timeoutInteraction?.cancel?.()) không đổi.
+const runAfterInteractions = (task: () => void) => {
+  const handle = requestIdleCallback(() => task());
+  return { cancel: () => cancelIdleCallback(handle) };
+};
 
 /**
  * container for stack screen

package/Input/InputMoney.tsx

@@ -4,15 +4,14 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import {
-  Platform,
-  Pressable,
-  Text,
   TextInput,
   TextInputFocusEvent,
+  TextInputSelectionChangeEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -24,6 +23,7 @@ import {
 } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
+import { Spacing } from '../Consts';
 import {
   ErrorView,
   FloatingView,
@@ -35,24 +35,97 @@ import { InputMoneyProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 
-const moneyFormatter = new Intl.NumberFormat('vi-VN');
+type Selection = { start: number; end: number };
+type Edit = { start: number; end: number; inserted: string };
 
-// Finds the common prefix and suffix of `old` and `text`; `size` counts the
-// characters removed plus inserted between them.
-const findEdit = (old: string, text: string) => {
-  let start = 0;
-  while (start < text.length && old[start] === text[start]) {
-    start += 1;
+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;
+};
+
+const detectEdit = (old: string, next: string, selection: Selection): Edit => {
+  const { start, end } = selection;
+  const removed = old.length - next.length;
+  const candidates: Edit[] = [
+    {
+      start,
+      end,
+      inserted: next.slice(start, next.length - (old.length - end)),
+    },
+    { start: start - removed, end: start, inserted: '' },
+    { start, end: start + removed, inserted: '' },
+  ];
+  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(text.length, old.length) - start &&
-    old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
+    suffix < Math.min(old.length, next.length) - prefix &&
+    old[old.length - 1 - suffix] === next[next.length - 1 - suffix]
   ) {
     suffix += 1;
   }
-  const size = old.length + text.length - 2 * (start + suffix);
-  return { old, start, suffix, size };
+  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(
@@ -93,14 +166,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);
+    const pendingSelectionRef = useRef<Selection | null>(null);
+    const editingRef = useRef(false);
     const inputRef = useRef<TextInput>(null);
-    const caretDigitsAfter = useRef<number | undefined>(undefined);
-    const lastRawText = useRef('');
-    const [caretSelection, setCaretSelection] = useState<{
-      start: number;
-      end: number;
-    }>();
     const componentName = 'InputMoney';
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -118,96 +191,92 @@ const InputMoney = forwardRef(
       if (value !== undefined && typeof value === 'string') {
         const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
         if (cleanValue !== numericValue) {
-          caretDigitsAfter.current = undefined;
-          setNumericValue(cleanValue);
-          updateDisplayValue(cleanValue);
+          commit(cleanValue, cleanValue.length);
         }
       }
     }, [value]);
 
-    useEffect(() => {
-      setLastDisplayValue(displayValue);
-    }, [displayValue]);
-
-    // The selection only rides along with the render that reformats the text,
-    // then it is released so the user can move the caret freely.
-    useEffect(() => {
-      if (!caretSelection) return;
-      // A newer keystroke may already have queued its own selection; keep it.
-      setCaretSelection(current =>
-        current === caretSelection ? undefined : current,
-      );
-    }, [caretSelection]);
-
-    const updateDisplayValue = (numeric: string) => {
-      const next = numeric ? moneyFormatter.format(Number(numeric)) : '';
-      setDisplayValue(next);
-
-      // Android moves the caret proportionally when the text is replaced, so
-      // it lands before the typed digit once a separator is added. Send the
-      // caret together with the text, keeping the same digits after it.
-      const digitsAfter = caretDigitsAfter.current;
-      caretDigitsAfter.current = undefined;
-      if (Platform.OS !== 'android' || digitsAfter === undefined) return;
-      let before = parseInputText(next).length - digitsAfter;
-      let caret = 0;
-      while (before > 0 && caret < next.length) {
-        if (/\d/.test(next[caret])) before -= 1;
-        caret += 1;
+    // 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);
       }
-      setCaretSelection({ start: caret, end: caret });
-    };
+    }, [commitCount]);
 
-    const parseInputText = (text: string): string => text.replace(/\D/g, '');
+    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 updateNumericValue = (val: string) => {
-      let next = val.replace(/[^\d]/g, '').replace(/^0+(?=\d)/, '');
-      if (next.length > digitLimit) next = next.slice(0, digitLimit);
-      if (/^\d*$/.test(next)) {
-        setNumericValue(next);
-        updateDisplayValue(next);
-        onChangeText?.(next);
-      }
+    const parseInputText = (text: string): string => {
+      if (!text) return '';
+      const currencyRegex = new RegExp(` ?${currency}$`, 'g');
+      const textWithoutCurrency = text.replace(currencyRegex, '').trim();
+      return textWithoutCurrency.replace(/[^\d]/g, '');
     };
 
     const onClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      setDisplayValue('');
-      setNumericValue('');
+      commit('', 0);
       onChangeText?.('');
     };
 
     const _onChangeText = (text: string) => {
-      if (!text) {
-        lastRawText.current = '';
-        setDisplayValue('');
-        setNumericValue('');
-        onChangeText?.('');
-        return;
+      let digits = '';
+      let caretDigit = 0;
+      pendingSelectionRef.current = null;
+      editingRef.current = true;
+      setTimeout(() => {
+        editingRef.current = false;
+      });
+      if (text) {
+        const edit = detectEdit(displayRef.current, text, selectionRef.current);
+        ({ digits, caretDigit } = applyEdit(
+          displayRef.current,
+          edit,
+          digitLimit,
+        ));
       }
-      const digits = parseInputText(text);
-      // When typing outpaces JS (slow devices) native rejects the stale
-      // formatted text and keeps the raw one, so the edit may apply to either.
-      // Pick the one that differs from the new text by a single edit.
-      const raw = lastRawText.current;
-      lastRawText.current = text;
-      const formattedEdit = findEdit(lastDisplayValue, text);
-      const rawEdit = findEdit(raw, text);
-      const { old, start, suffix } =
-        raw && rawEdit.size < formattedEdit.size ? rawEdit : formattedEdit;
-      caretDigitsAfter.current = parseInputText(
-        text.slice(text.length - suffix),
-      ).length;
-      // Deleting a separator removes the digit before it.
-      if (text.length < old.length && digits === numericValue) {
-        const index = parseInputText(text.slice(0, start)).length - 1;
-        if (index >= 0) {
-          updateNumericValue(digits.slice(0, index) + digits.slice(index + 1));
-          return;
-        }
+      if (commit(digits, caretDigit)) {
+        onChangeText?.(digits);
       }
-      updateNumericValue(digits);
+    };
+
+    // Keeps the caret out of the currency suffix.
+    const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
+      props.onSelectionChange?.(e);
+      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: TextInputFocusEvent) => {
@@ -221,15 +290,17 @@ const InputMoney = forwardRef(
     };
 
     const _setText = (text: string) => {
-      caretDigitsAfter.current = undefined;
       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, () => {
@@ -251,14 +322,6 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-      const textStyle = {
-        fontSize: scaledFontSize,
-        fontFamily: inputFontFamily,
-      };
-      const placeholderHasCurrency = placeholder.endsWith(currency);
-      const inputPlaceholder = placeholderHasCurrency
-        ? placeholder.slice(0, -currency.length)
-        : placeholder;
       return (
         <View
           style={[
@@ -277,11 +340,7 @@ const InputMoney = forwardRef(
             onPress={onPressFloatingIcon}
             componentId={componentId}
           />
-          <Pressable
-            style={[styles.inputView, styles.moneyInputView]}
-            onPress={() => inputRef.current?.focus()}
-            disabled={disabled}
-          >
+          <View style={styles.inputView}>
             <SystemTextInput
               {...props}
               accessibilityLabel={`${componentId}`}
@@ -291,34 +350,33 @@ const InputMoney = forwardRef(
                 disabled: disabled,
                 ...props.accessibilityState,
               }}
-              // No width: the input sizes to its text natively, so the
-              // currency follows it without waiting for JS.
-              style={[textStyle, styles.moneyTextInput, { color: textColor }]}
+              style={[
+                {
+                  width: '100%',
+                  paddingLeft: Spacing.M,
+                  height: '100%',
+                  fontSize: scaledFontSize,
+                  paddingVertical: Spacing.S,
+                  fontFamily: inputFontFamily,
+                },
+                {
+                  color: textColor,
+                },
+              ]}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={displayValue}
-              selection={caretSelection ?? props.selection}
               onChangeText={_onChangeText}
+              onSelectionChange={_onSelectionChange}
               onFocus={_onFocus}
               onBlur={_onBlur}
-              placeholder={inputPlaceholder}
+              placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
               keyboardType={'numeric'}
               maxLength={undefined}
             />
-            {displayValue || placeholderHasCurrency ? (
-              <Text
-                style={[
-                  textStyle,
-                  { color: displayValue ? textColor : placeholderColor },
-                ]}
-                allowFontScaling={false}
-              >
-                {currency}
-              </Text>
-            ) : null}
-          </Pressable>
+          </View>
           <View style={styles.iconView}>
             {showClearIcon && focused && displayValue ? (
               <TouchableOpacity

package/Input/styles.ts

@@ -218,14 +218,4 @@ export default StyleSheet.create({
     marginLeft: Spacing.M,
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-  moneyInputView: {
-    paddingLeft: Spacing.M,
-  },
-  moneyTextInput: {
-    flexShrink: 1,
-    height: '100%',
-    paddingLeft: 0,
-    paddingRight: Spacing.XXS,
-    paddingVertical: Spacing.S,
-  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-rn862.1",
+    "version": "0.168.2-rn.88.0",
     "description": "React Native Component Kits",
     "keywords": [
         "@momo-kits/foundation"
@@ -12,29 +12,29 @@
     },
     "scripts": {},
     "dependencies": {
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
+        "@react-navigation/bottom-tabs": "7.21.0",
+        "@react-navigation/core": "7.24.0",
+        "@react-navigation/elements": "2.9.45",
+        "@react-navigation/native": "7.5.1",
+        "@react-navigation/routers": "7.6.5",
+        "@react-navigation/stack": "7.12.1",
         "@shopify/flash-list": "2.1.0",
         "lottie-react-native": "7.3.6",
         "react-native-fast-image": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "react-native-gesture-handler": "2.31.0",
+        "react-native-gesture-handler": "3.4.0",
         "react-native-linear-gradient": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.5.3",
-        "react-native-reserved-regions": "0.2.0",
-        "react-native-safe-area-context": "5.7.0"
+        "react-native-reanimated": "4.7.1",
+        "react-native-safe-area-context": "5.7.0",
+        "react-native-reserved-regions": "0.2.0"
     },
     "devDependencies": {
         "@types/color": "3.0.6",
-        "react-native-reanimated": "4.5.3",
-        "react-native-worklets": "0.11.3"
+        "react-native-reanimated": "4.7.1",
+        "react-native-worklets": "0.13.0"
     },
     "peerDependencies": {
         "react-native": "*",
-        "react-native-reanimated": ">=4.5.0",
-        "react-native-worklets": ">=0.11.0"
+        "react-native-reanimated": ">=4.7.0",
+        "react-native-worklets": ">=0.13.0"
     }
 }