@momo-kits/foundation 0.81.1-beta.6 → 0.81.1-optimize.1

package/Input/Input.tsx

@@ -21,20 +21,23 @@ const Input = forwardRef(
       onChangeText,
       floatingValue,
       floatingIcon,
-      size,
+      size = 'small',
       placeholder,
       onBlur,
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
-      loading,
+      loading = false,
       leadingIcon,
       leadingIconColor,
+      fontWeight = 'Regular',
+      onPressIcon,
+      secureTextEntry,
       style,
       ...props
     }: InputProps,
@@ -43,8 +46,8 @@ const Input = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -68,15 +71,38 @@ const Input = forwardRef(
 
     const renderIcon = (color: string | undefined) => {
       if (loading) {
-        return <Loader type={'spinner'} color={color} />;
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+      if (secureTextEntry) {
+        return (
+          <TouchableOpacity
+            onPress={() => setSecureTextInput(!secureTextInput)}
+            style={styles.icon}>
+            <Icon
+              color={color}
+              size={24}
+              source={
+                secureTextInput ? '24_security_eye_off' : '24_security_eye_open'
+              }
+            />
+          </TouchableOpacity>
+        );
       }
       if (icon) {
-        return <Icon color={color} source={icon} size={24} />;
+        return (
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
+            <Icon color={color} source={icon} size={24} />
+          </TouchableOpacity>
+        );
       }
     };
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
+      const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
@@ -114,16 +140,17 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               style={[
                 styles.input,
                 {
                   color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
+                  fontFamily: `${theme.font}-${fontWeight}`,
                 },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
               textBreakStrategy="highQuality"
               value={value}
@@ -154,9 +181,7 @@ const Input = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>
@@ -164,8 +189,4 @@ const Input = forwardRef(
   },
 );
 
-Input.defaultProps = {
-  size: 'small',
-};
-
 export default Input;

package/Input/InputDropDown.tsx

@@ -12,17 +12,17 @@ const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
-  size,
+  size = 'small',
   onPress,
   placeholder,
   errorMessage,
   icon = 'arrow_chevron_down_small',
-  disabled,
+  disabled = false,
   floatingIconColor,
   iconColor,
-  required,
+  required = false,
   errorSpacing,
-  loading,
+  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
@@ -30,7 +30,6 @@ const InputDropDown = ({
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const accessibilityLabel = `InputDropDown/${floatingValue ?? placeholder}`;
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -82,7 +81,6 @@ const InputDropDown = ({
             <TextInput
               {...props}
               onPressIn={onPress}
-              accessibilityLabel={accessibilityLabel}
               editable={false}
               textAlignVertical="top"
               style={[
@@ -106,18 +104,11 @@ const InputDropDown = ({
   };
 
   return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[style, full && styles.wrapper]}
-      accessibilityLabel={accessibilityLabel}>
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>
   );
 };
 
-InputDropDown.defaultProps = {
-  size: 'small',
-};
-
 export default InputDropDown;

package/Input/InputMoney.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -24,12 +30,13 @@ const InputMoney = forwardRef(
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
       style,
+      defaultValue = '',
       ...props
     }: InputMoneyProps,
     ref,
@@ -37,23 +44,36 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const [value, setValue] = useState('');
-    const accessibilityLabel = `InputMoney/${floatingValue}`;
+
+    const validateText = (text: string) => {
+      const valueFormat = formatMoneyToNumber(text, 'đ');
+      return formatNumberToMoney(valueFormat, 'đ');
+    };
+
+    const [value, setValue] = useState(
+      defaultValue ? validateText(defaultValue) : '',
+    );
 
     const onClearText = () => {
       inputRef?.current?.clear();
       setValue('');
       onChangeText?.('');
     };
+
     const _onChangeText = (text: string) => {
       if (text.length < value.length && value.indexOf(text) === 0) {
         text = value.slice(0, -2) + 'đ';
       }
-      const valueFormat = formatMoneyToNumber(text, 'đ');
-      setValue(formatNumberToMoney(valueFormat, 'đ'));
+      setValue(validateText(text));
       onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        setText: _onChangeText,
+      };
+    });
+
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
@@ -94,7 +114,6 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -133,9 +152,7 @@ const InputMoney = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputOTP.tsx

@@ -1,4 +1,12 @@
-import React, {FC, useContext, useEffect, useRef, useState} from 'react';
+import React, {
+  FC,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
   NativeSyntheticEvent,
@@ -49,163 +57,179 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           opacity,
         }}
       />
-      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+      <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -
       </Text>
     </View>
   );
 };
 
-const InputOTP: FC<InputOTPProps> = ({
-  length,
-  errorMessage,
-  errorSpacing,
-  floatingValue,
-  floatingIconColor,
-  floatingIcon,
-  placeholder,
-  onChangeText,
-  onFocus,
-  onBlur,
-  dataType = 'number',
-  style,
-  ...props
-}) => {
-  const MAX_LENGTH = 10;
-  const [value, setValue] = useState('');
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef<TextInput>(null);
-  const {theme} = useContext(ApplicationContext);
-  const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
-
-  const onFocusInput = () => {
-    setFocused(true);
-    inputRef.current?.focus();
-  };
-
-  const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
-
-  const _onChangeText = (text: string) => {
-    if (text.length > MAX_LENGTH) return;
-    if (dataType === 'number' && isNaN(Number(text))) return;
-    if (
-      !isNaN(Number(text)) &&
-      value.length >= Number(length) &&
-      text.length >= value.length
-    )
-      return;
-
-    setValue(text);
-    onChangeText?.(text);
-  };
-
-  const renderInputs = (length: number) => {
-    const TextInputs: React.ReactNode[] = [];
-    for (let i = 0; i < length; i++) {
-      TextInputs.push(
-        <View>
-          {focused && value.length === i ? (
-            <OTPCaret index={i} length={length} />
-          ) : (
-            <Text
-              style={i !== length - 1 && {marginRight: Spacing.L}}
-              color={
-                !!value[i] ? theme.colors.text.default : theme.colors.text.hint
-              }
-              typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
-              {value[i] || '-'}
-            </Text>
-          )}
-        </View>,
-      );
-    }
-    return TextInputs;
-  };
+const InputOTP = forwardRef(
+  (
+    {
+      length,
+      errorMessage,
+      errorSpacing,
+      floatingValue,
+      floatingIconColor,
+      floatingIcon,
+      placeholder,
+      onChangeText,
+      onFocus,
+      onBlur,
+      dataType = 'number',
+      style,
+      ...props
+    }: InputOTPProps,
+    ref,
+  ) => {
+    const MAX_LENGTH = 10;
+    const [value, setValue] = useState('');
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const {theme} = useContext(ApplicationContext);
 
-  const renderUnidentifiedInputs = () => {
-    const splitValue = value.split('');
+    useImperativeHandle(ref, () => ({
+      onChangeText: (text: string) => {
+        _onChangeText(text);
+      },
+    }));
 
-    if (!focused && value.length === 0 && !!placeholder) {
-      return (
-        <Text color={theme.colors.text.hint} typography={'description_s'}>
-          {placeholder}
-        </Text>
-      );
-    }
+    const onFocusInput = () => {
+      setFocused(true);
+      inputRef.current?.focus();
+    };
 
-    return (
-      <View style={{flexDirection: 'row'}}>
-        {splitValue.map((letter, index) => {
-          return (
-            <Text
-              style={
-                (index !== value.length - 1 ||
-                  (focused && value.length !== MAX_LENGTH)) && {
-                  marginRight: Spacing.L,
+    const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const _onChangeText = (text: string) => {
+      if (text.length > MAX_LENGTH) return;
+      if (dataType === 'number' && isNaN(Number(text))) return;
+      if (
+        !isNaN(Number(text)) &&
+        value.length >= Number(length) &&
+        text.length >= value.length
+      )
+        return;
+
+      setValue(text);
+      onChangeText?.(text);
+    };
+
+    const renderInputs = (length: number) => {
+      const TextInputs: React.ReactNode[] = [];
+      for (let i = 0; i < length; i++) {
+        TextInputs.push(
+          <View>
+            {focused && value.length === i ? (
+              <OTPCaret index={i} length={length} />
+            ) : (
+              <Text
+                style={i !== length - 1 && {marginRight: Spacing.L}}
+                color={
+                  !!value[i]
+                    ? theme.colors.text.default
+                    : theme.colors.text.hint
                 }
-              }
-              typography={'title_s'}>
-              {letter}
-            </Text>
-          );
-        })}
-        {focused && value.length !== MAX_LENGTH && <OTPCaret />}
-      </View>
-    );
-  };
+                typography={
+                  !!value[i] ? 'header_m_bold' : 'body_default_regular'
+                }>
+                {value[i] || '-'}
+              </Text>
+            )}
+          </View>,
+        );
+      }
+      return TextInputs;
+    };
 
-  const renderInputView = () => {
-    return (
-      <View
-        style={[
-          styles.otpInput,
-          {backgroundColor: theme.colors.background.surface},
-          getBorderColor(theme, focused, errorMessage),
-        ]}>
-        {!!floatingValue && (
-          <View
-            style={[
-              styles.otpFloatingView,
-              {backgroundColor: theme.colors.background.surface},
-            ]}>
-            <Text typography={'description_s'}>{floatingValue}</Text>
-          </View>
-        )}
-        <View style={styles.otpInputsView}>
-          {length ? renderInputs(length) : renderUnidentifiedInputs()}
+    const renderUnidentifiedInputs = () => {
+      const splitValue = value.split('');
+
+      if (!focused && value.length === 0 && !!placeholder) {
+        return (
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_default_regular'}>
+            {placeholder}
+          </Text>
+        );
+      }
+
+      return (
+        <View style={{flexDirection: 'row'}}>
+          {splitValue.map((letter, index) => {
+            return (
+              <Text
+                style={
+                  (index !== value.length - 1 ||
+                    (focused && value.length !== MAX_LENGTH)) && {
+                    marginRight: Spacing.L,
+                  }
+                }
+                typography={'header_m_bold'}>
+                {letter}
+              </Text>
+            );
+          })}
+          {focused && value.length !== MAX_LENGTH && <OTPCaret />}
         </View>
-        <View style={styles.inputView}>
-          <TextInput
-            {...props}
-            accessibilityLabel={accessibilityLabel}
-            ref={inputRef}
-            value={value}
-            onChangeText={_onChangeText}
-            keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-            onFocus={onFocusInput}
-            onBlur={onBlurInput}
-            style={{opacity: 0}}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={theme.colors.text.hint}
-          />
+      );
+    };
+
+    const renderInputView = () => {
+      return (
+        <View
+          style={[
+            styles.otpInput,
+            {backgroundColor: theme.colors.background.surface},
+            getBorderColor(theme, focused, errorMessage),
+          ]}>
+          {!!floatingValue && (
+            <View
+              style={[
+                styles.otpFloatingView,
+                {backgroundColor: theme.colors.background.surface},
+              ]}>
+              <Text typography={'description_default_regular'}>
+                {floatingValue}
+              </Text>
+            </View>
+          )}
+          <View style={styles.otpInputsView}>
+            {length ? renderInputs(length) : renderUnidentifiedInputs()}
+          </View>
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              ref={inputRef}
+              value={value}
+              onChangeText={_onChangeText}
+              keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
+              onFocus={onFocusInput}
+              onBlur={onBlurInput}
+              style={{opacity: 0}}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={theme.colors.text.hint}
+            />
+          </View>
         </View>
-      </View>
-    );
-  };
+      );
+    };
 
-  return (
-    <TouchableOpacity
-      activeOpacity={1}
-      onPress={onFocusInput}
-      style={[style, styles.otpWrapper]}
-      accessibilityLabel={accessibilityLabel}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </TouchableOpacity>
-  );
-};
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
+    );
+  },
+);
 
 export default InputOTP;

package/Input/InputSearch.tsx

@@ -25,10 +25,10 @@ const InputSearch = forwardRef(
       icon,
       buttonText = 'Hủy',
       showButtonText = true,
-      showBorder = true,
       style,
       defaultValue,
       onPressButtonText,
+        hasColorBG = true,
       ...props
     }: InputSearchProps,
     ref,
@@ -37,7 +37,6 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -63,8 +62,7 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          accessibilityLabel={accessibilityLabel}
-          textAlignVertical="top"
+          textAlignVertical="center"
           ref={inputRef}
           style={[
             styles.searchInput,
@@ -118,19 +116,17 @@ const InputSearch = forwardRef(
         </View>
       );
     };
+
+    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+
     return (
-      <View
-        style={[style, styles.searchInputContainer]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.searchInputContainer]}>
         <View
           style={[
             styles.searchInputWrapper,
             {
-              backgroundColor: theme.colors.background.surface,
-              borderColor: theme.colors.background.surface,
-            },
-            showBorder && {borderColor: theme.colors.border.default},
-            focused && {borderColor: theme.colors.primary},
+              backgroundColor,
+            }
           ]}>
           <Icon
             source={'navigation_search'}
@@ -142,7 +138,7 @@ const InputSearch = forwardRef(
         </View>
         {showButtonText && (
           <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default'} style={styles.textButton}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
               {buttonText}
             </Text>
           </TouchableOpacity>