@momo-kits/avatar 0.0.64-beta → 0.0.65-alpha.8

package/Avatar.js

@@ -2,11 +2,20 @@
 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 {
- ValueUtil, Colors, Text, IconSource, Image, ScaleSize
+    ValueUtil,
+    Colors,
+    Text,
+    IconSource,
+    Image,
+    ScaleSize,
 } from '@momo-kits/core';
 
 export const AvatarQuality = {
@@ -32,20 +41,43 @@ export const AvatarSize = {
     size72: 'size72',
     size80: 'size80',
     size88: 'size88',
-    size96: 'size96'
+    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',
     key: 'key',
-    none: 'none'
+    none: 'none',
 };
 
 const styles = StyleSheet.create({
     container: {
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     shortNameView: {
         justifyContent: 'center',
@@ -53,90 +85,93 @@ const styles = StyleSheet.create({
 
         backgroundColor: Colors.very_light_pink_four,
         width: '100%',
-        height: '100%'
+        height: '100%',
     },
     shortNameText: {
         // fontSize: 17,
-        color: '#f6f6f6'
+        color: Colors.pink_03,
+    },
+    shortNameTextCustom: {
+        color: '#f6f6f6',
     },
     absolute: {
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
     },
     subIcon: {
         position: 'absolute',
         bottom: 0,
-        right: 0
+        right: 0,
     },
     subIconImage: {
         width: 22,
-        height: 22
+        height: 22,
     },
     subIconImageOnline: {
         backgroundColor: Colors.kiwi_green,
         borderColor: 'white',
-        borderWidth: 1
-    }
+        borderWidth: 1,
+    },
 });
 
 const subIconSize = (width) => ({
     tiny: {
         width: 8,
         height: 8,
-        borderRadius: 4
+        borderRadius: 4,
     },
     small: {
         width: 10,
         height: 10,
-        borderRadius: 5
+        borderRadius: 5,
     },
     medium: {
         width: 12,
         height: 12,
-        borderRadius: 6
+        borderRadius: 6,
     },
     large: {
         width: 16,
         height: 16,
-        borderRadius: 8
+        borderRadius: 8,
     },
     size8: {
         width: 8,
         height: 8,
-        borderRadius: 4
+        borderRadius: 4,
     },
     size24: {
         width: 10,
         height: 10,
-        borderRadius: 5
+        borderRadius: 5,
     },
     size36: {
         width: 10,
         height: 10,
-        borderRadius: 5
+        borderRadius: 5,
     },
     size44: {
         width: 14,
         height: 14,
-        borderRadius: 7
+        borderRadius: 7,
     },
     size48: {
         width: 14,
         height: 14,
-        borderRadius: 7
+        borderRadius: 7,
     },
     size52: {
         width: 16,
         height: 16,
-        borderRadius: 8
+        borderRadius: 8,
     },
     size56: {
         width: 16,
         height: 16,
-        borderRadius: 8
+        borderRadius: 8,
     },
     size64: {
         width: 16,
@@ -178,125 +213,132 @@ const subIconSize = (width) => ({
         left: -5,
         width: 24,
         height: 24,
-        borderRadius: 12
-    }
+        borderRadius: 12,
+    },
 });
 
 const avatarSize = (width) => ({
     tiny: {
         width: 16,
         height: 16,
-        borderRadius: 8
+        borderRadius: 8,
     },
     small: {
         width: 32,
         height: 32,
-        borderRadius: 16
+        borderRadius: 16,
     },
     medium: {
         width: 40,
         height: 40,
-        borderRadius: 20
+        borderRadius: 20,
     },
     large: {
         width: 60,
         height: 60,
-        borderRadius: 30
+        borderRadius: 30,
     },
     giant: {
         width: 120,
         height: 120,
-        borderRadius: 60
+        borderRadius: 60,
     },
     size8: {
         width: 8,
         height: 8,
-        borderRadius: 4
+        borderRadius: 4,
     },
     size24: {
         width: 24,
         height: 24,
-        borderRadius: 12
+        borderRadius: 12,
     },
     size36: {
         width: 36,
         height: 36,
-        borderRadius: 18
+        borderRadius: 18,
     },
     size44: {
         width: 44,
         height: 44,
-        borderRadius: 22
+        borderRadius: 22,
     },
     size48: {
         width: 48,
         height: 48,
-        borderRadius: 24
+        borderRadius: 24,
     },
     size52: {
         width: 52,
         height: 52,
-        borderRadius: 26
+        borderRadius: 26,
     },
     size56: {
         width: 56,
         height: 56,
-        borderRadius: 28
+        borderRadius: 28,
     },
     size64: {
         width: 64,
         height: 64,
-        borderRadius: 32
+        borderRadius: 32,
     },
     size72: {
         width: 72,
         height: 72,
-        borderRadius: 36
+        borderRadius: 36,
     },
     size80: {
         width: 80,
         height: 80,
-        borderRadius: 40
+        borderRadius: 40,
     },
     size88: {
         width: 88,
         height: 88,
-        borderRadius: 44
+        borderRadius: 44,
     },
     size96: {
         width: 96,
         height: 96,
-        borderRadius: 48
-    }
+        borderRadius: 48,
+    },
 });
 
 const shortName = (width) => ({
     tiny: {
-        fontSize: ScaleSize(5, width)
+        fontSize: ScaleSize(5, width),
     },
     small: {
-        fontSize: ScaleSize(11, width)
+        fontSize: ScaleSize(11, width),
     },
     medium: {
-        fontSize: ScaleSize(15, width)
+        fontSize: ScaleSize(15, width),
+    },
+    middle: {
+        fontSize: ScaleSize(16, width),
     },
     large: {
-        fontSize: ScaleSize(20, width)
+        fontSize: ScaleSize(20, width),
     },
     giant: {
-        fontSize: ScaleSize(25, width)
-    }
+        fontSize: ScaleSize(25, width),
+    },
 });
 
 export default class Avatar extends Component {
     constructor(props) {
         super(props);
+        this.color = props.custom
+            ? this.getAvatarColor(props.name)
+            : Colors.pink_10;
         this.state = {
             hideSource: false,
             ownUpdate: false,
             source: props.source,
-            dimensions: {}
+            dimensions: {},
         };
+        this.imageSource = '';
     }
 
     componentDidMount() {
@@ -305,8 +347,14 @@ export default class Avatar extends Component {
             this.subscription = Dimensions.addEventListener(
                 'change',
                 ({ window }) => {
-                    this.setState({ dimensions: window });
-                }
+                    if (
+                        window?.height > 0 &&
+                        window?.width > 0 &&
+                        Platform.OS === 'android'
+                    ) {
+                        this.setState({ dimensions: window });
+                    }
+                },
             );
         }
     }
@@ -323,7 +371,8 @@ export default class Avatar extends Component {
             return {
                 ownUpdate: false,
             };
-        } if (!isEqual(nextProps.source, prevState.source)) {
+        }
+        if (!isEqual(nextProps.source, prevState.source)) {
             return { source: nextProps.source, hideSource: false };
         }
         return null;
@@ -339,30 +388,56 @@ export default class Avatar extends Component {
             }
         });
         return alphabet.join('');
