@momo-kits/foundation 0.81.1-optimize.21 → 0.81.1-rc.0

package/Input/InputDropDown.tsx

@@ -1,67 +1,56 @@
 import React, {useContext} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import {Styles} from '../Consts';
 import {Icon} from '../Icon';
-import {Loader} from '../Loader';
-import {ErrorView, FloatingView, getSizeStyle} from './common';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
+import {Text} from '../Text';
 import styles from './styles';
+import {Spacing} 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,
-  ...props
+  multiline,
 }: 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.inputWrapper,
+          styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
-          // getBorderColor(theme, false, errorMessage, disabled),
+          getSizeStyle(size, multiline),
+          getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}
@@ -69,10 +58,18 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
         />
-        <View style={full ? styles.inputView : Styles.row}>
+        <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
-            <View style={styles.leadingIconContainer}>
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginTop: Spacing.M,
+                  marginRight: Spacing.S,
+                },
+              ]}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -80,28 +77,27 @@ const InputDropDown = ({
               />
             </View>
           )}
-          {full && (
-            <TextInput
-              {...props}
-              accessibilityLabel={accessibilityLabel}
-              onPressIn={onPress}
-              editable={false}
-              style={[
-                styles.input,
-                {
-                  color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
-                },
-              ]}
-              textBreakStrategy="highQuality"
-              value={value}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          )}
+          <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'} />
         </View>
-        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
       </View>
     );
   };
@@ -116,8 +112,9 @@ const InputDropDown = ({
         componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
+        activeOpacity={0.6}
         onPress={onPress}
-        style={[style, full && styles.wrapper]}>
+        style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/InputMoney.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -19,6 +20,8 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {Text} from '../Text';
+import {Loader} from '../Loader';
 
 const InputMoney = forwardRef(
   (
@@ -27,13 +30,18 @@ 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,
@@ -42,9 +50,10 @@ const InputMoney = forwardRef(
       accessibilityLabel,
       hintText,
       value: _value,
+      onPressFloatingIcon,
       ...props
     }: InputMoneyProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -63,7 +72,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : '',
+      defaultValue ? validateText(defaultValue) : ''
     );
 
     const onClearText = () => {
@@ -99,11 +108,51 @@ 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 = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -125,6 +174,7 @@ const InputMoney = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             <TextInput
@@ -160,7 +210,7 @@ const InputMoney = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {!!icon && <Icon color={iconTintColor} source={icon} />}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
@@ -198,7 +248,7 @@ const InputMoney = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -41,7 +41,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           duration: DURATION,
           useNativeDriver: true,
         }),
-      ]),
+      ])
     ).start();
   }, []);
   const spacingStyle = !isNaN(Number(length)) &&
@@ -74,6 +74,7 @@ const InputOTP = forwardRef(
       placeholder,
       onChangeText,
       onBlur,
+      onFocus,
       dataType = 'number',
       params,
       style,
@@ -81,7 +82,7 @@ const InputOTP = forwardRef(
       hintText,
       ...props
     }: InputOTPProps,
-    ref,
+    ref
   ) => {
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
@@ -93,7 +94,10 @@ const InputOTP = forwardRef(
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
-      focus: () => inputRef.current?.focus(),
+      focus: () => {
+        setFocused(true);
+        inputRef.current?.focus()
+      },
       blur: () => inputRef.current?.blur(),
       setText: (text: string) => _onChangeText(text),
     }));
@@ -143,7 +147,7 @@ const InputOTP = forwardRef(
                 {value[i] || '-'}
               </Text>
             )}
-          </View>,
+          </View>
         );
       }
       return TextInputs;
@@ -215,7 +219,7 @@ const InputOTP = forwardRef(
               value={value}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-              onFocus={onFocusInput}
+              onFocus={onFocus}
               onBlur={onBlurInput}
               style={{opacity: 0}}
               selectionColor={theme.colors.primary}
@@ -248,7 +252,7 @@ const InputOTP = forwardRef(
         </TouchableOpacity>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputOTP;