@momo-kits/foundation 0.168.1-beta.9 → 0.168.1-rn862.1

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/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

@@ -37,6 +37,8 @@ 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) => {
   let start = 0;
   while (start < text.length && old[start] === text[start]) {
@@ -127,8 +129,11 @@ const InputMoney = forwardRef(
       setLastDisplayValue(displayValue);
     }, [displayValue]);
 
+    // The selection only rides along with the render that reformats the text,
+    // then it is released so the user can move the caret freely.
     useEffect(() => {
       if (!caretSelection) return;
+      // A newer keystroke may already have queued its own selection; keep it.
       setCaretSelection(current =>
         current === caretSelection ? undefined : current,
       );
@@ -138,6 +143,9 @@ const InputMoney = forwardRef(
       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, keeping the same digits after it.
       const digitsAfter = caretDigitsAfter.current;
       caretDigitsAfter.current = undefined;
       if (Platform.OS !== 'android' || digitsAfter === undefined) return;
@@ -179,6 +187,9 @@ const InputMoney = forwardRef(
         return;
       }
       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;
       lastRawText.current = text;
       const formattedEdit = findEdit(lastDisplayValue, text);
@@ -188,6 +199,7 @@ const InputMoney = forwardRef(
       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) {
@@ -198,11 +210,6 @@ const InputMoney = forwardRef(
       updateNumericValue(digits);
     };
 
-    const focusAtEnd = () => {
-      inputRef.current?.focus();
-      inputRef.current?.setSelection(displayValue.length, displayValue.length);
-    };
-
     const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
@@ -272,7 +279,7 @@ const InputMoney = forwardRef(
           />
           <Pressable
             style={[styles.inputView, styles.moneyInputView]}
-            onPress={focusAtEnd}
+            onPress={() => inputRef.current?.focus()}
             disabled={disabled}
           >
             <SystemTextInput
@@ -284,6 +291,8 @@ const InputMoney = forwardRef(
                 disabled: disabled,
                 ...props.accessibilityState,
               }}
+              // 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"

package/Input/styles.ts

@@ -223,8 +223,9 @@ export default StyleSheet.create({
   },
   moneyTextInput: {
     flexShrink: 1,
+    height: '100%',
     paddingLeft: 0,
     paddingRight: Spacing.XXS,
-    paddingVertical: 0,
+    paddingVertical: Spacing.S,
   },
 });

package/package.json

@@ -1,38 +1,40 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.9",
+    "version": "0.168.1-rn862.1",
     "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",
         "@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": "2.31.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.5.3",
+        "react-native-reserved-regions": "0.2.0",
+        "react-native-safe-area-context": "5.7.0"
     },
     "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
+        "@types/color": "3.0.6",
+        "react-native-reanimated": "4.5.3",
+        "react-native-worklets": "0.11.3"
     },
-    "license": "MoMo"
+    "peerDependencies": {
+        "react-native": "*",
+        "react-native-reanimated": ">=4.5.0",
+        "react-native-worklets": ">=0.11.0"
+    }
 }