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

package/Input/InputSearch.tsx

@@ -1,13 +1,4 @@
-import React, {
-  FC,
-  forwardRef,
-  ForwardRefRenderFunction,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -15,271 +6,127 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {InputSearchProps} from './index';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 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 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 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 handleAnimation = () => {
-      const listChar = data?.[currentIndex.current]?.split('') || [];
-      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
     };
 
-    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 onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
     };
 
-    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 _onChangeText = (text: string) => {
+      checkTyping(text, haveValue, setHaveValue);
+      onChangeText?.(text);
     };
-  });
 
-  /**
-   * Render the input view
-   */
-  const renderInputView = () => {
-    if (typingData && typingData?.length > 0) {
+    const renderInputView = () => {
       return (
-        <TouchableOpacity
+        <TextInput
+          {...props}
+          textAlignVertical="center"
+          ref={inputRef}
           style={[
             styles.searchInput,
             {
-              justifyContent: 'center',
+              color: theme.colors.text.default,
             },
           ]}
-          onPress={onPress}
-          activeOpacity={onPress ? 0.6 : 1}>
-          <TextTyping data={typingData} />
-        </TouchableOpacity>
+          value={value}
+          onChangeText={_onChangeText}
+          onFocus={_onFocus}
+          onBlur={_onBlur}
+          placeholder={placeholder}
+          selectionColor={theme.colors.primary}
+          placeholderTextColor={theme.colors.text.hint}
+        />
       );
-    }
-
-    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 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;
+    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
 
-  return (
-    <ComponentContext.Provider
-      value={{
-        componentName: 'InputSearch',
-        params,
-        state: inputState,
-        componentId: accessibilityLabel,
-      }}>
+    return (
       <View style={[style, styles.searchInputContainer]}>
         <View
           style={[
             styles.searchInputWrapper,
             {
               backgroundColor,
-            },
+            }
           ]}>
           <Icon
             source={'navigation_search'}
@@ -287,7 +134,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
             color={theme.colors.text.hint}
           />
           {renderInputView()}
-          {renderTrailing()}
+          {renderIconView()}
         </View>
         {showButtonText && (
           <TouchableOpacity onPress={onPressButtonText}>
@@ -297,8 +144,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
           </TouchableOpacity>
         )}
       </View>
-    </ComponentContext.Provider>
-  );
-};
+    );
+  },
+);
 
-export default forwardRef(InputSearch);
+export default InputSearch;

package/Input/InputTextArea.tsx

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

package/Input/common.tsx

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