@momo-kits/foundation 0.76.1-beta.2 → 0.77.1-optimize.2

package/Input/common.tsx

@@ -1,10 +1,11 @@
-import {View} from 'react-native';
-import styles from './styles';
-import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
+import {View, ViewStyle} from 'react-native';
 import {ApplicationContext} from '../Application';
-import {Icon} from '../Icon';
+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;
@@ -12,18 +13,25 @@ type FloatingViewProps = {
   disabled?: boolean;
   floatingIcon?: string;
   required?: boolean;
+  style?: ViewStyle;
 };
 
-export const DEFAULT_HEIGHT = 112;
+export interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  setText: (text: string) => void;
+}
+
+export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (
+  theme: Theme,
   focused: boolean,
   errorMessage?: string,
   disabled?: boolean,
 ) => {
-  const {theme} = useContext(ApplicationContext);
-
   let borderColor = theme.colors.border.default;
 
   if (focused) {
@@ -47,26 +55,39 @@ export const getSizeStyle = (size?: 'small' | 'large') => {
   }
   return styles.container;
 };
-export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
+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={1}
-          typography={'description_s'}>
-          {errorMessage}
+          color={errorMessage ? errorColor : hintColor}
+          numberOfLines={2}
+          typography={'description_default_regular'}>
+          {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );
   }
