@momo-kits/foundation 0.168.1-beta.3 → 0.168.1-beta.5

package/Input/InputMoney.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  Platform,
   TextInput,
   TextInputFocusEvent,
   TouchableOpacity,
@@ -31,9 +32,26 @@ import {
 } from './common';
 import { InputMoneyProps } from './index';
 import styles from './styles';
-import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
 
+// 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;
+  }
+  let suffix = 0;
+  while (
+    suffix < Math.min(text.length, old.length) - start &&
+    old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
+  ) {
+    suffix += 1;
+  }
+  const size = old.length + text.length - 2 * (start + suffix);
+  return { old, start, suffix, size };
+};
+
 const InputMoney = forwardRef(
   (
     {
@@ -74,6 +92,12 @@ const InputMoney = forwardRef(
     const [numericValue, setNumericValue] = useState('');
     const [lastDisplayValue, setLastDisplayValue] = useState('');
     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;
@@ -91,6 +115,7 @@ 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);
         }
@@ -101,13 +126,36 @@ const InputMoney = forwardRef(
       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) => {
-      if (!numeric) {
-        setDisplayValue('');
-        return;
+      // Group the digit string directly: Number() loses precision past 15
+      // digits and switches to "1e+21" notation past 20.
+      const formatted = numeric.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+      const next = formatted ? `${formatted}${currency}` : '';
+      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 so a fast keystroke can't land in between.
+      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;
       }
-      const formatted = formatNumberToMoney(Number(numeric));
-      setDisplayValue(formatted ? `${formatted}${currency}` : '');
+      setCaretSelection({ start: caret, end: caret });
     };
 
     const parseInputText = (text: string): string => {
@@ -137,24 +185,25 @@ const InputMoney = forwardRef(
 
     const _onChangeText = (text: string) => {
       if (!text) {
+        lastRawText.current = '';
         setDisplayValue('');
         setNumericValue('');
         onChangeText?.('');
         return;
       }
-      if (text.length < lastDisplayValue.length) {
-        const old = lastDisplayValue;
-        let start = 0;
-        while (start < text.length && old[start] === text[start]) {
-          start += 1;
-        }
-        let suffix = 0;
-        while (
-          suffix < text.length - start &&
-          old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
-        ) {
-          suffix += 1;
-        }
+      // When typing outpaces JS (slow Android 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 = text
+        .slice(text.length - suffix)
+        .replace(/\D/g, '').length;
+      if (text.length < old.length) {
         const removed = old.slice(start, old.length - suffix);
         if (!/\d/.test(removed)) {
           const index = removed.includes('.')
@@ -183,6 +232,7 @@ const InputMoney = forwardRef(
     };
 
     const _setText = (text: string) => {
+      caretDigitsAfter.current = undefined;
       if (!text) {
         setDisplayValue('');
         setNumericValue('');
@@ -256,6 +306,7 @@ const InputMoney = forwardRef(
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={displayValue}
+              selection={caretSelection ?? props.selection}
               onChangeText={_onChangeText}
               onFocus={_onFocus}
               onBlur={_onBlur}

package/package.json

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