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

package/Input/InputSearch.tsx

@@ -20,11 +20,12 @@ import {
   MiniAppContext,
 } from '../Context';
 import { Icon } from '../Icon';
+import { Styles } from '../Consts';
 import { Text, useScaleSize, exportFontFamily } from '../Text';
+import { CLEAR_ICON_SIZE, INPUT_FONT_SIZE, PRESSED_OPACITY } from './constants';
 import { InputRef, InputSearchProps } from './index';
 import { TextTyping } from './SearchTextTyping';
 import styles from './styles';
-import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
 
 const SEARCH_ICON_SIZE = 24;
@@ -59,7 +60,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
 ) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const scaledFontSize = useScaleSize(14);
+  const scaledFontSize = useScaleSize(INPUT_FONT_SIZE);
   const searchFontFamily = exportFontFamily('regular');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -71,10 +72,10 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     ? HeaderBarMetrics.iconSize
     : SEARCH_ICON_SIZE;
 
-  const [focused, setFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
   const currentValue = value !== undefined ? value : internalText;
-  const haveValue = !!currentValue;
+  const hasValue = !!currentValue;
   const inputRef = useRef<TextInput | null>(null);
 
   const componentName = 'InputSearch';
@@ -84,40 +85,40 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     props.accessibilityLabel,
   );
 
-  const _onFocus = (e: TextInputFocusEvent) => {
-    setFocused(true);
+  const handleFocus = (e: TextInputFocusEvent) => {
+    setIsFocused(true);
     onFocus?.(e);
   };
 
-  const _onBlur = (e: TextInputFocusEvent) => {
-    setFocused(false);
+  const handleBlur = (e: TextInputFocusEvent) => {
+    setIsFocused(false);
     onBlur?.(e);
   };
 
-  const onClearText = () => {
+  const handleClearText = () => {
     inputRef?.current?.clear();
     inputRef.current?.setNativeProps({ text: '' });
-    _onChangeText('');
+    handleChangeText('');
   };
 
-  const _onChangeText = (text: string) => {
+  const handleChangeText = (text: string) => {
     if (value === undefined) {
       setInternalText(text);
     }
     onChangeText?.(text);
   };
 
-  const _setText = (text: string) => {
+  const handleSetText = (text: string) => {
     inputRef?.current?.setNativeProps({ text });
-    _onChangeText(text);
+    handleChangeText(text);
   };
 
   useImperativeHandle(ref, () => {
     return {
-      clear: onClearText,
+      clear: handleClearText,
       focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),
-      setText: _setText,
+      setText: handleSetText,
     };
   });
 
@@ -131,7 +132,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
             inputHeightStyle,
           ]}
           onPress={onPress}
-          activeOpacity={onPress ? 0.6 : 1}
+          activeOpacity={onPress ? PRESSED_OPACITY : 1}
         >
           <TextTyping data={typingData} />
         </TouchableOpacity>
@@ -155,10 +156,10 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
           },
         ]}
         value={value}
-        onChangeText={_onChangeText}
+        onChangeText={handleChangeText}
         defaultValue={defaultValue}
-        onFocus={_onFocus}
-        onBlur={_onBlur}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         placeholder={placeholder}
         selectionColor={theme.colors.primary}
         placeholderTextColor={theme.colors.text.hint}