+    };
+
+    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) => {
+    renderShortName = (name, avatarStyle, size, color) => {
         if (name) {
             const shortedName = this.getContactShortName(name);
             const shortNameStyle = this.mapShortNameStyle(size);
             return (
-                <View style={[styles.shortNameView, avatarStyle]}>
-                    <Text.H4 style={[styles.shortNameText, shortNameStyle]}>{shortedName}</Text.H4>
+                <View
+                    style={[
+                        styles.shortNameView,
+                        avatarStyle,
+                        { backgroundColor: color },
+                    ]}>
+                    <Text.H4
+                        style={[
+                            this.props.custom
+                                ? styles.shortNameTextCustom
+                                : styles.shortNameText,
+                            shortNameStyle,
+                        ]}>
+                        {shortedName}
+                    </Text.H4>
                 </View>
             );
         }
         return <View />;
-    }
+    };
 
     isUrl(url) {
-        const expression = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/gi;
+        const expression =
+            /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/gi;
         return expression.test(url);
     }
 
     isValidImageUrl = (source) => {
         const validSource = source && source.uri && this.isUrl(source.uri);
         return validSource;
-    }
+    };
 
     mapAvatarQuality = (url, quality) => {
         if (!quality || quality === AvatarQuality.medium) {
@@ -376,52 +451,78 @@ export default class Avatar extends Component {
         }
 
         return url;
-    }
+    };
 
     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;
