@momo-kits/foundation 0.92.30 → 0.92.32

package/Application/Components.tsx

@@ -65,7 +65,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View style={{width: 28}}>
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
@@ -113,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe,
+      goBackSafe
     );
 
     return () => backHandler.remove();
@@ -268,7 +268,7 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     const valid = child?.type === NavigationButton || child?.type === Fragment;
     if (__DEV__ && !valid) {
       console.warn(
-        'HeaderRightAction contains element type of NavigationButton, Please check again.',
+        'HeaderRightAction contains element type of NavigationButton, Please check again.'
       );
     }
     return child;
@@ -327,7 +327,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      },
+      }
     );
   };
 
@@ -338,9 +338,9 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item);
+        navigator?.toolkitCallback?.(item.key);
         getToolkitConfig();
-      },
+      }
     );
   };
 
@@ -357,7 +357,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined,
+                  undefined
                 );
               },
             }}
@@ -388,7 +388,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              },
+              }
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}

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/Application/StackScreen.tsx

@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {useHeaderHeight} from '@react-navigation/stack';
-import {InteractionManager, Linking, View} from 'react-native';
+import {Alert, InteractionManager, Linking, View} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
@@ -95,6 +95,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const timeInteraction = useRef(0);
   const timeoutLoad = useRef<any>();
   const tracked = useRef<any>({
+    traceIdLoad: undefined,
+    traceIdInteraction: undefined,
     releaseLoad: undefined,
     releaseInteraction: undefined,
     timeoutLoad: undefined,
@@ -125,6 +127,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
     if (options) {
       navigation.setOptions(options);
     }
+    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
+      tracked.current.traceIdLoad = data?.traceId;
+    });
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      (data: any) => {
+        tracked.current.traceIdInteraction = data?.traceId;
+      }
+    );
   }, [options]);
 
   /**
@@ -146,6 +157,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }, 5000);
 
     return () => {
+      clearTimeout(tracked.current.timeoutLoad);
+      clearTimeout(tracked.current.timeoutInteraction);
       onScreenLoad();
       onScreenInteraction();
     };
@@ -155,8 +168,10 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen load
    */
   const onScreenLoad = () => {
-    clearTimeout(tracked.current.timeoutLoad);
     if (!tracked.current?.releaseLoad) {
+      if (timeLoad.current === 0) {
+        timeLoad.current = endTime.current - startTime.current;
+      }
       context.autoTracking?.({
         appId: context.appId,
         code: context.code,
@@ -166,10 +181,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'load',
         duration: timeLoad.current,
       });
+      navigator?.maxApi?.stopTrace?.(
+        tracked.current.traceIdLoad,
+        {value: timeLoad.current},
+        null
+      );
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
         message: `${screenName} screen_load_time ${timeLoad.current}`,
       });
+      if (timeLoad.current === 0 && context.enableAutoId) {
+        Alert.alert(screenName, "Can't get screen load time");
+      }
       tracked.current.releaseLoad = true;
     }
   };
