@momo-kits/foundation 0.92.29-optimize.4 → 0.92.29-optimize.6

package/Application/Components.tsx

@@ -338,7 +338,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item);
+        navigator?.toolkitCallback?.(item.key);
         getToolkitConfig();
       }
     );

package/Application/Navigator.ts

@@ -12,7 +12,7 @@ class Navigator {
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
-  toolkitCallback?: (item: any) => void;
+  toolkitCallback?: (key: string) => void;
 
   constructor(navigation: any, isReady: any) {
     this.ref = navigation;
@@ -78,7 +78,7 @@ class Navigator {
         StackActions.push('Modal', {
           ...params,
           isBottomSheet: true,
-        }),
+        })
       );
     }
   };
@@ -103,7 +103,7 @@ class Navigator {
         CommonActions.navigate({
           name,
           params,
-        }),
+        })
       );
     }
   };
@@ -124,7 +124,7 @@ class Navigator {
               params,
             },
           ],
-        }),
+        })
       );
     }
   };
@@ -141,9 +141,7 @@ class Navigator {
    * set callback function for toolkit
    * @param callback
    */
-  setToolkitCallback = (
-    callback: (item: {key: string; action: string}) => void,
-  ) => {
+  setToolkitCallback = (callback: (key: string) => void) => {
     this.toolkitCallback = callback;
   };
 }

package/Input/Input.tsx

@@ -59,6 +59,7 @@ const Input = forwardRef(
       hintText,
       accessibilityLabel,
       editable = true,
+      onPressFloatingIcon,
       ...props
     }: InputProps,
     ref
@@ -189,6 +190,7 @@ const Input = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (

package/Input/InputDropDown.tsx

@@ -1,77 +1,36 @@
-import React, {ReactNode, useContext} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
+import React, {useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
-import {Loader} from '../Loader';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import {Text} from '../Text';
 import styles from './styles';
+import {Spacing} from '../Consts';
 
 const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
+  onPressFloatingIcon,
   size = 'small',
   onPress,
   placeholder,
   errorMessage,
-  icon = 'arrow_chevron_down_small',
-  iconColor,
-  onPressIcon,
-  trailing = 'arrow_chevron_down_small',
-  trailingColor,
-  onPressTrailing,
   disabled = false,
   floatingIconColor,
   required = false,
   errorSpacing,
-  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
   params,
   accessibilityLabel,
   hintText,
-  ...props
+  multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
 
-  /**
-   * Render trailing icon or text
-   * @param color
-   */
-  const renderTrailing = (color?: string) => {
-    if (loading) {
-      return <Loader type={'spinner'} color={color} style={styles.icon} />;
-    }
-    if (icon || trailing) {
-      const renderIconTouchable = (icon: ReactNode) => {
-        return (
-          <TouchableOpacity
-            onPress={onPressTrailing ?? onPressIcon}
-            style={styles.icon}>
-            {icon}
-          </TouchableOpacity>
-        );
-      };
-      const trailingValue = icon || trailing;
-      if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
-        return renderIconTouchable(
-          <Icon color={color} source={(icon || trailing) as string} size={24} />
-        );
-      }
-      return renderIconTouchable(
-        <Text
-          typography="action_xs_bold"
-          color={color ?? theme.colors.primary}
-          numberOfLines={1}>
-          {trailingValue!.substring(0, 15)}
-        </Text>
-      );
-    }
-  };
-
   /**
    * Render the input view
    */
@@ -79,20 +38,18 @@ const InputDropDown = ({
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = trailingColor ?? iconColor;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
     }
 
     return (
       <View
         style={[
-          styles.inputWrapper,
+          styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
+          getSizeStyle(size, multiline),
           getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
@@ -101,10 +58,18 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
         />
-        <View style={styles.inputView}>
+        <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
-            <View style={styles.leadingIconContainer}>
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginTop: Spacing.M,
+                  marginRight: Spacing.S,
+                },
+              ]}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -112,26 +77,27 @@ const InputDropDown = ({
               />
             </View>
           )}
-          <TextInput
-            {...props}
+          <View
             accessibilityLabel={accessibilityLabel}
-            onPressOut={onPress}
-            editable={false}
-            style={[
-              styles.input,
-              {
-                color: textColor,
-                fontFamily: `${theme.font}-Regular`,
-              },
-            ]}
-            textBreakStrategy="highQuality"
-            value={value}
-            placeholder={placeholder}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
-          />
+            style={styles.textViewDropDown}>
+            <Text
+              numberOfLines={multiline ? undefined : 1}
+              typography={'body_default_regular'}
+              color={value ? textColor : placeholderColor}>
+              {value || placeholder}
+            </Text>
+          </View>
+        </View>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            {
+              alignItems: multiline ? 'flex-start' : 'center',
+              paddingTop: multiline ? Spacing.M : 0,
+            },
+          ]}>
+          <Icon source={'arrow_chevron_down_small'} />
         </View>
-        <View style={styles.iconView}>{renderTrailing(iconTintColor)}</View>
       </View>
     );
   };
@@ -145,7 +111,10 @@ const InputDropDown = ({
         componentLabel: floatingValue,
         componentId: accessibilityLabel,
       }}>
-      <TouchableOpacity onPress={onPress} style={[style, styles.wrapper]}>
+      <TouchableOpacity
+        activeOpacity={0.6}
+        onPress={onPress}
+        style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/InputMoney.tsx

@@ -50,6 +50,7 @@ const InputMoney = forwardRef(
       accessibilityLabel,
       hintText,
       value: _value,
+      onPressFloatingIcon,
       ...props
     }: InputMoneyProps,
     ref
@@ -173,6 +174,7 @@ const InputMoney = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             <TextInput

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';
@@ -116,6 +116,8 @@ 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'> {
@@ -221,7 +223,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.
@@ -258,6 +261,8 @@ export interface InputDropDownProps extends InputProps {
    * Optional. Represents the style of the InputDropDown component.
    */
   style?: ViewStyle | ViewStyle[];
+
+  multiline?: boolean;
 }
 
 export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -157,4 +157,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.29-optimize.4",
+    "version": "0.92.29-optimize.6",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -14,12 +14,12 @@
         "react-native-gesture-handler": "1.10.3",
         "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
-        "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
+        "@react-navigation/bottom-tabs": "https://oauth2:5WXQLHPMxxCyvGt_Py4D@gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
-        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
+        "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {
         "react-native": "*"