@momo-kits/foundation 0.89.5 → 0.89.6-rc.2

package/Input/InputMoney.tsx

@@ -1,6 +1,8 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -12,12 +14,14 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
-import styles from './styles';
+import {ApplicationContext, ComponentContext} from '../Application';
+import {Icon} from '../Icon';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
-import {Icon} from '../Icon';
+import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {Text} from '../Text';
+import {Loader} from '../Loader';
 
 const InputMoney = forwardRef(
   (
@@ -26,24 +30,41 @@ 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 = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput>(null);
+
+    useEffect(() => {
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
+      }
+    }, [_value]);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -51,7 +72,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : '',
+      defaultValue ? validateText(defaultValue) : ''
     );
 
     const onClearText = () => {
@@ -70,6 +91,9 @@ const InputMoney = forwardRef(
 
     useImperativeHandle(ref, () => {
       return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
         setText: _onChangeText,
       };
     });
@@ -84,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;
@@ -110,12 +174,13 @@ 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={[
@@ -145,19 +210,45 @@ const InputMoney = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {!!icon && <Icon color={iconTintColor} source={icon} />}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
     return (
-      <View style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <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>
     );
-  },
+  }
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -15,12 +15,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {CaretProps, InputOTPProps} from './index';
+import {ApplicationContext, ComponentContext} from '../Application';
+import {Spacing} from '../Consts';
 import {scaleSize, Text} from '../Text';
-import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
+import {CaretProps, InputOTPProps} from './index';
+import styles from './styles';
 
 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,29 +70,36 @@ const InputOTP = forwardRef(
       length,
       errorMessage,
       errorSpacing,
-      floatingValue,
-      floatingIconColor,
-      floatingIcon,
+      floatingValue = 'Label',
       placeholder,
       onChangeText,
-      onFocus,
       onBlur,
+      onFocus,
       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);
+    const inputRef = useRef<TextInput | null>(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 = () => {
@@ -119,16 +126,16 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const renderInputs = (length: number) => {
+    const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
-      for (let i = 0; i < length; i++) {
+      for (let i = 0; i < inputLength; i++) {
         TextInputs.push(
           <View>
             {focused && value.length === i ? (
-              <OTPCaret index={i} length={length} />
+              <OTPCaret index={i} length={inputLength} />
             ) : (
               <Text
-                style={i !== length - 1 && {marginRight: Spacing.L}}
+                style={i !== inputLength - 1 && {marginRight: Spacing.L}}
                 color={
                   !!value[i]
                     ? theme.colors.text.default
@@ -140,7 +147,7 @@ const InputOTP = forwardRef(
                 {value[i] || '-'}
               </Text>
             )}
-          </View>,
+          </View>
         );
       }
       return TextInputs;
@@ -194,7 +201,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_default_regular'}>
+              <Text
+                typography={'description_default_regular'}
+                color={theme.colors.text.hint}>
                 {floatingValue}
               </Text>
             </View>
@@ -205,11 +214,12 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-              onFocus={onFocusInput}
+              onFocus={onFocus}
               onBlur={onBlurInput}
               style={{opacity: 0}}
               selectionColor={theme.colors.primary}
@@ -221,15 +231,28 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onFocusInput}
-        style={[style, styles.otpWrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
+      <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>
     );
-  },
+  }
 );
 
 export default InputOTP;