npm - @momo-kits/foundation - Versions diffs - 0.77.8-beta.4 → 0.77.8-beta.5 - Mend

@momo-kits/foundation 0.77.8-beta.4 → 0.77.8-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/Application/ModalScreen.tsx +6 -33
package/Application/types.ts +1 -1
package/Button/index.tsx +20 -0
package/Input/Input.tsx +126 -107
package/Input/InputMoney.tsx +118 -111
package/Input/InputSearch.tsx +129 -124
package/Input/InputTextArea.tsx +126 -119
package/Input/index.tsx +5 -0
package/Loader/DotLoader.tsx +10 -12
package/Loader/Loader.tsx +3 -4
package/Loader/Spinner.tsx +8 -10
package/Loader/types.ts +2 -0
package/Text/utils.ts +1 -1
package/package.json +1 -1

package/Application/ModalScreen.tsx CHANGED Viewed

@@ -1,12 +1,6 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
+  Dimensions,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -91,10 +85,11 @@ const Modal: React.FC<ModalParams> = props => {
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const {height} = Dimensions.get('window');
   const {
     screen,
     options,
-    useSnap = true,
+    snapPoints = [height * 0.5, height * 0.9],
   }: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
@@ -105,31 +100,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   delete params.screen;
-  const [contentHeight, setContentHeight] = useState(undefined);
-  const snapPoints = useMemo(() => {
-    if (useSnap) {
-      return ['50%', '90%'];
-    }
-    return [contentHeight ?? '50%'];
-  }, [contentHeight]);
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
-  let handleOnLayout;
-  if (useSnap) {
-    handleOnLayout = useCallback(
-      ({
-        nativeEvent: {
-          layout: {height},
-        },
-      }) => {
-        setContentHeight(height);
-      },
-      [],
-    );
-  }
   let backgroundColor = theme.colors.background.default;
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
@@ -154,7 +127,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
         ref={bottomSheetRef}
-        snapPoints={snapPoints}
+        snapPoints={snapPoints?.map(item => item + 68)}
         onDismiss={() => {
           if (mountedRef.current) {
             navigator?.pop();
@@ -162,7 +135,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
+        <View accessibilityLabel={'BottomSheet'}>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View

package/Application/types.ts CHANGED Viewed

@@ -108,7 +108,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  useSnap?: boolean;
+  snapPoints?: ReadonlyArray<number>;
 }
 export type NavigationButtonProps = {

package/Button/index.tsx CHANGED Viewed

@@ -11,6 +11,7 @@ import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
+import {Loader} from '../Loader';
 export interface ButtonProps extends TouchableOpacityProps {
   /**
@@ -55,6 +56,11 @@ export interface ButtonProps extends TouchableOpacityProps {
    */
   useTintColor?: boolean;
+  /**
+   *  If true, the icon of button will use be show indicator loading.
+   */
+  loading?: boolean;
   /**
    *  A callback function that is called when the button is pressed.
    */
@@ -68,6 +74,7 @@ const Button: FC<ButtonProps> = ({
   full = true,
   iconRight,
   iconLeft,
+  loading = false,
   title = 'Button',
   onPress,
   ...rest
@@ -223,6 +230,19 @@ const Button: FC<ButtonProps> = ({
   const renderTrailing = () => {
     const marginLeft = getIconSpace();
     const color = useTintColor ? getTextColor() : undefined;
+    if (loading) {
+      const iconSize = getIconSize();
+      const color = getTextColor();
+      return (
+        <View
+          style={[
+            styles.trailing,
+            {width: iconSize, height: iconSize, marginLeft},
+          ]}>
+          <Loader type="spinner" color={color} />
+        </View>
+      );
+    }
     if (iconRight) {
       const iconSize = getIconSize();
       return (

package/Input/Input.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -12,125 +12,144 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
+import {Loader} from '../Loader';
-const Input: FC<InputProps> = ({
-  value,
-  onChangeText,
-  floatingValue,
-  floatingIcon,
-  size,
-  placeholder,
-  onBlur,
-  onFocus,
-  errorMessage,
-  icon,
-  disabled,
-  floatingIconColor,
-  iconColor,
-  required,
-  errorSpacing,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+const Input: FC<InputProps> = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size,
+      placeholder,
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      disabled,
+      floatingIconColor,
+      iconColor,
+      required,
+      errorSpacing,
+      loading,
+      ...props
+    },
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-  const inputRef = useRef<any>(null);
+    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 _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 renderIcon = (color: string | undefined) => {
+      if (loading) {
+        return <Loader type={'spinner'} color={color} />;
+      }
+      if (icon) {
+        return <Icon color={color} source={icon} size={24} />;
+      }
+    };
-  const renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = iconColor;
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
-    }
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
-    return (
-      <View
-        style={[
-          styles.inputWrapper,
-          {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
-          getBorderColor(theme, focused, errorMessage, disabled),
-        ]}>
-        <FloatingView
-          floatingValue={floatingValue}
-          floatingIconColor={floatingIconColor}
-          disabled={disabled}
-          required={required}
-          floatingIcon={floatingIcon}
-        />
-        <View style={styles.inputView}>
-          <TextInput
-            {...props}
-            accessibilityLabel={`TextInput`}
-            editable={!disabled}
-            textAlignVertical="top"
-            ref={inputRef}
-            style={[
-              styles.input,
-              {
-                color: textColor,
-                fontFamily: `${theme.font}-Regular`,
-              },
-            ]}
-            textBreakStrategy="highQuality"
-            value={value}
-            onChangeText={_onChangeText}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
-            placeholder={placeholder}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
           />
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              accessibilityLabel={`TextInput`}
+              editable={!disabled}
+              textAlignVertical="top"
+              ref={inputRef}
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-Regular`,
+                },
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {focused && haveValue && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            {renderIcon(iconTintColor)}
+          </View>
         </View>
-        <View style={styles.iconView}>
-          {focused && haveValue && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && <Icon color={iconTintColor} source={icon} size={24} />}
-        </View>
+      );
+    };
+    return (
+      <View
+        style={styles.wrapper}
+        accessibilityLabel={`Input/${floatingValue}`}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>
     );
-  };
-  return (
-    <View style={styles.wrapper} accessibilityLabel={`Input/${floatingValue}`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </View>
-  );
-};
+  },
+);
 Input.defaultProps = {
   size: 'small',

package/Input/InputMoney.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -13,124 +13,131 @@ import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-const InputMoney: FC<InputMoneyProps> = ({
-  onChangeText,
-  floatingValue,
-  floatingIcon,
-  size = 'small',
-  onBlur,
-  onFocus,
-  errorMessage,
-  icon,
-  disabled,
-  floatingIconColor,
-  iconColor,
-  required,
-  errorSpacing,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef<any>(null);
-  const [value, setValue] = useState('');
-  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, 'đ'));
-    onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
-  };
+const InputMoney: FC<InputMoneyProps> = forwardRef(
+  (
+    {
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      disabled,
+      floatingIconColor,
+      iconColor,
+      required,
+      errorSpacing,
+      ...props
+    },
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const [value, setValue] = useState('');
+    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, 'đ'));
+      onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
+    };
-  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 renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = iconColor;
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
-    }
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
-    return (
-      <View
-        style={[
-          styles.inputWrapper,
-          {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
-          getBorderColor(theme, focused, errorMessage, disabled),
-        ]}>
-        <FloatingView
-          floatingValue={floatingValue}
-          floatingIconColor={floatingIconColor}
-          disabled={disabled}
-          required={required}
-          floatingIcon={floatingIcon}
-        />
-        <View style={styles.inputView}>
-          <TextInput
-            {...props}
-            accessibilityLabel={`TextInput`}
-            editable={!disabled}
-            textAlignVertical="top"
-            ref={inputRef}
-            keyboardType={'number-pad'}
-            style={[
-              styles.moneyInput,
-              {
-                color: textColor,
-              },
-            ]}
-            value={value}
-            onChangeText={_onChangeText}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
-            placeholder={'0đ'}
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
           />
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              accessibilityLabel={`TextInput`}
+              editable={!disabled}
+              textAlignVertical="top"
+              ref={inputRef}
+              keyboardType={'number-pad'}
+              style={[
+                styles.moneyInput,
+                {
+                  color: textColor,
+                },
+              ]}
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              placeholder={'0đ'}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {focused && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            {!!icon && <Icon color={iconTintColor} source={icon} />}
+          </View>
         </View>
-        <View style={styles.iconView}>
-          {focused && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && <Icon color={iconTintColor} source={icon} />}
-        </View>
+      );
+    };
+    return (
+      <View
+        style={styles.wrapper}
+        accessibilityLabel={`InputMoney/${floatingValue}`}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>
     );
-  };
-  return (
-    <View
-      style={styles.wrapper}
-      accessibilityLabel={`InputMoney/${floatingValue}`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </View>
-  );
-};
+  },
+);
 export default InputMoney;

package/Input/InputSearch.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -13,141 +13,146 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 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: FC<InputSearchProps> = forwardRef(
+  (
+    {
+      placeholder,
+      onFocus,
+      onBlur,
+      iconColor,
+      value,
+      onChangeText,
+      icon,
+      buttonText = 'Hủy',
+      showButtonText = true,
+      showBorder = true,
+      style,
+      defaultValue,
+      onPressButtonText,
+      ...props
+    },
+    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>();
+    let iconTintColor = iconColor;
-  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 renderInputView = () => {
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
+    const renderInputView = () => {
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
-    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}
-      />
-    );
-  };
+      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 renderIconView = () => {
+    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={iconTintColor}
+                source={icon}
+                style={styles.iconSearchInput}
+              />
+            </View>
+          )}
+        </View>
+      );
+    };
     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}
-            />
+        style={[style, styles.searchInputContainer]}
+        accessibilityLabel={`InputSearch/${placeholder}`}>
+        <View
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor: theme.colors.background.surface,
+              borderColor: theme.colors.background.surface,
+            },
+            showBorder && {borderColor: theme.colors.border.default},
+            focused && {borderColor: theme.colors.primary},
+          ]}>
+          <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>
         )}
-        {!!icon && (
-          <View style={{flexDirection: 'row'}}>
-            <View
-              style={[
-                styles.divider,
-                {
-                  backgroundColor: theme.colors.primary,
-                },
-              ]}
-            />
-            <Icon
-              color={iconTintColor}
-              source={icon}
-              style={styles.iconSearchInput}
-            />
-          </View>
-        )}
       </View>
     );
-  };
-  return (
-    <View
-      style={[style, styles.searchInputContainer]}
-      accessibilityLabel={`InputSearch/${placeholder}`}>
-      <View
-        style={[
-          styles.searchInputWrapper,
-          {
-            backgroundColor: theme.colors.background.surface,
-            borderColor: theme.colors.background.surface,
-          },
-          showBorder && {borderColor: theme.colors.border.default},
-          focused && {borderColor: theme.colors.primary},
-        ]}>
-        <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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -19,135 +19,142 @@ import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
-const InputTextArea: FC<InputTextAreaProps> = ({
-  errorMessage,
-  onChangeText,
-  floatingIconColor,
-  floatingIcon,
-  floatingValue,
-  onFocus,
-  onBlur,
-  disabled,
-  value,
-  defaultValue,
-  height,
-  placeholder,
-  maxLength,
-  required,
-  errorSpacing,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [inputValue, setInputValue] = useState(defaultValue ?? '');
-  const inputRef = useRef<any>(null);
+const InputTextArea: FC<InputTextAreaProps> = forwardRef(
+  (
+    {
+      errorMessage,
+      onChangeText,
+      floatingIconColor,
+      floatingIcon,
+      floatingValue,
+      onFocus,
+      onBlur,
+      disabled,
+      value,
+      defaultValue,
+      height,
+      placeholder,
+      maxLength,
+      required,
+      errorSpacing,
+      ...props
+    },
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-  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;
+    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;
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-    }
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+      }
-    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}
-              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}
+                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}
               />
-            </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={styles.wrapper}
+        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>
     );
-  };
-  return (
-    <View
-      style={styles.wrapper}
-      accessibilityLabel={`InputTextArea/${floatingValue}`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </View>
-  );
-};
+  },
+);
 InputTextArea.defaultProps = {
   maxLength: MAX_LENGTH,

package/Input/index.tsx CHANGED Viewed

@@ -59,6 +59,11 @@ export interface InputProps extends TextInputProps {
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
+  /**
+   *  If true, the icon of input will use be show indicator loading.
+   */
+  loading?: boolean;
 }
 type InputPropsWithoutSizeAndIcon = Omit<

package/Loader/DotLoader.tsx CHANGED Viewed

@@ -1,17 +1,17 @@
 import React, {FC, useContext} from 'react';
-import {View, ViewProps} from 'react-native';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/DotAnimation.json';
 import {ApplicationContext} from '../Application';
 import {hexToRGBA} from './utils';
+import {LoaderProps} from './types';
-const DotLoader: FC<ViewProps> = ({style}) => {
+const DotLoader: FC<LoaderProps> = ({color}) => {
   const {theme} = useContext(ApplicationContext);
   const arrayColor = [
-    theme.colors.primary,
-    theme.colors.secondary,
-    theme.colors.primary,
+    color ?? theme.colors.primary,
+    theme.colors.background.surface,
+    color ?? theme.colors.primary,
   ];
   let source: any = animation;
@@ -26,13 +26,11 @@ const DotLoader: FC<ViewProps> = ({style}) => {
   });
   return (
-    <View style={style}>
-      <AnimatedLottieView
-        source={source}
-        style={{width: 52, height: 18}}
-        autoPlay
-      />
-    </View>
+    <AnimatedLottieView
+      source={source}
+      style={{width: 52, height: 18}}
+      autoPlay
+    />
   );
 };

package/Loader/Loader.tsx CHANGED Viewed

@@ -3,12 +3,11 @@ import {LoaderProps} from './types';
 import DotLoader from './DotLoader';
 import Spinner from './Spinner';
-const Loader: FC<LoaderProps> = ({type = 'dot', style}) => {
+const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => {
   if (type === 'spinner') {
-    return <Spinner style={style} />;
+    return <Spinner {...props} key={props.color} />;
   }
-  return <DotLoader style={style} />;
+  return <DotLoader {...props} key={props.color} />;
 };
 export default Loader;

package/Loader/Spinner.tsx CHANGED Viewed

@@ -1,30 +1,28 @@
 import React, {FC, useContext} from 'react';
-import {View, ViewProps} from 'react-native';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/SpinnerAnimation.json';
 import {hexToRGBA} from './utils';
 import {ApplicationContext} from '../Application';
+import {LoaderProps} from './types';
-const Spinner: FC<ViewProps> = ({style}) => {
+const Spinner: FC<LoaderProps> = ({color}) => {
   const {theme} = useContext(ApplicationContext);
   let source: any = animation;
   source.assets[0].layers.forEach((layer: any) => {
     layer.shapes[0].it.forEach((item: any) => {
       if (item.ty === 'fl' && item.c) {
-        item.c.k = hexToRGBA(theme.colors.primary);
+        item.c.k = hexToRGBA(color ?? theme.colors.primary);
       }
     });
   });
   return (
-    <View style={style}>
-      <AnimatedLottieView
-        source={source}
-        style={{width: 24, height: 24}}
-        autoPlay
-      />
-    </View>
+    <AnimatedLottieView
+      source={source}
+      style={{width: 24, height: 24}}
+      autoPlay
+    />
   );
 };

package/Loader/types.ts CHANGED Viewed

@@ -2,10 +2,12 @@ import {ViewStyle} from 'react-native';
 export type LoaderProps = {
   type?: 'dot' | 'spinner';
+  color?: string;
   style?: ViewStyle | ViewStyle[];
 };
 export type ProgressBarProps = {
   percent: number;
+  color?: string;
   style?: ViewStyle | ViewStyle[];
 };

package/Text/utils.ts CHANGED Viewed

@@ -6,7 +6,7 @@ const scaleSize = (size: number) => {
   const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
   if (scaleRate > 1) {
-    return Math.min(Math.round(size * scaleRate), size + 5);
+    return Math.min(Math.round(size * scaleRate), size + 3);
   }
   return size;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.8-beta.04",
+    "version": "0.77.8-beta.05",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {