@momo-kits/foundation 0.167.1-beta.12 → 0.167.1-beta.14

package/Input/InputMoney.tsx

@@ -4,15 +4,15 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  Text,
   TextInput,
-  TextInputFocusEventData,
-  TextInputSelectionChangeEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -24,7 +24,6 @@ import {
 } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
-import { Spacing } from '../Consts';
 import {
   ErrorView,
   FloatingView,
@@ -36,97 +35,22 @@ import { InputMoneyProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 
-type Selection = { start: number; end: number };
-type Edit = { start: number; end: number; inserted: string };
+const moneyFormatter = new Intl.NumberFormat('vi-VN');
 
-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;
+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(old.length, next.length) - prefix &&
-    old[old.length - 1 - suffix] === next[next.length - 1 - suffix]
+    suffix < Math.min(text.length, old.length) - start &&
+    old[old.length - 1 - suffix] === text[text.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 size = old.length + text.length - 2 * (start + suffix);
+  return { old, start, suffix, size };
 };
 
 const InputMoney = forwardRef(
@@ -167,14 +91,14 @@ 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);
-    const pendingSelectionRef = useRef<Selection | null>(null);
-    const editingRef = useRef(false);
+    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;
@@ -184,127 +108,121 @@ const InputMoney = forwardRef(
       props.accessibilityLabel,
     );
 
-    const digitLimit =
-      typeof (props as any)?.maxLength === 'number'
-        ? (props as any).maxLength
-        : Number.POSITIVE_INFINITY;
+    const maxLength = (props as any)?.maxLength;
+    const hasMaxLength = typeof maxLength === 'number';
+    const digitLimit = hasMaxLength ? maxLength : Number.POSITIVE_INFINITY;
 
     useEffect(() => {
       if (value !== undefined && typeof value === 'string') {
         const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
         if (cleanValue !== numericValue) {
-          commit(cleanValue, cleanValue.length);
+          caretDigitsAfter.current = undefined;
+          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;
+    useEffect(() => {
+      if (!caretSelection) return;
+      setCaretSelection(current =>
+        current === caretSelection ? undefined : current,
+      );
+    }, [caretSelection]);
+
+    const updateDisplayValue = (numeric: string) => {
+      const next = numeric ? moneyFormatter.format(Number(numeric)) : '';
+      setDisplayValue(next);
+
+      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;
+      }
+      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)/, '');
+      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;
-      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,
-        ));
+      if (!text) {
+        lastRawText.current = '';
+        setDisplayValue('');
+        setNumericValue('');
+        onChangeText?.('');
+        return;
       }
-      if (commit(digits, caretDigit)) {
-        onChangeText?.(digits);
+      const digits = parseInputText(text);
+      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;
+      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;
+        }
       }
+      updateNumericValue(digits);
     };
 
