@momo-kits/foundation 0.169.9-beta.1 → 0.169.9

package/Input/utils.ts

@@ -1,4 +1,110 @@
-import { Localize } from '../Application';
+import { type ViewStyle } from 'react-native';
+import Localize from '../Application/Localize';
+import { type Theme } from '../Application/types';
+import styles from './styles';
+
+const SMALL_HEIGHT = 48;
+const LARGE_HEIGHT = 56;
+const SMALL_LEADING_ICON_SIZE = 24;
+const LARGE_LEADING_ICON_SIZE = 32;
+const THOUSANDS_GROUP_SIZE = 3;
+const PHONE_DIGITS_WITHOUT_ZERO = 9;
+const MIN_PHONE_DIGITS = 10;
+const MAX_PHONE_DIGITS = 11;
+
+/** vi-VN number format (`.` thousands) for the InputMoney display value. */
+const moneyFormatter = new Intl.NumberFormat('vi-VN');
+
+/** Field height for `size` before font scaling; unset means large. */
+const getInputHeight = (size?: 'small' | 'large') => {
+  if (size === 'small') {
+    return SMALL_HEIGHT;
+  }
+  return LARGE_HEIGHT;
+};
+
+/** Leading icon size for `size`; unset means large. */
+const getLeadingIconSize = (size?: 'small' | 'large') => {
+  if (size === 'small') {
+    return SMALL_LEADING_ICON_SIZE;
+  }
+  return LARGE_LEADING_ICON_SIZE;
+};
+
+/** Border color by state; priority is disabled > error > focused > default. */
+const getBorderColor = (
+  theme: Theme,
+  isFocused: boolean,
+  errorMessage?: string,
+  isDisabled?: boolean,
+) => {
+  let borderColor = theme.colors.border.default;
+
+  if (isFocused) {
+    borderColor = theme.colors.primary;
+  }
+
+  if (errorMessage) {
+    borderColor = theme.colors.error.primary;
+  }
+
+  if (isDisabled) {
+    borderColor = theme.colors.border.disable;
+  }
+
+  return { borderColor };
+};
+
+/**
+ * Container style for `size`; multiline uses `height` as minHeight so the
+ * field can grow with its content.
+ */
+const getSizeStyle = (
+  size?: 'small' | 'large',
+  isMultiline: boolean = false,
+  height?: number,
+) => {
+  let scaleStyle: ViewStyle = {};
+  if (height) {
+    scaleStyle = { height };
+  }
+
+  if (isMultiline) {
+    return [
+      styles.multilineContainer,
+      {
+        minHeight: height,
+      },
+    ];
+  }
+
+  if (size === 'small') {
+    return [styles.smallContainer, scaleStyle];
+  }
+  return [styles.container, scaleStyle];
+};
+
+/**
+ * Locates the single edited span between `old` and `text`: common prefix
+ * length (`start`), common suffix length (`suffix`) and removed + inserted
+ * char count (`size`).
+ */
+const findEdit = (old: string, text: string) => {
+  let start = 0;
+  while (start < text.length && old[start] === text[start]) {
+    start += 1;
+  }
+  const maxSuffix = Math.min(text.length, old.length) - start;
+  let suffix = 0;
+  while (suffix < maxSuffix) {
+    if (old[old.length - 1 - suffix] !== text[text.length - 1 - suffix]) {
+      break;
+    }
+    suffix += 1;
+  }
+  const size = old.length + text.length - 2 * (start + suffix);
+  return { old, start, suffix, size };
+};
 
 /**
  * Formats a number Vietnamese-style (`.` thousands, `,` decimals) with
@@ -18,7 +124,7 @@ const formatNumberToMoney = (number: number, currency = '') => {
   }
 
   const numberString = Math.abs(number).toString();
-  if (numberString.length < 3) {
+  if (numberString.length < THOUSANDS_GROUP_SIZE) {
     const sign = isNegative ? '-' : '';
     return `${sign}${numberString}${currency}`;
   }
@@ -32,7 +138,7 @@ const formatNumberToMoney = (number: number, currency = '') => {
     } else {
       array.push(numberString[i] as string);
     }
-    if (count === 3 && i >= 1) {
+    if (count === THOUSANDS_GROUP_SIZE && i >= 1) {
       array.push('.');
       count = 0;
     }
@@ -67,6 +173,7 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
   return Number(money);
 };
 
+/** Digits of `phone`, every other char stripped. */
 function formatPhoneNumber(phone: string): string {
   return phone.replace(/\D/g, '');
 }
