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

package/Input/index.tsx

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

package/Input/styles.ts

@@ -1,5 +1,5 @@
-import {Platform, StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
@@ -7,8 +7,7 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(14),
-    height: '100%',
+    fontSize: scaleSize(15),
   },
   wrapper: {
     width: '100%',
@@ -29,12 +28,12 @@ export default StyleSheet.create({
     left: Spacing.S,
     paddingHorizontal: Spacing.S,
     flexDirection: 'row',
-    alignItems: 'center',
   },
   floatingIcon: {marginLeft: Spacing.XS},
-  errorIcon: {marginRight: Spacing.XS, marginTop: Spacing.XXS},
+  errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',
+    alignItems: 'center',
     marginTop: Spacing.XS,
   },
   inputView: {
@@ -54,7 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    marginLeft: Spacing.S,
+    marginLeft: Spacing.S
   },
   iconWrapper: {
     width: 24,
@@ -76,7 +75,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(14),
+    fontSize: scaleSize(15),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -109,7 +108,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(14),
+    fontSize: scaleSize(15),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {
@@ -133,27 +132,20 @@ 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: 56,
+    height: scaleSize(56),
     borderRadius: Radius.S,
     borderWidth: 1,
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.M + 2,
+    top: -Spacing.S,
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },
@@ -164,33 +156,4 @@ 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,7 +144,6 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
-        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

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,7 +41,6 @@ const ItemList = forwardRef(
       <FlatList
         ref={ref as React.RefObject<FlatList>}
         {...props}
-        key={`ItemList-${numColumns}`}
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}
@@ -50,7 +49,7 @@ const ItemList = forwardRef(
         contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
       />
     );
-  }
+  },
 );
 
 export default ItemList;