@momo-kits/foundation 0.168.1-beta.6 → 0.168.1-beta.7

package/Input/InputMoney.tsx

@@ -9,6 +9,8 @@ import React, {
 } from 'react';
 import {
   Platform,
+  Pressable,
+  Text,
   TextInput,
   TextInputFocusEvent,
   TouchableOpacity,
@@ -22,7 +24,6 @@ import {
 } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
-import { Spacing } from '../Consts';
 import {
   ErrorView,
   FloatingView,
@@ -32,9 +33,10 @@ import {
 } from './common';
 import { InputMoneyProps } from './index';
 import styles from './styles';
-import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
 
+const moneyFormatter = new Intl.NumberFormat('vi-VN');
+
 // 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) => {
@@ -138,13 +140,12 @@ const InputMoney = forwardRef(
     }, [caretSelection]);
 
     const updateDisplayValue = (numeric: string) => {
-      const formatted = numeric ? formatNumberToMoney(Number(numeric)) : '';
-      const next = formatted ? `${formatted}${currency}` : '';
+      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 so a fast keystroke can't land in between.
+      // 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;
@@ -157,12 +158,7 @@ const InputMoney = forwardRef(
       setCaretSelection({ start: caret, end: caret });
     };
 
-    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 parseInputText = (text: string): string => text.replace(/\D/g, '');
 
     const updateNumericValue = (val: string) => {
       let next = val.replace(/[^\d]/g, '').replace(/^0+(?=\d)/, '');
@@ -190,7 +186,8 @@ const InputMoney = forwardRef(
         onChangeText?.('');
         return;
       }
-      // When typing outpaces JS (slow Android devices) native rejects the stale
+      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;
@@ -199,25 +196,18 @@ const InputMoney = forwardRef(
       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('.')
-            ? parseInputText(old.slice(0, start)).length - 1
-            : numericValue.length - 1;
-          if (index >= 0) {
-            updateNumericValue(
-              numericValue.slice(0, index) + numericValue.slice(index + 1),
-            );
-          }
+      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;
         }
       }
-      const newNumericValue = parseInputText(text);
-      updateNumericValue(newNumericValue);
+      updateNumericValue(digits);
     };
 
     const _onFocus = (e: TextInputFocusEvent) => {
@@ -261,6 +251,14 @@ 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={[
@@ -279,7 +277,11 @@ const InputMoney = forwardRef(
             onPress={onPressFloatingIcon}
             componentId={componentId}
           />
-          <View style={styles.inputView}>
+          <Pressable
+            style={[styles.inputView, styles.moneyInputView]}
+            onPress={() => inputRef.current?.focus()}
+            disabled={disabled}
+          >
             <SystemTextInput
               {...props}
               accessibilityLabel={`${componentId}`}
@@ -289,19 +291,9 @@ const InputMoney = forwardRef(
                 disabled: disabled,
                 ...props.accessibilityState,
               }}
-              style={[
-                {
-                  width: '100%',
-                  paddingLeft: Spacing.M,
-                  height: '100%',
-                  fontSize: scaledFontSize,
-                  paddingVertical: Spacing.S,
-                  fontFamily: inputFontFamily,
-                },
-                {
-                  color: textColor,
-                },
-              ]}
+              // No width: the input sizes to its text natively, so the
+              // currency follows it without waiting for JS.
+              style={[textStyle, styles.moneyTextInput, { color: textColor }]}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={displayValue}
@@ -309,13 +301,24 @@ const InputMoney = forwardRef(
               onChangeText={_onChangeText}
               onFocus={_onFocus}
               onBlur={_onBlur}
-              placeholder={placeholder}
+              placeholder={inputPlaceholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
               keyboardType={'numeric'}
               maxLength={undefined}
             />
-          </View>
+            {displayValue || placeholderHasCurrency ? (
+              <Text
+                style={[
+                  textStyle,
+                  { color: displayValue ? textColor : placeholderColor },
+                ]}
+                allowFontScaling={false}
+              >
+                {currency}
+              </Text>
+            ) : null}
+          </Pressable>
           <View style={styles.iconView}>
             {showClearIcon && focused && displayValue ? (
               <TouchableOpacity

package/Input/styles.ts

@@ -218,4 +218,14 @@ 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-beta.6",
+    "version": "0.168.1-beta.7",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},