@@ -79,20 +186,32 @@ function checkValidPhoneNumber(phone: string): {
   phoneFormatted: string;
   error?: string;
 } {
-  const isMissingLeadingZero = phone.length === 9 && /^[1-9]/.test(phone);
+  const hasLengthWithoutZero = phone.length === PHONE_DIGITS_WITHOUT_ZERO;
+  const isMissingLeadingZero = hasLengthWithoutZero && /^[1-9]/.test(phone);
   const phoneNumber = isMissingLeadingZero ? `0${phone}` : phone;
 
   const phoneFormatted = formatPhoneNumber(phoneNumber);
+  const digitCount = phoneFormatted.length;
   const localize = new Localize({ vi: {}, en: {} });
   let error: string | undefined;
 
-  if (phoneFormatted.length === 0) {
+  if (digitCount === 0) {
     error = localize.translate('enterPhoneNumber');
-  } else if (phoneFormatted.length < 10 || phoneFormatted.length > 11) {
+  } else if (digitCount < MIN_PHONE_DIGITS || digitCount > MAX_PHONE_DIGITS) {
     error = localize.translate('invalidPhoneNumber');
   }
 
   return { phoneFormatted: phoneFormatted, error };
 }
 
-export { formatMoneyToNumber, formatNumberToMoney, checkValidPhoneNumber };
+export {
+  moneyFormatter,
+  getInputHeight,
+  getLeadingIconSize,
+  getBorderColor,
+  getSizeStyle,
+  findEdit,
+  formatMoneyToNumber,
+  formatNumberToMoney,
+  checkValidPhoneNumber,
+};

package/Layout/FloatingButton.tsx

@@ -13,12 +13,22 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
-import { Colors } from '../Consts';
+import { Colors, Spacing } from '../Consts';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
 import { type AnimatedCompatValue } from '../Application/utils';
 import { useNormalizedSharedValue } from '../Application/hooks';
 
+const DEFAULT_BOTTOM = Spacing.M;
+const PILL_RADIUS = 100;
+const LABEL_FONT_SIZE = 16;
+const LABEL_LINE_HEIGHT = 22;
+const SMALL_SIZE = 36;
+const LARGE_SIZE = 48;
+const SMALL_ICON_SIZE = 12;
+const LARGE_ICON_SIZE = 24;
+const ANIMATION_DURATION = 100;
+
 export interface FloatingButtonProps {
   label?: string;
   onPress?: () => void;
@@ -44,60 +54,64 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   iconColor = '',
   size = 'small',
   animatedValue,
-  bottom = 12,
+  bottom = DEFAULT_BOTTOM,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ApplicationContext);
-  const enabled = animatedValue != null;
+  const hasScrollValue = animatedValue != null;
   const sharedValue = useNormalizedSharedValue(animatedValue);
-  const scaledFontSize = useScaleSize(16);
-  const scaledLineHeight = useScaleSize(22);
+  const scaledFontSize = useScaleSize(LABEL_FONT_SIZE);
+  const scaledLineHeight = useScaleSize(LABEL_LINE_HEIGHT);
   const labelFontFamily = exportFontFamily('bold');
   const maxWidth = useSharedValue(0);
-  const minWidth = size === 'small' ? 36 : 48;
+  const minWidth = size === 'small' ? SMALL_SIZE : LARGE_SIZE;
   const opacityAnimated = useSharedValue(0);
   const widthAnimated = useSharedValue<number | null>(null);
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
-  const [showText, setShowText] = useState(true);
+  const [isLabelShown, setIsLabelShown] = useState(true);
 
   useEffect(() => {
     if (!label) return;
-    opacityAnimated.value = withTiming(1, { duration: 100 });
+    opacityAnimated.value = withTiming(1, { duration: ANIMATION_DURATION });
   }, [label, opacityAnimated]);
 
   useAnimatedReaction(
     () => sharedValue.value,
     value => {
       'worklet';
-      if (!label || !enabled) return;
+      if (!label || !hasScrollValue) return;
       if (value !== lastOffset.value && value > 0) {
         const direction = value > lastOffset.value ? 'down' : 'up';
         lastOffset.value = value;
         if (lastDirection.value !== direction) {
           lastDirection.value = direction;
           if (direction === 'down') {
-            opacityAnimated.value = withTiming(0, { duration: 100 });
+            opacityAnimated.value = withTiming(0, {
+              duration: ANIMATION_DURATION,
+            });
             widthAnimated.value = withTiming(
               minWidth,
-              { duration: 100 },
+              { duration: ANIMATION_DURATION },
               finished => {
-                if (finished) scheduleOnRN(setShowText, false);
+                if (finished) scheduleOnRN(setIsLabelShown, false);
               },
             );
           } else {
-            opacityAnimated.value = withTiming(1, { duration: 100 });
+            opacityAnimated.value = withTiming(1, {
+              duration: ANIMATION_DURATION,
+            });
             widthAnimated.value = withTiming(
               maxWidth.value,
-              { duration: 100 },
+              { duration: ANIMATION_DURATION },
               finished => {
-                if (finished) scheduleOnRN(setShowText, true);
+                if (finished) scheduleOnRN(setIsLabelShown, true);
               },
             );
           }
         }
       }
     },
-    [label, enabled, minWidth],
+    [label, hasScrollValue, minWidth],
   );
 
   const containerStyle = useAnimatedStyle(() => ({
@@ -146,10 +160,10 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       <TouchableOpacity style={styles.content} onPress={onPress}>
         <Icon
           source={icon}
-          size={size === 'small' ? 12 : 24}
+          size={size === 'small' ? SMALL_ICON_SIZE : LARGE_ICON_SIZE}
           color={iconColor}
         />
-        {showText && !!label && (
+        {isLabelShown && !!label && (
           <Animated.Text
             allowFontScaling={false}
             style={[
@@ -178,19 +192,19 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     alignItems: 'center',
     position: 'absolute',
-    borderRadius: 100,
-    paddingHorizontal: 12,
+    borderRadius: PILL_RADIUS,
+    paddingHorizontal: Spacing.M,
     flexWrap: 'wrap',
     alignSelf: 'flex-end',
   },
   label: {
-    marginLeft: 8,
+    marginLeft: Spacing.S,
   },
-  alignRight: { right: 12 },
+  alignRight: { right: Spacing.M },
   alignCenter: { alignSelf: 'center' },
   alignEnd: { alignSelf: 'flex-end' },
-  small: { height: 36 },
-  large: { height: 48 },
+  small: { height: SMALL_SIZE },
+  large: { height: LARGE_SIZE },
   content: {
     flexDirection: 'row',
     alignItems: 'center',

package/Layout/Screen.tsx

@@ -67,7 +67,6 @@ const Screen = forwardRef(
       headerBackground,
       gradientColor,
       trackingParams,
-      contentLayout,
     }: ScreenProps,
     ref: any,
   ) => {
@@ -145,7 +144,6 @@ const Screen = forwardRef(
       gradientColor,
       headerBackground,
       layoutOffset,
-      contentLayout,
     });
 
     // mutates the content node so callers keep its methods plus the header setters
@@ -225,7 +223,6 @@ const Screen = forwardRef(
           useShadowHeader={useShadowHeader}
           gradientColor={gradientColor}
           headerBackground={headerBackground}
-          contentLayout={contentLayout}
         />
       );
     };

package/Layout/layoutMetrics.ts

@@ -1,57 +1,66 @@
-/**
- * Header geometry
- * - barHeight: navigation bar row below the status bar
- * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
- * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
- * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
- *   5pt side margins on iOS from 414pt wide
- */
+/** Header geometry. */
 export const HeaderMetrics = {
+  /** Navigation bar row below the status bar. */
   barHeight: 52,
+  /** Header never shorter than this on iPhone (landscape, iPhone Duo). */
   iPhoneMinHeight: 72,
+  /** A smaller top inset means the status bar is not on the top edge. */
   statusBarMinInset: 20,
+  /**
+   * From this width @react-navigation/elements Header gives its content row
+   * `largeMargin` (5pt) side margins on iOS.
+   */
   largeWidth: 414,
   largeMargin: 5,
 };
 
-/**
- * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
- * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
- *   iPhone is 1.77 or taller
- * - innerMinHeight: window height from which the inner display is in use (outer display
- *   is 466pt tall in landscape, inner display 669pt)
- * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
- *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
- * - firstItemTop: with the status bar in the strip, the first control sits under the
- *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
- *   y 98 on the inner display in landscape)
- * - outerHeaderHeight / outerCameraCenterY: on the outer display in portrait the header
- *   is 4pt taller than iPhoneMinHeight and its title lines up with the camera punchout
- *   (y 24–66 at the top of the strip)
- * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
- *   controls start this far from the top and stay this far above the bottom, unless a
- *   reserved region (the camera at either end) asks for more
- * - innerStatusBarCenterY / innerStatusBarWidth: on the inner display in portrait the
- *   clock and connectivity cluster sits at the top right corner (x 550–643 of 669, clock
- *   digits centered on y 47); its reserved region, when reported, is taller than the glyphs
- * - floatingTabBarHeight / floatingTabBarMargin / floatingTabBarInsetOverlap: the host
- *   app's iOS 26 system tab bar on the inner display in portrait, a 62pt Liquid Glass pill
- *   sized to its tabs with the QR as a pinned 62pt platter beside it, centered and at
- *   least 20pt from the side edges; it overlaps the home indicator inset by 13pt (21pt
- *   above the screen bottom with a 34pt inset)
- */
+/** iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator). */
 export const DuoMetrics = {
+  /**
+   * Both displays are near 1.42 (inner) and 1.45 (outer); every slab iPhone is
+   * 1.77 or taller.
+   */
   maxAspectRatio: 1.6,
+  /**
+   * Window height from which the inner display is in use (outer display is
+   * 466pt tall in landscape, inner display 669pt).
+   */
   innerMinHeight: 600,
+  /**
+   * Vertical bar of 48pt circular controls; item groups are 48pt wide capsules
+   * at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart.
+   */
   controlSize: 48,
   itemPitch: 50,
+  /**
+   * With the status bar in the strip, the first control sits under the camera,
+   * clock and connectivity cluster (ends near y 151 outer, y 98 inner
+   * landscape).
+   */
   firstItemTop: 170,
   firstItemTopLandscape: 120,
+  /**
+   * Outer display in portrait: the header is 4pt taller than iPhoneMinHeight
+   * and its title lines up with the camera punchout (y 24–66 at the strip's
+   * top).
+   */
   outerHeaderHeight: 76,
   outerCameraCenterY: 45,
+  /**
+   * Outer display in landscape: no status bar in the strip, so controls keep
+   * this gap from both ends unless a reserved region (the camera) needs more.
+   */
   edgeInset: 24,
+  /**
+   * Inner display in portrait: clock and connectivity cluster at the top right
+   * (x 550–643 of 669, digits on y 47); a reported reserved region is taller.
+   */
   innerStatusBarCenterY: 47,
   innerStatusBarWidth: 120,
+  /**
+   * Host app's iOS 26 tab bar, inner display in portrait: a 62pt Liquid Glass
+   * pill plus 62pt QR platter, ≥ 20pt from the sides, 13pt over the home inset.
+   */
   floatingTabBarHeight: 62,
   floatingTabBarMargin: 20,
   floatingTabBarInsetOverlap: 13,

package/Layout/screenHeader.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { StatusBar, StatusBarStyle } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
-import type { SharedValue } from 'react-native-reanimated';
 import Navigation from '../Application/Navigation';
 import { AnimatedHeader, SearchHeaderProps } from '../Application/types';
 import { exportHeaderTitle } from '../Application/navigationOptions';
@@ -13,11 +12,6 @@ import {
   SearchHeader,
 } from '../Application';
 import { DuoGlassBackground } from '../Application/Components/DuoGlassBackground';
-import {
-  type HeaderContentLayout,
-  useHeaderFrameOptions,
-  useHeaderLayout,
-} from '../Application/headerLayout';
 import { getHeaderMargin } from './utils';
 import { ANIMATED_BANNER_HEIGHT } from './screenTypes';
 import { HeaderType } from './types';
@@ -35,31 +29,6 @@ type ScreenHeaderParams = {
   gradientColor?: string;
   headerBackground?: string;
   layoutOffset: number;
-  contentLayout?: HeaderContentLayout;
-};
-
-/**
- * Transparent header for an `inputSearchProps` Screen: its title fades out over the
- * first 50pt of scroll while the search collapses into the bar.
- */
-const getSearchTitleOptions = (
-  sharedValue: SharedValue<number>,
-): StackNavigationOptions => {
-  return {
-    headerShown: true,
-    headerTransparent: true,
-    headerBackground: () => null,
-    headerTitle: (props: any) => (
-      <HeaderTitle
-        {...props}
-        interpolate={{
-          inputRange: [0, 50],
-          outputRange: [1, 0],
-        }}
-        animatedValue={sharedValue}
-      />
-    ),
-  };
 };
 
 /**
@@ -79,12 +48,9 @@ export const useScreenHeader = ({
   gradientColor,
   headerBackground,
   layoutOffset,
-  contentLayout,
 }: ScreenHeaderParams) => {
   const currentTint = useRef<string | undefined>(undefined);
   const appliedHeaderMode = useRef<string | undefined>(undefined);
-  const headerLayout = useHeaderLayout(contentLayout);
-  const frameOptions = useHeaderFrameOptions(contentLayout);
 
   // keepTitle leaves a title the screen set itself when the same type is re-applied
   const setHeaderType = useCallback(
@@ -113,7 +79,21 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = getSearchTitleOptions(sharedValue);
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                  }}
+                  animatedValue={sharedValue}
+                />
+              ),
+            };
           }
           break;
 
@@ -147,7 +127,21 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = getSearchTitleOptions(sharedValue);
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                  }}
+                  animatedValue={sharedValue}
+                />
+              ),
+            };
           }
       }
 
@@ -155,11 +149,7 @@ export const useScreenHeader = ({
         delete options.headerTitle;
       }
 
-      navigation?.instance?.setOptions({
-        header: undefined,
-        ...frameOptions,
-        ...options,
-      });
+      navigation?.instance?.setOptions({ header: undefined, ...options });
     },
     [
       gradientColor,
@@ -170,7 +160,6 @@ export const useScreenHeader = ({
       useShadowHeader,
       hasSideBar,
       quickReturnOptions,
-      frameOptions,
     ],
   );
 
@@ -218,7 +207,7 @@ export const useScreenHeader = ({
         };
       }
 
-      navigation?.instance?.setOptions({ ...frameOptions, ...options });
+      navigation?.instance?.setOptions(options);
     },
     [
       gradientColor,
@@ -229,23 +218,32 @@ export const useScreenHeader = ({
       hasSideBar,
       layoutOffset,
       quickReturnOptions,
-      frameOptions,
     ],
   );
 
   const setAnimatedSearch = useCallback(() => {
-    const options = getSearchTitleOptions(sharedValue);
-    navigation?.instance?.setOptions({
-      header: undefined,
-      ...frameOptions,
-      ...options,
-    });
-  }, [navigation?.instance, sharedValue, frameOptions]);
+    const options: StackNavigationOptions = {
+      headerShown: true,
+      headerTransparent: true,
+      headerBackground: () => null,
+      headerTitle: (props: any) => (
+        <HeaderTitle
+          {...props}
+          interpolate={{
+            inputRange: [0, 50],
+            outputRange: [1, 0],
+          }}
+          animatedValue={sharedValue}
+        />
+      ),
+    };
+
+    navigation?.instance?.setOptions({ header: undefined, ...options });
+  }, [navigation?.instance, sharedValue]);
 
-  // the search field spans the content (or the stretch frame), clear of the side bar
-  // and status bar clusters
+  // the search field spans the content, clear of the side bar and status bar clusters
   const setSearchHeader = (params: SearchHeaderProps) => {
-    let searchWidth = headerLayout.frameWidth;
+    let searchWidth = layout.width - 24;
     let searchLeft = Spacing.M;
     if (layout.sideBar) {
       searchWidth = layout.contentWidth - Spacing.M * 2;
@@ -256,7 +254,6 @@ export const useScreenHeader = ({
       searchWidth -= clearance.left + clearance.right;
     }
     const options: StackNavigationOptions = {
-      ...frameOptions,
       headerRight: undefined,
       headerTitleContainerStyle: {
         width: searchWidth,

package/Layout/screenTypes.ts

@@ -9,7 +9,6 @@ import {
 import { FloatingButtonProps } from './FloatingButton';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
-import type { HeaderContentLayout } from '../Application/headerLayout';
 
 export const ANIMATED_BANNER_HEIGHT = 210;
 
@@ -60,9 +59,8 @@ export interface ScreenProps extends ViewProps {
 
   /**
    * Optional. If `true`, the footer is inset by the standard horizontal margin
-   * (12pt each side). Set `false` for a footer that should span the full width —
-   * e.g. one that already carries its own horizontal padding.
-   * Defaults to `true`, on every platform.
+   * (12pt each side); `false` spans the full width, e.g. for a footer with its
+   * own horizontal padding. Defaults to `true`, on every platform.
    */
   marginFooter?: boolean;
 
@@ -78,17 +76,10 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header. Defaults to the toolkit width (84), or 0 when
+   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
    * iPhone Duo floats the toolkit into its side bar.
    */
-  headerRightWidth?: 0 | 84 | 124 | number;
-
-  /**
-   * Optional. `stretch` centers back, title or search and the right cluster of the
-   * header in a 600pt frame on wide windows (foldable inner display, tablet); the
-   * background and status bar stay full width. Defaults to `grid`.
-   */
-  contentLayout?: HeaderContentLayout;
+  headerRightWidth?: 0 | 73 | 110 | number;
 
   /**
    * Optional. Props for the floating action button.