@momo-kits/foundation 0.92.3-tracking.4 → 0.92.3-tracking.5

package/Application/utils.tsx

@@ -158,41 +158,6 @@ const getAccessibilityID = (
   }
 };
 
-const cleanNameForTracking = (word = ''): string => {
-  return word
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f |\s]/g, '')
-    .toLowerCase();
-};
-
-const formatComponentName = (word = '') => {
-  const accentsMap = {
-    a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
-    A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
-    e: 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
-    E: 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
-    i: 'í|ì|ỉ|ĩ|ị',
-    I: 'Í|Ì|Ỉ|Ĩ|Ị',
-    o: 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
-    O: 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
-    u: 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
-    U: 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
-    y: 'ý|ỳ|ỷ|ỹ|ỵ',
-    Y: 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
-    d: 'đ',
-    D: 'Đ',
-  };
-
-  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
-    const accents = new RegExp(accentGroup, 'g');
-    word = word.replace(accents, nonAccent);
-  }
-
-  word = word.replace(/\s+/g, '_').toLowerCase();
-
-  return word;
-};
-
 const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
@@ -205,8 +170,6 @@ export {
   getDialogOptions,
   getModalOptions,
   getOptions,
-  formatComponentName,
   formatNameLength,
   getAccessibilityID,
-  cleanNameForTracking,
 };

package/Button/index.tsx

@@ -14,7 +14,6 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -306,7 +305,7 @@ const Button: FC<ButtonProps> = ({
         params,
         state: state,
         componentId: accessibilityLabel,
-        componentValue: formatComponentName(title),
+        componentValue: title,
         action: 'click',
       }}>
       <TouchableOpacity

package/CheckBox/index.tsx

@@ -46,7 +46,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentId: accessibilityLabel,
         action: 'click',
         componentLabel: formatNameLength(label || ''),
-        componentValue: indeterminate ? 'indetermine' : value,
+        componentValue: indeterminate ? 'undetermined' : value,
       }}>
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}

package/IconButton/index.tsx

@@ -9,7 +9,6 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
-import {formatComponentName} from '../Application/utils';
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -132,7 +131,7 @@ const IconButton: React.FC<IconButtonProps> = ({
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
         componentId: accessibilityLabel,
-        componentValue: formatComponentName(icon),
+        componentValue: icon,
         action: 'click',
       }}>
       <TouchableOpacity

package/Image/index.tsx

@@ -16,6 +16,7 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
+  params,
   accessibilityLabel,
   ...rest
 }) => {
@@ -30,7 +31,9 @@ const Image: React.FC<ImageProps> = ({
   );
 
   useEffect(() => {
-    component?.addChild?.(id.testID || id.accessibilityLabel);
+    component?.addChildren?.(id.testID || id.accessibilityLabel, 'add');
+    return () =>
+      component?.addChildren(id.testID || id.accessibilityLabel, 'remove');
   }, []);
 
   /**
@@ -54,37 +57,45 @@ const Image: React.FC<ImageProps> = ({
   };
 
   return (
-    <FastImage
-      {...rest}
-      {...id}
-      source={source}
-      style={[styles.container, style]}
-      onProgress={() => {
-        error.current = false;
-        if (status !== 'loading' && loading) {
-          setStatus('loading');
-        }
-      }}
-      onLoadStart={() => {
-        error.current = false;
-      }}
-      onLoad={() => {
-        error.current = false;
-      }}
-      onLoadEnd={() => {
-        let current: Status = 'success';
-        if (error.current) {
-          current = 'error';
-        }
-        if (status !== current) {
-          setStatus(current);
-        }
-      }}
-      onError={() => {
-        error.current = true;
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Image',
+        params,
+        state: loading ? 'loading' : 'loaded',
+        componentId: accessibilityLabel,
       }}>
-      {renderContent()}
-    </FastImage>
+      <FastImage
+        {...rest}
+        {...id}
+        source={source}
+        style={[styles.container, style]}
+        onProgress={() => {
+          error.current = false;
+          if (status !== 'loading' && loading) {
+            setStatus('loading');
+          }
+        }}
+        onLoadStart={() => {
+          error.current = false;
+        }}
+        onLoad={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          let current: Status = 'success';
+          if (error.current) {
+            current = 'error';
+          }
+          if (status !== current) {
+            setStatus(current);
+          }
+        }}
+        onError={() => {
+          error.current = true;
+        }}>
+        {renderContent()}
+      </FastImage>
+    </ComponentContext.Provider>
   );
 };
 

package/Image/types.ts

@@ -3,4 +3,5 @@ import {FastImageProps} from 'react-native-fast-image';
 export interface ImageProps extends FastImageProps {
   loading?: boolean;
   accessibilityLabel?: string;
+  params?: any;
 }

package/Input/Input.tsx

@@ -14,7 +14,6 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
 
 const Input = forwardRef(
   (
@@ -212,7 +211,7 @@ const Input = forwardRef(
         value={{
           componentName: 'Input',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: inputState,
           componentId: accessibilityLabel,
         }}>

package/Input/InputDropDown.tsx

@@ -7,7 +7,6 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName} from '../Application/utils';
 
 const InputDropDown = ({
   value,
@@ -109,10 +108,10 @@ const InputDropDown = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName: 'InputOTP',
+        componentName: 'InputDropDown',
         params,
         state: 'enabled',
-        componentLabel: formatComponentName(floatingValue || ''),
+        componentLabel: floatingValue,
         componentId: accessibilityLabel,
       }}>
       <TouchableOpacity

package/Input/InputMoney.tsx

@@ -18,7 +18,6 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName} from '../Application/utils';
 
 const InputMoney = forwardRef(
   (
@@ -172,7 +171,7 @@ const InputMoney = forwardRef(
         value={{
           componentName: 'InputMoney',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: inputState,
           componentId: accessibilityLabel,
         }}>

package/Input/InputOTP.tsx

@@ -21,7 +21,6 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName} from '../Application/utils';
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -229,7 +228,7 @@ const InputOTP = forwardRef(
         value={{
           componentName: 'InputOTP',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: 'enabled',
           componentId: accessibilityLabel,
         }}>

package/Popup/PopupPromotion.tsx

@@ -51,10 +51,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View
-        {...getAccessibilityID?.('ic_popup_close')}
-        style={styles.iconCloseContainer}>
+      <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          {...getAccessibilityID?.('ic_popup_close')}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();

package/Radio/index.tsx

@@ -43,12 +43,12 @@ const Radio: FC<RadioProps> = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName: 'Button',
+        componentName: 'Radio',
         params,
         state: disabled ? 'disabled' : 'enabled',
         componentId: accessibilityLabel,
         componentLabel: formatNameLength(label || ''),
-        componentValue: value,
+        componentValue: selected,
         action: 'click',
       }}>
       <TouchableOpacity

package/Switch/index.tsx

@@ -24,7 +24,7 @@ const Switch: FC<SwitchProps> = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName: 'Button',
+        componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
         componentId: accessibilityLabel,

package/package.json

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