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

package/Input/InputPhoneNumber.tsx

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

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,21 +52,29 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     backgroundColor,
     onPress,
     typingData,
+    size = 'default',
     ...props
   },
   ref,
 ) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const scaledFontSize = useScaleSize(INPUT_FONT_SIZE);
+  const scaledFontSize = useScaleSize(14);
   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 [isFocused, setIsFocused] = useState(false);
+  const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
   const currentValue = value !== undefined ? value : internalText;
-  const hasValue = !!currentValue;
+  const haveValue = !!currentValue;
   const inputRef = useRef<TextInput | null>(null);
 
   const componentName = 'InputSearch';
@@ -76,40 +84,40 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     props.accessibilityLabel,
   );
 
-  const handleFocus = (e: TextInputFocusEvent) => {
-    setIsFocused(true);
+  const _onFocus = (e: TextInputFocusEvent) => {
+    setFocused(true);
     onFocus?.(e);
   };
 
-  const handleBlur = (e: TextInputFocusEvent) => {
-    setIsFocused(false);
+  const _onBlur = (e: TextInputFocusEvent) => {
+    setFocused(false);
     onBlur?.(e);
   };
 
-  const handleClearText = () => {
+  const onClearText = () => {
     inputRef?.current?.clear();
     inputRef.current?.setNativeProps({ text: '' });
-    handleChangeText('');
+    _onChangeText('');
   };
 
-  const handleChangeText = (text: string) => {
+  const _onChangeText = (text: string) => {
     if (value === undefined) {
       setInternalText(text);
     }
     onChangeText?.(text);
   };
 
-  const handleSetText = (text: string) => {
+  const _setText = (text: string) => {
     inputRef?.current?.setNativeProps({ text });
-    handleChangeText(text);
+    _onChangeText(text);
   };
 
   useImperativeHandle(ref, () => {
     return {
-      clear: handleClearText,
+      clear: onClearText,
       focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),
-      setText: handleSetText,
+      setText: _setText,
     };
   });
 
@@ -117,9 +125,13 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     if (typingData && typingData?.length > 0) {
       return (
         <TouchableOpacity
-          style={[styles.searchInput, styles.searchInputTyping]}
+          style={[
+            styles.searchInput,
+            styles.searchInputTyping,
+            inputHeightStyle,
+          ]}
           onPress={onPress}
-          activeOpacity={onPress ? PRESSED_OPACITY : 1}
+          activeOpacity={onPress ? 0.6 : 1}
         >
           <TextTyping data={typingData} />
         </TouchableOpacity>
@@ -135,6 +147,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ref={inputRef}
         style={[
           styles.searchInput,
+          inputHeightStyle,
           {
             fontSize: scaledFontSize,
             color: theme.colors.text.default,
@@ -142,10 +155,10 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
           },
         ]}
         value={value}
-        onChangeText={handleChangeText}
+        onChangeText={_onChangeText}
         defaultValue={defaultValue}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
         placeholder={placeholder}
         selectionColor={theme.colors.primary}
         placeholderTextColor={theme.colors.text.hint}
@@ -156,15 +169,15 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const renderTrailing = () => {
     return (
       <View style={Styles.row}>
-        {hasValue && (
+        {haveValue && (
           <TouchableOpacity
             style={styles.iconWrapper}
-            onPress={handleClearText}
+            onPress={onClearText}
             accessibilityLabel={`${componentId}|close-icon-touch`}
           >
             <Icon
               source="24_navigation_close_circle_full"
-              size={CLEAR_ICON_SIZE}
+              size={16}
               color={theme.colors.text.hint}
             />
           </TouchableOpacity>
@@ -195,7 +208,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   };
 
   let inputState = 'empty';
-  if (isFocused) {
+  if (focused) {
     inputState = 'focus';
   }
   if (value && value?.length > 0) {
@@ -228,7 +241,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         >
           <Icon
             source={'navigation_search'}
-            size={SEARCH_ICON_SIZE}
+            size={searchIconSize}
             color={theme.colors.text.hint}
           />
           {renderInputView()}

package/Input/InputTextArea.tsx

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