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

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/Layout/Screen.tsx

@@ -11,6 +11,7 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import {
   Animated,
@@ -25,8 +26,9 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {
+import ReAnimated, {
   useAnimatedReaction,
+  useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
@@ -280,6 +282,14 @@ const Screen = forwardRef(
     const headerHide = useSharedValue(0);
     const lastScrollY = useSharedValue(0);
 
+    // iPhone Duo: the header component rides under the quick return header and the
+    // content scrolls beneath both, instead of staying pinned below an empty band
+    const floatHeaderComponent = useDuoGlass && scrollable && !!Header;
+    const [headerComponentHeight, setHeaderComponentHeight] = useState(0);
+    const headerComponentStyle = useAnimatedStyle(() => ({
+      transform: [{ translateY: -headerHide.value }],
+    }));
+
     useAnimatedReaction(
       () => sharedValue.value,
       y => {
@@ -780,7 +790,7 @@ const Screen = forwardRef(
       paddingLeft: layout.insetLeft,
       paddingRight: layout.insetRight,
     };
-    const offsetBodyByHeader = useDuoGlass && (!scrollable || !!Header);
+    const offsetBodyByHeader = useDuoGlass && !scrollable;
     const hasDuoTabInset = !Footer && isTab && !!duoTabInset;
 
     let floatingButtonBottom = bottomInset + Spacing.S;
@@ -838,7 +848,22 @@ const Screen = forwardRef(
             android: undefined,
           })}
         >
-          {Header}
+          {floatHeaderComponent ? (
+            <ReAnimated.View
+              style={[
+                styles.floatingHeaderComponent,
+                { top: heightHeader },
+                headerComponentStyle,
+              ]}
+              onLayout={e =>
+                setHeaderComponentHeight(e.nativeEvent.layout.height)
+              }
+            >
+              {Header}
+            </ReAnimated.View>
+          ) : (
+            Header
+          )}
 
           <Component
             {...scrollViewProps}
@@ -857,7 +882,11 @@ const Screen = forwardRef(
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
               scrollable && hasDuoTabInset && { paddingBottom: duoTabInset },
               scrollable && contentInsetStyle,
-              useDuoGlass && !Header && { paddingTop: heightHeader },
+              useDuoGlass && {
+                paddingTop:
+                  heightHeader +
+                  (floatHeaderComponent ? headerComponentHeight : 0),
+              },
               scrollViewProps?.contentContainerStyle,
             ]}
           >

package/Layout/styles.ts

@@ -91,6 +91,12 @@ export default StyleSheet.create({
       },
     }),
   },
+  floatingHeaderComponent: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
   footerClip: {
     marginTop: -Spacing.XL,
     paddingTop: Spacing.XL,

package/package.json

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