@momo-kits/foundation 0.92.30 → 0.92.32

package/Input/InputSearch.tsx

@@ -18,6 +18,7 @@ import {Text} from '../Text';
 import {InputSearchProps} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
+import {Styles} from '../Consts';
 
 const InputSearch = forwardRef(
   (
@@ -25,10 +26,14 @@ const InputSearch = forwardRef(
       placeholder,
       onFocus,
       onBlur,
-      iconColor,
       value,
-      onChangeText,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      onChangeText,
       buttonText = 'Hủy',
       showButtonText = true,
       style,
@@ -39,7 +44,7 @@ const InputSearch = forwardRef(
       accessibilityLabel,
       ...props
     }: InputSearchProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -75,6 +80,9 @@ const InputSearch = forwardRef(
       };
     });
 
+    /**
+     * Render the input view
+     */
     const renderInputView = () => {
       return (
         <TextInput
@@ -99,12 +107,12 @@ const InputSearch = forwardRef(
       );
     };
 
-    const renderIconView = () => {
+    /**
+     * Render trailing icon or text
+     */
+    const renderTrailing = () => {
       return (
-        <View
-          style={{
-            flexDirection: 'row',
-          }}>
+        <View style={Styles.row}>
           {focused && haveValue && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
               <Icon
@@ -114,8 +122,10 @@ const InputSearch = forwardRef(
               />
             </TouchableOpacity>
           )}
-          {!!icon && (
-            <View style={{flexDirection: 'row'}}>
+          {!!(icon || trailing) && (
+            <TouchableOpacity
+              style={Styles.row}
+              onPress={onPressTrailing ?? onPressIcon}>
               <View
                 style={[
                   styles.divider,
@@ -125,22 +135,20 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconColor}
-                source={icon}
+                color={iconColor || trailingColor}
+                source={(icon || trailing) as string}
                 style={styles.iconSearchInput}
               />
-            </View>
+            </TouchableOpacity>
           )}
         </View>
       );
     };
 
     let inputState = 'empty';
-
     if (focused) {
       inputState = 'focus';
     }
-
     if (value && value?.length > 0) {
       inputState = 'filled';
     }
@@ -171,7 +179,7 @@ const InputSearch = forwardRef(
               color={theme.colors.text.hint}
             />
             {renderInputView()}
-            {renderIconView()}
+            {renderTrailing()}
           </View>
           {showButtonText && (
             <TouchableOpacity onPress={onPressButtonText}>
@@ -185,7 +193,7 @@ const InputSearch = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputSearch;

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';
@@ -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.
@@ -147,8 +191,6 @@ export interface InputSearchProps extends TextInputProps {
 
 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 +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.
@@ -189,57 +232,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 +250,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 +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/Layout/Screen.tsx

@@ -121,25 +121,25 @@ const Screen = forwardRef(
       useGridLayout = true,
       keyboardVerticalOffset,
     }: ScreenProps,
-    ref,
+    ref
   ) => {
     const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const currentTint = useRef(Colors.black_01);
-    const isTab = navigation?.instance?.getState?.()?.type == 'tab';
+    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
     let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
     let keyboardOffset = heightHeader - 20;
-    if (headerType == 'extended' || animatedHeader) {
+    if (headerType === 'extended' || animatedHeader) {
       keyboardOffset = -20;
     }
 
-    if (headerType == 'extended') {
+    if (headerType === 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
 
@@ -157,7 +157,7 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type == 'surface') {
+        if (animatedHeader.type === 'surface') {
           styleAnimatedHeader = {
             ...styleAnimatedHeader,
             headerBackground: (props: any) => (
@@ -249,13 +249,13 @@ const Screen = forwardRef(
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
               scrollViewProps?.onScroll?.(e);
-              if (animatedHeader?.type == 'surface') {
+              if (animatedHeader?.type === 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
                   color = theme.colors.text.default;
                 }
-                if (color != currentTint.current) {
+                if (color !== currentTint.current) {
                   currentTint.current = color;
                   navigation?.setOptions({
                     headerTintColor: color,
@@ -263,7 +263,7 @@ const Screen = forwardRef(
                 }
               }
             },
-          },
+          }
         );
       }
     }
@@ -287,7 +287,7 @@ const Screen = forwardRef(
       if (Array.isArray(results)) {
         return results.map((item, index) => {
           const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-          if (item?.type == Fragment) {
+          if (item?.type === Fragment) {
             return renderContent(item?.props?.children);
           }
           if (item) {
@@ -307,7 +307,7 @@ const Screen = forwardRef(
       } else {
         const item: any = children;
         const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-        if (item?.type == Fragment) {
+        if (item?.type === Fragment) {
           return renderContent(item?.props?.children);
         }
         return (
@@ -387,7 +387,7 @@ const Screen = forwardRef(
         </KeyboardAvoidingView>
       </View>
     );
-  },
+  }
 );
 
 export default Screen;

package/Popup/PopupNotify.tsx

@@ -5,7 +5,7 @@ import {Button} from '../Button';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Image} from '../Image';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
@@ -27,7 +27,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = {height: 80};
+    descriptionStyle = {maxHeight: scaleSize(172)};
   }
   /**
    * tracking

package/Title/styles.ts

@@ -46,16 +46,16 @@ export default StyleSheet.create({
     marginRight: Spacing.S,
   },
   iconRight: {
-    width: scaleSize(22),
-    height: scaleSize(22),
+    width: 22,
+    height: 22,
     borderRadius: Radius.M,
     alignItems: 'center',
     justifyContent: 'center',
     marginLeft: Spacing.S,
   },
   iconLeft: {
-    width: scaleSize(18),
-    height: scaleSize(18),
+    width: 18,
+    height: 18,
     borderRadius: Radius.M,
     alignItems: 'center',
     justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.30",
+    "version": "0.92.32",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/publish.sh

@@ -1,11 +1,5 @@
 #!/bin/bash
 
-# Prepare dist files
-rm -rf dist
-mkdir dist
-rsync -r --exclude=/dist ./* dist
-cd dist
-
 if [ "$1" == "stable" ]; then
   npm version $(npm view @momo-kits/foundation@stable version)
   npm version patch
@@ -22,7 +16,3 @@ fi
 
 PACKAGE_NAME=$(npm pkg get name)
 NEW_PACKAGE_VERSION=$(npm pkg get version)
-
-# Clean up
-cd ..
-rm -rf dist