@momo-kits/avatar 0.77.5 → 0.77.7

package/index.tsx

@@ -11,19 +11,21 @@ import {
 import styles from './styles';
 
 const logo = 'https://static.momocdn.net/app/img/kits/logo_momo_circle.png';
+const iconSupportDefault =
+  'https://static.momocdn.net/app/img/kits/_indicator.png';
 
 const Avatar: FC<AvatarProps> = ({
-  size = 24,
+  size = 32,
   name,
   rounded = true,
-  showIconMomo = true,
-  showIconSupport = true,
-  icon,
+  showIconMomo = false,
+  showIconSupport = false,
+  iconSupport = iconSupportDefault,
   image,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const borderRadius = rounded ? size / 2 : Spacing.XS;
-  const iconStyle = size === 32 ? styles.smallIcon : styles.icon;
+  const iconStyle = size <= 32 ? styles.smallIcon : styles.icon;
 
   const getShortName = (name: string) => {
     const words = name.split(' ');
@@ -42,6 +44,10 @@ const Avatar: FC<AvatarProps> = ({
       position = 0;
     }
 
+    if (size < 32) {
+      position = -2;
+    }
+
     return position;
   };
 
@@ -70,7 +76,8 @@ const Avatar: FC<AvatarProps> = ({
 
   const iconPosition = getIconPosition();
   const iconSize = getIconSize();
-  const shouldShowIcon = size !== 24 && showIconMomo && rounded;
+  const shouldShowIconTop = showIconMomo && rounded;
+  const shouldShowIconBottom = showIconSupport && rounded;
 
   return (
     <View
@@ -84,13 +91,13 @@ const Avatar: FC<AvatarProps> = ({
           borderRadius,
         },
       ]}>
-      {shouldShowIcon && (
+      {shouldShowIconTop && (
         <Image
           source={{uri: logo}}
           style={[iconStyle, {top: iconPosition, right: iconPosition}]}
         />
       )}
-      {!!name && (
+      {!!name && !image && (
         <Text color={theme.colors.primary} typography={'description_xs'}>
           {getShortName(name)}
         </Text>
@@ -102,6 +109,23 @@ const Avatar: FC<AvatarProps> = ({
           color={theme.colors.primary}
         />
       )}
+      {!!image && (
+        <Image
+          source={{uri: image}}
+          style={[
+            styles.image,
+            {
+              borderRadius,
+            },
+          ]}
+        />
+      )}
+      {shouldShowIconBottom && (
+        <Image
+          source={{uri: iconSupport}}
+          style={[iconStyle, {bottom: iconPosition, right: iconPosition}]}
+        />
+      )}
     </View>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/avatar",
-    "version": "0.77.5",
+    "version": "0.77.7",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -6,16 +6,22 @@ export default StyleSheet.create({
     height: 12,
     borderRadius: Radius.S,
     position: 'absolute',
+    overflow: 'hidden',
   },
   smallIcon: {
     width: 8,
     height: 8,
     borderRadius: Radius.XS,
     position: 'absolute',
+    overflow: 'hidden',
   },
   container: {
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 1,
   },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
 });

package/types.ts

@@ -1,11 +1,52 @@
+/**
+ * Predefined set of sizes for the avatar. The numbers represent pixel values.
+ */
 type AvatarSize = 24 | 32 | 40 | 56 | 72;
 
+/**
+ * Props for the Avatar component, which displays an image or icon representing a user.
+ */
 export type AvatarProps = {
+  /**
+   * Optional. Specifies the size of the avatar from a set of predefined sizes.
+   * If not provided, the component may use a default size.
+   */
   size?: AvatarSize;
+
+  /**
+   * Optional. If `true`, the avatar will have rounded corners, providing a circular appearance.
+   * Defaults to `false` if not provided, resulting in a square or rectangular avatar.
+   */
   rounded?: boolean;
+
+  /**
+   * Optional. If `true`, an icon representing "Momo" will be displayed.
+   * This is specific to the use-case where the application requires a Momo icon.
+   * Defaults to `false` if not provided.
+   */
   showIconMomo?: boolean;
+
+  /**
+   * Optional. If `true`, a support icon will be displayed, suggesting this avatar is for support or helpdesk representation.
+   * Defaults to `false` if not provided.
+   */
   showIconSupport?: boolean;
-  icon?: string;
+
+  /**
+   * Optional. Specifies the icon for support. This is used in conjunction with `showIconSupport`.
+   * If `showIconSupport` is `true` but no `iconSupport` is provided, a default icon may be used.
+   */
+  iconSupport?: string;
+
+  /**
+   * Optional. The name associated with the avatar. This could be the user’s full name,
+   * first name, or a username, depending on the implementation.
+   */
   name?: string;
+
+  /**
+   * Optional. The URL or local path of the image to be displayed as the avatar.
+   * If not provided, a placeholder or default avatar may be displayed.
+   */
   image?: string;
 };