@momo-kits/avatar 0.73.3-beta.4 → 0.74.2-react-native.1

package/index.tsx

@@ -0,0 +1,119 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {AvatarProps} from './types';
+import {
+  ApplicationContext,
+  Colors,
+  Icon,
+  Image,
+  scaleSize,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+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 = 32,
+  name,
+  rounded = true,
+  showIconMomo = false,
+  showIconSupport = false,
+  iconSupport = iconSupportDefault,
+  image,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const borderRadius = rounded ? size / 2 : Spacing.XS;
+
+  const getShortName = (name: string) => {
+    const words = name.split(' ');
+    const lastTwoWords = words.slice(-2);
+    return lastTwoWords.map(word => word.charAt(0).toUpperCase()).join('');
+  };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 24: {
+        return 16;
+      }
+      case 32: {
+        return 16;
+      }
+      case 40: {
+        return 24;
+      }
+      case 48: {
+        return 32;
+      }
+      case 56: {
+        return 32;
+      }
+      case 72: {
+        return 40;
+      }
+      default: {
+        return 16;
+      }
+    }
+  };
+
+  const iconSize = getIconSize();
+  const shouldShowIconTop = showIconMomo && rounded;
+  const shouldShowIconBottom = showIconSupport && rounded;
+  const supportIconSize = {
+    width: getIconSize() / 2,
+    height: getIconSize() / 2,
+    borderRadius: getIconSize() / 4,
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: scaleSize(size),
+          height: scaleSize(size),
+          backgroundColor: Colors.pink_09,
+          borderColor: theme.colors.border.default,
+          borderRadius: scaleSize(borderRadius),
+        },
+      ]}>
+      {shouldShowIconTop && (
+        <Image
+          source={{uri: logo}}
+          style={[styles.icon, supportIconSize, {top: -1, right: -1}]}
+        />
+      )}
+      {!!name && !image && (
+        <Text color={Colors.pink_03} typography={'description_xs_regular'}>
+          {getShortName(name)}
+        </Text>
+      )}
+      {!name && !image && (
+        <Icon size={iconSize} source={'basic_person'} color={Colors.pink_03} />
+      )}
+      {!!image && (
+        <Image
+          source={{uri: image}}
+          style={[
+            styles.image,
+            {
+              borderRadius,
+            },
+          ]}
+        />
+      )}
+      {shouldShowIconBottom && (
+        <Image
+          source={{uri: iconSupport}}
+          style={[styles.icon, supportIconSize, {bottom: -1, right: -1}]}
+        />
+      )}
+    </View>
+  );
+};
+
+export {Avatar};

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@momo-kits/avatar",
-    "version": "0.73.3-beta.4",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "react-native": ">=0.55",
-        "prop-types": "^15.7.2",
-        "react": "16.9.0",
-        "@momo-kits/core-v2": ">=0.0.5-beta",
-        "lodash": "^4.17.15"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -9,7 +9,7 @@ VERSIONSTRING=( v$(jq .version package.json) )
 VERSION=(${VERSIONSTRING//[\"]/})
 echo VERSION: $VERSION
 
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' --exclude 'web.js' ./* dist
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
 # #babel component to dist
 #babel ./dist -d dist --copy-files
@@ -25,5 +25,4 @@ npm publish --tag beta --access=public
 cd ..
 rm -rf dist
 
-
-##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/avatar`"}'

package/styles.ts

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+export default StyleSheet.create({
+  icon: {
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Predefined set of sizes for the avatar. The numbers represent pixel values.
+ */
+type AvatarSize = 24 | 32 | 40 | 48 | 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;
+
+  /**
+   * 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;
+};

package/Avatar.js

@@ -1,408 +0,0 @@
-/* eslint-disable indent */
-import {
-  Colors,
-  Image,
-  Radius,
-  ScaleSize,
-  Text,
-  ValueUtil,
-} from '@momo-kits/core-v2';
-import PropTypes from 'prop-types';
-import React, {useState} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
-
-const AvatarQuality = {
-  low: 'low',
-  medium: 'medium',
-  high: 'high',
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  shortNameView: {
-    backgroundColor: Colors.pink_09,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: Colors.black_04,
-  },
-  shortNameText: {
-    // fontSize: 17,
-    color: Colors.pink_03,
-  },
-  shortNameTextCustom: {
-    color: '#f6f6f6',
-  },
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  subIcon: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-  },
-  topIcon: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-  },
-  subIconImage: {
-    width: 22,
-    height: 22,
-  },
-  subIconImageOnline: {
-    backgroundColor: Colors.kiwi_green,
-    borderColor: 'white',
-    borderWidth: 1,
-  },
-});
-
-const subIconSize = size => {
-  switch (size) {
-    case 'giant':
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-    case 'small':
-      return {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-      };
-    case 'medium':
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-    case 'large':
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-    default:
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-  }
-};
-
-const avatarSize = size => {
-  switch (size) {
-    case 'tiny':
-      return {
-        width: 24,
-        height: 24,
-      };
-    case 'small': {
-      return {
-        width: 32,
-        height: 32,
-      };
-    }
-    case 'medium':
-      return {
-        width: 40,
-        height: 40,
-      };
-    case 'large':
-      return {
-        width: 56,
-        height: 56,
-      };
-    case 'giant':
-      return {
-        width: 72,
-        height: 72,
-      };
-    default:
-      return {
-        width: 40,
-        height: 40,
-      };
-  }
-};
-
-const shortName = size => {
-  switch (size) {
-    case 'tiny':
-      return {
-        fontSize: ScaleSize(10),
-        lineHeight: 16,
-      };
-    case 'small':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    case 'medium':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    case 'large':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    case 'giant':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    default:
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-  }
-};
-
-const Avatar = ({
-  resizeMode,
-  cached,
-  quality,
-  size,
-  shape,
-  name,
-  source,
-  onPress,
-  style,
-  subIcon,
-  topIcon,
-  loading,
-}) => {
-  const {width, height} = avatarSize(size);
-  const {fontSize, lineHeight} = shortName(size);
-  const {
-    width: iconWidth,
-    height: iconHeight,
-    borderRadius: iconRadius,
-  } = subIconSize(size);
-
-  const [imageSource, setImageSource] = useState(
-    ValueUtil.getImageSource(source),
-  );
-  const getContactShortName = name => {
-    if (!name) return '';
-    const shortNameList = name.split(' ', 2);
-    const alphabet = [];
-    shortNameList.forEach(n => {
-      if (n && n.length > 0) {
-        alphabet.push(n[0].toString().toUpperCase());
-      }
-    });
-    return alphabet.join('');
-  };
-  const isUrl = url => {
-    const expression =
-      /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/gi;
-    return expression.test(url);
-  };
-
-  const isValidImageUrl = source => {
-    return source && source.uri && isUrl(source.uri);
-  };
-
-  const mapAvatarQuality = (url, quality) => {
-    if (!quality || quality === AvatarQuality.medium) {
-      return url;
-    }
-    if (quality === AvatarQuality.low) {
-      return url.replace('.png', '_s64.png');
-    }
-    if (quality === AvatarQuality.high) {
-      return url.replace('.png', '_s512.png');
-    }
-
-    return url;
-  };
-
-  const onLoadSourceError = source => {
-    setImageSource(source);
-  };
-
-  const renderSubIcon = () => {
-    // const subIconSizeStyle = this.mapSubIconSize(size);
-    if (subIcon && shape === 'circle' && size !== 'tiny') {
-      return (
-        <View
-          style={[
-            styles.subIcon,
-            size === 'large' && {
-              bottom: 2,
-              right: 2,
-            },
-            size === 'giant' && {
-              bottom: 4,
-              right: 4,
-            },
-          ]}>
-          {typeof subIcon === 'string' ? (
-            <Image
-              source={subIcon}
-              style={[
-                {
-                  width: iconWidth,
-                  height: iconHeight,
-                  borderRadius: iconRadius,
-                },
-              ]}
-            />
-          ) : (
-            subIcon()
-          )}
-        </View>
-      );
-    }
-  };
-
-  const renderTopIcon = () => {
-    if (topIcon && shape === 'circle' && size !== 'tiny') {
-      return (
-        <View
-          style={[
-            styles.topIcon,
-            size === 'large' && {
-              top: 2,
-              right: 2,
-            },
-            size === 'giant' && {
-              top: 4,
-              right: 4,
-            },
-          ]}>
-          <Image
-            source={topIcon}
-            style={[
-              {
-                width: iconWidth,
-                height: iconHeight,
-                borderRadius: iconRadius,
-              },
-            ]}
-          />
-        </View>
-      );
-    }
-  };
-
-  const onPressIcon = () => {
-    if (onPress && typeof onPress === 'function') onPress();
-  };
-
-  const renderShortName = () => {
-    if (name) {
-      const shortedName = getContactShortName(name);
-      // const shortNameStyle = mapShortNameStyle(size);
-      return (
-        <View
-          style={[
-            {
-              width,
-              height,
-              borderRadius: shape === 'circle' ? width / 2 : Radius.XS,
-            },
-            styles.shortNameView,
-          ]}>
-          <Text
-            weight="regular"
-            style={{
-              fontSize,
-              lineHeight,
-              color: Colors.pink_03,
-            }}>
-            {shortedName}
-          </Text>
-        </View>
-      );
-    }
-    return <View />;
-  };
-
-  if (imageSource?.uri) {
-    imageSource.priority = 'high';
-    imageSource.uri = mapAvatarQuality(imageSource.uri, quality);
-    // if doest not have time query, set default cache time to 1 day
-    if (!imageSource.uri?.includes('?') && cached) {
-      const midnight = new Date().setHours(0, 0, 0, 0);
-      imageSource.uri = `${imageSource.uri}?time=${midnight}`;
-    }
-  }
-
-  const renderImage = () => {
-    return (
-      <Image
-        cached={cached}
-        resizeMode={resizeMode}
-        onLoadSourceError={() => onLoadSourceError(source)}
-        source={source}
-        loading={loading}
-        style={[
-          {
-            width,
-            height,
-            borderRadius: shape === 'circle' ? width / 2 : Radius.XS,
-          },
-        ]}
-      />
-    );
-  };
-
-  return (
-    <TouchableOpacity
-      activeOpacity={onPress ? 0.5 : 1}
-      style={style}
-      onPress={onPressIcon}>
-      <View
-        style={{
-          alignSelf: 'baseline',
-        }}>
-        {!!imageSource && isValidImageUrl(imageSource)
-          ? renderImage()
-          : renderShortName()}
-        {renderTopIcon()}
-        {renderSubIcon()}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-Avatar.propTypes = {
-  name: PropTypes.string,
-  quality: PropTypes.oneOf(['low', 'medium', 'high']),
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-  source: PropTypes.oneOfType([
-    PropTypes.shape({uri: PropTypes.string}),
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-  subIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  topIcon: PropTypes.string,
-
-  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  onPress: PropTypes.func,
-  loading: PropTypes.bool,
-  shape: PropTypes.oneOf(['circle', 'square']),
-};
-
-Avatar.defaultProps = {
-  quality: 'medium',
-  size: 'small',
-  shape: 'circle',
-  name: '',
-};
-
-export default Avatar;

package/Avatar.web.js

@@ -1,405 +0,0 @@
-/* eslint-disable indent */
-import PropTypes from 'prop-types';
-import React, {useState} from 'react';
-import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
-import Colors from '../../core-v2/colors';
-import Text from '../../core-v2/components/typography';
-import {RFValueHorizontal as ScaleSize} from '../../core-v2/components/typography/reponsiveSize';
-import ValueUtil from '../../core/utils/ValueUtil';
-import Radius from '../../core-v2/radius';
-
-const AvatarQuality = {
-  low: 'low',
-  medium: 'medium',
-  high: 'high',
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  shortNameView: {
-    backgroundColor: Colors.pink_09,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: Colors.black_04,
-  },
-  shortNameText: {
-    // fontSize: 17,
-    color: Colors.pink_03,
-  },
-  shortNameTextCustom: {
-    color: '#f6f6f6',
-  },
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  subIcon: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-  },
-  topIcon: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-  },
-  subIconImage: {
-    width: 22,
-    height: 22,
-  },
-  subIconImageOnline: {
-    backgroundColor: Colors.kiwi_green,
-    borderColor: 'white',
-    borderWidth: 1,
-  },
-});
-
-const subIconSize = size => {
-  switch (size) {
-    case 'giant':
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-    case 'small':
-      return {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-      };
-    case 'medium':
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-    case 'large':
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-    default:
-      return {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-      };
-  }
-};
-
-const avatarSize = size => {
-  switch (size) {
-    case 'tiny':
-      return {
-        width: 24,
-        height: 24,
-      };
-    case 'small': {
-      return {
-        width: 32,
-        height: 32,
-      };
-    }
-    case 'medium':
-      return {
-        width: 40,
-        height: 40,
-      };
-    case 'large':
-      return {
-        width: 56,
-        height: 56,
-      };
-    case 'giant':
-      return {
-        width: 72,
-        height: 72,
-      };
-    default:
-      return {
-        width: 40,
-        height: 40,
-      };
-  }
-};
-
-const shortName = size => {
-  switch (size) {
-    case 'tiny':
-      return {
-        fontSize: ScaleSize(10),
-        lineHeight: 16,
-      };
-    case 'small':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    case 'medium':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    case 'large':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    case 'giant':
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-    default:
-      return {
-        fontSize: ScaleSize(15),
-        lineHeight: 22,
-      };
-  }
-};
-
-const Avatar = ({
-  resizeMode,
-  cached,
-  quality,
-  size,
-  shape,
-  name,
-  source,
-  onPress,
-  style,
-  subIcon,
-  topIcon,
-  loading,
-}) => {
-  const {width, height} = avatarSize(size);
-  const {fontSize, lineHeight} = shortName(size);
-  const {
-    width: iconWidth,
-    height: iconHeight,
-    borderRadius: iconRadius,
-  } = subIconSize(size);
-
-  const [imageSource, setImageSource] = useState(
-    ValueUtil.getImageSource(source),
-  );
-  const getContactShortName = name => {
-    if (!name) return '';
-    const shortNameList = name.split(' ', 2);
-    const alphabet = [];
-    shortNameList.forEach(n => {
-      if (n && n.length > 0) {
-        alphabet.push(n[0].toString().toUpperCase());
-      }
-    });
-    return alphabet.join('');
-  };
-  const isUrl = url => {
-    const expression =
-      /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/gi;
-    return expression.test(url);
-  };
-
-  const isValidImageUrl = source => {
-    return source && source.uri && isUrl(source.uri);
-  };
-
-  const mapAvatarQuality = (url, quality) => {
-    if (!quality || quality === AvatarQuality.medium) {
-      return url;
-    }
-    if (quality === AvatarQuality.low) {
-      return url.replace('.png', '_s64.png');
-    }
-    if (quality === AvatarQuality.high) {
-      return url.replace('.png', '_s512.png');
-    }
-
-    return url;
-  };
-
-  const onLoadSourceError = source => {
-    setImageSource(source);
-  };
-
-  const renderSubIcon = () => {
-    // const subIconSizeStyle = this.mapSubIconSize(size);
-    if (subIcon && shape === 'circle' && size !== 'tiny') {
-      return (
-        <View
-          style={[
-            styles.subIcon,
-            size === 'large' && {
-              bottom: 2,
-              right: 2,
-            },
-            size === 'giant' && {
-              bottom: 4,
-              right: 4,
-            },
-          ]}>
-          {typeof subIcon === 'string' ? (
-            <Image
-              source={subIcon}
-              style={[
-                {
-                  width: iconWidth,
-                  height: iconHeight,
-                  borderRadius: iconRadius,
-                },
-              ]}
-            />
-          ) : (
-            subIcon()
-          )}
-        </View>
-      );
-    }
-  };
-
-  const renderTopIcon = () => {
-    if (topIcon && shape === 'circle' && size !== 'tiny') {
-      return (
-        <View
-          style={[
-            styles.topIcon,
-            size === 'large' && {
-              top: 2,
-              right: 2,
-            },
-            size === 'giant' && {
-              top: 4,
-              right: 4,
-            },
-          ]}>
-          <Image
-            source={topIcon}
-            style={[
-              {
-                width: iconWidth,
-                height: iconHeight,
-                borderRadius: iconRadius,
-              },
-            ]}
-          />
-        </View>
-      );
-    }
-  };
-
-  const onPressIcon = () => {
-    if (onPress && typeof onPress === 'function') onPress();
-  };
-
-  const renderShortName = () => {
-    if (name) {
-      const shortedName = getContactShortName(name);
-      // const shortNameStyle = mapShortNameStyle(size);
-      return (
-        <View
-          style={[
-            {
-              width,
-              height,
-              borderRadius: shape === 'circle' ? width / 2 : Radius.XS,
-            },
-            styles.shortNameView,
-          ]}>
-          <Text
-            weight="regular"
-            style={{
-              fontSize,
-              lineHeight,
-              color: Colors.pink_03,
-            }}>
-            {shortedName}
-          </Text>
-        </View>
-      );
-    }
-    return <View />;
-  };
-
-  if (imageSource?.uri) {
-    imageSource.priority = 'high';
-    imageSource.uri = mapAvatarQuality(imageSource.uri, quality);
-    // if doest not have time query, set default cache time to 1 day
-    if (!imageSource.uri?.includes('?') && cached) {
-      const midnight = new Date().setHours(0, 0, 0, 0);
-      imageSource.uri = `${imageSource.uri}?time=${midnight}`;
-    }
-  }
-
-  const renderImage = () => {
-    return (
-      <Image
-        cached={cached}
-        resizeMode={resizeMode}
-        onLoadSourceError={() => onLoadSourceError(source)}
-        source={source}
-        loading={loading}
-        style={[
-          {
-            width,
-            height,
-            borderRadius: shape === 'circle' ? width / 2 : Radius.XS,
-          },
-        ]}
-      />
-    );
-  };
-
-  return (
-    <TouchableOpacity
-      activeOpacity={onPress ? 0.5 : 1}
-      style={style}
-      onPress={onPressIcon}>
-      <View
-        style={{
-          alignSelf: 'baseline',
-        }}>
-        {!!imageSource && isValidImageUrl(imageSource)
-          ? renderImage()
-          : renderShortName()}
-        {renderTopIcon()}
-        {renderSubIcon()}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-Avatar.propTypes = {
-  name: PropTypes.string,
-  quality: PropTypes.oneOf(['low', 'medium', 'high']),
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-  source: PropTypes.oneOfType([
-    PropTypes.shape({uri: PropTypes.string}),
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-  subIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  topIcon: PropTypes.string,
-
-  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  onPress: PropTypes.func,
-  loading: PropTypes.bool,
-  shape: PropTypes.oneOf(['circle', 'square']),
-};
-
-Avatar.defaultProps = {
-  quality: 'medium',
-  size: 'small',
-  shape: 'circle',
-  name: '',
-};
-
-export default Avatar;

package/index.js

@@ -1,3 +0,0 @@
-import Avatar from './Avatar';
-
-export default Avatar;