-    }
+    };
 
     mapShortNameStyle = (size) => {
         let shortNameStyle = {};
         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;
-    }
+    };
 
     extractSize = (avatarStyle) => {
         const { style } = this.props;
@@ -432,57 +533,89 @@ export default class Avatar extends Component {
             height: containerWidth,
             borderRadius: containerWidth / 2,
             borderWidth,
-            borderColor: Colors.black_01
+            borderColor: Colors.black_01,
         };
-    }
+    };
 
-    onLoadSourceError = () => {
-        this.setState({ hideSource: true, ownUpdate: true });
-    }
+    onLoadSourceError = (imageSource) => {
+        if (this.imageSource?.uri !== imageSource?.uri) {
+            this.imageSource = imageSource;
+            this.setState({ hideSource: true, ownUpdate: true });
+        }
+    };
 
     renderSubIcon = () => {
         const { subIcon, size, subIconSource } = this.props;
-        if ((!subIcon || subIcon === SubIconType.none) && !subIconSource) return <View />;
+        if ((!subIcon || subIcon === SubIconType.none) && !subIconSource)
+            return <View />;
         const subIconSizeStyle = this.mapSubIconSize(size);
         const iconSource = ValueUtil.getImageSource(subIconSource);
         return (
             <View style={styles.subIcon}>
-                {subIcon === SubIconType.momo
-                    ? (
-                        <Image
-                            style={[styles.subIconImage, subIconSizeStyle]}
-                            source={IconSource.ic_round_momo_tiny}
-                        />
-                    )
-                    : <View />}
-                {subIcon === SubIconType.online
-                    ? <View style={[styles.subIconImageOnline, subIconSizeStyle]} /> : <View />}
+                {subIcon === SubIconType.momo ? (
+                    <Image
+                        style={[styles.subIconImage, subIconSizeStyle]}
+                        source={IconSource.ic_round_momo_tiny}
+                    />
+                ) : (
+                    <View />
+                )}
+                {subIcon === SubIconType.online ? (
+                    <View
+                        style={[styles.subIconImageOnline, subIconSizeStyle]}
+                    />
+                ) : (
+                    <View />
+                )}
 
                 {iconSource && subIconSource && !subIcon ? (
                     <Image
                         style={[styles.subIconImage, subIconSizeStyle]}
                         source={iconSource}
                     />
-                )
-                    : <View />}
+                ) : (
+                    <View />
+                )}
             </View>
         );
+    };
+
+    getAvatarColor(name) {
+        const shortName = this.getContactShortName(name);
+        if (!shortName) return '#d5d6d6';
+        const firstLetter = shortName[0].charCodeAt(0);
+        let colorIndex = Number(firstLetter) % 26;
+        if (colorIndex > 19) colorIndex = 25 - colorIndex;
+        return COLORS[colorIndex];
     }
 
     onPress = () => {
         const { onPress } = this.props;
         if (onPress && typeof onPress === 'function') onPress();
-    }
+    };
 
     render() {
         const {
-            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage, quality
+            size,
+            source,
+            name,
+            resizeMode,
+            style,
+            onPress,
+            isShowLoading,
+            loading,
+            cached,
+            extraPropsImage,
+            quality,
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
         const containerSize = this.extractSize(avatarStyle);
         const imageSource = ValueUtil.getImageSource(source);
-        const showName = typeof imageSource === 'object' && Object.keys(imageSource).length === 0 && typeof imageSource !== 'number';
+        const showName =
+            typeof imageSource === 'object' &&
+            Object.keys(imageSource).length === 0 &&
+            typeof imageSource !== 'number';
         // add priority high for avatar
         if (imageSource?.uri) {
             imageSource.priority = 'high';
@@ -496,25 +629,32 @@ export default class Avatar extends Component {
 
         const inner = (
             <View style={[styles.container, containerSize, style]}>
-                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : <View />}
-                {this.isValidImageUrl(imageSource) && !hideSource
-                    ? (
-                        <Image
-                            cached={cached}
-                            loading={loading || isShowLoading}
-                            source={imageSource}
-                            onError={this.onLoadSourceError}
-                            style={avatarStyle}
-                            resizeMode={resizeMode}
-                            {...extraPropsImage}
-                        />
-                    ) : <View />}
+                {showName || hideSource ? (
+                    this.renderShortName(name, avatarStyle, size, this.color)
+                ) : (
+                    <View />
+                )}
+                {this.isValidImageUrl(imageSource) && !hideSource ? (
+                    <Image
+                        cached={cached}
+                        loading={loading || isShowLoading}
+                        source={imageSource}
+                        onError={() => this.onLoadSourceError(imageSource)}
+                        style={avatarStyle}
+                        resizeMode={resizeMode}
+                        {...extraPropsImage}
+                    />
+                ) : (
+                    <View />
+                )}
                 {this.renderSubIcon()}
             </View>
         );
         if (onPress) {
             return (
-                <TouchableOpacity activeOpacity={onPress ? 0.5 : 1} onPress={this.onPress}>
+                <TouchableOpacity
+                    activeOpacity={onPress ? 0.5 : 1}
+                    onPress={this.onPress}>
                     {inner}
                 </TouchableOpacity>
             );
@@ -527,19 +667,26 @@ Avatar.propTypes = {
     name: PropTypes.string,
     resizeMode: PropTypes.string,
     quality: PropTypes.oneOf(['low', 'medium', 'high']),
-    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'size8', 'size24', 'size36', 'size44', 'size48', 'size52', 'size56', 'size64', 'size72', 'size80', 'size88', 'size96',
-        PropTypes.shape({
-            width: PropTypes.number, height: PropTypes.number, borderRadius: PropTypes.number
-        })]),
-    source: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.string]),
+    size: PropTypes.any,
+    source: PropTypes.oneOfType([
+        PropTypes.shape({ uri: PropTypes.string }),
+        PropTypes.number,
+        PropTypes.string,
+    ]),
     subIcon: PropTypes.oneOf(['momo', 'online', 'key', 'none']),
-    subIconSource: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.string]),
+    subIconSource: PropTypes.oneOfType([
+        PropTypes.shape({ uri: PropTypes.string }),
+        PropTypes.number,
+        PropTypes.string,
+    ]),
     style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     onPress: PropTypes.func,
     loading: PropTypes.bool,
     cached: PropTypes.bool,
     scaleSize: PropTypes.bool,
