@momo-kits/foundation 0.169.5 → 0.169.6-beta.1

package/Input/index.tsx

@@ -36,7 +36,7 @@ export interface InputProps extends TextInputProps {
   errorMessage?: string;
 
   /**
-   * Optional. Trailing icon name or URL; any other string is shown as a text action.
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   trailing?: string;
 
@@ -69,18 +69,19 @@ export interface InputProps extends TextInputProps {
   required?: boolean;
 
   /**
-   * Optional. If `true`, keeps an empty error row when there is no error or hint.
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   * Optional. If `true`, shows a loading spinner in place of the trailing icon.
+   *  If true, the icon of input will use be show indicator loading.
    */
   loading?: boolean;
 
   /**
-   * Optional. Represents the leading icon in the Input component.
+   *  Optional. Represents the leading icon in the Input component.
    */
   leadingIcon?: string;
 
@@ -110,13 +111,12 @@ export interface InputProps extends TextInputProps {
   hintText?: string;
 
   /**
-   * Optional. Callback function to be called when the floating icon is pressed.
+   * Optional. Represents the style of the Input component.
    */
   onPressFloatingIcon?: () => void;
 
   /**
-   * Optional. If `true`, shows a clear icon while focused with a value.
-   * Defaults to `true` if not provided.
+   * Optional. Represents the style of the Input component.
    */
   showClearIcon?: boolean;
 }
@@ -137,12 +137,12 @@ export interface InputSearchProps extends TextInputProps {
 
   /**
    * Optional. If `true`, the text on the search button will be displayed.
-   * Defaults to `true` if not provided.
+   * Defaults to `false` if not provided.
    */
   showButtonText?: boolean;
 
   /**
-   * Optional. Callback function to be called when the search button is pressed.
+   * Optional. Represents the value for the floating title in the InputSearch component.
    */
   onPressButtonText?: () => void;
 
@@ -180,7 +180,7 @@ export interface InputSearchProps extends TextInputProps {
   onPressTrailing?: () => void;
 
   /**
-   * Optional. Background color of the search field. Defaults to the surface color.
+   * Optional. If `true`, the user won't be able to interact with the Input component.
    */
   backgroundColor?: string;
 
@@ -195,7 +195,8 @@ export interface InputSearchProps extends TextInputProps {
   typingData?: string[];
 
   /**
-   * Optional. Called when the field is pressed while showing `typingData`.
+   * Optional. Represents the callback function to be called when the search button is pressed.
+   * @param e
    */
   onPress?: (e: GestureResponderEvent) => void;
 }
@@ -258,7 +259,7 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   placeholder?: string;
 
   /**
-   * Optional. If `true`, the value wraps to multiple lines and the chevron aligns to the top.
+   * Optional. Represents the data for the dropdown.
    */
   multiline?: boolean;
 
@@ -302,18 +303,19 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   required?: boolean;
 
   /**
-   * Optional. If `true`, keeps an empty error row when there is no error or hint.
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   * Optional. If `true`, shows a loading spinner in place of the trailing icon.
+   *  If true, the icon of input will use be show indicator loading.
    */
   loading?: boolean;
 
   /**
-   * Optional. Represents the leading icon in the Input component.
+   *  Optional. Represents the leading icon in the Input component.
    */
   leadingIcon?: string;
 
@@ -338,14 +340,15 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   hintText?: string;
 
   /**
-   * Optional. Callback function to be called when the floating icon is pressed.
+   * Optional. Represents the style of the Input component.
    */
   onPressFloatingIcon?: () => void;
 }
 
 export interface InputPhoneNumberProps extends InputProps {
   /**
-   * Optional. Currently unused: the displayed prefix is always `+84`.
+   * Optional. Represents the country code to be displayed in the InputPhoneNumber component.
+   * It should be in the format of a string, e.g., "+1" for the United States.
    */
   countryCode?: string;
 }

package/Input/moneyUtils.ts

@@ -1,21 +1,15 @@
 export const moneyFormatter = new Intl.NumberFormat('vi-VN');
 
-/**
- * Locates the single edited span between `old` and `text`: common prefix
- * length (`start`), common suffix length (`suffix`) and removed + inserted
- * char count (`size`).
- */
 export 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;
-    }
+  while (
+    suffix < Math.min(text.length, old.length) - start &&
+    old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
+  ) {
     suffix += 1;
   }
   const size = old.length + text.length - 2 * (start + suffix);

package/Input/styles.ts

@@ -2,6 +2,7 @@ import { Platform, StyleSheet } from 'react-native';
 import { Colors, Radius, Spacing } from '../Consts';
 
 export default StyleSheet.create({
+  //input style
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
@@ -64,6 +65,7 @@ export default StyleSheet.create({
     marginTop: Spacing.S,
   },
 
+  //text area style
   textAreaView: {
     flex: 1,
   },
@@ -92,6 +94,7 @@ export default StyleSheet.create({
     marginBottom: Spacing.XS,
   },
 
+  //searchInput
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
@@ -133,6 +136,7 @@ export default StyleSheet.create({
       ios: 36,
     }),
   },
+  //OTP
   otpWrapper: {
     width: '100%',
     marginTop: Spacing.M,
@@ -179,6 +183,7 @@ export default StyleSheet.create({
     opacity: 0.02,
     letterSpacing: Spacing.XXL,
   },
+  //DropDown
   inputDropDownWrapper: {
     flexDirection: 'row',
     marginTop: Spacing.S,

package/Input/utils.ts

@@ -1,9 +1,5 @@
 import { Localize } from '../Application';
 
-/**
- * Formats a number Vietnamese-style (`.` thousands, `,` decimals) with
- * `currency` appended; 0, NaN or a falsy value gives `0<currency>`.
- */
 const formatNumberToMoney = (number: number, currency = '') => {
   if (!number || isNaN(number) || Number(number) === 0) {
     return `0${currency}`;
@@ -45,10 +41,6 @@ const formatNumberToMoney = (number: number, currency = '') => {
   return isNegative ? `-${result}${currency}` : `${result}${currency}`;
 };
 
-/**
- * Parses a formatted money string back to a number by stripping
- * `currencyUnit`, separators, `đ` and spaces; unparsable text gives 0.
- */
 const formatMoneyToNumber = (money: string, currencyUnit: string) => {
   if (money && money.length > 0) {
     const moneyString = money
@@ -67,20 +59,26 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
   return Number(money);
 };
 
+// --- PHONE VALIDATION ---
 function formatPhoneNumber(phone: string): string {
   return phone.replace(/\D/g, '');
 }
 
-/**
- * Keeps the digits of `phone` (prepending the `0` a 9-char local number lacks)
- * and returns a localized error when empty or not 10-11 digits.
- */
 function checkValidPhoneNumber(phone: string): {
   phoneFormatted: string;
   error?: string;
 } {
-  const isMissingLeadingZero = phone.length === 9 && /^[1-9]/.test(phone);
-  const phoneNumber = isMissingLeadingZero ? `0${phone}` : phone;
+  let phoneNumber = phone;
+
+  // if not starting with 0 and has 9 digits => prepend 0
+  if (
+    phoneNumber.length > 0 &&
+    phoneNumber[0] !== '0' &&
+    /^\d$/.test(phoneNumber[0]) &&
+    phoneNumber.length === 9
+  ) {
+    phoneNumber = '0' + phoneNumber;
+  }
 
   const phoneFormatted = formatPhoneNumber(phoneNumber);
   const localize = new Localize({ vi: {}, en: {} });

package/Layout/Card.tsx

@@ -20,10 +20,6 @@ export interface CardProps extends ViewProps {
   useShadow?: boolean;
 }
 
-/**
- * Surface card across the content width minus 12pt margins, with its own grid for child
- * Items; optional background image and light shadow.
- */
 const Card: React.FC<CardProps> = ({
   children,
   style,
@@ -38,9 +34,10 @@ const Card: React.FC<CardProps> = ({
   const gutterSize = 8;
   const margin = 12;
   const widthSection = contentWidth - margin * 2;
-  const innerWidth = widthSection - margin * 2;
-  const columnsWidth = innerWidth - gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
+  let sizePerSpan =
+    (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
+      numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

package/Layout/FloatingButton.tsx

@@ -31,10 +31,6 @@ export interface FloatingButtonProps {
   renderComponent?: () => React.ReactNode;
 }
 
-/**
- * Floating action button above the screen bottom. With a label and a scroll value it
- * shrinks to its icon while scrolling down and expands again on scroll up.
- */
 export const FloatingButton: React.FC<FloatingButtonProps> = ({
   renderComponent,
   label = '',

package/Layout/Item.tsx

@@ -7,20 +7,16 @@ import { SpanNumber } from './types';
 
 export interface ItemProps extends ViewProps {
   /**
-   * Width in grid columns (1-12). Defaults to the full row.
+   * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
 
   /**
-   * Optional. Height in grid spans (1-12). Unset keeps the content height.
+   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
    */
   heightSpan?: SpanNumber;
 }
 
-/**
- * Grid cell sized from the enclosing GridContext; outlined when the mini app turns on
- * the baseline debug feature.
- */
 const Item: React.FC<ItemProps> = ({
   widthSpan,
   heightSpan,

package/Layout/ItemList.tsx

@@ -7,16 +7,12 @@ import { SpanNumber } from './types';
 
 export interface ItemListProps extends FlatListProps<any> {
   /**
-   * Width of each item in grid columns (1-12). Defaults to the full row.
+   * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
   data: any[];
 }
 
-/**
- * FlatList on the grid: `widthSpan` sets how many items share a row, and every item but
- * the first of a row gets the gutter on its left.
- */
 const ItemList = forwardRef(
   (
     {
@@ -34,9 +30,6 @@ const ItemList = forwardRef(
     const indexBegin = props?.data?.map(
       (_i: any, index: number) => index * numColumns,
     );
-    const defaultKeyExtractor = (item: any, index: number) => {
-      return (item?.id ?? item?.key ?? index).toString();
-    };
     const _renderItem = (item: any) => {
       if (indexBegin?.includes(item?.index)) {
         return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
@@ -53,7 +46,12 @@ const ItemList = forwardRef(
         ref={ref as React.RefObject<FlatList>}
         {...props}
         key={`ItemList-${numColumns}`}
-        keyExtractor={(props as any)?.keyExtractor ?? defaultKeyExtractor}
+        keyExtractor={
+          // prefer caller's keyExtractor; fallback to common id/key/index
+          (props as any)?.keyExtractor ??
+          ((item: any, index: number) =>
+            (item?.id ?? item?.key ?? index).toString())
+        }
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}

package/Layout/ItemSectionList.tsx

@@ -7,12 +7,11 @@ import { SpanNumber } from './types';
 
 export interface ItemSectionListProps extends SectionListProps<any> {
   /**
-   * Width of each item in grid columns (1-12). Defaults to the full row.
+   * Represents the width of the Card component in terms of span numbers (1-12).
    */
   widthSpan?: SpanNumber;
 }
 
-/** SectionList whose items sit on the grid, `widthSpan` columns wide, a gutter apart. */
 const ItemSectionList: FC<ItemSectionListProps> = ({
   renderItem,
   widthSpan,

package/Layout/ReservedRegions.tsx

@@ -19,43 +19,43 @@ try {
 }
 
 /**
- * Screen regions the system currently occludes, relative to the provider, which fills
- * the root view so they line up with window coordinates.
+ * screen regions the system currently occludes, relative to the provider, which fills
+ * the root view so they line up with window coordinates
  */
 const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
 
 /**
- * Vertical seam splitting the display into left and right halves, e.g. iPhone Duo
- * half folded. `undefined` while the display is flat or the system reports none.
+ * vertical seam splitting the display into left and right halves, e.g. iPhone Duo
+ * half folded. `undefined` while the display is flat or the system reports none
  */
 const HingeContext = createContext<ReservedRegion | undefined>(undefined);
 
-/** Frame of the vertical hinge (see HingeContext), `undefined` while the display is flat. */
 const useHinge = () => useContext(HingeContext);
 
 /**
- * Provides the occlusion regions and the vertical division (hinge) reported by the native
- * provider.
+ * keeps the occlusion regions and the vertical division reported by the native provider
  */
 const OcclusionRegions: React.FC<{
   useRegions: NativeReservedRegions['useReservedRegions'];
   children: ReactNode;
 }> = ({ useRegions, children }) => {
   const regions = useRegions();
-  const occlusion = useMemo(() => {
-    return regions
-      .filter(region => region.kind === 'occlusion')
-      .map(region => region.frame);
-  }, [regions]);
-  const hinge = useMemo(() => {
-    const division = regions.find(region => {
-      if (region.kind !== 'division') {
-        return false;
-      }
-      return region.frame.height > region.frame.width;
-    });
-    return division?.frame;
-  }, [regions]);
+  const occlusion = useMemo(
+    () =>
+      regions
+        .filter(region => region.kind === 'occlusion')
+        .map(region => region.frame),
+    [regions],
+  );
+  const hinge = useMemo(
+    () =>
+      regions.find(
+        region =>
+          region.kind === 'division' &&
+          region.frame.height > region.frame.width,
+      )?.frame,
+    [regions],
+  );
 
   return (
     <ReservedRegionsContext.Provider value={occlusion}>
@@ -65,8 +65,8 @@ const OcclusionRegions: React.FC<{
 };
 
 /**
- * Tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
- * cluster growing for a call or a Live Activity.
+ * tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
+ * cluster growing for a call or a Live Activity
  */
 const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
   children,
@@ -75,8 +75,8 @@ const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
     return <>{children}</>;
   }
 
-  const NativeProvider = nativeLib.ReservedRegionsProvider;
-  const { useReservedRegions } = nativeLib;
+  const { ReservedRegionsProvider: NativeProvider, useReservedRegions } =
+    nativeLib;
   return (
     <NativeProvider style={styles.container}>
       <OcclusionRegions useRegions={useReservedRegions}>

package/Layout/Screen.tsx

@@ -37,10 +37,6 @@ import { useScreenQuickReturn } from './screenQuickReturn';
 
 export type { ScreenProps };
 
-/**
- * Screen container: sets the navigation header, lays children on the grid, and adds the
- * scroll view, floating button and footer, with iPhone Duo side bar and tab bar insets.
- */
 const Screen = forwardRef(
   (
     {
@@ -112,12 +108,14 @@ const Screen = forwardRef(
     const isIOS = Platform.OS === 'ios';
     const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
     const hasSideBar = !!layout.sideBar;
-    const isPlainHeader = headerType === 'default' || headerType === 'extended';
-    const hasCustomHeader = !!animatedHeader || !!inputSearchProps;
-    const useDuoGlass = hasSideBar && isPlainHeader && !hasCustomHeader;
+    const useDuoGlass =
+      hasSideBar &&
+      (headerType === 'default' || headerType === 'extended') &&
+      !animatedHeader &&
+      !inputSearchProps;
 
-    const hasOverlayHeader = useDuoGlass || !!animatedHeader;
-    const useQuickReturn = hasSideBar && scrollable && hasOverlayHeader;
+    const useQuickReturn =
+      hasSideBar && scrollable && (useDuoGlass || !!animatedHeader);
     const { quickReturnOptions, snapQuickReturnHeader } = useScreenQuickReturn(
       sharedValue,
       useQuickReturn,
@@ -125,10 +123,18 @@ const Screen = forwardRef(
     );
 
     let keyboardOffset = heightHeader - bottomInset;
-    if (headerType === 'extended' || hasCustomHeader || useDuoGlass) {
+    if (
+      headerType === 'extended' ||
+      animatedHeader ||
+      inputSearchProps ||
+      useDuoGlass
+    ) {
       keyboardOffset = -bottomInset;
     }
 
+    /**
+     * inject params for screen tracking
+     */
     screen?.onSetParams?.(trackingParams);
 
     const { setSearchHeader, currentTint } = useScreenHeader({
@@ -146,7 +152,9 @@ const Screen = forwardRef(
       layoutOffset,
     });
 
-    // mutates the content node so callers keep its methods plus the header setters
+    /**
+     * expose ref for screen
+     */
     useImperativeHandle(ref, () => {
       return Object.assign(screenRef.current || {}, {
         setOptions: (params: NavigationOptions) => {
@@ -157,18 +165,19 @@ const Screen = forwardRef(
       });
     });
 
-    const scrollHandlers = createScrollHandlers({
-      scrollable,
-      animatedValue: animatedValue.current,
-      sharedValue,
-      scrollViewProps,
-      animatedHeader,
-      inputSearchProps,
-      currentTint,
-      navigation,
-      snapQuickReturnHeader,
-      ref,
-    });
+    const { handleScroll, handleScrollEnd, handleMomentumScrollEnd } =
+      createScrollHandlers({
+        scrollable,
+        animatedValue: animatedValue.current,
+        sharedValue,
+        scrollViewProps,
+        animatedHeader,
+        inputSearchProps,
+        currentTint,
+        navigation,
+        snapQuickReturnHeader,
+        ref,
+      });
     const Component: any = scrollable ? Animated.ScrollView : View;
 
     const getHeight = () => {
@@ -198,35 +207,6 @@ const Screen = forwardRef(
       floatingButtonBottom = 12 + duoTabInset;
     }
 
-    const renderHeaderLayer = () => {
-      if (useDuoGlass) {
-        return (
-          <DuoScrollGradient
-            animatedValue={sharedValue}
-            gradientColor={gradientColor}
-            headerBackground={headerBackground}
-            heightHeader={heightHeader}
-            extended={headerType === 'extended'}
-            followScroll={useQuickReturn}
-          />
-        );
-      }
-      return (
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          headerRightWidth={headerRightWidth}
-          animatedValue={sharedValue}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-          useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
-        />
-      );
-    };
-
     return (
       <View
         style={[
@@ -237,7 +217,29 @@ const Screen = forwardRef(
           },
         ]}
       >
-        {renderHeaderLayer()}
+        {useDuoGlass ? (
+          <DuoScrollGradient
+            animatedValue={sharedValue}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+            heightHeader={heightHeader}
+            extended={headerType === 'extended'}
+            followScroll={useQuickReturn}
+          />
+        ) : (
+          <HeaderExtendHeader
+            headerType={headerType}
+            heightHeader={heightHeader}
+            headerRightWidth={headerRightWidth}
+            animatedValue={sharedValue}
+            inputSearchProps={inputSearchProps}
+            navigation={navigation}
+            inputSearchRef={inputSearchRef}
+            useShadowHeader={useShadowHeader}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+          />
+        )}
 
         <KeyboardAvoidingView
           style={[
@@ -257,9 +259,9 @@ const Screen = forwardRef(
             {...scrollViewProps}
             ref={screenRef}
             showsVerticalScrollIndicator={false}
-            onScroll={scrollHandlers.handleScroll}
-            onScrollEndDrag={scrollHandlers.handleScrollEnd}
-            onMomentumScrollEnd={scrollHandlers.handleMomentumScrollEnd}
+            onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            onMomentumScrollEnd={handleMomentumScrollEnd}
             scrollEventThrottle={16}
             style={[
               Styles.flex,

package/Layout/Section.tsx

@@ -15,8 +15,8 @@ export interface SectionProps extends ViewProps {
   expanded?: boolean;
 
   /**
-   * Optional. If `true`, 12pt side margins are applied to the Section component.
-   * Defaults to `true`.
+   * Optional. If `true`, margin will be applied to the Section component.
+   * Defaults to `false` if not provided.
    */
   useMargin?: boolean;
 
@@ -26,10 +26,6 @@ export interface SectionProps extends ViewProps {
   backgroundImage?: string;
 }
 
-/**
- * Content-wide grid row (12 or 24 columns) with optional side margins; child Items size
- * themselves from its GridContext.
- */
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
@@ -47,8 +43,9 @@ const Section: React.FC<SectionProps> = ({
   }
   const widthSection = contentWidth - margin * 2;
 
-  const columnsWidth = widthSection - gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
+  const sizePerSpan =
+    (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

package/Layout/TrackingScope.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { TrackingScopeContext } from '../Context';
 
-/** Names a tracking scope; components inside prefix their component ids with it. */
 const TrackingScope = ({
   scopeName,
   children,