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

package/Application/BottomTab/BottomTabBar.tsx

@@ -317,7 +317,7 @@ export default function BottomTabBar({
                 labelStyle={labelStyle}
                 iconStyle={iconStyle}
                 style={tabStyle}
-                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
+                {...getAccessibilityID(`BottomTabBarItem/${route.name}`)}
               />
             </NavigationRouteContext.Provider>
           </NavigationContext.Provider>

package/Application/BottomTab/index.tsx

@@ -67,7 +67,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       backBehavior={'firstRoute'}
       tabBar={props => (
         <BottomTabBar
-          {...getAccessibilityID('tbr_main_bottom')}
+          {...getAccessibilityID('BottomTabBar')}
           {...props}
           floatingButton={floatingButton}
         />

package/Application/Components.tsx

@@ -29,7 +29,6 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
-import {getAccessibilityID} from './utils';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -38,7 +37,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
-  accessibilityID = '',
+  accessibilityLabel = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -66,10 +65,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View
-      {...getAccessibilityID(accessibilityID)}
-      style={{width: scaleSize(28)}}>
+    <View style={{width: scaleSize(28)}}>
       <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -94,7 +92,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
-      {...getAccessibilityID('title_navigation_header')}
+      accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -173,7 +171,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
-        accessibilityID="btn_navigation_back"
+        accessibilityLabel="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -248,7 +246,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
         <Text
-          {...getAccessibilityID('title_navigation_header')}
+          accessibilityLabel={'title_navigation_header'}
           typography="header_default_bold"
           color={tintColor}>
           {title}
@@ -376,7 +374,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-          accessibilityID="btn_navigation_pin"
+          accessibilityLabel="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -407,13 +405,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_more')}
+            accessibilityLabel={'btn_navigation_more'}
             onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_close')}
+            accessibilityLabel={'btn_navigation_close'}
             onPress={onClose}>
             <Icon
               color={tintColor}

package/Application/types.ts

@@ -130,7 +130,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
-  accessibilityID?: string;
+  accessibilityLabel?: string;
 };
 
 export type PinnedToolType = {

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

@@ -7,7 +7,6 @@ import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
-import {getAccessibilityID} from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -16,6 +15,7 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
+  params,
   accessibilityLabel,
   ...rest
 }) => {
@@ -24,13 +24,13 @@ const Image: React.FC<ImageProps> = ({
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const id = getAccessibilityID(
-    `img|${(source as Source).uri}`,
-    accessibilityLabel,
-  );
+  const test: any = {
+    accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
+  };
 
   useEffect(() => {
-    component?.addChild?.(id.testID || id.accessibilityLabel);
+    component?.addChildren?.(test.accessibilityLabel, 'add');
+    return () => component?.addChildren(test.accessibilityLabel, 'remove');
   }, []);
 
   /**
@@ -54,37 +54,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: test.accessibilityLabel,
       }}>
-      {renderContent()}
-    </FastImage>
+      <FastImage
+        {...rest}
+        {...test}
+        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/PopupNotify.tsx

@@ -7,7 +7,6 @@ import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -163,7 +162,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const buildCloseIcon = () => {
     return (
       <TouchableOpacity
-        {...getAccessibilityID?.('ic_popup_close')}
+        accessibilityLabel={'ic_popup_close'}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -189,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -5,7 +5,6 @@ import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
@@ -51,10 +50,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View
-        {...getAccessibilityID?.('ic_popup_close')}
-        style={styles.iconCloseContainer}>
+      <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -81,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         source={{
           uri: image,

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.6",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {