@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/Input/InputDropDown.tsx

@@ -1,55 +1,63 @@
 import React, {useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
-import {Icon} from '../Icon';
+import {TextInput, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
-import {Text} from '../Text';
-import styles from './styles';
-import {Spacing} from '../Consts';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
+import {Styles} from '../Consts';
 
 const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
-  onPressFloatingIcon,
   size = 'small',
   onPress,
   placeholder,
   errorMessage,
+  icon = 'arrow_chevron_down_small',
   disabled = false,
   floatingIconColor,
+  iconColor,
   required = false,
   errorSpacing,
+  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
-  params,
-  accessibilityLabel,
-  hintText,
-  multiline,
+  ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
+  const full = !!value || !!placeholder;
+
+  const renderIcon = (color: string | undefined) => {
+    if (loading) {
+      return <Loader type={'spinner'} color={color} />;
+    }
+    if (icon) {
+      return <Icon color={color} source={icon} size={24} />;
+    }
+  };
 
-  /**
-   * 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 iconTintColor = iconColor;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
     }
 
     return (
       <View
         style={[
-          styles.inputDropDownWrapper,
+          styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size, multiline),
+          getSizeStyle(size),
           getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
@@ -58,18 +66,10 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
-          onPress={onPressFloatingIcon}
         />
-        <View style={styles.inputDropDownView}>
+        <View style={full ? styles.inputView : Styles.row}>
           {!!leadingIcon && (
-            <View
-              style={[
-                styles.leadingIconContainerDropDown,
-                {
-                  marginTop: Spacing.M,
-                  marginRight: Spacing.S,
-                },
-              ]}>
+            <View style={styles.leadingIconContainer}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -77,52 +77,37 @@ const InputDropDown = ({
               />
             </View>
           )}
-          <View
-            accessibilityLabel={accessibilityLabel}
-            style={styles.textViewDropDown}>
-            <Text
-              numberOfLines={multiline ? undefined : 1}
-              typography={'body_default_regular'}
-              color={value ? textColor : placeholderColor}>
-              {value || placeholder}
-            </Text>
-          </View>
-        </View>
-        <View
-          style={[
-            styles.iconViewDropDown,
-            {
-              alignItems: multiline ? 'flex-start' : 'center',
-              paddingTop: multiline ? Spacing.M : 0,
-            },
-          ]}>
-          <Icon source={'arrow_chevron_down_small'} />
+          {full && (
+            <TextInput
+              {...props}
+              onPressIn={onPress}
+              editable={false}
+              textAlignVertical="top"
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-Regular`,
+                },
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          )}
         </View>
+        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
       </View>
     );
   };
 
   return (
-    <ComponentContext.Provider
-      value={{
-        componentName: 'InputDropDown',
-        params,
-        state: 'enabled',
-        componentLabel: floatingValue,
-        componentId: accessibilityLabel,
-      }}>
-      <TouchableOpacity
-        activeOpacity={0.6}
-        onPress={onPress}
-        style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView
-          errorMessage={errorMessage}
-          errorSpacing={errorSpacing}
-          hintText={hintText}
-        />
-      </TouchableOpacity>
-    </ComponentContext.Provider>
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
   );
 };
 

package/Input/InputMoney.tsx

@@ -1,8 +1,6 @@
 import React, {
   forwardRef,
-  ReactNode,
   useContext,
-  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -14,14 +12,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
-import {Icon} from '../Icon';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
-import styles from './styles';
+import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {Text} from '../Text';
-import {Loader} from '../Loader';
 
 const InputMoney = forwardRef(
   (
@@ -30,41 +26,24 @@ const InputMoney = forwardRef(
       floatingValue,
       floatingIcon,
       size = 'small',
-      loading,
       onBlur,
       onFocus,
       errorMessage,
       icon,
-      iconColor,
-      onPressIcon,
-      trailing,
-      trailingColor,
-      onPressTrailing,
       disabled = false,
       floatingIconColor,
+      iconColor,
       required = false,
       errorSpacing,
       style,
-      params,
       defaultValue = '',
-      accessibilityLabel,
-      hintText,
-      value: _value,
-      onPressFloatingIcon,
       ...props
     }: InputMoneyProps,
-    ref
+    ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
-    const inputRef = useRef<TextInput>(null);
-
-    useEffect(() => {
-      if (_value) {
-        setValue(validateText(_value));
-        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
-      }
-    }, [_value]);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -72,7 +51,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : ''
+      defaultValue ? validateText(defaultValue) : '',
     );
 
     const onClearText = () => {
@@ -91,9 +70,6 @@ const InputMoney = forwardRef(
 
     useImperativeHandle(ref, () => {
       return {
-        clear: onClearText,
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
         setText: _onChangeText,
       };
     });
@@ -108,51 +84,11 @@ const InputMoney = forwardRef(
       onBlur?.(e);
     };
 
-    /**
-     * Render trailing icon or text
-     * @param color
-     */
-    const renderTrailing = (color?: string) => {
-      if (loading) {
-        return <Loader type={'spinner'} color={color} style={styles.icon} />;
-      }
-
-      if (icon || trailing) {
-        const renderIconTouchable = (icon: ReactNode) => {
-          return (
-            <TouchableOpacity
-              onPress={onPressTrailing ?? onPressIcon}
-              style={styles.icon}>
-              {icon}
-            </TouchableOpacity>
-          );
-        };
-        const trailingValue = icon || trailing;
-        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
-          return renderIconTouchable(
-            <Icon
-              color={color}
-              source={(icon || trailing) as string}
-              size={24}
-            />
-          );
-        }
-        return renderIconTouchable(
-          <Text
-            typography="action_xs_bold"
-            color={color ?? theme.colors.primary}
-            numberOfLines={1}>
-            {trailingValue!.substring(0, 15)}
-          </Text>
-        );
-      }
-    };
-
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor ?? iconColor;
+      let iconTintColor = iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -174,13 +110,12 @@ const InputMoney = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
-            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
+              textAlignVertical="top"
               ref={inputRef}
               keyboardType={'number-pad'}
               style={[
@@ -210,45 +145,19 @@ const InputMoney = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderTrailing(iconTintColor)}
+            {!!icon && <Icon color={iconTintColor} source={icon} />}
           </View>
         </View>
       );
     };
 
