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

package/Application/BottomTab/BottomTabBar.tsx

@@ -28,12 +28,12 @@ import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
-import {getAccessibilityID} from '../utils';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
+  accessibilityLabel?: string;
 };
 
 type Options = {
@@ -317,7 +317,6 @@ export default function BottomTabBar({
                 labelStyle={labelStyle}
                 iconStyle={iconStyle}
                 style={tabStyle}
-                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
               />
             </NavigationRouteContext.Provider>
           </NavigationContext.Provider>

package/Application/BottomTab/index.tsx

@@ -9,7 +9,7 @@ import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
-import {getAccessibilityID, getStackOptions} from '../utils';
+import {getStackOptions} from '../utils';
 import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
@@ -67,8 +67,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
       backBehavior={'firstRoute'}
       tabBar={props => (
         <BottomTabBar
-          {...getAccessibilityID('tbr_main_bottom')}
           {...props}
+          accessibilityLabel={'BottomTabBar'}
           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/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';
 
@@ -25,15 +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?.addChildren?.(id.testID || id.accessibilityLabel, 'add');
-    return () =>
-      component?.addChildren(id.testID || id.accessibilityLabel, 'remove');
+    component?.addChildren?.(test.accessibilityLabel, 'add');
+    return () => component?.addChildren(test.accessibilityLabel, 'remove');
   }, []);
 
   /**
@@ -62,11 +59,11 @@ const Image: React.FC<ImageProps> = ({
         componentName: 'Image',
         params,
         state: loading ? 'loading' : 'loaded',
-        componentId: accessibilityLabel,
+        componentId: test.accessibilityLabel,
       }}>
       <FastImage
         {...rest}
-        {...id}
+        {...test}
         source={source}
         style={[styles.container, style]}
         onProgress={() => {

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,
@@ -53,7 +52,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
     return (
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
-          {...getAccessibilityID?.('ic_popup_close')}
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -80,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         source={{
           uri: image,

package/package.json

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