-    extraPropsImage: PropTypes.object
+    extraPropsImage: PropTypes.object,
+    number: PropTypes.string,
+    custom: PropTypes.bool,
 };
 
 Avatar.defaultProps = {
@@ -547,4 +694,6 @@ Avatar.defaultProps = {
     cached: true,
     scaleSize: false,
     quality: 'medium',
+    size: 'small',
+    custom: false,
 };

package/Avatar.web.js

@@ -17,6 +17,29 @@ export const AvatarQuality = {
     high: 'high',
 };
 
+const COLORS = [
+    '#3683f3',
+    '#ea63af',
+    '#f94889',
+    '#82b6da',
+    '#2fc093',
+    '#7b4a41',
+    '#ff97bc',
+    '#4130d7',
+    '#c3c3c3',
+    '#f7ae2f',
+    '#b04595',
+    '#57b748',
+    '#ff8900',
+    '#7841bf',
+    '#be3f3e',
+    '#c51515',
+    '#8e6472',
+    '#fed27d',
+    '#ff6f5d',
+    '#05b8ae',
+];
+
 export const AvatarSize = {
     tiny: 'tiny',
     small: 'small',
@@ -293,6 +316,7 @@ const shortName = (width) => ({
 export default class Avatar extends Component {
     constructor(props) {
         super(props);
+        this.color = this.getAvatarColor(props.name);
         this.state = {
             hideSource: false,
             ownUpdate: false,
@@ -307,7 +331,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 });
+                    }
                 }
             );
         }
@@ -438,6 +464,16 @@ export default class Avatar extends Component {
         };
     }
 
+    getAvatarColor(name) {
+        const shortName = this.getContactShortName(name)
+        if (!shortName) return "#d5d6d6"
+        const firstLetter = shortName[0].charCodeAt(0)
+        let colorIndex = Number(firstLetter) % 26
+        if (colorIndex > 19) colorIndex = 25 - colorIndex
+        return COLORS[colorIndex]
+    }
+
+
     onLoadSourceError = () => {
         this.setState({ hideSource: true, ownUpdate: true });
     }

package/package.json

@@ -1,16 +1,16 @@
 {
-  "name": "@momo-kits/avatar",
-  "version": "0.0.64-beta",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {},
-  "peerDependencies": {
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "@momo-kits/core": ">=0.0.5-beta",
-    "lodash": "^4.17.15"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
+    "name": "@momo-kits/avatar",
+    "version": "0.0.65-alpha.8",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {},
+    "peerDependencies": {
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "@momo-kits/core": ">=0.0.5-beta",
+        "lodash": "^4.17.15"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
 }

package/publish.sh

@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+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/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'