@@ -178,8 +201,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen load
    */
   const onScreenInteraction = () => {
-    clearTimeout(tracked.current.timeoutInteraction);
     if (!tracked.current?.releaseInteraction) {
+      if (timeLoad.current === 0) {
+        timeLoad.current = endTime.current - startTime.current;
+      }
+      if (timeInteraction.current === 0 && context.enableAutoId) {
+        if (context.enableAutoId) {
+          Alert.alert(screenName, "Can't get screen interaction time");
+        }
+        timeInteraction.current = timeLoad.current;
+      }
+
       context.autoTracking?.({
         appId: context.appId,
         code: context.code,
@@ -189,7 +221,11 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'interaction',
         duration: timeInteraction.current - timeLoad.current,
       });
-
+      navigator?.maxApi?.stopTrace?.(
+        tracked.current.traceIdInteraction,
+        {value: timeInteraction.current},
+        null
+      );
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
         message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
@@ -203,12 +239,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
       value={{
         screenName,
         onElementLoad: () => {
+          clearTimeout(timeoutLoad.current);
           endTime.current = Date.now();
           interaction.current?.cancel?.();
           interaction.current = InteractionManager.runAfterInteractions(() => {
             timeInteraction.current = Date.now() - startTime.current;
           });
-          clearTimeout(timeoutLoad.current);
           timeoutLoad.current = setTimeout(() => {
             if (timeLoad.current === 0) {
               timeLoad.current = endTime.current - startTime.current;

package/Input/Input.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
   useImperativeHandle,
   useRef,
@@ -16,11 +17,15 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {Text} from '../Text';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
 
+/**
+ * Input default component
+ */
 const Input = forwardRef(
   (
     {
@@ -34,16 +39,19 @@ const Input = forwardRef(
       onFocus,
       errorMessage,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
       disabled = false,
       floatingIconColor,
-      iconColor,
       required = false,
       errorSpacing,
       loading = false,
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
-      onPressIcon,
       secureTextEntry,
       keyboardType,
       style,
@@ -51,9 +59,10 @@ const Input = forwardRef(
       hintText,
       accessibilityLabel,
       editable = true,
+      onPressFloatingIcon,
       ...props
     }: InputProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -90,7 +99,11 @@ const Input = forwardRef(
       };
     });
 
-    const renderIcon = (color: string | undefined) => {
+    /**
+     * Render trailing icon or text
+     * @param color
+     */
+    const renderTrailing = (color?: string) => {
       if (loading) {
         return <Loader type={'spinner'} color={color} style={styles.icon} />;
       }
@@ -109,24 +122,46 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (icon) {
-        return (
-          <TouchableOpacity
-            onPress={onPressIcon}
-            disabled={!onPressIcon}
-            style={styles.icon}>
-            <Icon color={color} source={icon} size={24} />
-          </TouchableOpacity>
+      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 input view
+     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -155,6 +190,7 @@ const Input = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
@@ -204,21 +240,19 @@ const Input = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderIcon(iconTintColor)}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
     };
 
     let inputState = 'active';
-
     if (value && value?.length > 0) {
       inputState = 'filled';
     }
     if (errorMessage && errorMessage?.length > 0) {
       inputState = 'error';
     }
-
     if (disabled) {
       inputState = 'disabled';
     }
@@ -242,7 +276,7 @@ const Input = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default Input;

package/Input/InputDropDown.tsx

@@ -1,66 +1,55 @@
 import React, {useContext} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import {Styles} from '../Consts';
 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',
   disabled = false,
   floatingIconColor,
-  iconColor,
   required = false,
   errorSpacing,
-  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
   params,
   accessibilityLabel,
   hintText,
-  ...props
+  multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
-  const full = !!value || !!placeholder;
-
-  const renderIcon = (color: string | undefined) => {
-    if (loading) {
-      return <Loader type={'spinner'} color={color} />;
-    }
-    if (icon) {
-      return <Icon color={color} source={icon} size={24} />;
-    }
-  };
 
+  /**
+   * Render the input view
+   */
   const renderInputView = () => {
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = 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
@@ -69,10 +58,18 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
         />
-        <View style={full ? styles.inputView : Styles.row}>
+        <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
-            <View style={styles.leadingIconContainer}>
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginTop: Spacing.M,
+                  marginRight: Spacing.S,
+                },
+              ]}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -80,28 +77,27 @@ const InputDropDown = ({
               />
             </View>
           )}
-          {full && (
-            <TextInput
-              {...props}
-              accessibilityLabel={accessibilityLabel}
-              onPressIn={onPress}
-              editable={false}
-              style={[
-                styles.input,
-                {
-                  color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
-                },
-              ]}
-              textBreakStrategy="highQuality"
-              value={value}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          )}
+          <View
+            accessibilityLabel={accessibilityLabel}
+            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}>{renderIcon(iconTintColor)}</View>
       </View>
     );
   };
@@ -116,8 +112,9 @@ const InputDropDown = ({
         componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
+        activeOpacity={0.6}
         onPress={onPress}
-        style={[style, full && styles.wrapper]}>
+        style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/InputMoney.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -19,6 +20,8 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {Text} from '../Text';
+import {Loader} from '../Loader';
 
 const InputMoney = forwardRef(
   (
@@ -27,13 +30,18 @@ const InputMoney = forwardRef(
       floatingValue,
       floatingIcon,
       size = 'small',
+      loading,
       onBlur,
       onFocus,
       errorMessage,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
       disabled = false,
       floatingIconColor,
-      iconColor,
       required = false,
       errorSpacing,
       style,
@@ -42,9 +50,10 @@ const InputMoney = forwardRef(
       accessibilityLabel,
       hintText,
       value: _value,
+      onPressFloatingIcon,
       ...props
     }: InputMoneyProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -63,7 +72,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : '',
+      defaultValue ? validateText(defaultValue) : ''
     );
 
     const onClearText = () => {
@@ -99,11 +108,51 @@ const InputMoney = forwardRef(
       onBlur?.(e);
     };
 
+    /**
+     * 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>
+        );
+      }
+    };
+
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -125,6 +174,7 @@ const InputMoney = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             <TextInput
@@ -160,7 +210,7 @@ const InputMoney = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {!!icon && <Icon color={iconTintColor} source={icon} />}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
@@ -198,7 +248,7 @@ const InputMoney = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -94,7 +94,10 @@ const InputOTP = forwardRef(
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
-      focus: () => inputRef.current?.focus(),
+      focus: () => {
+        setFocused(true);
+        inputRef.current?.focus()
+      },
       blur: () => inputRef.current?.blur(),
       setText: (text: string) => _onChangeText(text),
     }));