@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Input/InputTextArea.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,7 +12,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {
   DEFAULT_HEIGHT,
@@ -16,8 +23,7 @@ import {
   MAX_LENGTH,
 } from './common';
 import {InputTextAreaProps} from './index';
-import {Icon} from '../Icon';
-import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const InputTextArea = forwardRef(
   (
@@ -29,14 +35,16 @@ const InputTextArea = forwardRef(
       floatingValue,
       onFocus,
       onBlur,
-      disabled,
+      disabled = false,
       value,
       defaultValue,
       height,
       placeholder,
-      maxLength,
+      maxLength = MAX_LENGTH,
       required,
       errorSpacing,
+      style,
+      hintText,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -44,7 +52,7 @@ const InputTextArea = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -66,10 +74,21 @@ const InputTextArea = forwardRef(
       onBlur?.(e);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
-          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
             {`${inputValue.length}/${maxLength}`}
           </Text>
         </View>
@@ -106,7 +125,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={`TextInput`}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -146,18 +164,16 @@ const InputTextArea = forwardRef(
     };
 
     return (
-      <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </View>
     );
   },
 );
 
-InputTextArea.defaultProps = {
-  maxLength: MAX_LENGTH,
-};
-
 export default InputTextArea;

package/Input/common.tsx

@@ -1,11 +1,11 @@
-import {View, ViewStyle} 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 {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;
@@ -16,7 +16,7 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
-export const DEFAULT_HEIGHT = 112;
+export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (
@@ -48,24 +48,31 @@ export const getSizeStyle = (size?: 'small' | 'large') => {
   }
   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}
+          color={errorMessage ? errorColor : hintColor}
           numberOfLines={2}
-          typography={'description_s'}>
-          {errorMessage}
+          typography={'description_default_regular'}>
+          {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );
@@ -104,10 +111,12 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           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,10 +1,10 @@
+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} from 'react-native';
+import InputSearch from './InputSearch';
+import InputTextArea from './InputTextArea';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -76,20 +76,30 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents the color of the leading icon in the Input component.
    */
   leadingIconColor?: string;
-}
 
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
+  /**
+   * 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;
 
-type InputPropsOmitForSearch = Omit<
-  InputProps,
-  'required' | 'size' | 'errorMessage' | 'disabled'
->;
-type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: any;
+
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
+}
 
-export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -97,7 +107,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.
    */
@@ -110,86 +120,131 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
   showButtonText?: boolean;
 
   /**
-   * Optional. If `true`, a border will be displayed around the InputSearch component.
-   * Defaults to `true` if not provided.
+   * Optional. Represents the value for the floating title in the InputSearch component.
    */
-  showBorder?: boolean;
-
   onPressButtonText?: () => void;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * 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;
+
+  typingData?: string[];
+  onPress?: (e: GestureResponderEvent) => void;
 }
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
-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.
+   */
   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 type InputDropDownProps = {
+export interface InputDropDownProps extends InputProps {
   /**
-   *  Optional. Defines the size of the Input component.
+   * Optional. Defines the size of the InputDropDown component.
+   * 'small' - A smaller, less prominent input.
+   * 'large' - A larger, more prominent input.
    */
   size?: 'small' | 'large';
 
   /**
-   *  Optional. Defines the value of InputDropDown.
+   * Optional. The current value of the InputDropDown.
    */
   value?: string;
 
   /**
-   *  Optional. Defines the placeholder of InputDropDown.
+   * Optional. Text that is displayed when there is no value set in the InputDropDown.
    */
   placeholder?: string;
 
   /**
-   *  Optional. Defines the onPress of InputDropDown.
+   * Optional. Function to be called when the InputDropDown is pressed.
    */
   onPress?: () => void;
+
   /**
-   * Optional. Represents the value for the floating title in the Input component.
+   * 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 Input component.
+   * 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 Input component when there is an error.
+   * 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 Input component.
+   * 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 Input component.
+   * 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 Input component.
+   * 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 Input component.
+   * Optional. Represents the color of the floating icon in the InputDropDown component.
    */
   floatingIconColor?: string;
 
   /**
-   * Optional. If `true`, the Input component is marked as required,
+   * 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.
    */
@@ -197,25 +252,37 @@ export type InputDropDownProps = {
 
   /**
    * Optional. If `true`,
-   * include spacing when Input not have error message.
+   * includes spacing when InputDropDown does not have an error message.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   *  If true, the icon of input will use be show indicator loading.
+   * If `true`, the icon of the input will show an indicator for loading.
    */
   loading?: boolean;
 
   /**
-   *  Optional. Represents the leading icon in the Input component.
+   * Optional. Represents the leading icon in the InputDropDown component.
    */
   leadingIcon?: string;
 
   /**
-   * Optional. Represents the color of the leading icon in the Input component.
+   * Optional. Represents the color of the leading icon in the InputDropDown component.
    */
   leadingIconColor?: string;
-};
 
-export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};
+  /**
+   * 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

@@ -7,8 +7,8 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
+    fontSize: scaleSize(14),
     height: '100%',
-    fontSize: scaleSize(15),
   },
   wrapper: {
     width: '100%',
@@ -54,8 +54,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    width: 24,
-    height: 24,
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -77,7 +76,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -102,7 +101,6 @@ export default StyleSheet.create({
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
-    borderWidth: 1,
     paddingHorizontal: Spacing.S,
     alignItems: 'center',
     flex: 1,
@@ -111,7 +109,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {
@@ -148,7 +146,7 @@ export default StyleSheet.create({
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: scaleSize(-Spacing.M + 2),
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },

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/AnimatedInputSearch.tsx

@@ -0,0 +1,44 @@
+import React, {FC} from 'react';
+import {InputSearch} from '../Input';
+import {Animated, Dimensions} from 'react-native';
+import {AnimatedInputSearchProps} from './types';
+import {Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+const {width: screenWidth} = Dimensions.get('window');
+const SCREEN_PADDING = 12;
+const BACK_WIDTH = scaleSize(28);
+
+const AnimatedInputSearch: FC<AnimatedInputSearchProps> = ({
+  animatedValue,
+  headerRightWidth,
+  inputSearchProps,
+}) => {
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [SCREEN_PADDING, BACK_WIDTH + SCREEN_PADDING * 2],
+    extrapolate: 'clamp',
+  });
+
+  const width = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [
+      screenWidth - SCREEN_PADDING * 2,
+      screenWidth - SCREEN_PADDING * 3 - BACK_WIDTH - headerRightWidth,
+    ],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={{
+        transform: [{translateX}],
+        marginVertical: Spacing.S,
+        width,
+      }}>
+      <InputSearch {...inputSearchProps} showButtonText={false} />
+    </Animated.View>
+  );
+};
+
+export default AnimatedInputSearch;

package/Layout/Card.tsx

@@ -7,17 +7,29 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
 
 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}) => {
-  const {showGrid} = useContext(ApplicationContext);
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+  ...props
+}) => {
+  const {showGrid, theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -30,12 +42,12 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
+
   /**
    * render overlay only dev mode
    */
@@ -74,7 +86,7 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
         {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}
@@ -96,8 +108,9 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
     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)
@@ -113,14 +126,14 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
           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) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }
@@ -130,22 +143,33 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
   return (
     <GridContext.Provider value={gridContext}>
       <View
-        accessibilityLabel={`Card`}
+        {...props}
+        onLayout={undefined}
         style={[
+          {backgroundColor: theme.colors.background.surface},
           style,
+          styles.protectedStyle,
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: gridContext.margin,
+            marginHorizontal: margin,
           },
+          !!backgroundImage && {backgroundColor: undefined},
+          useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.imageBackground]}
+            style={[
+              styles.imageBackground,
+              {
+                width: widthSection,
+                borderRadius: Radius.M,
+              },
+            ]}
           />
         )}
-        {renderView(validateChildren(children, [Item]))}
+        {renderView(validateChildren(children, [Item, ItemList]))}
         {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>