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

package/Input/InputPhoneNumber.tsx

@@ -20,18 +20,23 @@ import {
 } from '../Context';
 import { Colors, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
+import { Image } from '../Image';
 import { useScaleSize, Text, exportFontFamily } from '../Text';
-import {
-  ErrorView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
+import { Typography } from '../Text/types';
+import { CLEAR_ICON_SIZE } from './constants';
+import { ErrorView } from './ErrorView';
 import { InputPhoneNumberProps } from './index';
+import { RenderTrailing } from './RenderTrailing';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
-import { Image } from '../Image';
-import { Typography } from '../Text/types';
+import { getBorderColor, getInputHeight, getSizeStyle } from './utils';
+
+const SMALL_FONT_SIZE = 14;
+const LARGE_FONT_SIZE = 18;
+const SMALL_DIVIDER_HEIGHT = 24;
+const LARGE_DIVIDER_HEIGHT = 32;
+const FOCUSED_BORDER_WIDTH = 1.5;
+const FLAG_SIZE = 24;
 
 /**
  * Vietnamese phone number input with a fixed flag and `+84` prefix, number pad
@@ -67,10 +72,10 @@ const InputPhoneNumber = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
-    const [focused, setFocused] = useState(false);
+    const scaleHeight = useScaleSize(getInputHeight(size));
+    const [isFocused, setIsFocused] = useState(false);
     const [internalText, setInternalText] = useState(defaultValue || '');
-    const haveValue = value !== undefined ? !!value : !!internalText;
+    const hasValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
@@ -81,29 +86,29 @@ const InputPhoneNumber = forwardRef(
       props.accessibilityLabel,
     );
 
-    const onClearText = () => {
+    const handleClearText = () => {
       inputRef?.current?.clear();
-      _onChangeText('');
+      handleChangeText('');
     };
 
-    const _onChangeText = (text: string) => {
+    const handleChangeText = (text: string) => {
       if (value === undefined) {
         setInternalText(text);
       }
       onChangeText?.(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);
     };
 
-    const _setText = (text: string) => {
+    const handleSetText = (text: string) => {
       if (__DEV__ && value !== undefined) {
         console.error(
           `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
@@ -112,48 +117,48 @@ const InputPhoneNumber = forwardRef(
         );
       }
       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,
       };
     });
 
     let inputTextStyles = {};
-    let dividerHeight = 24;
-    let size14 = useScaleSize(14);
-    let size18 = useScaleSize(18);
+    let dividerHeight = SMALL_DIVIDER_HEIGHT;
+    const smallFontSize = useScaleSize(SMALL_FONT_SIZE);
+    const largeFontSize = useScaleSize(LARGE_FONT_SIZE);
     const semiboldFontFamily = exportFontFamily('semibold');
     const boldFontFamily = exportFontFamily('bold');
     let typography: Typography;
     if (size === 'small') {
       inputTextStyles = {
-        fontSize: size14,
+        fontSize: smallFontSize,
         fontFamily: semiboldFontFamily,
       };
-      dividerHeight = 24;
+      dividerHeight = SMALL_DIVIDER_HEIGHT;
       typography = 'header_s_semibold';
     } else {
       inputTextStyles = {
-        fontSize: size18,
+        fontSize: largeFontSize,
         fontFamily: boldFontFamily,
       };
-      dividerHeight = 32;
+      dividerHeight = LARGE_DIVIDER_HEIGHT;
       typography = 'header_m_bold';
     }
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
-      const secure = secureTextEntry;
+      const isSecure = secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor ?? theme.colors.text.default;
-      const borderWidth = focused ? 1.5 : 1;
+      const borderWidth = isFocused ? FOCUSED_BORDER_WIDTH : 1;
       let secureTextStyle = styles.secureTextLarge;
 
       if (size === 'small') {
@@ -173,7 +178,7 @@ const InputPhoneNumber = forwardRef(
             { backgroundColor: theme.colors.background.surface },
             getSizeStyle(size, undefined, scaleHeight),
             { borderWidth },
-            getBorderColor(theme, focused, errorMessage, disabled),
+            getBorderColor(theme, isFocused, errorMessage, disabled),
           ]}
         >
           <View style={styles.inputView}>
@@ -204,7 +209,7 @@ const InputPhoneNumber = forwardRef(
               {...props}
               accessibilityLabel={`${componentId}`}
               editable={editable && !disabled}
-              secureTextEntry={secure}
+              secureTextEntry={isSecure}
               textAlignVertical="center"
               ref={inputRef}
               accessibilityState={{
@@ -217,15 +222,15 @@ const InputPhoneNumber = forwardRef(
                   color: textColor,
                 },
                 inputTextStyles,
-                secure && haveValue && secureTextStyle,
+                isSecure && hasValue && secureTextStyle,
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={value}
-              onChangeText={_onChangeText}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
+              onChangeText={handleChangeText}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
@@ -233,16 +238,16 @@ const InputPhoneNumber = forwardRef(
             />
           </View>
           <View style={styles.iconView}>
-            {showClearIcon && focused && haveValue && (
+            {showClearIcon && isFocused && hasValue && (
               <TouchableOpacity
                 accessibilityLabel={`${componentId}|clear-icon-touch`}
                 accessible={false}
                 style={styles.iconWrapper}
-                onPress={onClearText}
+                onPress={handleClearText}
               >
                 <Icon
                   source="24_navigation_close_circle_full"
-                  size={16}
+                  size={CLEAR_ICON_SIZE}
                   color={theme.colors.text.hint}
                   accessibilityLabel={`${componentId}|clear-icon`}
                 />
@@ -299,9 +304,9 @@ const InputPhoneNumber = forwardRef(
 
 const innerStyle = StyleSheet.create({
   iconFlag: {
-    width: 24,
-    height: 24,
-    marginHorizontal: 2,
+    width: FLAG_SIZE,
+    height: FLAG_SIZE,
+    marginHorizontal: Spacing.XXS,
   },
 });
 

package/Input/InputSearch.tsx

@@ -13,18 +13,18 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
-import { HeaderBarMetrics } from '../Application/headerLayout';
 import {
   ApplicationContext,
   ComponentContext,
   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;
@@ -52,29 +52,21 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     backgroundColor,
     onPress,
     typingData,
-    size = 'default',
     ...props
   },
   ref,
 ) => {
   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;
-  const isHeaderSize = size === 'header';
-  const inputHeightStyle = isHeaderSize && {
-    height: HeaderBarMetrics.searchHeight,
-  };
-  const searchIconSize = isHeaderSize
-    ? 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 +76,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,
     };
   });
 
@@ -125,13 +117,9 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     if (typingData && typingData?.length > 0) {
       return (
         <TouchableOpacity
-          style={[
-            styles.searchInput,
-            styles.searchInputTyping,
-            inputHeightStyle,
-          ]}
+          style={[styles.searchInput, styles.searchInputTyping]}
           onPress={onPress}
-          activeOpacity={onPress ? 0.6 : 1}
+          activeOpacity={onPress ? PRESSED_OPACITY : 1}
         >
           <TextTyping data={typingData} />
         </TouchableOpacity>
@@ -147,7 +135,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ref={inputRef}
         style={[
           styles.searchInput,
-          inputHeightStyle,
           {
             fontSize: scaledFontSize,
             color: theme.colors.text.default,
@@ -155,10 +142,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 +156,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 +195,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   };
 
   let inputState = 'empty';
-  if (focused) {
+  if (isFocused) {
     inputState = 'focus';
   }
   if (value && value?.length > 0) {
@@ -241,7 +228,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         >
           <Icon
             source={'navigation_search'}
-            size={searchIconSize}
+            size={SEARCH_ICON_SIZE}
             color={theme.colors.text.hint}
           />
           {renderInputView()}

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/index.tsx

@@ -194,12 +194,6 @@ export interface InputSearchProps extends TextInputProps {
    */
   typingData?: string[];
 
-  /**
-   * Optional. `header` is the 32pt field with a 20pt search icon that sits in the
-   * navigation header. Defaults to `default`, the 36pt field for content.
-   */
-  size?: 'default' | 'header';
-
   /**
    * Optional. Called when the field is pressed while showing `typingData`.
    */
@@ -373,4 +367,4 @@ export {
   InputPhoneNumber,
 };
 
-export { checkValidPhoneNumber };
+export {checkValidPhoneNumber};