@momo-kits/foundation 0.165.2-beta.3 → 0.167.1-beta.1

package/Input/InputMoney.tsx

@@ -4,16 +4,13 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput,
   TextInputFocusEventData,
-  TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -35,124 +32,9 @@ 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(
   (
     {
@@ -191,14 +73,7 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = 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 [lastDisplayValue, setLastDisplayValue] = useState('');
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
@@ -216,36 +91,25 @@ const InputMoney = forwardRef(
 
     useEffect(() => {
       if (value !== undefined && typeof value === 'string') {
-        const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+        const cleanValue = value.replace(/\D/g, '');
         if (cleanValue !== numericValue) {
-          commit(cleanValue, cleanValue.length);
+          setNumericValue(cleanValue);
+          updateDisplayValue(cleanValue);
         }
       }
     }, [value]);
 
-    // 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);
-      }
-    }, [commitCount]);
+    useEffect(() => {
+      setLastDisplayValue(displayValue);
+    }, [displayValue]);
 
-    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 updateDisplayValue = (numeric: string) => {
+      if (!numeric) {
+        setDisplayValue('');
+        return;
+      }
+      const formatted = formatNumberToMoney(Number(numeric));
+      setDisplayValue(formatted ? `${formatted}${currency}` : '');
     };
 
     const parseInputText = (text: string): string => {
@@ -255,49 +119,47 @@ 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: '' });
-      commit('', 0);
+      setDisplayValue('');
+      setNumericValue('');
       onChangeText?.('');
     };
 
     const _onChangeText = (text: string) => {
-      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) {
+      if (!text) {
+        setDisplayValue('');
+        setNumericValue('');
+        onChangeText?.('');
         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 (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 newNumericValue = parseInputText(text);
+      updateNumericValue(newNumericValue);
     };
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -312,16 +174,13 @@ const InputMoney = forwardRef(
 
     const _setText = (text: string) => {
       if (!text) {
-        commit('', 0);
+        setDisplayValue('');
+        setNumericValue('');
         onChangeText?.('');
         return;
       }
-      const digits = parseInputText(text)
-        .replace(/^0+(?=\d)/, '')
-        .slice(0, digitLimit);
-      if (commit(digits, digits.length)) {
-        onChangeText?.(digits);
-      }
+      const newNumericValue = parseInputText(text);
+      updateNumericValue(newNumericValue);
     };
 
     useImperativeHandle(ref, () => {
@@ -388,7 +247,6 @@ const InputMoney = forwardRef(
               textBreakStrategy="highQuality"
               value={displayValue}
               onChangeText={_onChangeText}
-              onSelectionChange={_onSelectionChange}
               onFocus={_onFocus}
               onBlur={_onBlur}
               placeholder={placeholder}

package/package.json

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