@momo-kits/foundation 0.168.1-beta.1 → 0.168.1-beta.2

package/Input/InputMoney.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
   forwardRef,
   useContext,
@@ -43,7 +42,6 @@ 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++) {
@@ -97,9 +95,6 @@ const detectEdit = (old: string, next: string, selection: Selection): Edit => {
   };
 };
 
-// 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));
@@ -165,11 +160,10 @@ const InputMoney = forwardRef(
     const inputFontFamily = exportFontFamily('bold');
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
-    const [numericValue, setNumericValue] = useState('');
     const [commitCount, setCommitCount] = useState(0);
     const displayRef = useRef('');
+    const digitsRef = 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);
@@ -183,54 +177,39 @@ const InputMoney = forwardRef(
       props.accessibilityLabel,
     );
 
-    const maxLength = (props as any)?.maxLength;
-    const hasMaxLength = typeof maxLength === 'number';
-    const digitLimit = hasMaxLength ? maxLength : Number.POSITIVE_INFINITY;
+    const digitLimit = props.maxLength ?? Number.POSITIVE_INFINITY;
 
     useEffect(() => {
       if (value !== undefined && typeof value === 'string') {
         const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
-        if (cleanValue !== numericValue) {
+        if (cleanValue !== digitsRef.current) {
           commit(cleanValue, cleanValue.length);
         }
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [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;
+      if (caret === null || !inputRef.current?.isFocused()) return;
       pendingCaretRef.current = null;
-      if (inputRef.current?.isFocused()) {
-        inputRef.current.setSelection(caret, caret);
-      }
+      inputRef.current.setSelection(caret, caret);
     }, [commitCount]);
 
     const commit = (digits: string, caretDigit: number) => {
       const display = digits ? `${groupDigits(digits)}${currency}` : '';
       const caret = caretFromDigitIndex(display, caretDigit);
-      const changed = digits !== numericValue;
+      const changed = digits !== digitsRef.current;
       displayRef.current = display;
+      digitsRef.current = digits;
       selectionRef.current = { start: caret, end: caret };
       pendingCaretRef.current = caret;
       setCommitCount(count => count + 1);
       setDisplayValue(display);
-      setNumericValue(digits);
       return changed;
     };
 
-    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: '' });
       commit('', 0);
       onChangeText?.('');
     };
@@ -256,7 +235,6 @@ const InputMoney = forwardRef(
       }
     };
 
-    // Keeps the caret out of the currency suffix.
     const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
       props.onSelectionChange?.(e);
       if (editingRef.current) return;
@@ -281,6 +259,12 @@ const InputMoney = forwardRef(
 
     const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
+      const caret = pendingCaretRef.current;
+      pendingCaretRef.current = null;
+      if (caret !== null && !props.selectTextOnFocus) {
+        selectionRef.current = { start: caret, end: caret };
+        inputRef.current?.setSelection(caret, caret);
+      }
       onFocus?.(e);
     };
 
@@ -290,12 +274,8 @@ const InputMoney = forwardRef(
     };
 
     const _setText = (text: string) => {
-      if (!text) {
-        commit('', 0);
-        onChangeText?.('');
-        return;
-      }
-      const digits = parseInputText(text)
+      const digits = text
+        .replace(/\D/g, '')
         .replace(/^0+(?=\d)/, '')
         .slice(0, digitLimit);
       if (commit(digits, digits.length)) {
@@ -346,6 +326,7 @@ const InputMoney = forwardRef(
               accessibilityLabel={`${componentId}`}
               textAlignVertical="center"
               ref={inputRef}
+              editable={props.editable !== false && !disabled}
               accessibilityState={{
                 disabled: disabled,
                 ...props.accessibilityState,

package/package.json

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