@momo-kits/foundation 0.81.18 → 0.81.20

package/Application/Components.tsx

@@ -7,6 +7,7 @@ import {
   StyleSheet,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
@@ -28,7 +29,6 @@ const styles = StyleSheet.create({
     height: 28,
     width: 28,
     borderRadius: 14,
-    borderColor: '#00000066',
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -92,25 +92,23 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
-  backgroundColor,
   useBorder = true,
   accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  if (!backgroundColor && tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+  let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
+  if (tintColor != Colors.black_01) {
+    buttonStyle = {
+      backgroundColor: 'transparent',
+      borderColor: '#00000066',
+      borderWidth: useBorder ? 0.5 : 0,
+    };
   }
 
   return (
     <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[
-        styles.navigationButton,
-        {
-          backgroundColor: backgroundColor ?? '#00000066',
-          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
-        },
-      ]}
+      style={[styles.navigationButton, buttonStyle]}
       onPress={onPress}>
       <Icon
         source={icon}
@@ -146,7 +144,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   useBorder,
-  backgroundColor,
   accessibilityLabel = '',
 }) => {
   const {navigator} = useContext(ApplicationContext);
@@ -214,7 +211,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         onPress={goBack}
         accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
-        backgroundColor={backgroundColor}
       />
     </View>
   );

package/Application/ModalScreen.tsx

@@ -43,7 +43,7 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalName} = props.route.params;
+  const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -53,49 +53,10 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
-  const getTrackingInfo = () => {
-    const routes = props.navigation.getState()?.routes || [];
-    const routesLength = routes.length;
-    let screen_name = routes?.[0]?.params?.screen?.name;
-    if (routesLength > 1) {
-      screen_name = routes[routesLength - 2]?.params?.screen?.name;
-    }
-    const error_code = screen?.({params: {}})?.props?.error;
-    return {
-      feature_code: navigator?.trackingInfo?.code,
-      app_id: navigator?.trackingInfo?.appId,
-      miniapp_version: navigator?.trackingInfo?.buildNumber,
-      flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
-      screen_name,
-      component_type: 'popup',
-      component_name: modalName,
-      error_code,
-    };
-  };
-
-  /**
-   * tracking
-   */
-  useEffect(() => {
-    if (navigator?.trackingInfo) {
-      navigator?.maxApi?.trackEvent('service_component_displayed', {
-        ...getTrackingInfo(),
-        trigger_id: '111012100000000000',
-      });
-    }
-  }, []);
-
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
     }
-    if (navigator?.trackingInfo) {
-      navigator?.maxApi?.trackEvent('service_popup_dismissed', {
-        ...getTrackingInfo(),
-        action_type: 'touch_outside',
-        trigger_id: '111154100000000001',
-      });
-    }
     navigator?.pop();
   };
 
@@ -239,7 +200,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                         <HeaderLeft
                           {...props}
                           useBorder={false}
-                          backgroundColor="transparent"
                           accessibilityLabel={'BottomSheet/'}
                         />
                       );
@@ -265,7 +225,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                     <NavigationButton
                       {...props}
                       icon="24_navigation_close"
-                      backgroundColor="transparent"
                       useBorder={false}
                       onPress={() => bottomSheetRef.current?.dismiss()}
                       accessibilityLabel={'BottomSheet/Close'}

package/Application/types.ts

