@momo-kits/foundation 0.76.1-beta.1 → 0.77.1-optimize.2

package/Input/InputSearch.tsx

@@ -1,4 +1,10 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,158 +12,180 @@ 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';
 
-const InputSearch: FC<InputSearchProps> = ({
-  placeholder,
-  onFocus,
-  onBlur,
-  iconColor,
-  value,
-  onChangeText,
-  icon,
-  buttonText = 'Hủy',
-  showButtonText = true,
-  showBorder = true,
-  style,
-  defaultValue,
-  onPressButtonText,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
-  const inputRef = useRef<any>(null);
-  let iconTintColor = iconColor;
+const InputSearch = forwardRef(
+  (
+    {
+      placeholder,
+      onFocus,
+      onBlur,
+      iconColor,
+      value,
+      onChangeText,
+      icon,
+      buttonText = 'Hủy',
+      showButtonText = true,
+      style,
+      defaultValue,
+      onPressButtonText,
+      params,
+      hasColorBG = false,
+      accessibilityLabel,
+      ...props
+    }: InputSearchProps,
+    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 _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
 
-  const onClearText = () => {
-    inputRef?.current?.clear();
-    _onChangeText('');
-  };
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
 
-  const _onChangeText = (text: string) => {
-    checkTyping(text, haveValue, setHaveValue);
-    onChangeText?.(text);
-  };
+    const _onChangeText = (text: string) => {
+      checkTyping(text, haveValue, setHaveValue);
+      onChangeText?.(text);
+    };
 
-  const getBorderColor = () => {
-    let borderColor = showBorder
-      ? theme.colors.border.default
-      : theme.colors.background.surface;
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
+    const renderInputView = () => {
+      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}
+        />
+      );
+    };
+
+    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>
+      );
+    };
+
+    let inputState = 'empty';
 
     if (focused) {
-      borderColor = theme.colors.primary;
+      inputState = 'focus';
     }
 
-    return {borderColor};
-  };
-
-  const renderInputView = () => {
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
 
-    return (
-      <TextInput
-        {...props}
-        accessibilityLabel={`TextInput`}
-        textAlignVertical="top"
-        ref={inputRef}
-        style={[
-          styles.searchInput,
-          {
-            color: textColor,
-          },
-        ]}
-        value={value}
-        onChangeText={_onChangeText}
-        onFocus={_onFocus}
-        onBlur={_onBlur}
-        placeholder={placeholder}
-        selectionColor={theme.colors.primary}
-        placeholderTextColor={placeholderColor}
-      />
-    );
-  };
+    const backgroundColor = hasColorBG
+      ? theme.colors.background.default
+      : theme.colors.background.surface;
 
