@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Input/InputDropDown.tsx

@@ -1,127 +1,132 @@
-import React, {forwardRef, useContext, useRef} from 'react';
+import React, {useContext} from 'react';
 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 {ApplicationContext, ComponentContext} from '../Application';
+import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {Styles} from '../Consts';
+import {ErrorView, FloatingView, getSizeStyle} from './common';
+import {InputDropDownProps} from './index';
+import styles from './styles';
 
-const InputDropDown = forwardRef(
-  (
-    {
-      value,
-      floatingValue,
-      floatingIcon,
-      size,
-      onPress,
-      placeholder,
-      errorMessage,
-      icon = 'arrow_chevron_down_small',
-      disabled,
-      floatingIconColor,
-      iconColor,
-      required,
-      errorSpacing,
-      loading,
-      leadingIcon,
-      leadingIconColor,
-      ...props
-    }: InputDropDownProps,
-    ref,
-  ) => {
-    const {theme} = useContext(ApplicationContext);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    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} />;
-      }
-    };
+const InputDropDown = ({
+  value,
+  floatingValue,
+  floatingIcon,
+  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
+}: InputDropDownProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const full = !!value || !!placeholder;
 
-    const renderInputView = () => {
-      const disabledColor = theme.colors.text.disable;
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+  const renderIcon = (color: string | undefined) => {
+    if (loading) {
+      return <Loader type={'spinner'} color={color} />;
+    }
+    if (icon) {
+      return <Icon color={color} source={icon} size={24} />;
+    }
+  };
 
-      if (disabled) {
-        textColor = disabledColor;
-        placeholderColor = disabledColor;
-        iconTintColor = disabledColor;
-      }
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
 
-      return (
-        <View
-          style={[
-            styles.inputWrapper,
-            {backgroundColor: theme.colors.background.surface},
-            getSizeStyle(size),
-            getBorderColor(theme, false, errorMessage, disabled),
-          ]}>
-          <FloatingView
-            floatingValue={floatingValue}
-            floatingIconColor={floatingIconColor}
-            disabled={disabled}
-            required={required}
-            floatingIcon={floatingIcon}
-          />
-          <View style={full ? styles.inputView : Styles.row}>
-            {!!leadingIcon && (
-              <View style={styles.leadingIconContainer}>
-                <Icon
-                  color={leadingIconColor}
-                  source={leadingIcon}
-                  size={size === 'small' ? 24 : 32}
-                />
-              </View>
-            )}
-            {full && (
-              <TextInput
-                {...props}
-                onPressIn={onPress}
-                accessibilityLabel={`TextInput`}
-                editable={false}
-                textAlignVertical="top"
-                ref={inputRef}
-                style={[
-                  styles.input,
-                  {
-                    color: textColor,
-                    fontFamily: `${theme.font}-Regular`,
-                  },
-                ]}
-                textBreakStrategy="highQuality"
-                value={value}
-                placeholder={placeholder}
-                selectionColor={theme.colors.primary}
-                placeholderTextColor={placeholderColor}
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+          getSizeStyle(size),
+          // getBorderColor(theme, false, errorMessage, disabled),
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={full ? styles.inputView : Styles.row}>
+          {!!leadingIcon && (
+            <View style={styles.leadingIconContainer}>
+              <Icon
+                color={leadingIconColor}
+                source={leadingIcon}
+                size={size === 'small' ? 24 : 32}
               />
-            )}
-          </View>
-          <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+            </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>
-      );
-    };
+        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+      </View>
+    );
+  };
 
-    return (
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName: 'InputDropDown',
+        params,
+        state: 'enabled',
+        componentLabel: floatingValue,
+        componentId: accessibilityLabel,
+      }}>
       <TouchableOpacity
         onPress={onPress}
-        style={full && styles.wrapper}
-        accessibilityLabel={`InputDropDown/${floatingValue}`}>
+        style={[style, full && styles.wrapper]}>
         {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </TouchableOpacity>
-    );
-  },
-);
-
-InputDropDown.defaultProps = {
-  size: 'small',
+    </ComponentContext.Provider>
+  );
 };
 
 export default InputDropDown;

package/Input/InputMoney.tsx

@@ -1,4 +1,11 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,11 +13,11 @@ 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';
 
 const InputMoney = forwardRef(
@@ -24,33 +31,64 @@ const InputMoney = forwardRef(
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
+      style,
+      params,
+      defaultValue = '',
+      accessibilityLabel,
+      hintText,
+      value: _value,
       ...props
     }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const [value, setValue] = useState('');
+    const inputRef = useRef<TextInput>(null);
+
+    useEffect(() => {
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
+      }
+    }, [_value]);
+
+    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 {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: _onChangeText,
+      };
+    });
+
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
@@ -91,9 +129,8 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
-              textAlignVertical="top"
               ref={inputRef}
               keyboardType={'number-pad'}
               style={[
@@ -129,13 +166,37 @@ const InputMoney = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
     return (
-      <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputMoney/${floatingValue}`}>
-        {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>
     );
   },
 );