@momo-kits/avatar 0.0.1 → 0.0.6

package/Avatar.js

@@ -35,6 +35,29 @@ export const AvatarSize = {
     size96: 'size96'
 };
 
+const COLORS = [
+    '#3683f3',
+    '#ea63af',
+    '#f94889',
+    '#82b6da',
+    '#2fc093',
+    '#7b4a41',
+    '#ff97bc',
+    '#4130d7',
+    '#c3c3c3',
+    '#f7ae2f',
+    '#b04595',
+    '#57b748',
+    '#ff8900',
+    '#7841bf',
+    '#be3f3e',
+    '#c51515',
+    '#8e6472',
+    '#fed27d',
+    '#ff6f5d',
+    '#05b8ae',
+];
+
 export const SubIconType = {
     momo: 'momo',
     online: 'online',
@@ -280,6 +303,9 @@ const shortName = (width) => ({
     medium: {
         fontSize: ScaleSize(15, width)
     },
+    middle: {
+        fontSize: ScaleSize(16, width)
+    },
     large: {
         fontSize: ScaleSize(20, width)
     },
@@ -291,6 +317,7 @@ const shortName = (width) => ({
 export default class Avatar extends Component {
     constructor(props) {
         super(props);
+        this.color = this.getAvatarColor();
         this.state = {
             hideSource: false,
             ownUpdate: false,
@@ -306,7 +333,9 @@ export default class Avatar extends Component {
             this.subscription = Dimensions.addEventListener(
                 'change',
                 ({ window }) => {
-                    this.setState({ dimensions: window });
+                    if(window?.height > 0 && window?.width > 0) {
+                        this.setState({ dimensions: window });
+                    }
                 }
             );
         }
@@ -342,12 +371,24 @@ export default class Avatar extends Component {
         return alphabet.join('');
     }
 
-    renderShortName = (name, avatarStyle, size) => {
+    hashUrl(url) {
+        let hash = 0;
+        let char;
+        if (url?.length === 0) return hash;
+        for (let i = 0; i < url?.length; i++) {
+            char = url?.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash &= hash; // Convert to 32bit integer
+        }
+        return hash;
+    }
+
+    renderShortName = (name, avatarStyle, size, color,) => {
         if (name) {
             const shortedName = this.getContactShortName(name);
             const shortNameStyle = this.mapShortNameStyle(size);
             return (
-                <View style={[styles.shortNameView, avatarStyle]}>
+                <View style={[styles.shortNameView, avatarStyle, { backgroundColor: color }]}>
                     <Text.H4 style={[styles.shortNameText, shortNameStyle]}>{shortedName}</Text.H4>
                 </View>
             );
@@ -381,9 +422,9 @@ export default class Avatar extends Component {
 
     mapStyleFromSize = (size) => {
         const { dimensions } = this.state;
-        const avatarStyle = avatarSize(dimensions?.width || null).small;
+        const avatarStyle = avatarSize(dimensions?.width > 0 ? dimensions?.width : null).small;
         if (typeof size === 'object') return size;
-        if (avatarSize(dimensions?.width || null)[size]) return avatarSize(dimensions?.width || null)[size];
+        if (avatarSize(dimensions?.width > 0 ? dimensions?.width : null)[size]) return avatarSize(dimensions?.width > 0 ? dimensions?.width : null)[size];
         return avatarStyle;
     }
 
@@ -392,35 +433,39 @@ export default class Avatar extends Component {
         const { dimensions } = this.state;
         switch (size) {
             case AvatarSize.tiny: {
-                shortNameStyle = shortName(dimensions?.width || null).tiny;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).tiny;
                 break;
             }
             case AvatarSize.small: {
-                shortNameStyle = shortName(dimensions?.width || null).small;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).small;
                 break;
             }
             case AvatarSize.medium: {
-                shortNameStyle = shortName(dimensions?.width || null).medium;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).medium;
+                break;
+            }
+            case AvatarSize.size48: {
+                shortNameStyle = shortName(dimensions?.width || null).middle;
                 break;
             }
             case AvatarSize.large: {
-                shortNameStyle = shortName(dimensions?.width || null).large;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).large;
                 break;
             }
             case AvatarSize.giant: {
-                shortNameStyle = shortName(dimensions?.width || null).giant;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).giant;
                 break;
             }
             default:
-                shortNameStyle = shortName(dimensions?.width || null).small;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).small;
         }
         return shortNameStyle;
     }
 
     mapSubIconSize = (size) => {
         const { dimensions } = this.state;
-        const subIconStyle = subIconSize(dimensions?.width || null).small;
-        if (subIconSize(dimensions?.width || null)[size]) return subIconSize(dimensions?.width || null)[size];
+        const subIconStyle = subIconSize(dimensions?.width > 0 ? dimensions?.width : null).small;
+        if (subIconSize(dimensions?.width > 0 ? dimensions?.width : null)[size]) return subIconSize(dimensions?.width > 0 ? dimensions?.width : null)[size];
         return subIconStyle;
     }
 
@@ -473,6 +518,16 @@ export default class Avatar extends Component {
         );
     }
 
+    getAvatarColor() {
+        const { source } = this.props;
+        const number = Math.abs(this.hashUrl(source));
+        if (number && !isNaN(Number(number))) {
+            const colorIndex = Number(number) % COLORS.length;
+            return COLORS[colorIndex];
+        }
+        return '#d5d6d6';
+    }
+
     onPress = () => {
         const { onPress } = this.props;
         if (onPress && typeof onPress === 'function') onPress();
@@ -500,7 +555,7 @@ export default class Avatar extends Component {
 
         const inner = (
             <View style={[styles.container, containerSize, style]}>
-                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : <View />}
+                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size, this.color) : <View />}
                 {this.isValidImageUrl(imageSource) && !hideSource
                     ? (
                         <Image
@@ -543,7 +598,8 @@ Avatar.propTypes = {
     loading: PropTypes.bool,
     cached: PropTypes.bool,
     scaleSize: PropTypes.bool,
-    extraPropsImage: PropTypes.object
+    extraPropsImage: PropTypes.object,
+    number: PropTypes.string
 };
 
 Avatar.defaultProps = {

package/Avatar.web.js

@@ -307,7 +307,9 @@ export default class Avatar extends Component {
             this.subscription = Dimensions.addEventListener(
                 'change',
                 ({ window }) => {
-                    this.setState({ dimensions: window });
+                    if(window?.height > 0 && window?.width > 0) {
+                        this.setState({ dimensions: window });
+                    }
                 }
             );
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/avatar",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "private": false,
   "main": "index.js",
   "dependencies": {},