-  const renderIconView = () => {
     return (
-      <View
-        style={{
-          flexDirection: 'row',
+      <ComponentContext.Provider
+        value={{
+          componentName: 'InputSearch',
+          params,
+          state: inputState,
+          componentId: accessibilityLabel,
         }}>
-        {focused && haveValue && (
-          <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+        <View style={[style, styles.searchInputContainer]}>
+          <View
+            style={[
+              styles.searchInputWrapper,
+              {
+                backgroundColor,
+              },
+            ]}>
             <Icon
-              source="24_navigation_close_circle_full"
-              size={16}
+              source={'navigation_search'}
+              size={24}
               color={theme.colors.text.hint}
             />
-          </TouchableOpacity>
-        )}
-        {!!icon && (
-          <View style={{flexDirection: 'row'}}>
-            <View
-              style={[
-                styles.divider,
-                {
-                  backgroundColor: theme.colors.primary,
-                },
-              ]}
-            />
-            <Icon
-              color={iconTintColor}
-              source={icon}
-              style={styles.iconSearchInput}
-            />
+            {renderInputView()}
+            {renderIconView()}
           </View>
-        )}
-      </View>
+          {showButtonText && (
+            <TouchableOpacity onPress={onPressButtonText}>
+              <Text
+                typography={'action_default_bold'}
+                style={styles.textButton}>
+                {buttonText}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </ComponentContext.Provider>
     );
-  };
-  return (
-    <View
-      style={[style, styles.searchInputContainer]}
-      accessibilityLabel={`InputSearch`}>
-      <View
-        style={[
-          getBorderColor(),
-          styles.searchInputWrapper,
-          {
-            backgroundColor: theme.colors.background.surface,
-          },
-        ]}>
-        <Icon
-          source={'navigation_search'}
-          size={24}
-          color={theme.colors.text.hint}
-        />
-        {renderInputView()}
-        {renderIconView()}
-      </View>
-      {showButtonText && (
-        <TouchableOpacity onPress={onPressButtonText}>
-          <Text typography={'action_default'} style={styles.textButton}>
-            {buttonText}
-          </Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
+  },
+);
 
 export default InputSearch;

package/Input/InputTextArea.tsx

@@ -1,4 +1,10 @@
-import React, {FC, 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,138 +23,158 @@ import {
   MAX_LENGTH,
 } from './common';
 import {InputTextAreaProps} from './index';
-import {Icon} from '../Icon';
-import {ApplicationContext} from '../Application';
+import styles from './styles';
 
-const InputTextArea: FC<InputTextAreaProps> = ({
-  errorMessage,
-  onChangeText,
-  floatingIconColor,
-  floatingIcon,
-  floatingValue,
-  onFocus,
-  onBlur,
-  disabled,
-  value,
-  defaultValue,
-  height,
-  placeholder,
-  maxLength,
-  required,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [inputValue, setInputValue] = useState(defaultValue ?? '');
-  const inputRef = useRef<any>(null);
+const InputTextArea = forwardRef(
+  (
+    {
+      errorMessage,
+      onChangeText,
+      floatingIconColor,
+      floatingIcon,
+      floatingValue,
+      onFocus,
+      onBlur,
+      disabled = false,
+      value,
+      defaultValue,
+      height,
+      placeholder,
+      maxLength = MAX_LENGTH,
+      required,
+      errorSpacing,
+      style,
+      accessibilityLabel,
+      hintText,
+      ...props
+    }: InputTextAreaProps,
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+    const inputRef = useRef<TextInput | null>(null);
 
-  const onClearText = () => {
-    inputRef?.current?.clear();
-    _onChangeText('');
-  };
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
 
-  const _onChangeText = (text: string) => {
-    onChangeText?.(text);
-    setInputValue(text);
-  };
+    const _onChangeText = (text: string) => {
+      onChangeText?.(text);
+      setInputValue(text);
+    };
 
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(true);
-    onFocus?.(e);
-  };
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
 
-  const renderCountingView = () => {
-    return (
-      <View style={styles.countingView}>
-        <Text color={theme.colors.text.hint} typography={'description_xs'}>
-          {`${inputValue.length}/${maxLength}`}
-        </Text>
-      </View>
-    );
-  };
-  const renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
+    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}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
+            {`${inputValue.length}/${maxLength}`}
+          </Text>
+        </View>
+      );
+    };
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
 
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-    }
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+      }
 
-    return (
-      <View
-        style={[
-          getBorderColor(focused, errorMessage, disabled),
-          styles.textAreaWrapper,
-          {
-            height: height || DEFAULT_HEIGHT,
-            backgroundColor: theme.colors.background.surface,
-          },
-        ]}>
-        <FloatingView
-          floatingValue={floatingValue}
-          floatingIconColor={floatingIconColor}
-          disabled={disabled}
-          floatingIcon={floatingIcon}
-          required={required}
-        />
-        <View style={styles.rowArea}>
-          <View style={styles.textAreaView}>
-            <TextInput
-              {...props}
-              accessibilityLabel={`TextInput`}
-              ref={inputRef}
-              editable={!disabled}
-              textAlignVertical="top"
-              style={[
-                styles.textArea,
-                {
-                  color: textColor,
-                },
-              ]}
-              maxLength={maxLength}
-              textBreakStrategy="highQuality"
-              multiline={true}
-              value={value}
-              onChangeText={_onChangeText}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          </View>
-          {focused && inputValue.length > 0 && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
+      return (
+        <View
+          style={[
+            styles.textAreaWrapper,
+            {
+              height: height || DEFAULT_HEIGHT,
+              backgroundColor: theme.colors.background.surface,
+            },
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            floatingIcon={floatingIcon}
+            required={required}
+          />
+          <View style={styles.rowArea}>
+            <View style={styles.textAreaView}>
+              <TextInput
+                {...props}
+                ref={inputRef}
+                editable={!disabled}
+                textAlignVertical="top"
+                style={[
+                  styles.textArea,
+                  {
+                    color: textColor,
+                  },
+                ]}
+                maxLength={maxLength}
+                textBreakStrategy="highQuality"
+                multiline={true}
+                value={value}
+                onChangeText={_onChangeText}
+                onFocus={_onFocus}
+                onBlur={_onBlur}
+                placeholder={placeholder}
+                selectionColor={theme.colors.primary}
+                placeholderTextColor={placeholderColor}
               />
-            </TouchableOpacity>
-          )}
+            </View>
+            {focused && inputValue.length > 0 && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+          {renderCountingView()}
         </View>
-        {renderCountingView()}
+      );
+    };
+
+    return (
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </View>
     );
-  };
-
-  return (
-    <View style={styles.wrapper} accessibilityLabel={`InputTextArea`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} />
-    </View>
-  );
-};
-
-InputTextArea.defaultProps = {
-  maxLength: MAX_LENGTH,
-};
+  },
+);
 
 export default InputTextArea;