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

package/Input/TextTyping.tsx

@@ -0,0 +1,113 @@
+import React, {FC, memo, useEffect, useRef} from 'react';
+import {Platform, StyleSheet, TextInput, TextStyle} from 'react-native';
+import {Colors} from '../Consts';
+import {scaleSize} from '../Text';
+
+export interface TextTypingProps {
+  data: string[];
+  timeDelayEnd?: number;
+  timeDelayNextChar?: number;
+  inputStyle?: TextStyle;
+}
+
+const TextTyping: FC<TextTypingProps> = ({
+  data = [],
+  timeDelayEnd = 2000,
+  timeDelayNextChar = 20,
+  inputStyle = {},
+}) => {
+  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 handleAnimation = () => {
+      const listChar = data?.[currentIndex.current]?.split('') || [];
+      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
+    };
+
+    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 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, inputStyle]}
+      ref={textRef}
+      editable={false}
+      autoCorrect={false}
+      pointerEvents={'none'}
+      numberOfLines={1}
+    />
+  );
+};
+
+export default memo(TextTyping);
+
+const styles = StyleSheet.create({
+  inputStyle: {
+    color: Colors.black_12,
+    fontSize: scaleSize(12),
+    height: Platform.select({
+      android: 60,
+      ios: 36,
+    }),
+  },
+});

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>
     );

package/Input/index.tsx

@@ -1,10 +1,12 @@
+import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
-import InputTextArea from './InputTextArea';
-import InputSearch from './InputSearch';
+import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
-import InputDropDown from './InputDropDown';
-import {TextInputProps, ViewStyle} from 'react-native';
+import InputSearch from './InputSearch';
+import InputTextArea from './InputTextArea';
+
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
 export interface InputProps extends TextInputProps {
   /**
@@ -28,15 +30,38 @@ export interface InputProps extends TextInputProps {
   errorMessage?: string;
 
   /**
+   * @deprecated Use `trailing` instead.
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   icon?: string;
 
   /**
+   * @deprecated Use `trailingColor` instead.
    * Optional. Represents the color of the icon in the Input component.
    */
   iconColor?: string;
 
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  trailing?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  trailingColor?: string;
+
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressTrailing?: () => void;
+
   /**
    * Optional. If `true`, the user won't be able to interact with the Input component.
    * Defaults to `false` if not provided.
@@ -77,19 +102,25 @@ export interface InputProps extends TextInputProps {
    */
   leadingIconColor?: string;
 
+  /**
+   * Optional. Represents the font weight of the text in the Input component.
+   */
   fontWeight?: 'Regular' | 'Bold';
 
-  onPressIcon?: () => void;
-}
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: any;
 
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
 
-type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
+  onPressFloatingIcon?: (e: GestureResponderEvent) => void;
+}
 
-export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps extends Omit<InputProps, 'size'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -109,26 +140,70 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
+  /**
+   * Optional. Represents the value for the floating title in the InputSearch component.
+   */
   onPressButtonText?: () => void;
 
   /**
+   * @deprecated Use `trailing` instead.
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * @deprecated Use `trailingColor` instead.
    * Optional. Represents the color of the icon in the Input component.
    */
   iconColor?: string;
 
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
   /**
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
-  icon?: string;
+  trailing?: string;
 
-  hasColorBG?: boolean
-}
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  trailingColor?: string;
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressTrailing?: () => void;
 
-export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Input component.
+   */
+  hasColorBG?: boolean;
+
+  /**
+   * Optional. Represents the style of the InputSearch component.
+   */
+  params?: any;
+
+  /**
+   * Optional. Represents the data for typing animation.
+   */
+  typingData?: string[];
+
+  /**
+   * Optional. Represents the callback function to be called when the search button is pressed.
+   * @param e
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+}
 
-export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
+
+export interface InputOTPProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the length of the OTP (One Time Password) input.
    * Can be 2, 4, 6, 8, or 10.
@@ -141,6 +216,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {
@@ -157,7 +234,8 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps {
+export interface InputDropDownProps
+  extends Omit<InputProps, 'trailing' | 'trailingColor' | 'onPressTrailing'> {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -165,57 +243,17 @@ export interface InputDropDownProps {
    */
   size?: 'small' | 'large';
 
-  /**
-   * Optional. The current value of the InputDropDown.
-   */
-  value?: string;
-
-  /**
-   * Optional. Text that is displayed when there is no value set in the InputDropDown.
-   */
-  placeholder?: string;
-
   /**
    * Optional. Function to be called when the InputDropDown is pressed.
    */
   onPress?: () => void;
 
-  /**
-   * Optional. Represents the value for the floating title in the InputDropDown component.
-   */
-  floatingValue?: string;
-
-  /**
-   * Optional. Represents the name or key of the floating icon to be displayed in the InputDropDown component.
-   */
-  floatingIcon?: string;
-
-  /**
-   * Optional. Represents the error message to be displayed below the InputDropDown component when there is an error.
-   */
-  errorMessage?: string;
-
-  /**
-   * Optional. Represents the name or key of the icon to be displayed in the InputDropDown component.
-   */
-  icon?: string;
-
-  /**
-   * Optional. Represents the color of the icon in the InputDropDown component.
-   */
-  iconColor?: string;
-
   /**
    * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
    * Defaults to `false` if not provided.
    */
   disabled?: boolean;
 
-  /**
-   * Optional. Represents the color of the floating icon in the InputDropDown component.
-   */
-  floatingIconColor?: string;
-
   /**
    * Optional. If `true`, the InputDropDown component is marked as required,
    * indicating that the user must provide a value before submitting a form.
@@ -224,28 +262,25 @@ export interface InputDropDownProps {
   required?: boolean;
 
   /**
-   * Optional. If `true`,
-   * includes spacing when InputDropDown does not have an error message.
-   * Defaults to `false` if not provided.
+   * Optional. params for element tracking.
    */
-  errorSpacing?: boolean;
+  params?: {
+    [key: string]: any;
+  };
 
   /**
-   * If `true`, the icon of the input will show an indicator for loading.
+   * Optional. Represents the style of the InputDropDown component.
    */
-  loading?: boolean;
-
-  /**
-   * Optional. Represents the leading icon in the InputDropDown component.
-   */
-  leadingIcon?: string;
+  style?: ViewStyle | ViewStyle[];
 
-  /**
-   * Optional. Represents the color of the leading icon in the InputDropDown component.
-   */
-  leadingIconColor?: string;
-
-  style: ViewStyle | ViewStyle[];
+  multiline?: boolean;
 }
 
-export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};
+export type InputRef = {
+  clear: () => void;
+  focus: () => void | undefined;
+  blur: () => void | undefined;
+  setText: (text: string) => void;
+};
+
+export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
+import {Platform, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
@@ -7,7 +7,8 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
+    height: '100%',
   },
   wrapper: {
     width: '100%',
@@ -28,12 +29,12 @@ export default StyleSheet.create({
     left: Spacing.S,
     paddingHorizontal: Spacing.S,
     flexDirection: 'row',
+    alignItems: 'center',
   },
   floatingIcon: {marginLeft: Spacing.XS},
-  errorIcon: {marginRight: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS, marginTop: Spacing.XXS},
   errorView: {
     flexDirection: 'row',
-    alignItems: 'center',
     marginTop: Spacing.XS,
   },
   inputView: {
@@ -53,7 +54,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    marginLeft: Spacing.S
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -75,7 +76,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -108,7 +109,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {
@@ -132,20 +133,27 @@ export default StyleSheet.create({
     paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
-
+  inputStyle: {
+    color: Colors.black_12,
+    fontSize: scaleSize(12),
+    height: Platform.select({
+      android: 60,
+      ios: 36,
+    }),
+  },
   //OTP
   otpWrapper: {
     width: '100%',
     marginTop: Spacing.M,
   },
   otpInput: {
-    height: scaleSize(56),
+    height: 56,
     borderRadius: Radius.S,
     borderWidth: 1,
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: -Spacing.M + 2,
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },
@@ -156,4 +164,33 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  //DropDown
+  inputDropDownWrapper: {
+    flexDirection: 'row',
+    marginTop: Spacing.S,
+  },
+  inputDropDownView: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingLeft: Spacing.M,
+  },
+  iconViewDropDown: {
+    flexDirection: 'row',
+    marginRight: Spacing.M,
+  },
+  textViewDropDown: {
+    flex: 1,
+    marginVertical: Spacing.M,
+    marginRight: Spacing.S,
+    justifyContent: 'center',
+  },
+  multilineContainer: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+  },
+  leadingIconContainerDropDown: {
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
 });

package/Input/utils.ts

@@ -61,7 +61,7 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
 };
 const checkTyping = (text: string, value: boolean, setValue: any) => {
   let typing = text?.length > 0;
-  if (typing != value) {
+  if (typing !== value) {
     setValue(typing);
   }
 };

package/Layout/Card.tsx

@@ -86,7 +86,7 @@ const Card: React.FC<CardProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index != 0 && (
+              {index !== 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -126,14 +126,14 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i === arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type == Fragment) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }
@@ -144,6 +144,7 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,