@momo-kits/foundation 0.169.7-beta.3 → 0.169.7-beta.4

package/Input/InputMoneyView.tsx

@@ -52,10 +52,6 @@ type InputMoneyViewProps = Pick<
   inputProps: TextInputProps;
 };
 
-/**
- * Presentational body of InputMoney: bordered field, currency suffix (kept
- * after a placeholder that ends with it) and the clear/trailing icons.
- */
 export const InputMoneyView = ({
   size,
   errorMessage,
@@ -102,12 +98,9 @@ export const InputMoneyView = ({
     fontFamily: inputFontFamily,
   };
   const placeholderHasCurrency = placeholder.endsWith(currency);
-  const shouldShowCurrency = !!displayValue || placeholderHasCurrency;
-  const shouldShowClearIcon = !!(showClearIcon && focused && displayValue);
-  let inputPlaceholder = placeholder;
-  if (placeholderHasCurrency) {
-    inputPlaceholder = placeholder.slice(0, -currency.length);
-  }
+  const inputPlaceholder = placeholderHasCurrency
+    ? placeholder.slice(0, -currency.length)
+    : placeholder;
   return (
     <View
       style={[
@@ -154,7 +147,7 @@ export const InputMoneyView = ({
           keyboardType={'numeric'}
           maxLength={undefined}
         />
-        {shouldShowCurrency && (
+        {displayValue || placeholderHasCurrency ? (
           <Text
             style={[
               textStyle,
@@ -164,10 +157,10 @@ export const InputMoneyView = ({
           >
             {currency}
           </Text>
-        )}
+        ) : null}
       </Pressable>
       <View style={styles.iconView}>
-        {shouldShowClearIcon && (
+        {showClearIcon && focused && displayValue ? (
           <TouchableOpacity
             accessibilityLabel={`${componentId}|clear-icon-touch`}
             style={styles.iconWrapper}
@@ -180,7 +173,7 @@ export const InputMoneyView = ({
               accessibilityLabel={`${componentId}|clear-icon`}
             />
           </TouchableOpacity>
-        )}
+        ) : null}
         <RenderTrailing
           color={iconTintColor}
           icon={trailing}

package/Input/InputOTP.tsx

@@ -38,7 +38,6 @@ import {
   MiniAppContext,
 } from '../Context';
 
-/** Blinking caret shown in the OTP slot being typed. */
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
   const { theme } = useContext(ApplicationContext);
@@ -61,7 +60,9 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
     };
   }, [opacity]);
 
-  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
 
   const hasNextInput = !isNaN(Number(length)) && index !== Number(length) - 1;
   const spacingStyle = hasNextInput && { marginRight: Spacing.L };
@@ -85,10 +86,6 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   );
 };
 
-/**
- * OTP input: a hidden TextInput drives `length` slots (or a free-length row
- * when `length` is unset) with a blinking caret; accepts at most 10 chars.
- */
 const InputOTP = forwardRef(
   (
     {
@@ -124,16 +121,14 @@ const InputOTP = forwardRef(
       props.accessibilityLabel,
     );
 
-    useImperativeHandle(ref, () => {
-      return {
-        onChangeText: (text: string) => {
-          _onChangeText(text);
-        },
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
-      };
-    });
+    useImperativeHandle(ref, () => ({
+      onChangeText: (text: string) => {
+        _onChangeText(text);
+      },
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      setText: (text: string) => _onChangeText(text),
+    }));
 
     const onFocusInput = (e: TextInputFocusEvent) => {
       setFocused(true);
@@ -147,10 +142,13 @@ const InputOTP = forwardRef(
 
     const _onChangeText = (text: string) => {
       if (text.length > MAX_LENGTH) return;
-      const isNumeric = !isNaN(Number(text));
-      if (dataType === 'number' && !isNumeric) return;
-      const isFull = value.length >= Number(length);
-      if (isNumeric && isFull && text.length >= value.length) return;
+      if (dataType === 'number' && isNaN(Number(text))) return;
+      if (
+        !isNaN(Number(text)) &&
+        value.length >= Number(length) &&
+        text.length >= value.length
+      )
+        return;
 
       setValue(text);
       onChangeText?.(text);
@@ -166,21 +164,21 @@ const InputOTP = forwardRef(
       const TextInputs: React.ReactNode[] = [];
       const textColors = theme.colors.text;
       for (let i = 0; i < inputLength; i++) {
-        let slot: React.ReactNode;
-        if (focused && value.length === i) {
-          slot = <OTPCaret index={i} length={inputLength} />;
-        } else {
-          slot = (
-            <Text
-              style={i !== inputLength - 1 && { marginRight: Spacing.L }}
-              color={value[i] ? textColors.default : textColors.hint}
-              typography={value[i] ? 'header_m_bold' : 'body_default_regular'}
-            >
-              {value[i] || '-'}
-            </Text>
-          );
-        }
-        TextInputs.push(<View key={`otp-input-${i}`}>{slot}</View>);
+        TextInputs.push(
+          <View key={`otp-input-${i}`}>
+            {focused && value.length === i ? (
+              <OTPCaret index={i} length={inputLength} />
+            ) : (
+              <Text
+                style={i !== inputLength - 1 && { marginRight: Spacing.L }}
+                color={value[i] ? textColors.default : textColors.hint}
+                typography={value[i] ? 'header_m_bold' : 'body_default_regular'}
+              >
+                {value[i] || '-'}
+              </Text>
+            )}
+          </View>,
+        );
       }
       return TextInputs;
     };

package/Input/InputPhoneNumber.tsx

@@ -34,8 +34,7 @@ import { Image } from '../Image';
 import { Typography } from '../Text/types';
 
 /**
- * Vietnamese phone number input with a fixed flag and `+84` prefix, number pad
- * by default, plus clear and trailing icons.
+ * Input default component
  */
 const InputPhoneNumber = forwardRef(
   (
@@ -147,6 +146,9 @@ const InputPhoneNumber = forwardRef(
       typography = 'header_m_bold';
     }
 
+    /**
+     * Render input view
+     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextEntry;
@@ -154,11 +156,6 @@ const InputPhoneNumber = forwardRef(
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor ?? theme.colors.text.default;
       const borderWidth = focused ? 1.5 : 1;
-      let secureTextStyle = styles.secureTextLarge;
-
-      if (size === 'small') {
-        secureTextStyle = styles.secureTextSmall;
-      }
 
       if (disabled) {
         textColor = disabledColor;
@@ -217,7 +214,11 @@ const InputPhoneNumber = forwardRef(
                   color: textColor,
                 },
                 inputTextStyles,
-                secure && haveValue && secureTextStyle,
+                secure &&
+                  haveValue &&
+                  (size === 'small'
+                    ? styles.secureTextSmall
+                    : styles.secureTextLarge),
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}

package/Input/InputSearch.tsx

@@ -26,10 +26,6 @@ import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
 
-/**
- * Search field with search icon, clear icon, optional trailing icon and a
- * cancel button; with `typingData` it shows an animated placeholder instead.
- */
 const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   {
     placeholder,
@@ -110,6 +106,9 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     };
   });
 
+  /**
+   * Render the input view
+   */
   const renderInputView = () => {
     if (typingData && typingData?.length > 0) {
       return (
@@ -150,6 +149,9 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     );
   };
 
+  /**
+   * Render trailing icon or text
+   */
   const renderTrailing = () => {
     return (
       <View style={Styles.row}>

package/Input/InputTextArea.tsx

@@ -21,10 +21,6 @@ import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { setAutomationID, useComponentId } from '../Application';
 
-/**
- * Multiline input with floating label, clear icon and a `length/maxLength`
- * counter; the ref exposes clear, focus, blur and setText.
- */
 const InputTextArea = forwardRef(
   (
     {

package/Input/SearchTextTyping.tsx

@@ -4,10 +4,6 @@ import { TextInput } from 'react-native';
 import { useScaleSize, exportFontFamily } from '../Text';
 import styles from './styles';
 
-/**
- * Animated search placeholder: types each string of `data` char by char, then
- * erases it, looping forever. Writes via setNativeProps to avoid re-renders.
- */
 export const TextTyping: FC<any> = ({
   data = [],
   timeDelayEnd = 2000,

package/Input/SystemTextInput.tsx

@@ -11,16 +11,11 @@ interface SystemTextInputProps extends TextInputProps {
   ref?: React.RefObject<TextInput | null>;
 }
 
-/**
- * TextInput that still fires onPressIn/onPressOut when not editable on
- * Android, by moving them to a wrapping touchable.
- */
 const SystemTextInput: FC<SystemTextInputProps> = props => {
   const { editable, onPressIn, onPressOut, ref } = props;
 
-  const isAndroidReadOnly = Platform.OS === 'android' && !editable;
-  const hasPressHandler = !!(onPressIn || onPressOut);
-  const needsAndroidWrapper = isAndroidReadOnly && hasPressHandler;
+  const needsAndroidWrapper =
+    Platform.OS === 'android' && !editable && (onPressIn || onPressOut);
 
   const noPressHandlers = { onPressIn: undefined, onPressOut: undefined };
   const inputProps: TextInputProps = {

package/Input/TextTyping.tsx

@@ -11,10 +11,6 @@ export interface TextTypingProps {
   inputStyle?: TextStyle;
 }
 
-/**
- * Typing placeholder: types each string of `data` char by char, then erases
- * it, looping forever. Writes via setNativeProps to avoid re-renders.
- */
 const TextTyping: FC<TextTypingProps> = ({
   data = [],
   timeDelayEnd = 2000,

package/Input/common.tsx

@@ -35,7 +35,6 @@ type TrailingProps = {
 
 export const MAX_LENGTH = 300;
 
-/** Border color by state; priority is disabled > error > focused > default. */
 export const getBorderColor = (
   theme: Theme,
   focused: boolean,
@@ -59,10 +58,6 @@ export const getBorderColor = (
   return { borderColor };
 };
 
-/**
- * Container style for `size`; multiline uses `height` as minHeight so the
- * field can grow with its content.
- */
 export const getSizeStyle = (
   size?: 'small' | 'large',
   multiline: boolean = false,
@@ -73,14 +68,13 @@ export const getSizeStyle = (
     scaleStyle = { height };
   }
 
-  if (multiline) {
+  if (multiline)
     return [
       styles.multilineContainer,
       {
         minHeight: height,
       },
     ];
-  }
 
   if (size === 'small') {
     return [styles.smallContainer, scaleStyle];
@@ -88,10 +82,6 @@ export const getSizeStyle = (
   return [styles.container, scaleStyle];
 };
 
-/**
- * Error or hint row under an input (error wins); with neither, `errorSpacing`
- * keeps an empty row so the layout doesn't jump when an error appears.
- */
 export const ErrorView: FC<{
   errorMessage?: string;
   errorSpacing?: boolean;
@@ -105,17 +95,21 @@ export const ErrorView: FC<{
   const scaledIconSize = useScaleSize(16);
 
   if (errorMessage || hintText) {
-    const messageColor = errorMessage ? errorColor : hintColor;
-    const messageType = errorMessage ? 'error' : 'hint';
     return (
       <View style={styles.errorView}>
         <View style={styles.errorIcon}>
-          <Icon color={messageColor} source="ic_error" size={scaledIconSize} />
+          <Icon
+            color={errorMessage ? errorColor : hintColor}
+            source="ic_error"
+            size={scaledIconSize}
+          />
         </View>
         <Text
-          accessibilityLabel={`${componentId}|${messageType}-text`}
+          accessibilityLabel={`${componentId}|${
+            errorMessage ? 'error' : 'hint'
+          }-text`}
           style={Styles.flex}
-          color={messageColor}
+          color={errorMessage ? errorColor : hintColor}
           typography={'description_default_regular'}
         >
           {errorMessage ?? hintTextDefault}
@@ -129,10 +123,6 @@ export const ErrorView: FC<{
   return <View />;
 };
 
-/**
- * Floating label on the input's top border with a required `*` and an
- * optional pressable icon; renders nothing without `floatingValue`.
- */
 export const FloatingView: FC<FloatingViewProps> = ({
   floatingValue,
   floatingIconColor,
@@ -201,10 +191,6 @@ export const FloatingView: FC<FloatingViewProps> = ({
   return null;
 };
 
-/**
- * Trailing slot: spinner while `loading`, an icon when `icon` is a known icon
- * name or URL, otherwise `icon` as a text action (first 15 chars).
- */
 export const RenderTrailing: FC<TrailingProps> = ({
   loading,
   color,
@@ -218,8 +204,8 @@ export const RenderTrailing: FC<TrailingProps> = ({
   }
 
   if (icon) {
-    const isIconName = !!(IconSources as any)?.[icon]?.uri;
-    const isIcon = isIconName || icon.includes('http');
+    const isIcon =
+      (IconSources as any)?.[icon as string]?.uri || icon?.includes('http');
     const renderIconTouchable = (content: ReactNode) => {
       return (
         <TouchableOpacity

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,