@momo-kits/foundation 0.168.1-beta.2 → 0.168.1-rn.88.0

package/Application/BottomSheet.tsx

@@ -333,7 +333,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -347,7 +347,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         style={styles.container}
       >
         <Pressable
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           onPress={() => {
             action.current = 'touch';
             onDismiss();

package/Application/ModalScreen.tsx

@@ -133,7 +133,7 @@ const Modal: React.FC<ModalParams> = props => {
       transparent
       visible={true}
       onRequestClose={onDismiss}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -141,7 +141,7 @@ const Modal: React.FC<ModalParams> = props => {
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
         <Pressable
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           onPress={() => onDismiss(undefined, barrierDismissible)}
         >
           <Animated.View style={[styles.overlayContent, { opacity }]} />

package/Application/StackScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
-import { Alert, InteractionManager } from 'react-native';
+import { Alert } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
@@ -8,7 +8,12 @@ import { version } from '../package.json';
 import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
-const runAfterInteractions = InteractionManager.runAfterInteractions;
+// RN 0.87+: InteractionManager đã bị xoá khỏi react-native → thay bằng requestIdleCallback.
+// Giữ nguyên shape trả về { cancel } để code bên dưới (timeoutInteraction?.cancel?.()) không đổi.
+const runAfterInteractions = (task: () => void) => {
+  const handle = requestIdleCallback(() => task());
+  return { cancel: () => cancelIdleCallback(handle) };
+};
 
 /**
  * container for stack screen

package/Divider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { View, ViewStyle } from 'react-native';
+import { StyleProp, View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
@@ -8,7 +8,7 @@ export interface DividerProps {
   /**
    * Custom styles for divider
    */
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 
   /**
    * Enable margin vertical 4px
@@ -30,13 +30,13 @@ const Divider: React.FC<DividerProps> = ({
   return (
     <View
       style={[
-        style,
         {
           height: 1,
           width: '100%',
           backgroundColor: theme.colors.border.default,
           marginVertical: useMargin ? Spacing.XS : 0,
         },
+        style,
       ]}
     />
   );

package/Image/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Image as RNImage, StyleSheet, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {
@@ -23,6 +23,10 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
+const isDataUriSource = (source: any): boolean => {
+  return typeof source?.uri === 'string' && source.uri.startsWith('data:');
+};
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -43,6 +47,7 @@ const Image: React.FC<ImageProps> = ({
   const [status, setStatus] = useState<Status>('success');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const useFastImage = !isDataUriSource(source);
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
@@ -79,6 +84,46 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
+  if (!useFastImage) {
+    return (
+      <RNImage
+        {...rest}
+        {...{
+          accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel,
+        }}
+        source={source}
+        style={[
+          styles.container,
+          style,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
+        onLoadStart={() => {
+          error.current = false;
+          if (status !== 'loading' && loading) {
+            setStatus('loading');
+          }
+        }}
+        onLoad={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          let current: Status = 'success';
+          if (error.current) {
+            current = 'error';
+          }
+          setStatus(prevState =>
+            prevState !== current ? current : prevState,
+          );
+        }}
+        onError={() => {
+          error.current = true;
+        }}
+      >
+        {renderContent()}
+      </RNImage>
+    );
+  }
+
   return (
     <FastImage
       {...rest}

package/Input/InputMoney.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
   forwardRef,
   useContext,
@@ -42,6 +43,7 @@ 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++) {
@@ -95,6 +97,9 @@ 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));
@@ -160,10 +165,11 @@ 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);
@@ -177,39 +183,54 @@ const InputMoney = forwardRef(
       props.accessibilityLabel,
     );
 
-    const digitLimit = props.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 !== digitsRef.current) {
+        if (cleanValue !== numericValue) {
           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 || !inputRef.current?.isFocused()) return;
+      if (caret === null) return;
       pendingCaretRef.current = null;
-      inputRef.current.setSelection(caret, caret);
+      if (inputRef.current?.isFocused()) {
+        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 !== digitsRef.current;
+      const changed = digits !== numericValue;
       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?.('');
     };
@@ -235,6 +256,7 @@ const InputMoney = forwardRef(
       }
     };
 
+    // Keeps the caret out of the currency suffix.
     const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
       props.onSelectionChange?.(e);
       if (editingRef.current) return;
@@ -259,12 +281,6 @@ 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);
     };
 
@@ -274,8 +290,12 @@ const InputMoney = forwardRef(
     };
 
     const _setText = (text: string) => {
-      const digits = text
-        .replace(/\D/g, '')
+      if (!text) {
+        commit('', 0);
+        onChangeText?.('');
+        return;
+      }
+      const digits = parseInputText(text)
         .replace(/^0+(?=\d)/, '')
         .slice(0, digitLimit);
       if (commit(digits, digits.length)) {
@@ -326,7 +346,6 @@ const InputMoney = forwardRef(
               accessibilityLabel={`${componentId}`}
               textAlignVertical="center"
               ref={inputRef}
-              editable={props.editable !== false && !disabled}
               accessibilityState={{
                 disabled: disabled,
                 ...props.accessibilityState,

package/package.json

@@ -1,38 +1,40 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.2",
+    "version": "0.168.1-rn.88.0",
     "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
     "keywords": [
         "@momo-kits/foundation"
     ],
+    "license": "MoMo",
+    "main": "index.ts",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {},
     "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.2.2",
-        "react-native-worklets": "0.6.1",
-        "react-native-safe-area-context": "5.5.2",
-        "react-native-reserved-regions": "0.2.0",
+        "@react-navigation/bottom-tabs": "7.21.0",
+        "@react-navigation/core": "7.24.0",
+        "@react-navigation/elements": "2.9.45",
+        "@react-navigation/native": "7.5.1",
+        "@react-navigation/routers": "7.6.5",
+        "@react-navigation/stack": "7.12.1",
         "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*",
-        "react-native-worklets": "0.6.1"
+        "lottie-react-native": "7.3.6",
+        "react-native-fast-image": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "react-native-gesture-handler": "3.4.0",
+        "react-native-linear-gradient": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-reanimated": "4.7.1",
+        "react-native-safe-area-context": "5.7.0",
+        "react-native-reserved-regions": "0.2.0"
     },
     "devDependencies": {
-        "@types/color": "3.0.6"
+        "@types/color": "3.0.6",
+        "react-native-reanimated": "4.7.1",
+        "react-native-worklets": "0.13.0"
     },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
+    "peerDependencies": {
+        "react-native": "*",
+        "react-native-reanimated": ">=4.7.0",
+        "react-native-worklets": ">=0.13.0"
+    }
 }