@@ -169,15 +170,15 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const renderTrailing = () => {
     return (
       <View style={Styles.row}>
-        {haveValue && (
+        {hasValue && (
           <TouchableOpacity
             style={styles.iconWrapper}
-            onPress={onClearText}
+            onPress={handleClearText}
             accessibilityLabel={`${componentId}|close-icon-touch`}
           >
             <Icon
               source="24_navigation_close_circle_full"
-              size={16}
+              size={CLEAR_ICON_SIZE}
               color={theme.colors.text.hint}
             />
           </TouchableOpacity>
@@ -208,7 +209,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   };
 
   let inputState = 'empty';
-  if (focused) {
+  if (isFocused) {
     inputState = 'focus';
   }
   if (value && value?.length > 0) {

package/Input/InputTextArea.tsx

@@ -12,14 +12,20 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { setAutomationID, useComponentId } from '../Application';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Icon } from '../Icon';
 import { Text, useScaleSize, exportFontFamily } from '../Text';
-import { ErrorView, FloatingView, getBorderColor, MAX_LENGTH } from './common';
+import { CLEAR_ICON_SIZE, INPUT_FONT_SIZE } from './constants';
+import { ErrorView } from './ErrorView';
+import { FloatingView } from './FloatingView';
 import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
-import { setAutomationID, useComponentId } from '../Application';
+import { getBorderColor } from './utils';
+
+const DEFAULT_MAX_LENGTH = 300;
+const DEFAULT_HEIGHT = 104;
 
 /**
  * Multiline input with floating label, clear icon and a `length/maxLength`
@@ -40,7 +46,7 @@ const InputTextArea = forwardRef(
       defaultValue,
       height,
       placeholder,
-      maxLength = MAX_LENGTH,
+      maxLength = DEFAULT_MAX_LENGTH,
       required,
       errorSpacing,
       style,
@@ -57,12 +63,12 @@ const InputTextArea = forwardRef(
     );
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const DEFAULT_HEIGHT = useScaleSize(104);
+    const defaultHeight = useScaleSize(DEFAULT_HEIGHT);
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-    const scaledFontSize = useScaleSize(14);
+    const scaledFontSize = useScaleSize(INPUT_FONT_SIZE);
     const inputFontFamily = exportFontFamily('regular');
-    const [focused, setFocused] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = useRef<TextInput | null>(null);
 
@@ -70,33 +76,33 @@ const InputTextArea = forwardRef(
       setInputValue(value ?? '');
     }, [value]);
 
-    const onClearText = () => {
+    const handleClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      _onChangeText('');
+      handleChangeText('');
     };
 
-    const _onChangeText = (text: string) => {
+    const handleChangeText = (text: string) => {
       onChangeText?.(text);
       setInputValue(text);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
-      setFocused(true);
+    const handleFocus = (e: TextInputFocusEvent) => {
+      setIsFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
-      setFocused(false);
+    const handleBlur = (e: TextInputFocusEvent) => {
+      setIsFocused(false);
       onBlur?.(e);
     };
 
     useImperativeHandle(ref, () => {
       return {
-        clear: onClearText,
+        clear: handleClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
+        setText: (text: string) => handleChangeText(text),
       };
     });
 
@@ -129,10 +135,10 @@ const InputTextArea = forwardRef(
           style={[
             styles.textAreaWrapper,
             {
-              height: height || DEFAULT_HEIGHT,
+              height: height || defaultHeight,
               backgroundColor: theme.colors.background.surface,
             },
-            getBorderColor(theme, focused, errorMessage, disabled),
+            getBorderColor(theme, isFocused, errorMessage, disabled),
           ]}
         >
           <FloatingView
@@ -175,23 +181,23 @@ const InputTextArea = forwardRef(
                 textBreakStrategy="highQuality"
                 multiline={true}
                 value={inputValue}
-                onChangeText={_onChangeText}
-                onFocus={_onFocus}
-                onBlur={_onBlur}
+                onChangeText={handleChangeText}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
                 placeholder={placeholder}
                 selectionColor={theme.colors.primary}
                 placeholderTextColor={placeholderColor}
               />
             </View>
-            {focused && inputValue.length > 0 && (
+            {isFocused && inputValue.length > 0 && (
               <TouchableOpacity
                 style={styles.iconWrapper}
-                onPress={onClearText}
+                onPress={handleClearText}
                 accessibilityLabel={`${componentId}|clear-icon-touch`}
               >
                 <Icon
                   source="24_navigation_close_circle_full"
-                  size={16}
+                  size={CLEAR_ICON_SIZE}
                   color={theme.colors.text.hint}
                   accessibilityLabel={`${componentId}|clear-icon`}
                 />

package/Input/RenderTrailing.tsx

@@ -0,0 +1,79 @@
+import React, { type FC, type ReactNode, useContext } from 'react';
+import { TouchableOpacity } from 'react-native';
+import IconSources from '../Assets/icon.json';
+import { ApplicationContext } from '../Context';
+import { Icon } from '../Icon';
+import { Loader } from '../Loader';
+import { Text } from '../Text';
+import styles from './styles';
+
+const ICON_SIZE = 24;
+const TEXT_MAX_LENGTH = 15;
+
+type IconSourceMap = Record<string, { uri?: string } | undefined>;
+
+type TrailingProps = {
+  loading?: boolean;
+  color?: string;
+  icon?: string;
+  componentId?: string;
+  onPressIcon?: () => void;
+};
+
+/**
+ * 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).
+ */
+const RenderTrailing: FC<TrailingProps> = ({
+  loading,
+  color,
+  icon,
+  onPressIcon,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  if (loading) {
+    return <Loader type={'spinner'} color={color} style={styles.icon} />;
+  }
+  if (!icon) {
+    return null;
+  }
+
+  const iconSources: IconSourceMap = IconSources;
+  const isIconName = !!iconSources[icon]?.uri;
+  const isIcon = isIconName || icon.includes('http');
+  const renderIconTouchable = (content: ReactNode) => {
+    return (
+      <TouchableOpacity
+        accessibilityLabel={`${componentId}|trailing-touch`}
+        onPress={onPressIcon}
+        style={styles.icon}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  };
+
+  if (isIcon) {
+    return renderIconTouchable(
+      <Icon
+        color={color}
+        source={icon}
+        size={ICON_SIZE}
+        accessibilityLabel={`${componentId}|trailing-icon`}
+      />,
+    );
+  }
+  return renderIconTouchable(
+    <Text
+      typography="action_xs_bold"
+      color={color ?? theme.colors.primary}
+      numberOfLines={1}
+      accessibilityLabel={`${componentId}|trailing-text`}
+    >
+      {icon.substring(0, TEXT_MAX_LENGTH)}
+    </Text>,
+  );
+};
+
+export { RenderTrailing };

package/Input/constants.ts

@@ -0,0 +1,8 @@
+/** Input text size before font scaling. */
+const INPUT_FONT_SIZE = 14;
+/** Size of the clear (x) icon shown while a focused field has a value. */
+const CLEAR_ICON_SIZE = 16;
+/** Pressed opacity of the floating icon, dropdown and typing placeholder. */
+const PRESSED_OPACITY = 0.6;
+
+export { INPUT_FONT_SIZE, CLEAR_ICON_SIZE, PRESSED_OPACITY };

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',