@@ -110,7 +110,6 @@ export type ScreenParams = {
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
-  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
@@ -124,7 +123,6 @@ export interface BottomSheetParams extends ScreenParams {
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
-  backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
   accessibilityLabel?: string;

package/Input/Input.tsx

@@ -21,18 +21,18 @@ const Input = forwardRef(
       onChangeText,
       floatingValue,
       floatingIcon,
-      size,
+      size = 'small',
       placeholder,
       onBlur,
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
-      loading,
+      loading = false,
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
@@ -165,8 +165,4 @@ const Input = forwardRef(
   },
 );
 
-Input.defaultProps = {
-  size: 'small',
-};
-
 export default Input;

package/Input/InputDropDown.tsx

@@ -12,17 +12,17 @@ const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
-  size,
+  size = 'small',
   onPress,
   placeholder,
   errorMessage,
   icon = 'arrow_chevron_down_small',
-  disabled,
+  disabled = false,
   floatingIconColor,
   iconColor,
-  required,
+  required = false,
   errorSpacing,
-  loading,
+  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
@@ -116,8 +116,4 @@ const InputDropDown = ({
   );
 };
 
-InputDropDown.defaultProps = {
-  size: 'small',
-};
-
 export default InputDropDown;

package/Input/InputMoney.tsx

@@ -24,12 +24,13 @@ const InputMoney = forwardRef(
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
       style,
+      defaultValue = '',
       ...props
     }: InputMoneyProps,
     ref,
@@ -37,20 +38,26 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const [value, setValue] = useState('');
     const accessibilityLabel = `InputMoney/${floatingValue}`;
 
+    const validateText = (text: string) => {
+      const valueFormat = formatMoneyToNumber(text, 'đ');
+      return formatNumberToMoney(valueFormat, 'đ');
+    };
+
+    const [value, setValue] = useState(validateText(defaultValue));
+
     const onClearText = () => {
       inputRef?.current?.clear();
       setValue('');
       onChangeText?.('');
     };
+
     const _onChangeText = (text: string) => {
       if (text.length < value.length && value.indexOf(text) === 0) {
         text = value.slice(0, -2) + 'đ';
       }
-      const valueFormat = formatMoneyToNumber(text, 'đ');
-      setValue(formatNumberToMoney(valueFormat, 'đ'));
+      setValue(validateText(text));
       onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
     };
 

package/Input/InputTextArea.tsx

@@ -29,12 +29,12 @@ const InputTextArea = forwardRef(
       floatingValue,
       onFocus,
       onBlur,
-      disabled,
+      disabled = false,
       value,
       defaultValue,
       height,
       placeholder,
-      maxLength,
+      maxLength = MAX_LENGTH,
       required,
       errorSpacing,
       style,
@@ -158,8 +158,4 @@ const InputTextArea = forwardRef(
   },
 );
 
-InputTextArea.defaultProps = {
-  maxLength: MAX_LENGTH,
-};
-
 export default InputTextArea;

package/Input/index.tsx

@@ -85,10 +85,6 @@ type InputPropsWithoutSizeAndIcon = Omit<
   'size' | 'icon' | 'iconColor'
 >;
 
-type InputPropsOmitForSearch = Omit<
-  InputProps,
-  'required' | 'size' | 'errorMessage' | 'disabled'
->;
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
@@ -99,7 +95,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.
    */
@@ -118,6 +114,16 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
   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;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Layout/Screen.tsx

@@ -267,6 +267,7 @@ const Screen = forwardRef(
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={heightHeader - 20}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,

package/Popup/PopupNotify.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -20,6 +20,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 }) => {
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
+  const closeAction = useRef('touch_outside');
 
   let descriptionStyle = {};
   let Description: any = View;
@@ -28,6 +29,19 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     descriptionStyle = {height: 80};
   }
 
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    onTracking('service_component_displayed', undefined, '111012100000000000');
+    return () => {
+      onTracking(
+        'service_popup_dismissed',
+        closeAction.current,
+        '111154100000000001',
+      );
+    };
+  }, []);
   /**
    * on action popup
    * @param callback
@@ -37,7 +51,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     callback?.();
   };
 
-  const onTracking = (actionType: string) => {
+  const onTracking = (
+    event: string,
+    actionType: string | undefined,
+    trigger_id: string,
+  ) => {
     if (navigator?.trackingInfo) {
       const routes = navigator.ref.current?.getRootState()?.routes || [];
       const routesLength = routes.length;
@@ -45,7 +63,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       if (routesLength > 1) {
         screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
-      navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+      navigator?.maxApi?.trackEvent(event, {
         feature_code: navigator?.trackingInfo?.code,
         app_id: navigator?.trackingInfo?.appId,
         miniapp_version: navigator?.trackingInfo?.buildNumber,
@@ -54,7 +72,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         component_type: 'popup',
         component_name: 'PopupNotify',
         error_code: error,
-        trigger_id: '111154100000000001',
+        trigger_id,
         action_type: actionType,
       });
     }
@@ -75,7 +93,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   type="text"
                   size="medium"
                   onPress={() => {
-                    onTracking('button_action');
+                    closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
                 />
@@ -88,7 +106,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               title={primary.title}
               size="medium"
               onPress={() => {
-                onTracking('button_action');
+                closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
             />
@@ -103,7 +121,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             title={primary.title}
             size="medium"
             onPress={() => {
-              onTracking('button_action');
+              closeAction.current = 'button_action';
               onAction(primary.onPress);
             }}
           />
@@ -115,7 +133,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 type="text"
                 size="medium"
                 onPress={() => {
-                  onTracking('button_action');
+                  closeAction.current = 'button_action';
                   onAction(secondary?.onPress);
                 }}
               />
@@ -148,7 +166,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       <TouchableOpacity
         style={styles.iconCloseContainer}
         onPress={() => {
-          onTracking('icon_close');
+          closeAction.current = 'icon_close';
           onAction(onIconClose);
         }}>
         <View

package/Popup/PopupPromotion.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext} from '../Application';
@@ -11,8 +11,27 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   onIconClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const closeAction = useRef('touch_outside');
 
-  const onTracking = (actionType: string) => {
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    onTracking('service_component_displayed', undefined, '111012100000000000');
+    return () => {
+      onTracking(
+        'service_popup_dismissed',
+        closeAction.current,
+        '111154100000000001',
+      );
+    };
+  }, []);
+
+  const onTracking = (
+    event: string,
+    actionType: string | undefined,
+    trigger_id: string,
+  ) => {
     if (navigator?.trackingInfo) {
       const routes = navigator.ref.current?.getRootState()?.routes || [];
       const routesLength = routes.length;
@@ -20,7 +39,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       if (routesLength > 1) {
         screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
-      navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+      navigator?.maxApi?.trackEvent(event, {
         feature_code: navigator?.trackingInfo?.code,
         app_id: navigator?.trackingInfo?.appId,
         miniapp_version: navigator?.trackingInfo?.buildNumber,
@@ -28,7 +47,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
         screen_name,
         component_type: 'popup',
         component_name: 'PopupPromotion',
-        trigger_id: '111154100000000001',
+        trigger_id,
         action_type: actionType,
       });
     }
@@ -42,7 +61,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
-            onTracking('icon_close');
+            closeAction.current = 'icon_close';
             navigator?.pop();
             onIconClose?.();
           }}

package/Title/index.tsx

@@ -1,7 +1,9 @@
 import React, {FC, useContext, useState} from 'react';
 import {
   LayoutChangeEvent,
+  NativeSyntheticEvent,
   Text as RNText,
+  TextLayoutEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -25,6 +27,7 @@ const Title: FC<TitleProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [containerWidth, setContainerWidth] = useState(0);
+  const [textLines, setTextLines] = useState(0);
   const flexStyle = titleFlex ? {flex: 1} : {};
   const typeStyle =
     type === 'screen' ? styles.screen : styles[`${type}_${size}`];
@@ -38,7 +41,10 @@ const Title: FC<TitleProps> = ({
   const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
   const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
   const numberOfLines = type === 'section' ? 1 : 2;
+
   const renderAction = () => {
+    if (!actionTitle && !titleFlex && textLines > 1) return null;
+
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
         <Text typography={'action_s'} color={theme.colors.primary}>
@@ -66,6 +72,10 @@ const Title: FC<TitleProps> = ({
     setContainerWidth(e.nativeEvent.layout.width);
   };
 
+  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
+    setTextLines(e.nativeEvent.lines.length);
+  };
+
   return (
     <View onLayout={onLayout} style={styles.wrapper}>
       <View style={[styles.container, marginStyle]}>
@@ -73,6 +83,7 @@ const Title: FC<TitleProps> = ({
           <Icon style={styles.icon} source={icon} />
         )}
         <RNText
+          onTextLayout={onTextLayout}
           numberOfLines={numberOfLines}
           style={[
             typeStyle,

package/Title/styles.ts

@@ -32,11 +32,10 @@ export default StyleSheet.create({
     lineHeight: scaleSize(44),
   },
   title: {
-    marginRight: Spacing.XS,
+    marginRight: Spacing.S,
   },
   container: {
     flexDirection: 'row',
-    alignItems: 'baseline',
     width: '100%',
   },
   actionIcon: {

package/package.json

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