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

package/Image/index.tsx

@@ -15,6 +15,7 @@ import { ImageProps } from './types';
 
 type Status = 'success' | 'loading' | 'error';
 
+/** Last path segment of a `{ uri }` source, used in QA labels; '' otherwise. */
 export const getImageName = (source: any): string => {
   const parts = source?.uri?.split?.('/');
   if (parts?.length > 0) {
@@ -23,6 +24,10 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
+/**
+ * FastImage that shows a skeleton while loading (if `loading`) or inside a
+ * loading `SkeletonProvider`, and a fail icon on error.
+ */
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -44,15 +49,12 @@ const Image: React.FC<ImageProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  let accessibilityLabel: any = `img|${getImageName(source)}`;
+  const imageName = getImageName(source);
+  let accessibilityLabel: any = `img|${imageName}`;
   if (component?.componentId) {
-    accessibilityLabel = `${component?.componentId}|img|${getImageName(
-      source,
-    )}`;
+    accessibilityLabel = `${component?.componentId}|img|${imageName}`;
   }
-  /**
-   * render content loading | fail | rendered
-   */
+
   const renderContent = () => {
     if (status === 'loading' || status === 'error') {
       let content = <Skeleton />;

package/Input/Input.tsx

@@ -31,7 +31,8 @@ import {
 } from '../Context';
 
 /**
- * Input default component
+ * Text input with floating label, leading/trailing/clear icons and an error or
+ * hint row; controlled via `value` or uncontrolled via `defaultValue`.
  */
 const Input = forwardRef(
   (
@@ -131,15 +132,17 @@ const Input = forwardRef(
       };
     });
 
-    /**
-     * Render input view
-     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor;
+      let secureTextStyle = styles.secureTextLarge;
+
+      if (size === 'small') {
+        secureTextStyle = styles.secureTextSmall;
+      }
 
       if (disabled) {
         textColor = disabledColor;
@@ -199,11 +202,7 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                secure &&
-                  haveValue &&
-                  (size === 'small'
-                    ? styles.secureTextSmall
-                    : styles.secureTextLarge),
+                secure && haveValue && secureTextStyle,
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}

package/Input/InputDropDown.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, type ViewStyle } from 'react-native';
 import { useComponentId } from '../Application';
 import {
   ApplicationContext,
@@ -18,6 +18,10 @@ import { Text, useScaleSize } from '../Text';
 import styles from './styles';
 import { Spacing } from '../Consts';
 
+/**
+ * Pressable field styled like an input with a chevron; shows `value` or
+ * `placeholder`. Opening the picker is left to `onPress`.
+ */
 const InputDropDown = ({
   value,
   floatingValue,
@@ -50,18 +54,19 @@ const InputDropDown = ({
     props.accessibilityLabel,
   );
 
-  /**
-   * Render the input view
-   */
   const renderInputView = () => {
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
+    let chevronStyle: ViewStyle = styles.iconViewDropDownSingle;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
     }
+    if (multiline) {
+      chevronStyle = styles.iconViewDropDownMultiline;
+    }
 
     return (
       <View
@@ -111,14 +116,7 @@ const InputDropDown = ({
             </Text>
           </View>
         </View>
-        <View
-          style={[
-            styles.iconViewDropDown,
-            multiline
-              ? styles.iconViewDropDownMultiline
-              : styles.iconViewDropDownSingle,
-          ]}
-        >
+        <View style={[styles.iconViewDropDown, chevronStyle]}>
           <Icon source={'arrow_chevron_down_small'} />
         </View>
       </View>

package/Input/InputMoney.tsx

@@ -16,6 +16,11 @@ import { InputMoneyView } from './InputMoneyView';
 import { findEdit, moneyFormatter } from './moneyUtils';
 import styles from './styles';
 
+/**
+ * Money input: keeps digits only, shows them grouped with a currency suffix and
+ * reports raw digits to `onChangeText`. On Android it restores the caret by the
+ * count of digits after it, since regrouping shifts positions.
+ */
 const InputMoney = forwardRef(
   (
     {
@@ -88,9 +93,9 @@ const InputMoney = forwardRef(
 
     useEffect(() => {
       if (!caretSelection) return;
-      setCaretSelection(current =>
-        current === caretSelection ? undefined : current,
-      );
+      setCaretSelection(current => {
+        return current === caretSelection ? undefined : current;
+      });
     }, [caretSelection]);
 
     const updateDisplayValue = (numeric: string) => {
@@ -142,11 +147,10 @@ const InputMoney = forwardRef(
       lastRawText.current = text;
       const formattedEdit = findEdit(lastDisplayValue, text);
       const rawEdit = findEdit(raw, text);
-      const { old, start, suffix } =
-        raw && rawEdit.size < formattedEdit.size ? rawEdit : formattedEdit;
-      caretDigitsAfter.current = parseInputText(
-        text.slice(text.length - suffix),
-      ).length;
+      const isRawEditSmaller = !!raw && rawEdit.size < formattedEdit.size;
+      const { old, start, suffix } = isRawEditSmaller ? rawEdit : formattedEdit;
+      const textAfterEdit = text.slice(text.length - suffix);
+      caretDigitsAfter.current = parseInputText(textAfterEdit).length;
       if (text.length < old.length && digits === numericValue) {
         const index = parseInputText(text.slice(0, start)).length - 1;
         if (index >= 0) {

package/Input/InputMoneyView.tsx

@@ -52,6 +52,10 @@ 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,
@@ -98,9 +102,12 @@ export const InputMoneyView = ({
     fontFamily: inputFontFamily,
   };
   const placeholderHasCurrency = placeholder.endsWith(currency);
-  const inputPlaceholder = placeholderHasCurrency
-    ? placeholder.slice(0, -currency.length)
-    : placeholder;
+  const shouldShowCurrency = !!displayValue || placeholderHasCurrency;
+  const shouldShowClearIcon = !!(showClearIcon && focused && displayValue);
+  let inputPlaceholder = placeholder;
+  if (placeholderHasCurrency) {
+    inputPlaceholder = placeholder.slice(0, -currency.length);
+  }
   return (
     <View
       style={[
@@ -147,7 +154,7 @@ export const InputMoneyView = ({
           keyboardType={'numeric'}
           maxLength={undefined}
         />
-        {displayValue || placeholderHasCurrency ? (
+        {shouldShowCurrency && (
           <Text
             style={[
               textStyle,
@@ -157,10 +164,10 @@ export const InputMoneyView = ({
           >
             {currency}
           </Text>
-        ) : null}
+        )}
       </Pressable>
       <View style={styles.iconView}>
-        {showClearIcon && focused && displayValue ? (
+        {shouldShowClearIcon && (
           <TouchableOpacity
             accessibilityLabel={`${componentId}|clear-icon-touch`}
             style={styles.iconWrapper}
@@ -173,7 +180,7 @@ export const InputMoneyView = ({
               accessibilityLabel={`${componentId}|clear-icon`}
             />
           </TouchableOpacity>
-        ) : null}
+        )}
         <RenderTrailing
           color={iconTintColor}
           icon={trailing}

package/Input/InputOTP.tsx

@@ -38,6 +38,7 @@ 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);
@@ -60,9 +61,7 @@ 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 };
@@ -86,6 +85,10 @@ 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(
   (
     {
@@ -121,14 +124,16 @@ const InputOTP = forwardRef(
       props.accessibilityLabel,
     );
 
-    useImperativeHandle(ref, () => ({
-      onChangeText: (text: string) => {
-        _onChangeText(text);
-      },
-      focus: () => inputRef.current?.focus(),
-      blur: () => inputRef.current?.blur(),
-      setText: (text: string) => _onChangeText(text),
-    }));
+    useImperativeHandle(ref, () => {
+      return {
+        onChangeText: (text: string) => {
+          _onChangeText(text);
+        },
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
 
     const onFocusInput = (e: TextInputFocusEvent) => {
       setFocused(true);
@@ -142,13 +147,10 @@ const InputOTP = forwardRef(
 
     const _onChangeText = (text: string) => {
       if (text.length > MAX_LENGTH) return;
-      if (dataType === 'number' && isNaN(Number(text))) return;
-      if (
-        !isNaN(Number(text)) &&
-        value.length >= Number(length) &&
-        text.length >= value.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;
 
       setValue(text);
       onChangeText?.(text);
@@ -164,21 +166,21 @@ const InputOTP = forwardRef(
       const TextInputs: React.ReactNode[] = [];
       const textColors = theme.colors.text;
       for (let i = 0; i < inputLength; i++) {
-        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>,
-        );
+        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>);
       }
       return TextInputs;
     };

package/Input/InputPhoneNumber.tsx

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

package/Input/InputSearch.tsx

@@ -13,6 +13,7 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
+import { HeaderBarMetrics } from '../Application/headerLayout';
 import {
   ApplicationContext,
   ComponentContext,
@@ -26,6 +27,12 @@ import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
 
+const SEARCH_ICON_SIZE = 24;
+
+/**
+ * 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,
@@ -45,6 +52,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     backgroundColor,
     onPress,
     typingData,
+    size = 'default',
     ...props
   },
   ref,
@@ -55,6 +63,13 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const searchFontFamily = exportFontFamily('regular');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const isHeaderSize = size === 'header';
+  const inputHeightStyle = isHeaderSize && {
+    height: HeaderBarMetrics.searchHeight,
+  };
+  const searchIconSize = isHeaderSize
+    ? HeaderBarMetrics.iconSize
+    : SEARCH_ICON_SIZE;
 
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
@@ -106,14 +121,15 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     };
   });
 
-  /**
-   * Render the input view
-   */
   const renderInputView = () => {
     if (typingData && typingData?.length > 0) {
       return (
         <TouchableOpacity
-          style={[styles.searchInput, styles.searchInputTyping]}
+          style={[
+            styles.searchInput,
+            styles.searchInputTyping,
+            inputHeightStyle,
+          ]}
           onPress={onPress}
           activeOpacity={onPress ? 0.6 : 1}
         >
@@ -131,6 +147,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ref={inputRef}
         style={[
           styles.searchInput,
+          inputHeightStyle,
           {
             fontSize: scaledFontSize,
             color: theme.colors.text.default,
@@ -149,9 +166,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     );
   };
 
-  /**
-   * Render trailing icon or text
-   */
   const renderTrailing = () => {
     return (
       <View style={Styles.row}>
@@ -227,7 +241,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         >
           <Icon
             source={'navigation_search'}
-            size={24}
+            size={searchIconSize}
             color={theme.colors.text.hint}
           />
           {renderInputView()}

package/Input/InputTextArea.tsx

@@ -21,6 +21,10 @@ 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,6 +4,10 @@ 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,11 +11,16 @@ 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 needsAndroidWrapper =
-    Platform.OS === 'android' && !editable && (onPressIn || onPressOut);
+  const isAndroidReadOnly = Platform.OS === 'android' && !editable;
+  const hasPressHandler = !!(onPressIn || onPressOut);
+  const needsAndroidWrapper = isAndroidReadOnly && hasPressHandler;
 
   const noPressHandlers = { onPressIn: undefined, onPressOut: undefined };
   const inputProps: TextInputProps = {

package/Input/TextTyping.tsx

@@ -11,6 +11,10 @@ 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,6 +35,7 @@ type TrailingProps = {
 
 export const MAX_LENGTH = 300;
 
+/** Border color by state; priority is disabled > error > focused > default. */
 export const getBorderColor = (
   theme: Theme,
   focused: boolean,
@@ -58,6 +59,10 @@ 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,
@@ -68,13 +73,14 @@ export const getSizeStyle = (
     scaleStyle = { height };
   }
 
-  if (multiline)
+  if (multiline) {
     return [
       styles.multilineContainer,
       {
         minHeight: height,
       },
     ];
+  }
 
   if (size === 'small') {
     return [styles.smallContainer, scaleStyle];
@@ -82,6 +88,10 @@ 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;
@@ -95,21 +105,17 @@ 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={errorMessage ? errorColor : hintColor}
-            source="ic_error"
-            size={scaledIconSize}
-          />
+          <Icon color={messageColor} source="ic_error" size={scaledIconSize} />
         </View>
         <Text
-          accessibilityLabel={`${componentId}|${
-            errorMessage ? 'error' : 'hint'
-          }-text`}
+          accessibilityLabel={`${componentId}|${messageType}-text`}
           style={Styles.flex}
-          color={errorMessage ? errorColor : hintColor}
+          color={messageColor}
           typography={'description_default_regular'}
         >
           {errorMessage ?? hintTextDefault}
@@ -123,6 +129,10 @@ 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,
@@ -191,6 +201,10 @@ 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,
@@ -204,8 +218,8 @@ export const RenderTrailing: FC<TrailingProps> = ({
   }
 
   if (icon) {
-    const isIcon =
-      (IconSources as any)?.[icon as string]?.uri || icon?.includes('http');
+    const isIconName = !!(IconSources as any)?.[icon]?.uri;
+    const isIcon = isIconName || icon.includes('http');
     const renderIconTouchable = (content: ReactNode) => {
       return (
         <TouchableOpacity