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

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;
@@ -70,15 +70,16 @@ 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,
@@ -86,13 +87,19 @@ const InputOTP = forwardRef(
     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
@@ -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,13 +231,26 @@ 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>
     );
   },
 );

package/Input/InputSearch.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,
@@ -6,12 +12,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {InputSearchProps} from './index';
-import {ApplicationContext} from '../Application';
-import styles from './styles';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
+import {InputSearchProps} from './index';
+import styles from './styles';
 import {checkTyping} from './utils';
+import {Styles} from '../Consts';
 
 const InputSearch = forwardRef(
   (
@@ -19,24 +26,30 @@ const InputSearch = forwardRef(
       placeholder,
       onFocus,
       onBlur,
-      iconColor,
       value,
-      onChangeText,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      onChangeText,
       buttonText = 'Hủy',
       showButtonText = true,
       style,
       defaultValue,
       onPressButtonText,
-        hasColorBG = true,
+      params,
+      hasColorBG = false,
+      accessibilityLabel,
       ...props
     }: InputSearchProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -58,10 +71,23 @@ const InputSearch = forwardRef(
       onChangeText?.(text);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
+    /**
+     * Render the input view
+     */
     const renderInputView = () => {
       return (
         <TextInput
           {...props}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -81,12 +107,12 @@ const InputSearch = forwardRef(
       );
     };
 
-    const renderIconView = () => {
+    /**
+     * Render trailing icon or text
+     */
+    const renderTrailing = () => {
       return (
-        <View
-          style={{
-            flexDirection: 'row',
-          }}>
+        <View style={Styles.row}>
           {focused && haveValue && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
               <Icon
@@ -96,8 +122,10 @@ const InputSearch = forwardRef(
               />
             </TouchableOpacity>
           )}
-          {!!icon && (
-            <View style={{flexDirection: 'row'}}>
+          {!!(icon || trailing) && (
+            <TouchableOpacity
+              style={Styles.row}
+              onPress={onPressTrailing ?? onPressIcon}>
               <View
                 style={[
                   styles.divider,
@@ -107,45 +135,65 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconColor}
-                source={icon}
+                color={iconColor || trailingColor}
+                source={(icon || trailing) as string}
                 style={styles.iconSearchInput}
               />
-            </View>
+            </TouchableOpacity>
           )}
         </View>
       );
     };
 
-    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+    let inputState = 'empty';
+    if (focused) {
+      inputState = 'focus';
+    }
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+
+    const backgroundColor = hasColorBG
+      ? theme.colors.background.default
+      : theme.colors.background.surface;
 
     return (
-      <View style={[style, styles.searchInputContainer]}>
-        <View
-          style={[
-            styles.searchInputWrapper,
-            {
-              backgroundColor,
-            }
-          ]}>
-          <Icon
-            source={'navigation_search'}
-            size={24}
-            color={theme.colors.text.hint}
-          />
-          {renderInputView()}
-          {renderIconView()}
+      <ComponentContext.Provider
+        value={{
+          componentName: 'InputSearch',
+          params,
+          state: inputState,
+          componentId: accessibilityLabel,
+        }}>
+        <View style={[style, styles.searchInputContainer]}>
+          <View
+            style={[
+              styles.searchInputWrapper,
+              {
+                backgroundColor,
+              },
+            ]}>
+            <Icon
+              source={'navigation_search'}
+              size={24}
+              color={theme.colors.text.hint}
+            />
+            {renderInputView()}
+            {renderTrailing()}
+          </View>
+          {showButtonText && (
+            <TouchableOpacity onPress={onPressButtonText}>
+              <Text
+                typography={'action_default_bold'}
+                style={styles.textButton}>
+                {buttonText}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
-        {showButtonText && (
-          <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default_bold'} style={styles.textButton}>
-              {buttonText}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
+      </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputSearch;

package/Input/InputTextArea.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,
@@ -6,7 +12,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {
   DEFAULT_HEIGHT,
@@ -16,8 +23,7 @@ import {
   MAX_LENGTH,
 } from './common';
 import {InputTextAreaProps} from './index';
-import {Icon} from '../Icon';
-import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const InputTextArea = forwardRef(
   (
@@ -38,6 +44,7 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
+      hintText,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -45,7 +52,7 @@ const InputTextArea = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -67,6 +74,15 @@ const InputTextArea = forwardRef(
       onBlur?.(e);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
@@ -150,7 +166,11 @@ const InputTextArea = forwardRef(
     return (
       <View style={[style, styles.wrapper]}>
         {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </View>
     );
   },

package/Input/common.tsx

@@ -1,11 +1,16 @@
-import {View, ViewStyle} from 'react-native';
-import styles from './styles';
-import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
+import {
+  GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {ApplicationContext} from '../Application';
-import {Icon} from '../Icon';
-import {Styles} from '../Consts';
 import {Theme} from '../Application/types';
+import {Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import styles from './styles';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -14,6 +19,7 @@ type FloatingViewProps = {
   floatingIcon?: string;
   required?: boolean;
   style?: ViewStyle;
+  onPress?: (e: GestureResponderEvent) => void;
 };
 
 export const DEFAULT_HEIGHT = scaleSize(104);
@@ -23,7 +29,7 @@ export const getBorderColor = (
   theme: Theme,
   focused: boolean,
   errorMessage?: string,
-  disabled?: boolean,
+  disabled?: boolean
 ) => {
   let borderColor = theme.colors.border.default;
 
@@ -42,30 +48,47 @@ export const getBorderColor = (
   return {borderColor};
 };
 
-export const getSizeStyle = (size?: 'small' | 'large') => {
+export const getSizeStyle = (
+  size?: 'small' | 'large',
+  multiline: boolean = false
+) => {
+  if (multiline)
+    return [
+      styles.multilineContainer,
+      {
+        minHeight: size === 'small' ? 48 : 56,
+      },
+    ];
+
   if (size === 'small') {
     return styles.smallContainer;
   }
   return styles.container;
 };
-export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
-  errorMessage,
-  errorSpacing,
-}) => {
+export const ErrorView: FC<{
+  errorMessage?: string;
+  errorSpacing?: boolean;
+  hintText?: string;
+}> = ({errorMessage, errorSpacing, hintText}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
-  if (errorMessage) {
+  const hintColor = theme.colors.text.hint;
+  const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
+  if (errorMessage || hintText) {
     return (
       <View style={styles.errorView}>
         <View style={styles.errorIcon}>
-          <Icon color={errorColor} source="ic_error" size={16} />
+          <Icon
+            color={errorMessage ? errorColor : hintColor}
+            source="ic_error"
+            size={16}
+          />
         </View>
         <Text
           style={Styles.flex}
-          color={errorColor}
-          numberOfLines={2}
+          color={errorMessage ? errorColor : hintColor}
           typography={'description_default_regular'}>
-          {errorMessage}
+          {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );
@@ -83,6 +106,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   floatingIcon,
   required,
   style,
+  onPress,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -115,12 +139,14 @@ export const FloatingView: FC<FloatingViewProps> = ({
           )}
         </Text>
         {!!floatingIcon && (
-          <Icon
-            color={floatingIconTintColor}
-            source={floatingIcon}
-            size={16}
-            style={styles.floatingIcon}
-          />
+          <TouchableOpacity activeOpacity={onPress ? 0.6 : 1} onPress={onPress}>
+            <Icon
+              color={floatingIconTintColor}
+              source={floatingIcon}
+              size={16}
+              style={styles.floatingIcon}
+            />
+          </TouchableOpacity>
         )}
       </View>
     );