-  return null;
+  if (errorSpacing) {
+    return <View style={[styles.errorView, {height: 18}]} />;
+  }
+  return <View />;
 };
 
 export const FloatingView: FC<FloatingViewProps> = ({
@@ -75,6 +96,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   disabled,
   floatingIcon,
   required,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -94,11 +116,14 @@ export const FloatingView: FC<FloatingViewProps> = ({
             backgroundColor: theme.colors.background.surface,
             zIndex: 10,
           },
+          style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s'}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
           {floatingValue}
           {required && (
-            <Text typography={'label_s'} color={theme.colors.error.primary}>
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
               *
             </Text>
           )}

package/Input/index.tsx

@@ -1,8 +1,10 @@
+import {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 {TextInputProps} from 'react-native';
+import InputOTP from './InputOTP';
+import InputSearch from './InputSearch';
+import InputTextArea from './InputTextArea';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -30,6 +32,11 @@ export interface InputProps extends TextInputProps {
    */
   icon?: string;
 
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
   /**
    * Optional. If `true`, the user won't be able to interact with the Input component.
    * Defaults to `false` if not provided.
@@ -41,27 +48,61 @@ export interface InputProps extends TextInputProps {
    */
   floatingIconColor?: string;
 
-  /**
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  iconColor?: string;
-
   /**
    * Optional. If `true`, the Input component is marked as required,
    * indicating that the user must provide a value before submitting a form.
    * Defaults to `false` if not provided.
    */
   required?: boolean;
+
+  /**
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
+
+  /**
+   *  If true, the icon of input will use be show indicator loading.
+   */
+  loading?: boolean;
+
+  /**
+   *  Optional. Represents the leading icon in the Input component.
+   */
+  leadingIcon?: string;
+
+  /**
+   * Optional. Represents the color of the leading icon in the Input component.
+   */
+  leadingIconColor?: string;
+
+  /**
+   * Optional. Represents the font weight of the text in the Input component.
+   */
+  fontWeight?: 'Regular' | 'Bold';
+
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: any;
+
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
   InputProps,
   'size' | 'icon' | 'iconColor'
 >;
-type InputPropsOmitForSearch = Omit<
-  InputProps,
-  'required' | 'size' | 'errorMessage' | 'disabled'
->;
+
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
@@ -72,7 +113,7 @@ export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface InputSearchProps extends InputPropsOmitForSearch {
+export interface InputSearchProps extends TextInputProps {
   /**
    * Optional. Represents the text to be displayed on the search button within the InputSearch component.
    */
@@ -84,15 +125,160 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
    */
   showButtonText?: boolean;
 
+  onPressButtonText?: () => void;
+
   /**
-   * Optional. If `true`, a border will be displayed around the InputSearch component.
-   * Defaults to `true` if not provided.
+   * Optional. Represents the color of the icon in the Input component.
    */
-  showBorder?: boolean;
+  iconColor?: string;
 
-  onPressButtonText?: () => void;
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   *
+   */
+  hasColorBG?: boolean;
+
+  params?: any;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 
-export {Input, InputTextArea, InputSearch, InputMoney};
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
+export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the length of the OTP (One Time Password) input.
+   * Can be 2, 4, 6, 8, or 10.
+   */
+  length?: OTPInputLength;
+
+  /**
+   * Optional. Defines the data type of the OTP input.
+   * 'string' - The OTP input will be treated as a string.
+   * 'number' - The OTP input will be treated as a number.
+   */
+  dataType?: 'string' | 'number';
+
+  floatingValue: string;
+}
+
+export type CaretProps = {
+  /**
+   * Optional. The index of the caret in the input field.
+   * Represents the position where the caret is located.
+   */
+  index?: number;
+
+  /**
+   * Optional. The total length of the input field in which the caret is present.
+   * This dictates the maximum value of the 'index' property.
+   */
+  length?: number;
+};
+
+export interface InputDropDownProps extends InputProps {
+  /**
+   * Optional. Defines the size of the InputDropDown component.
+   * 'small' - A smaller, less prominent input.
+   * 'large' - A larger, more prominent input.
+   */
+  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.
+   * Defaults to `false` if not provided.
+   */
+  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.
+   */
+  params?: {
+    [key: string]: any;
+  };
+
+  /**
+   * Optional. Represents the style of the InputDropDown component.
+   */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -1,9 +1,14 @@
 import {StyleSheet} from 'react-native';
 import {Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
   //input style
-  input: {width: '100%', paddingLeft: Spacing.M, height: '100%'},
+  input: {
+    flex: 1,
+    paddingLeft: Spacing.M,
+    fontSize: scaleSize(14),
+  },
   wrapper: {
     width: '100%',
   },
@@ -11,7 +16,6 @@ export default StyleSheet.create({
     borderWidth: 1,
     borderRadius: Radius.S,
     height: 56,
-    paddingVertical: 8,
   },
   smallContainer: {
     borderRadius: Radius.S,
@@ -33,8 +37,14 @@ export default StyleSheet.create({
     marginTop: Spacing.XS,
   },
   inputView: {
-    justifyContent: 'space-between',
     flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  leadingIconContainer: {
+    marginLeft: Spacing.M,
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
   },
   iconView: {
     flexDirection: 'row',
@@ -43,8 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    width: 24,
-    height: 24,
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -65,6 +74,8 @@ export default StyleSheet.create({
     width: '100%',
     flex: 1,
     paddingRight: Spacing.XS,
+    paddingVertical: Spacing.XS,
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -89,7 +100,6 @@ export default StyleSheet.create({
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
-    borderWidth: 1,
     paddingHorizontal: Spacing.S,
     alignItems: 'center',
     flex: 1,
@@ -98,6 +108,8 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
+    fontSize: scaleSize(14),
+    paddingVertical: Spacing.XS,
   },
   searchInputView: {
     flexDirection: 'row',
@@ -116,7 +128,32 @@ export default StyleSheet.create({
     width: '100%',
     paddingLeft: Spacing.M,
     height: '100%',
-    fontSize: 20,
+    fontSize: scaleSize(20),
+    paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
+
+  //OTP
+  otpWrapper: {
+    width: '100%',
+    marginTop: Spacing.M,
+  },
+  otpInput: {
+    height: scaleSize(56),
+    borderRadius: Radius.S,
+    borderWidth: 1,
+  },
+  otpFloatingView: {
+    position: 'absolute',
+    top: scaleSize(-Spacing.M + 2),
+    alignSelf: 'center',
+    paddingHorizontal: Spacing.S,
+  },
+  otpInputsView: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });

package/Input/utils.ts

@@ -3,7 +3,7 @@ const formatNumberToMoney = (number: number, currency = '') => {
     return `0${currency}`;
   }
 
-  const array = [];
+  const array: string[] = [];
   let result = '';
   let isNegative = false;
 
@@ -23,7 +23,7 @@ const formatNumberToMoney = (number: number, currency = '') => {
       array.push(',');
       count = 0;
     } else {
-      array.push(numberString[i]);
+      array.push(numberString[i] as string);
     }
     if (count === 3 && i >= 1) {
       array.push('.');

package/Layout/Card.tsx

@@ -1,12 +1,35 @@
-import React from 'react';
-import {Dimensions, View} from 'react-native';
+import React, {Fragment, useContext} from 'react';
+import {Dimensions, View, ViewProps} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
-import {CardProps, GridContextProps} from './types';
-import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
+import {GridContextProps} from './types';
+import {GridContext, GridSystem} from './index';
 import Item from './Item';
+import {Image} from '../Image';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
 
-const Card: React.FC<CardProps> = ({children, style}) => {
+export interface CardProps extends ViewProps {
+  /**
+   * Optional. Background image for the card.
+   */
+  backgroundImage?: string;
+
+  /**
+   * Optional. Use shadow for the card.
+   */
+  useShadow?: boolean;
+}
+
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+  ...props
+}) => {
+  const {showGrid, theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -19,29 +42,26 @@ const Card: React.FC<CardProps> = ({children, style}) => {
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
+
   /**
    * render overlay only dev mode
    */
   const renderOverlay = () => {
     return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
+      <>
+        <GridSystem
+          width={widthSection}
+          gutterSize={Spacing.S}
+          screenGrid={false}
+          gridColor={Colors.red_01}
+        />
+        <View pointerEvents={'none'} style={styles.boxGridCard} />
+      </>
     );
   };
 
@@ -88,8 +108,9 @@ const Card: React.FC<CardProps> = ({children, style}) => {
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -105,13 +126,16 @@ const Card: React.FC<CardProps> = ({children, style}) => {
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
     }
     return element;
   };
@@ -119,19 +143,33 @@ const Card: React.FC<CardProps> = ({children, style}) => {
   return (
     <GridContext.Provider value={gridContext}>
       <View
-        accessibilityLabel={`Card`}
+        {...props}
         style={[
+          {backgroundColor: theme.colors.background.surface},
           style,
+          styles.protectedStyle,
+          styles.card,
           {
             width: widthSection,
-            marginHorizontal: gridContext.margin,
-            padding: 12,
-            flexDirection: 'row',
-            flexWrap: 'wrap',
+            marginHorizontal: margin,
           },
+          !!backgroundImage && {backgroundColor: undefined},
+          useShadow && Shadow.Light,
         ]}>
-        {renderView(validateChildren(children, [Item]))}
-        {GRIDVIEW && renderOverlay()}
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={[
+              styles.imageBackground,
+              {
+                width: widthSection,
+                borderRadius: Radius.M,
+              },
+            ]}
+          />
+        )}
+        {renderView(validateChildren(children, [Item, ItemList]))}
+        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );