@momo-kits/foundation 0.92.1-tracking.20 → 0.92.1-tracking.22

package/Application/BottomTab.tsx

@@ -58,11 +58,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, []);
 
-  const accessibilityID = getAccessibilityID?.("tbr_main_bottom")
-
   return (
     <Tab.Navigator
-        {...accessibilityID}
+      {...getAccessibilityID('tbr_main_bottom')}
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBarOptions={{
@@ -75,10 +73,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
-          const itemAccessibilityID = getAccessibilityID?.(`btn_tabbar_${item.name}`)
         return (
           <Tab.Screen
-              {...itemAccessibilityID}
+            {...getAccessibilityID(`btn_tabbar_${item.name}`)}
             key={item.name}
             name={item.name}
             component={TabScreen}

package/Application/Components.tsx

@@ -69,9 +69,10 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     }
   }, [badgeType, badgeValue]);
 
-  const ID = getAccessibilityID?.(accessibilityID);
   return (
-    <View {...ID} style={{width: scaleSize(28)}}>
+    <View
+      {...getAccessibilityID(accessibilityID)}
+      style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -136,7 +137,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
           icon_name: 'back',
         };
         navigator?.maxApi?.showToastDebug?.({
-          appId: context.appId,
+          appId: `auto - ${context.appId}`,
           message: 'service_icon_clicked',
           params,
         });
@@ -411,13 +412,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-            {...getAccessibilityID?.('btn_navigation_more')}
+            {...getAccessibilityID('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')}
+            {...getAccessibilityID('btn_navigation_close')}
             onPress={onClose}>
             <Icon
               color={tintColor}

package/Application/StackScreen.tsx

@@ -20,7 +20,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options}: ScreenParams = props.route.params;
+  const {screen: Component, options} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
@@ -31,14 +31,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
+  const screenName = Component?.name || Component?.type?.name || '';
+
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
+    const host = (global as any).miniAppApi?.currentHost || {};
+    host.screenName = screenName;
     InteractionManager.runAfterInteractions(() => {
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} screen_interaction_time ${
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${
           Date.now() - startTime.current
         }`,
       });
@@ -53,17 +57,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   useEffect(() => {
     if (__DEV__) {
-      if (!Component.name || Component.name === 'screen') {
+      if (!screenName || screenName === 'screen') {
         Alert.alert(
           'Design system',
-          `Unvalidated screen name "${Component.name}" !`,
+          `Unvalidated screen name "${screenName}" !`,
         );
       }
     }
 
     const tracking = {
       ...context,
-      screen_name: Component.name,
+      screen_name: screenName,
     };
 
     const routes = props.navigation.getState()?.routes || [];
@@ -80,8 +84,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
     };
     navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
     navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${Component.name} service_frame_displayed`,
+      appId: `auto - ${context.appId}`,
+      message: `${screenName} service_frame_displayed`,
       params,
     });
 
@@ -93,8 +97,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
       };
       navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} service_icon_clicked`,
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} service_icon_clicked`,
         params,
       });
     });
@@ -105,7 +109,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       value={{
         appId: context.appId,
         code: context.code,
-        screenName: Component.name,
+        screenName,
         autoTracking: (data: any) => {
           navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
         },
@@ -116,8 +120,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
             if (timeLoad.current === 0) {
               timeLoad.current = endTime.current - startTime.current;
               navigator?.maxApi?.showToastDebug?.({
-                appId: context.appId,
-                message: `${Component.name} screen_load_time ${timeLoad.current}`,
+                appId: `auto - ${context.appId}`,
+                message: `${screenName} screen_load_time ${timeLoad.current}`,
               });
             }
           }, 2000);

package/Application/utils.tsx

