@momo-kits/foundation 0.92.7-rc.21 → 0.92.7-rc.22

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,5 +1,10 @@
 import React, {FC, useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
+import {
+  GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Theme} from '../Application/types';
 import {Styles} from '../Consts';
@@ -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,7 +48,18 @@ 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;
   }
@@ -70,7 +87,6 @@ export const ErrorView: FC<{
         <Text
           style={Styles.flex}
           color={errorMessage ? errorColor : hintColor}
-          numberOfLines={2}
           typography={'description_default_regular'}>
           {errorMessage ?? hintTextDefault}
         </Text>
@@ -90,6 +106,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   floatingIcon,
   required,
   style,
+  onPress,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -122,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,4 +1,4 @@
-import {TextInputProps, ViewStyle} from 'react-native';
+import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
 import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
@@ -6,12 +6,7 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
-export interface InputRef {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  setText: (text: string) => void;
-}
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
 export interface InputProps extends TextInputProps {
   /**
@@ -35,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.
@@ -89,11 +107,6 @@ export interface InputProps extends TextInputProps {
    */
   fontWeight?: 'Regular' | 'Bold';
 
-  /**
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressIcon?: () => void;
-
   /**
    * Optional. params for element tracking.
    */
@@ -103,16 +116,11 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents text below the Input component.
    */
   hintText?: string;
-}
-
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
 
-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.
@@ -132,31 +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;
+
+  /**
+   * 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.
    */
   hasColorBG?: boolean;
 
+  /**
+   * Optional. Represents the style of the InputSearch component.
+   */
   params?: any;
-}
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+  /**
+   * Optional. Represents the data for typing animation.
+   */
+  typingData?: string[];
 
-export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+  /**
+   * Optional. Represents the callback function to be called when the search button is pressed.
+   * @param e
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+}
+
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
-export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+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.
@@ -187,7 +234,8 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps extends InputProps {
+export interface InputDropDownProps
+  extends Omit<InputProps, 'trailing' | 'trailingColor' | 'onPressTrailing'> {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -195,57 +243,17 @@ export interface InputDropDownProps extends InputProps {
    */
   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.
@@ -253,28 +261,6 @@ export interface InputDropDownProps extends InputProps {
    */
   required?: boolean;
 
-  /**
-   * Optional. If `true`,
-   * includes spacing when InputDropDown does not have an error message.
-   * Defaults to `false` if not provided.
-   */
-  errorSpacing?: boolean;
-
-  /**
-   * If `true`, the icon of the input will show an indicator for loading.
-   */
-  loading?: boolean;
-
-  /**
-   * Optional. Represents the leading icon in the InputDropDown component.
-   */
-  leadingIcon?: string;
-
-  /**
-   * Optional. Represents the color of the leading icon in the InputDropDown component.
-   */
-  leadingIconColor?: string;
-
   /**
    * Optional. params for element tracking.
    */
@@ -286,6 +272,15 @@ export interface InputDropDownProps extends InputProps {
    * Optional. Represents the style of the InputDropDown component.
    */
   style?: ViewStyle | ViewStyle[];
+
+  multiline?: boolean;
 }
 
+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({
@@ -8,6 +8,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingLeft: Spacing.M,
     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: {
@@ -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: scaleSize(-Spacing.M + 2),
+    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,

package/Layout/FloatingButton.tsx

@@ -34,7 +34,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
 }: FloatingButtonProps) => {
   const {theme} = useContext(ApplicationContext);
   const maxWidth = useRef(0);
-  const minWidth = size == 'small' ? 36 : 48;
+  const minWidth = size === 'small' ? 36 : 48;
   const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
@@ -84,7 +84,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     });
 
     return () => {
-      if (listener != null) {
+      if (listener) {
         animatedValue?.removeListener(listener);
       }
     };
@@ -123,7 +123,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           right: position === 'right' ? 12 : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
           width: widthAnimated,
-          height: size == 'small' ? 36 : 48,
+          height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,
           bottom,
         },

package/Layout/GridSystem.tsx

@@ -53,7 +53,7 @@ const GridSystem: React.FC<any> = ({
         {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
-              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              {index !== 0 && <View style={{width: grid.gutterSize}} />}
               <View
                 key={`Grid${index.toString()}`}
                 pointerEvents="none"

package/Layout/ItemList.tsx

@@ -20,7 +20,7 @@ const ItemList = forwardRef(
       contentContainerStyle,
       ...props
     }: ItemListProps,
-    ref,
+    ref
   ) => {
     const {gutterSize, numberOfColumns} = useContext(GridContext);
     const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
@@ -41,6 +41,7 @@ const ItemList = forwardRef(
       <FlatList
         ref={ref as React.RefObject<FlatList>}
         {...props}
+        key={`ItemList-${numColumns}`}
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}
@@ -49,7 +50,7 @@ const ItemList = forwardRef(
         contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
       />
     );
-  },
+  }
 );
 
 export default ItemList;