@momo-kits/avatar 0.112.1-beta.2 → 0.112.1-beta.20

package/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {FC, useContext, useMemo} from 'react';
 import {View} from 'react-native';
 import {AvatarProps} from './types';
 import {
@@ -6,6 +6,8 @@ import {
   Colors,
   Icon,
   Image,
+  MiniAppContext,
+  ScreenContext,
   Spacing,
   Text,
 } from '@momo-kits/foundation';
@@ -24,12 +26,20 @@ const Avatar: FC<AvatarProps> = ({
   iconSupport = iconSupportDefault,
   image,
   accessibilityLabel,
-  accessibilityLabelBottomIcon,
-  accessibilityLabelTopIcon,
-  accessibilityLabelDescription,
-  accessibilityLabelIcon,
-  accessibilityLabelImage
 }) => {
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+  const componentName = 'Avatar';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}${
+      name ? `/${name}` : ''
+    }`;
+  }, [componentName, accessibilityLabel, app, screen]);
+
   const {theme} = useContext(ApplicationContext);
   const borderRadius = rounded ? size / 2 : Spacing.XS;
 
@@ -86,18 +96,25 @@ const Avatar: FC<AvatarProps> = ({
           borderRadius: borderRadius,
         },
       ]}
-      accessibilityLabel={accessibilityLabel}>
+      accessibilityLabel={componentId}>
       {!!name && !image && (
-        <Text accessibilityLabel={accessibilityLabelDescription} color={Colors.pink_03} typography={'description_xs_regular'}>
+        <Text
+          color={Colors.pink_03}
+          typography={'description_xs_regular'}
+          accessibilityLabel={componentId + '|text'}>
           {getShortName(name)}
         </Text>
       )}
       {!name && !image && (
-        <Icon accessibilityLabel={accessibilityLabelIcon} size={iconSize} source={'basic_person'} color={Colors.pink_03} />
+        <Icon
+          size={iconSize}
+          source={'basic_person'}
+          color={Colors.pink_03}
+          accessibilityLabel={componentId + '|icon'}
+        />
       )}
       {!!image && (
         <Image
-          accessibilityLabel={accessibilityLabelImage}
           source={{uri: image}}
           style={[
             styles.image,
@@ -105,20 +122,21 @@ const Avatar: FC<AvatarProps> = ({
               borderRadius,
             },
           ]}
+          accessibilityLabel={componentId + '|img'}
         />
       )}
       {shouldShowIconTop && (
         <Image
-          accessibilityLabel={accessibilityLabelTopIcon}
           source={{uri: logo}}
           style={[styles.icon, supportIconSize, {top: -1, right: -1}]}
+          accessibilityLabel={componentId + '|top-icon'}
         />
       )}
       {shouldShowIconBottom && (
         <Image
-          accessibilityLabel={accessibilityLabelBottomIcon}
           source={{uri: iconSupport}}
           style={[styles.icon, supportIconSize, {bottom: -1, right: -1}]}
+          accessibilityLabel={componentId + '|bottom-icon'}
         />
       )}
     </View>

package/package.json

@@ -1,20 +1,20 @@
 {
-    "name": "@momo-kits/avatar",
-    "version": "0.112.1-beta.2",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "16.9.0",
-        "react-native": ">=0.55",
-        "prop-types": "^15.7.2"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
+  "name": "@momo-kits/avatar",
+  "version": "0.112.1-beta.20",
+  "private": false,
+  "main": "index.tsx",
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "react": "16.9.0",
+    "react-native": ">=0.55",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11"
+  },
+  "license": "MoMo",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {}
 }

package/types.ts

@@ -54,29 +54,4 @@ export type AvatarProps = {
    * Optional. Assign accessibility label to the avatar for automated testing.
    */
   accessibilityLabel?: string;
-
-  /**
-   * Optional. Assign accessibility label to the image for automated testing.
-   */
-  accessibilityLabelImage?: string;
-
-  /**
-   * Optional. Assign accessibility label to the description for automated testing.
-   */
-  accessibilityLabelDescription?: string;
-
-  /**
-   * Optional. Assign accessibility label to the icon for automated testing.
-   */
-  accessibilityLabelIcon?: string;
-
-  /**
-   * Optional. Assign accessibility label to the support icon for automated testing.
-   */
-  accessibilityLabelTopIcon?: string;
-
-  /**
-   * Optional. Assign accessibility label to the support icon for automated testing.
-   */
-  accessibilityLabelBottomIcon?: string;
 };