@momo-kits/avatar 0.0.4 → 0.0.8

package/Avatar.js

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
-    View, StyleSheet, TouchableOpacity, Dimensions
+    View, StyleSheet, TouchableOpacity, Dimensions, Platform
 } from 'react-native';
 import { get, isEqual } from 'lodash';
 import {
@@ -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,7 @@ export default class Avatar extends Component {
             this.subscription = Dimensions.addEventListener(
                 'change',
                 ({ window }) => {
-                    if(window?.height > 0 && window?.width > 0) {
+                    if(window?.height > 0 && window?.width > 0 && Platform.OS === 'android') {
                         this.setState({ dimensions: window });
                     }
                 }
@@ -344,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>
             );
@@ -405,6 +444,10 @@ export default class Avatar extends Component {
                 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 > 0 ? dimensions?.width : null).large;
                 break;
@@ -475,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();
@@ -502,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
@@ -545,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 = {
@@ -553,4 +607,5 @@ Avatar.defaultProps = {
     cached: true,
     scaleSize: false,
     quality: 'medium',
+    size: 'small'
 };

package/package.json

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