-    // Keeps the caret out of the currency suffix.
-    const _onSelectionChange = (
-      e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
-    ) => {
-      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 focusAtEnd = () => {
+      inputRef.current?.focus();
+      inputRef.current?.setSelection(displayValue.length, displayValue.length);
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };
 
     const _setText = (text: string) => {
+      caretDigitsAfter.current = undefined;
       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, () => {
@@ -326,6 +244,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={[
@@ -344,7 +270,11 @@ const InputMoney = forwardRef(
             onPress={onPressFloatingIcon}
             componentId={componentId}
           />
-          <View style={styles.inputView}>
+          <Pressable
+            style={[styles.inputView, styles.moneyInputView]}
+            onPress={focusAtEnd}
+            disabled={disabled}
+          >
             <SystemTextInput
               {...props}
               accessibilityLabel={`${componentId}`}
@@ -354,33 +284,32 @@ const InputMoney = forwardRef(
                 disabled: disabled,
                 ...props.accessibilityState,
               }}
-              style={[
-                {
-                  width: '100%',
-                  paddingLeft: Spacing.M,
-                  height: '100%',
-                  fontSize: scaledFontSize,
-                  paddingVertical: Spacing.S,
-                  fontFamily: inputFontFamily,
-                },
-                {
-                  color: textColor,
-                },
-              ]}
+              style={[textStyle, styles.moneyTextInput, { color: textColor }]}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={displayValue}
+              selection={caretSelection ?? props.selection}
               onChangeText={_onChangeText}
-              onSelectionChange={_onSelectionChange}
               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/InputOTP.tsx

@@ -64,8 +64,8 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
     opacity: opacity.value,
   }));
 
-  const spacingStyle = !isNaN(Number(length)) &&
-    index !== Number(length) - 1 && { marginRight: Spacing.L };
+  const hasNextInput = !isNaN(Number(length)) && index !== Number(length) - 1;
+  const spacingStyle = hasNextInput && { marginRight: Spacing.L };
 
   return (
     <View style={[Styles.rowCenter, spacingStyle]}>
@@ -162,6 +162,7 @@ const InputOTP = forwardRef(
 
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
+      const textColors = theme.colors.text;
       for (let i = 0; i < inputLength; i++) {
         TextInputs.push(
           <View key={`otp-input-${i}`}>
@@ -170,9 +171,7 @@ const InputOTP = forwardRef(
             ) : (
               <Text
                 style={i !== inputLength - 1 && { marginRight: Spacing.L }}
-                color={
-                  value[i] ? theme.colors.text.default : theme.colors.text.hint
-                }
+                color={value[i] ? textColors.default : textColors.hint}
                 typography={value[i] ? 'header_m_bold' : 'body_default_regular'}
               >
                 {value[i] || '-'}
@@ -201,16 +200,14 @@ const InputOTP = forwardRef(
       return (
         <View style={Styles.row}>
           {splitValue.map((letter, index) => {
+            const isLast = index === value.length - 1;
+            const isTyping = focused && value.length !== MAX_LENGTH;
+            const isCompact = fontScale > 1 && value.length > 6;
+            const marginRight = isCompact ? Spacing.M : Spacing.L;
             return (
               <Text
                 key={`otp-letter-${index}`}
-                style={
-                  (index !== value.length - 1 ||
-                    (focused && value.length !== MAX_LENGTH)) && {
-                    marginRight:
-                      fontScale > 1 && value.length > 6 ? Spacing.M : Spacing.L,
-                  }
-                }
+                style={(!isLast || isTyping) && { marginRight }}
                 typography={'header_m_bold'}
               >
                 {letter}

package/Input/InputPhoneNumber.tsx

@@ -6,10 +6,9 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   StyleSheet,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -93,12 +92,12 @@ const InputPhoneNumber = forwardRef(
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/InputSearch.tsx

@@ -10,9 +10,8 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -59,9 +58,11 @@ const TextTyping: FC<any> = ({
       listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
     };
 
-    currentIndex.current >= data?.length
-      ? handleResetList()
-      : handleAnimation();
+    if (currentIndex.current >= data?.length) {
+      handleResetList();
+    } else {
+      handleAnimation();
+    }
   };
 
   const showChar = (char?: string) => {
@@ -82,9 +83,12 @@ const TextTyping: FC<any> = ({
       }, timeDelayNextChar);
     };
 
-    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
-      ? handleResetString()
-      : handleShowChar();
+    const textLength = data?.[currentIndex.current]?.length || 0;
+    if (currentCharIndex.current >= textLength) {
+      handleResetString();
+    } else {
+      handleShowChar();
+    }
   };
 
   const reset = () => {
@@ -166,12 +170,12 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     props.accessibilityLabel,
   );
 
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const _onFocus = (e: TextInputFocusEvent) => {
     setFocused(true);
     onFocus?.(e);
   };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const _onBlur = (e: TextInputFocusEvent) => {
     setFocused(false);
     onBlur?.(e);
   };
@@ -303,6 +307,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     inputState = 'filled';
   }
 
+  const inputBackground = backgroundColor ?? theme.colors.background.surface;
+
   return (
     <ComponentContext.Provider
       value={{
@@ -322,10 +328,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         <View
           style={[
             styles.searchInputWrapper,
-            {
-              backgroundColor:
-                backgroundColor ?? theme.colors.background.surface,
-            },
+            { backgroundColor: inputBackground },
           ]}
         >
           <Icon

package/Input/InputTextArea.tsx

@@ -7,9 +7,8 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -79,12 +78,12 @@ const InputTextArea = forwardRef(
       setInputValue(text);
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/SystemTextInput.tsx

@@ -17,11 +17,10 @@ const SystemTextInput: FC<SystemTextInputProps> = props => {
   const needsAndroidWrapper =
     Platform.OS === 'android' && !editable && (onPressIn || onPressOut);
 
+  const noPressHandlers = { onPressIn: undefined, onPressOut: undefined };
   const inputProps: TextInputProps = {
     ...props,
-    ...(needsAndroidWrapper
-      ? { onPressIn: undefined, onPressOut: undefined }
-      : null),
+    ...(needsAndroidWrapper ? noPressHandlers : null),
     ...(editable === false ? { accessibilityState: undefined } : null),
   };
 

package/Input/TextTyping.tsx

@@ -36,9 +36,11 @@ const TextTyping: FC<TextTypingProps> = ({
       listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
     };
 
-    currentIndex.current >= data?.length
-      ? handleResetList()
-      : handleAnimation();
+    if (currentIndex.current >= data?.length) {
+      handleResetList();
+    } else {
+      handleAnimation();
+    }
   };
 
   const showChar = (char?: string) => {
@@ -59,9 +61,12 @@ const TextTyping: FC<TextTypingProps> = ({
       }, timeDelayNextChar);
     };
 
-    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
-      ? handleResetString()
-      : handleShowChar();
+    const textLength = data?.[currentIndex.current]?.length || 0;
+    if (currentCharIndex.current >= textLength) {
+      handleResetString();
+    } else {
+      handleShowChar();
+    }
   };
 
   const reset = () => {

package/Input/styles.ts

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