@momo-kits/foundation 0.81.49 → 0.81.51-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;
@@ -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;

package/Input/InputSearch.tsx

@@ -1,4 +1,13 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  FC,
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,127 +15,271 @@ 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 {InputRef, InputSearchProps} from './index';
+import styles from './styles';
 import {checkTyping} from './utils';
+import {Styles} from '../Consts';
+
+const TextTyping: FC<any> = ({
+  data = [],
+  timeDelayEnd = 2000,
+  timeDelayNextChar = 20,
+}) => {
+  const textRef = useRef<TextInput>(null);
 
-const InputSearch = forwardRef(
-  (
-    {
-      placeholder,
-      onFocus,
-      onBlur,
-      iconColor,
-      value,
-      onChangeText,
-      icon,
-      buttonText = 'Hủy',
-      showButtonText = true,
-      style,
-      defaultValue,
-      onPressButtonText,
-        hasColorBG = true,
-      ...props
-    }: InputSearchProps,
-    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 _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(true);
-      onFocus?.(e);
+  const currentIndex = useRef<number>(0);
+  const currentCharIndex = useRef<number>(0);
+  const currentText = useRef('');
+
+  useEffect(() => {
+    setTimeout(() => {
+      playAnimation();
+    }, 1000);
+  }, []);
+
+  const playAnimation = () => {
+    const handleResetList = () => {
+      currentIndex.current = 0;
+      handleAnimation();
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(false);
-      onBlur?.(e);
+    const handleAnimation = () => {
+      const listChar = data?.[currentIndex.current]?.split('') || [];
+      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
     };
 
-    const onClearText = () => {
-      inputRef?.current?.clear();
-      _onChangeText('');
+    currentIndex.current >= data?.length
+      ? handleResetList()
+      : handleAnimation();
+  };
+
+  const showChar = (char?: string) => {
+    const handleResetString = () => {
+      setTimeout(() => {
+        reset();
+      }, timeDelayEnd);
+    };
+
+    const handleShowChar = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current + char,
+        });
+        currentText.current += char;
+        currentCharIndex.current++;
+        playAnimation();
+      }, timeDelayNextChar);
+    };
+
+    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
+      ? handleResetString()
+      : handleShowChar();
+  };
+
+  const reset = () => {
+    const handleNextString = () => {
+      currentIndex.current++;
+      playAnimation();
     };
 
-    const _onChangeText = (text: string) => {
-      checkTyping(text, haveValue, setHaveValue);
-      onChangeText?.(text);
+    const handleReset = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current.slice(0, -1),
+        });
+        currentText.current = currentText.current.slice(0, -1);
+        currentCharIndex.current--;
+        reset();
+      }, timeDelayNextChar);
+    };
+
+    currentCharIndex.current <= 0 ? handleNextString() : handleReset();
+  };
+
+  return (
+    <TextInput
+      style={styles.inputStyle}
+      ref={textRef}
+      editable={false}
+      autoCorrect={false}
+      pointerEvents={'none'}
+      numberOfLines={1}
+    />
+  );
+};
+
+const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
+  {
+    placeholder,
+    onFocus,
+    onBlur,
+    value,
+    icon,
+    iconColor,
+    onPressIcon,
+    trailing,
+    trailingColor,
+    onPressTrailing,
+    onChangeText,
+    buttonText = 'Hủy',
+    showButtonText = true,
+    style,
+    defaultValue,
+    onPressButtonText,
+    params,
+    hasColorBG = false,
+    accessibilityLabel,
+    onPress,
+    typingData,
+    ...props
+  },
+  ref
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+  const inputRef = useRef<TextInput | null>(null);
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    _onChangeText('');
+  };
+
+  const _onChangeText = (text: string) => {
+    checkTyping(text, haveValue, setHaveValue);
+    onChangeText?.(text);
+  };
+
+  useImperativeHandle(ref, () => {
+    return {
+      clear: onClearText,
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      setText: (text: string) => _onChangeText(text),
     };
+  });
 
-    const renderInputView = () => {
+  /**
+   * Render the input view
+   */
+  const renderInputView = () => {
+    if (typingData && typingData?.length > 0) {
       return (
-        <TextInput
-          {...props}
-          textAlignVertical="center"
-          ref={inputRef}
+        <TouchableOpacity
           style={[
             styles.searchInput,
             {
-              color: theme.colors.text.default,
+              justifyContent: 'center',
             },
           ]}
-          value={value}
-          onChangeText={_onChangeText}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          placeholder={placeholder}
-          selectionColor={theme.colors.primary}
-          placeholderTextColor={theme.colors.text.hint}
-        />
+          onPress={onPress}
+          activeOpacity={onPress ? 0.6 : 1}>
+          <TextTyping data={typingData} />
+        </TouchableOpacity>
       );
-    };
+    }
 
-    const renderIconView = () => {
-      return (
-        <View
-          style={{
-            flexDirection: 'row',
-          }}>
-          {focused && haveValue && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && (
-            <View style={{flexDirection: 'row'}}>
-              <View
-                style={[
-                  styles.divider,
-                  {
-                    backgroundColor: theme.colors.primary,
-                  },
-                ]}
-              />
-              <Icon
-                color={iconColor}
-                source={icon}
-                style={styles.iconSearchInput}
-              />
-            </View>
-          )}
-        </View>
-      );
-    };
-
-    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+    return (
+      <TextInput
+        {...props}
+        accessibilityLabel={accessibilityLabel}
+        textAlignVertical="center"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: theme.colors.text.default,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={theme.colors.text.hint}
+      />
+    );
+  };
 
+  /**
+   * Render trailing icon or text
+   */
+  const renderTrailing = () => {
     return (
+      <View style={Styles.row}>
+        {focused && haveValue && (
+          <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+            <Icon
+              source="24_navigation_close_circle_full"
+              size={16}
+              color={theme.colors.text.hint}
+            />
+          </TouchableOpacity>
+        )}
+        {!!(icon || trailing) && (
+          <TouchableOpacity
+            style={Styles.row}
+            onPress={onPressTrailing ?? onPressIcon}>
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor: theme.colors.primary,
+                },
+              ]}
+            />
+            <Icon
+              color={iconColor || trailingColor}
+              source={(icon || trailing) as string}
+              style={styles.iconSearchInput}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  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 (
+    <ComponentContext.Provider
+      value={{
+        componentName: 'InputSearch',
+        params,
+        state: inputState,
+        componentId: accessibilityLabel,
+      }}>
       <View style={[style, styles.searchInputContainer]}>
         <View
           style={[
             styles.searchInputWrapper,
             {
               backgroundColor,
-            }
+            },
           ]}>
           <Icon
             source={'navigation_search'}
@@ -134,7 +287,7 @@ const InputSearch = forwardRef(
             color={theme.colors.text.hint}
           />
           {renderInputView()}
-          {renderIconView()}
+          {renderTrailing()}
         </View>
         {showButtonText && (
           <TouchableOpacity onPress={onPressButtonText}>
@@ -144,8 +297,8 @@ const InputSearch = forwardRef(
           </TouchableOpacity>
         )}
       </View>
-    );
-  },
-);
+    </ComponentContext.Provider>
+  );
+};
 
-export default InputSearch;
+export default forwardRef(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>
     );
   },