-    let inputState = 'active';
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-    if (errorMessage && errorMessage?.length > 0) {
-      inputState = 'error';
-    }
-
-    if (disabled) {
-      inputState = 'disabled';
-    }
-
     return (
-      <ComponentContext.Provider
-        value={{
-          componentName: 'InputMoney',
-          params,
-          componentLabel: floatingValue,
-          state: inputState,
-          componentId: accessibilityLabel,
-        }}>
-        <View style={[style, styles.wrapper]}>
-          {renderInputView()}
-          <ErrorView
-            errorMessage={errorMessage}
-            errorSpacing={errorSpacing}
-            hintText={hintText}
-          />
-        </View>
-      </ComponentContext.Provider>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
-  }
+  },
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -15,12 +15,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
-import {Spacing} from '../Consts';
-import {scaleSize, Text} from '../Text';
-import {ErrorView, getBorderColor} from './common';
 import {CaretProps, InputOTPProps} from './index';
+import {scaleSize, Text} from '../Text';
 import styles from './styles';
+import {ErrorView, getBorderColor} from './common';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -41,7 +41,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           duration: DURATION,
           useNativeDriver: true,
         }),
-      ])
+      ]),
     ).start();
   }, []);
   const spacingStyle = !isNaN(Number(length)) &&
@@ -70,36 +70,29 @@ const InputOTP = forwardRef(
       length,
       errorMessage,
       errorSpacing,
-      floatingValue = 'Label',
+      floatingValue,
+      floatingIconColor,
+      floatingIcon,
       placeholder,
       onChangeText,
-      onBlur,
       onFocus,
+      onBlur,
       dataType = 'number',
-      params,
       style,
-      accessibilityLabel,
-      hintText,
       ...props
     }: InputOTPProps,
-    ref
+    ref,
   ) => {
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
-    const inputRef = useRef<TextInput | null>(null);
+    const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
-      focus: () => {
-        setFocused(true);
-        inputRef.current?.focus()
-      },
-      blur: () => inputRef.current?.blur(),
-      setText: (text: string) => _onChangeText(text),
     }));
 
     const onFocusInput = () => {
@@ -126,16 +119,16 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const renderInputs = (inputLength: number) => {
+    const renderInputs = (length: number) => {
       const TextInputs: React.ReactNode[] = [];
-      for (let i = 0; i < inputLength; i++) {
+      for (let i = 0; i < length; i++) {
         TextInputs.push(
           <View>
             {focused && value.length === i ? (
-              <OTPCaret index={i} length={inputLength} />
+              <OTPCaret index={i} length={length} />
             ) : (
               <Text
-                style={i !== inputLength - 1 && {marginRight: Spacing.L}}
+                style={i !== length - 1 && {marginRight: Spacing.L}}
                 color={
                   !!value[i]
                     ? theme.colors.text.default
@@ -147,7 +140,7 @@ const InputOTP = forwardRef(
                 {value[i] || '-'}
               </Text>
             )}
-          </View>
+          </View>,
         );
       }
       return TextInputs;
@@ -201,9 +194,7 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text
-                typography={'description_default_regular'}
-                color={theme.colors.text.hint}>
+              <Text typography={'description_default_regular'}>
                 {floatingValue}
               </Text>
             </View>
@@ -214,12 +205,11 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-              onFocus={onFocus}
+              onFocus={onFocusInput}
               onBlur={onBlurInput}
               style={{opacity: 0}}
               selectionColor={theme.colors.primary}
@@ -231,28 +221,15 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ComponentContext.Provider
-        value={{
-          componentName: 'InputOTP',
-          params,
-          componentLabel: floatingValue,
-          state: 'enabled',
-          componentId: accessibilityLabel,
-        }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}>
-          {renderInputView()}
-          <ErrorView
-            errorMessage={errorMessage}
-            errorSpacing={errorSpacing}
-            hintText={hintText}
-          />
-        </TouchableOpacity>
-      </ComponentContext.Provider>
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
     );
-  }
+  },
 );
 
 export default InputOTP;