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

package/Icon/index.tsx

@@ -7,10 +7,6 @@ import { Image } from '../Image';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../Consts';
 
-/**
- * Tinted icon from the bundled icon map (unknown names fall back to
- * `ic_warning`) or from a URL. `color={null}` keeps the image's own colors.
- */
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
   size = 24,
@@ -23,6 +19,9 @@ const Icon: React.FC<IconProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+  /**
+   * get icon source maps or remote http
+   */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
       let icon: { [key: string]: { uri: string } } = IconSources;
@@ -31,8 +30,9 @@ const Icon: React.FC<IconProps> = ({
     return { uri: source };
   };
 
-  const tintColor = color ?? theme.colors.text.default;
-  const tintColorProps = color !== null && { tintColor };
+  const tintColorProps = color !== null && {
+    tintColor: color ?? theme.colors.text.default,
+  };
 
   return (
     <Image

package/Icon/types.ts

@@ -15,7 +15,7 @@ export type IconProps = {
   size?: number;
 
   /**
-   *  Optional. Represents the color of the icon; `null` keeps the image colors.
+   *  Optional. Represents the color of the icon.
    */
   color?: string | null;
 

package/IconButton/index.tsx

@@ -41,10 +41,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
   params?: any;
 }
 
-/**
- * Icon-only button. `type` sets the background and icon color; `'disabled'`
- * also blocks presses.
- */
 const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
@@ -58,6 +54,9 @@ const IconButton: React.FC<IconButtonProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+  /**
+   * get size icon button
+   */
   const getSizeStyle = () => {
     switch (size) {
       case 'small':
@@ -69,10 +68,16 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
+  /**
+   * get shape icon button
+   */
   const getShapeStyle = () => {
     return shape === 'square' ? styles.square : styles.circle;
   };
 
+  /**
+   * get style for icon button by type
+   */
   const getTypeStyle = () => {
     switch (type) {
       case 'disabled':
@@ -106,6 +111,9 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
+  /**
+   * get color for icon
+   */
   const getIconColor = () => {
     switch (type) {
       case 'disabled':

package/Image/index.tsx

@@ -15,7 +15,6 @@ 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) {
@@ -24,10 +23,6 @@ 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,
@@ -49,12 +44,15 @@ const Image: React.FC<ImageProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const imageName = getImageName(source);
-  let accessibilityLabel: any = `img|${imageName}`;
+  let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
-    accessibilityLabel = `${component?.componentId}|img|${imageName}`;
+    accessibilityLabel = `${component?.componentId}|img|${getImageName(
+      source,
+    )}`;
   }
-
+  /**
+   * render content loading | fail | rendered
+   */
   const renderContent = () => {
     if (status === 'loading' || status === 'error') {
       let content = <Skeleton />;

package/Input/Input.tsx

@@ -31,8 +31,7 @@ import {
 } from '../Context';
 
 /**
- * Text input with floating label, leading/trailing/clear icons and an error or
- * hint row; controlled via `value` or uncontrolled via `defaultValue`.
+ * Input default component
  */
 const Input = forwardRef(
   (
@@ -132,17 +131,15 @@ 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;
@@ -202,7 +199,11 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                secure && haveValue && secureTextStyle,
+                secure &&
+                  haveValue &&
+                  (size === 'small'
+                    ? styles.secureTextSmall
+                    : styles.secureTextLarge),
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}

package/Input/InputDropDown.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { TouchableOpacity, View, type ViewStyle } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useComponentId } from '../Application';
 import {
   ApplicationContext,
@@ -18,10 +18,6 @@ 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,
@@ -54,19 +50,18 @@ 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
@@ -116,7 +111,14 @@ const InputDropDown = ({
             </Text>
           </View>
         </View>
-        <View style={[styles.iconViewDropDown, chevronStyle]}>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            multiline
+              ? styles.iconViewDropDownMultiline
+              : styles.iconViewDropDownSingle,
+          ]}
+        >
           <Icon source={'arrow_chevron_down_small'} />
         </View>
       </View>

package/Input/InputMoney.tsx

@@ -16,11 +16,6 @@ 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(
   (
     {
@@ -93,9 +88,9 @@ const InputMoney = forwardRef(
 
     useEffect(() => {
       if (!caretSelection) return;
-      setCaretSelection(current => {
-        return current === caretSelection ? undefined : current;
-      });
+      setCaretSelection(current =>
+        current === caretSelection ? undefined : current,
+      );
     }, [caretSelection]);
 
     const updateDisplayValue = (numeric: string) => {
@@ -147,10 +142,11 @@ const InputMoney = forwardRef(
       lastRawText.current = text;
       const formattedEdit = findEdit(lastDisplayValue, text);
       const rawEdit = findEdit(raw, text);
-      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;
+      const { old, start, suffix } =
+        raw && rawEdit.size < formattedEdit.size ? rawEdit : formattedEdit;
+      caretDigitsAfter.current = parseInputText(
+        text.slice(text.length - suffix),
+      ).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,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