@momo-kits/foundation 0.81.1-optimize.21 → 0.81.1-rc.0

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,6 +6,8 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
 export interface InputProps extends TextInputProps {
   /**
    *  Optional. Defines the size of the Input component.
@@ -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.
@@ -82,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.
    */
@@ -96,10 +116,11 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents text below the Input component.
    */
   hintText?: string;
+
+  onPressFloatingIcon?: (e: GestureResponderEvent) => void;
 }
 
-export interface InputTextAreaProps
-  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
+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.
@@ -125,14 +146,37 @@ export interface InputSearchProps extends TextInputProps {
   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.
@@ -143,12 +187,21 @@ export interface InputSearchProps extends TextInputProps {
    * 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 InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
-export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
-
 export interface InputOTPProps
   extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
@@ -181,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.
@@ -189,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.
@@ -247,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.
    */
@@ -280,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({
@@ -29,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: {
@@ -133,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,
   },
@@ -157,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/Layout/FloatingButton.tsx

@@ -84,7 +84,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     });
 
     return () => {
-      if (listener !== null) {
+      if (listener) {
         animatedValue?.removeListener(listener);
       }
     };

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;