@@ -142,15 +142,18 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const getAccessibilityID = (key = '') => {
+const getAccessibilityID = (
+  key = '',
+  override: string | undefined = undefined,
+) => {
   if (isIOS) {
     return {
       accessible: true,
-      testID: key,
+      testID: override || key,
     };
   } else {
     return {
-      accessibilityLabel: key,
+      accessibilityLabel: override || key,
     };
   }
 };

package/Button/index.tsx

@@ -79,8 +79,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   params?: any;
 
   componentId?: string;
-
-  accessibilityID?: object;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -96,7 +94,6 @@ const Button: FC<ButtonProps> = ({
   params,
   componentId,
   accessibilityLabel,
-  accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -307,11 +304,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const selfAccessibilityID = accessibilityID
-    ? accessibilityID
-    : getAccessibilityID?.(
-        `${appId}/${code}/${screenInfo.screenName}/btn_${title}`,
-      );
+
   return (
     <ScreenContext.Provider
       value={{
@@ -329,7 +322,10 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
-        {...selfAccessibilityID}
+        {...getAccessibilityID(
+          `${appId}/${code}/${screenInfo.screenName}/btn_${title}`,
+          accessibilityLabel,
+        )}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -43,7 +43,8 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
-  const accessibilityID = getAccessibilityID?.(
+
+  const accessibilityID = getAccessibilityID(
     `${appId}/${screenInfo.screenName}/cbx_${label}_${value}`,
   );
 

package/Image/index.tsx

@@ -7,7 +7,7 @@ import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -42,11 +42,10 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
-  const accessibilityID = getAccessibilityID?.(`img|${source}`)
   return (
     <FastImage
       {...rest}
-      {...accessibilityID}
+      {...getAccessibilityID(`img|${source}`)}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {

package/Input/Input.tsx

@@ -122,7 +122,8 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-      const accessibilityID = getAccessibilityID?.(
+
+      const accessibilityID = getAccessibilityID(
         `${appId}/${screenInfo.screenName}/input_${floatingValue}${
           disabled && '_disabled'
         }`,

package/Input/InputDropDown.tsx

@@ -61,7 +61,8 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
-    const accessibilityID = getAccessibilityID?.(
+
+    const accessibilityID = getAccessibilityID(
       `${appId}/${screenInfo.screenName}/input_${floatingValue}${
         disabled && '_disabled'
       }`,

package/Input/InputMoney.tsx

@@ -105,7 +105,8 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-      const accessibilityID = getAccessibilityID?.(
+
+      const accessibilityID = getAccessibilityID(
         `${appId}/${screenInfo.screenName}/input_${floatingValue}${
           disabled && '_disabled'
         }`,

package/Input/InputOTP.tsx

@@ -191,9 +191,10 @@ const InputOTP = forwardRef(
       );
     };
 
-    const accessibilityID = getAccessibilityID?.(
+    const accessibilityID = getAccessibilityID(
       `${appId}/${screenInfo.screenName}/input_${floatingValue}`,
     );
+
     const renderInputView = () => {
       return (
         <View

package/Input/InputSearch.tsx

@@ -67,15 +67,14 @@ const InputSearch = forwardRef(
       checkTyping(text, haveValue, setHaveValue);
       onChangeText?.(text);
     };
-    const accessibilityID = getAccessibilityID?.(
-      `${appId}/${screenInfo.screenName}/input_search`,
-    );
 
     const renderInputView = () => {
       return (
         <TextInput
           {...props}
-          {...accessibilityID}
+          {...getAccessibilityID(
+            `${appId}/${screenInfo.screenName}/input_search`,
+          )}
           textAlignVertical="center"
           ref={inputRef}
           style={[

package/Input/InputTextArea.tsx

@@ -95,7 +95,8 @@ const InputTextArea = forwardRef(
         textColor = disabledColor;
         placeholderColor = disabledColor;
       }
-      const accessibilityID = getAccessibilityID?.(
+
+      const accessibilityID = getAccessibilityID(
         `${appId}/${screenInfo.screenName}/input_${floatingValue}${
           disabled && '_disabled'
         }`,

package/Popup/PopupNotify.tsx

@@ -113,13 +113,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
     const renderColumn = () => {
-      const accessibilityPrimaryID = getAccessibilityID?.('btn_popup_allow');
-      const accessibilitySecondID = getAccessibilityID?.('btn_popup_cancel');
-
       return (
         <View style={Styles.columnCenter}>
           <Button
-            accessibilityID={accessibilityPrimaryID}
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -131,7 +128,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
-                accessibilityID={accessibilitySecondID}
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -165,11 +162,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close');
-
     return (
       <TouchableOpacity
-        {...accessibilityCloseID}
+        {...getAccessibilityID?.('ic_popup_close')}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -193,11 +188,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
-  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_notify`);
-
   return (
     <View
-      {...accessibilityID}
+      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -53,10 +53,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close');
-
     return (
-      <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
+      <View
+        {...getAccessibilityID?.('ic_popup_close')}
+        style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
             closeAction.current = 'icon_close';
@@ -82,10 +82,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
-  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_promotion`);
 
   return (
-    <View {...accessibilityID}>
+    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

@@ -46,6 +46,7 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
+
   const accessibilityID = getAccessibilityID?.(
     `${appId}/${screenInfo.screenName}/rdo_${label}_${value}`,
   );

package/Switch/index.tsx

@@ -22,6 +22,7 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
+
   const accessibilityID = getAccessibilityID?.(
     `${appId}/${screenInfo.screenName}/swt_${value}`,
   );

package/package.json

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