@momo-kits/avatar 0.0.34-beta → 0.0.34

package/Avatar.js

@@ -1 +1,607 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.SubIconType=exports.AvatarSize=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _lodash=require("lodash");var _core=require("@momo-kits/core");var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/avatar/dist/Avatar.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var AvatarSize={tiny:'tiny',small:'small',medium:'medium',large:'large',giant:'giant',size8:'size8',size24:'size24',size36:'size36',size44:'size44',size48:'size48',size52:'size52',size56:'size56',size64:'size64',size72:'size72',size80:'size80',size88:'size88',size96:'size96'};exports.AvatarSize=AvatarSize;var SubIconType={momo:'momo',online:'online',key:'key',none:'none'};exports.SubIconType=SubIconType;var styles=_reactNative.StyleSheet.create({container:{justifyContent:'center',alignItems:'center'},shortNameView:{justifyContent:'center',alignItems:'center',backgroundColor:_core.Colors.very_light_pink_four,width:'100%',height:'100%'},shortNameText:{color:'#f6f6f6'},absolute:{position:'absolute',top:0,left:0,right:0,bottom:0},subIcon:{position:'absolute',bottom:0,right:0},subIconImage:{width:22,height:22},subIconImageOnline:{backgroundColor:_core.Colors.kiwi_green,borderColor:'white',borderWidth:1}});var subIconSize=_reactNative.StyleSheet.create({tiny:{width:8,height:8,borderRadius:4},small:{width:10,height:10,borderRadius:5},medium:{width:12,height:12,borderRadius:6},large:{width:16,height:16,borderRadius:8},size8:{width:8,height:8,borderRadius:4},size24:{width:10,height:10,borderRadius:5},size36:{width:10,height:10,borderRadius:5},size44:{width:14,height:14,borderRadius:7},size48:{width:14,height:14,borderRadius:7},size52:{width:16,height:16,borderRadius:8},size56:{width:16,height:16,borderRadius:8},size64:{width:16,height:16,borderRadius:8,top:-2,left:-2},size72:{width:18,height:18,borderRadius:9,top:-3,left:-3},size80:{width:18,height:18,borderRadius:9,top:-3,left:-3},size88:{width:18,height:18,borderRadius:9,top:-4,left:-4},size96:{width:20,height:20,borderRadius:10,top:-4,left:-4},giant:{top:-5,left:-5,width:24,height:24,borderRadius:12}});var avatarSize=_reactNative.StyleSheet.create({tiny:{width:16,height:16,borderRadius:8},small:{width:32,height:32,borderRadius:16},medium:{width:40,height:40,borderRadius:20},large:{width:60,height:60,borderRadius:30},giant:{width:120,height:120,borderRadius:60},size8:{width:8,height:8,borderRadius:4},size24:{width:24,height:24,borderRadius:12},size36:{width:36,height:36,borderRadius:18},size44:{width:44,height:44,borderRadius:22},size48:{width:48,height:48,borderRadius:24},size52:{width:52,height:52,borderRadius:26},size56:{width:56,height:56,borderRadius:28},size64:{width:64,height:64,borderRadius:32},size72:{width:72,height:72,borderRadius:36},size80:{width:80,height:80,borderRadius:40},size88:{width:88,height:88,borderRadius:44},size96:{width:96,height:96,borderRadius:48}});var shortName=_reactNative.StyleSheet.create({tiny:{fontSize:5},small:{fontSize:11},medium:{fontSize:15},large:{fontSize:20},giant:{fontSize:25}});var Avatar=function(_Component){(0,_inherits2.default)(Avatar,_Component);var _super=_createSuper(Avatar);function Avatar(props){var _this;(0,_classCallCheck2.default)(this,Avatar);_this=_super.call(this,props);_this.getContactShortName=function(name){if(!name)return'';var shortNameList=name.split(' ',2);var alphabet=[];shortNameList.forEach(function(n){if(n&&n.length>0){alphabet.push(n[0].toString().toUpperCase());}});return alphabet.join('');};_this.renderShortName=function(name,avatarStyle,size){if(name){var shortedName=_this.getContactShortName(name);var shortNameStyle=_this.mapShortNameStyle(size);return _react.default.createElement(_reactNative.View,{style:[styles.shortNameView,avatarStyle],__source:{fileName:_jsxFileName,lineNumber:323,columnNumber:17}},_react.default.createElement(_core.Text.H4,{style:[styles.shortNameText,shortNameStyle],__source:{fileName:_jsxFileName,lineNumber:324,columnNumber:21}},shortedName));}return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:328,columnNumber:16}});};_this.isValidImageUrl=function(source){var validSource=source&&(source.uri&&_this.isUrl(source.uri)||typeof source==='number');return validSource;};_this.mapStyleFromSize=function(size){var avatarStyle=avatarSize.small;if(typeof size==='object')return size;if(avatarSize[size])return avatarSize[size];return avatarStyle;};_this.mapShortNameStyle=function(size){var shortNameStyle={};switch(size){case AvatarSize.tiny:{shortNameStyle=shortName.tiny;break;}case AvatarSize.small:{shortNameStyle=shortName.small;break;}case AvatarSize.medium:{shortNameStyle=shortName.medium;break;}case AvatarSize.large:{shortNameStyle=shortName.large;break;}case AvatarSize.giant:{shortNameStyle=shortName.giant;break;}default:shortNameStyle=shortName.small;}return shortNameStyle;};_this.mapSubIconSize=function(size){var subIconStyle=subIconSize.small;if(subIconSize[size])return subIconSize[size];return subIconStyle;};_this.extractSize=function(avatarStyle){var style=_this.props.style;var borderWidth=(0,_lodash.get)(style,'borderWidth',1);var containerWidth=Math.round(avatarStyle.width+2+borderWidth);return{width:containerWidth,height:containerWidth,borderRadius:containerWidth/2,borderWidth:borderWidth,borderColor:_core.Colors.black_01};};_this.onLoadSourceError=function(){_this.setState({hideSource:true,ownUpdate:true});};_this.renderSubIcon=function(){var _this$props=_this.props,subIcon=_this$props.subIcon,size=_this$props.size,subIconSource=_this$props.subIconSource;if((!subIcon||subIcon===SubIconType.none)&&!subIconSource)return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:402,columnNumber:82}});var subIconSizeStyle=_this.mapSubIconSize(size);var iconSource=_core.ValueUtil.getImageSource(subIconSource);return _react.default.createElement(_reactNative.View,{style:styles.subIcon,__source:{fileName:_jsxFileName,lineNumber:406,columnNumber:13}},subIcon===SubIconType.momo?_react.default.createElement(_core.Image,{style:[styles.subIconImage,subIconSizeStyle],source:_core.IconSource.ic_round_momo_tiny,__source:{fileName:_jsxFileName,lineNumber:409,columnNumber:25}}):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:414,columnNumber:23}}),subIcon===SubIconType.online?_react.default.createElement(_reactNative.View,{style:[styles.subIconImageOnline,subIconSizeStyle],__source:{fileName:_jsxFileName,lineNumber:416,columnNumber:23}}):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:416,columnNumber:88}}),iconSource&&subIconSource&&!subIcon?_react.default.createElement(_core.Image,{style:[styles.subIconImage,subIconSizeStyle],source:iconSource,__source:{fileName:_jsxFileName,lineNumber:419,columnNumber:21}}):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:424,columnNumber:23}}));};_this.onPress=function(){var onPress=_this.props.onPress;if(onPress&&typeof onPress==='function')onPress();};_this.state={hideSource:false,ownUpdate:false,source:props.source};return _this;}(0,_createClass2.default)(Avatar,[{key:"isUrl",value:function isUrl(url){var expression=/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/gi;return expression.test(url);}},{key:"render",value:function render(){var _this$props2=this.props,size=_this$props2.size,source=_this$props2.source,name=_this$props2.name,resizeMode=_this$props2.resizeMode,style=_this$props2.style,onPress=_this$props2.onPress,isShowLoading=_this$props2.isShowLoading,loading=_this$props2.loading,cached=_this$props2.cached,extraPropsImage=_this$props2.extraPropsImage;var hideSource=this.state.hideSource;var avatarStyle=this.mapStyleFromSize(size);var containerSize=this.extractSize(avatarStyle);var imageSource=_core.ValueUtil.getImageSource(source);var showName=typeof imageSource==='object'&&Object.keys(imageSource).length===0&&typeof imageSource!=='number';var inner=_react.default.createElement(_reactNative.View,{style:[styles.container,containerSize,style],__source:{fileName:_jsxFileName,lineNumber:444,columnNumber:13}},showName||hideSource?this.renderShortName(name,avatarStyle,size):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:445,columnNumber:93}}),this.isValidImageUrl(imageSource)&&!hideSource?_react.default.createElement(_core.Image,(0,_extends2.default)({cached:cached,loading:loading||isShowLoading,source:imageSource,onError:this.onLoadSourceError,style:avatarStyle,resizeMode:resizeMode},extraPropsImage,{__source:{fileName:_jsxFileName,lineNumber:448,columnNumber:25}})):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:457,columnNumber:25}}),this.renderSubIcon());if(onPress){return _react.default.createElement(_reactNative.TouchableOpacity,{activeOpacity:onPress?0.5:1,onPress:this.onPress,__source:{fileName:_jsxFileName,lineNumber:463,columnNumber:17}},inner);}return inner;}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,prevState){if(prevState.ownUpdate){return{ownUpdate:false};}if(!(0,_lodash.isEqual)(nextProps.source,prevState.source)){return{source:nextProps.source,hideSource:false};}return null;}}]);return Avatar;}(_react.Component);exports.default=Avatar;Avatar.propTypes={name:_propTypes.default.string,resizeMode:_propTypes.default.string,size:_propTypes.default.oneOf(['tiny','small','medium','large','giant','size8','size24','size36','size44','size48','size52','size56','size64','size72','size80','size88','size96',_propTypes.default.shape({width:_propTypes.default.number,height:_propTypes.default.number,borderRadius:_propTypes.default.number})]),source:_propTypes.default.oneOfType([_propTypes.default.shape({uri:_propTypes.default.string}),_propTypes.default.number,_propTypes.default.string]),subIcon:_propTypes.default.oneOf(['momo','online','key','none']),subIconSource:_propTypes.default.oneOfType([_propTypes.default.shape({uri:_propTypes.default.string}),_propTypes.default.number,_propTypes.default.string]),style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),onPress:_propTypes.default.func,loading:_propTypes.default.bool,cached:_propTypes.default.bool,extraPropsImage:_propTypes.default.object};Avatar.defaultProps={resizeMode:'cover',cached:true};
+/* eslint-disable indent */
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import {
+    View, StyleSheet, TouchableOpacity, Dimensions, Platform
+} from 'react-native';
+import { get, isEqual } from 'lodash';
+import {
+ ValueUtil, Colors, Text, IconSource, Image, ScaleSize
+} from '@momo-kits/core';
+
+export const AvatarQuality = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+
+export const AvatarSize = {
+    tiny: 'tiny',
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    giant: 'giant',
+    size8: 'size8',
+    size24: 'size24',
+    size36: 'size36',
+    size44: 'size44',
+    size48: 'size48',
+    size52: 'size52',
+    size56: 'size56',
+    size64: 'size64',
+    size72: 'size72',
+    size80: 'size80',
+    size88: 'size88',
+    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'
+};
+
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    shortNameView: {
+        justifyContent: 'center',
+        alignItems: 'center',
+
+        backgroundColor: Colors.very_light_pink_four,
+        width: '100%',
+        height: '100%'
+    },
+    shortNameText: {
+        // fontSize: 17,
+        color: '#f6f6f6'
+    },
+    absolute: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+    },
+    subIcon: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0
+    },
+    subIconImage: {
+        width: 22,
+        height: 22
+    },
+    subIconImageOnline: {
+        backgroundColor: Colors.kiwi_green,
+        borderColor: 'white',
+        borderWidth: 1
+    }
+});
+
+const subIconSize = (width) => ({
+    tiny: {
+        width: 8,
+        height: 8,
+        borderRadius: 4
+    },
+    small: {
+        width: 10,
+        height: 10,
+        borderRadius: 5
+    },
+    medium: {
+        width: 12,
+        height: 12,
+        borderRadius: 6
+    },
+    large: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    size8: {
+        width: 8,
+        height: 8,
+        borderRadius: 4
+    },
+    size24: {
+        width: 10,
+        height: 10,
+        borderRadius: 5
+    },
+    size36: {
+        width: 10,
+        height: 10,
+        borderRadius: 5
+    },
+    size44: {
+        width: 14,
+        height: 14,
+        borderRadius: 7
+    },
+    size48: {
+        width: 14,
+        height: 14,
+        borderRadius: 7
+    },
+    size52: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    size56: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    size64: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        top: -2,
+        left: -2,
+    },
+    size72: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        top: -3,
+        left: -3,
+    },
+    size80: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        top: -3,
+        left: -3,
+    },
+    size88: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        top: -4,
+        left: -4,
+    },
+    size96: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        top: -4,
+        left: -4,
+    },
+    giant: {
+        top: -5,
+        left: -5,
+        width: 24,
+        height: 24,
+        borderRadius: 12
+    }
+});
+
+const avatarSize = (width) => ({
+    tiny: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    small: {
+        width: 32,
+        height: 32,
+        borderRadius: 16
+    },
+    medium: {
+        width: 40,
+        height: 40,
+        borderRadius: 20
+    },
+    large: {
+        width: 60,
+        height: 60,
+        borderRadius: 30
+    },
+    giant: {
+        width: 120,
+        height: 120,
+        borderRadius: 60
+    },
+    size8: {
+        width: 8,
+        height: 8,
+        borderRadius: 4
+    },
+    size24: {
+        width: 24,
+        height: 24,
+        borderRadius: 12
+    },
+    size36: {
+        width: 36,
+        height: 36,
+        borderRadius: 18
+    },
+    size44: {
+        width: 44,
+        height: 44,
+        borderRadius: 22
+    },
+    size48: {
+        width: 48,
+        height: 48,
+        borderRadius: 24
+    },
+    size52: {
+        width: 52,
+        height: 52,
+        borderRadius: 26
+    },
+    size56: {
+        width: 56,
+        height: 56,
+        borderRadius: 28
+    },
+    size64: {
+        width: 64,
+        height: 64,
+        borderRadius: 32
+    },
+    size72: {
+        width: 72,
+        height: 72,
+        borderRadius: 36
+    },
+    size80: {
+        width: 80,
+        height: 80,
+        borderRadius: 40
+    },
+    size88: {
+        width: 88,
+        height: 88,
+        borderRadius: 44
+    },
+    size96: {
+        width: 96,
+        height: 96,
+        borderRadius: 48
+    }
+});
+
+const shortName = (width) => ({
+    tiny: {
+        fontSize: ScaleSize(5, width)
+    },
+    small: {
+        fontSize: ScaleSize(11, width)
+    },
+    medium: {
+        fontSize: ScaleSize(15, width)
+    },
+    middle: {
+        fontSize: ScaleSize(16, width)
+    },
+    large: {
+        fontSize: ScaleSize(20, width)
+    },
+    giant: {
+        fontSize: ScaleSize(25, width)
+    }
+});
+
+export default class Avatar extends Component {
+    constructor(props) {
+        super(props);
+        this.color = this.getAvatarColor(props.name);
+        this.state = {
+            hideSource: false,
+            ownUpdate: false,
+            source: props.source,
+            dimensions: {}
+        };
+        this.imageSource = '';
+    }
+
+    componentDidMount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription = Dimensions.addEventListener(
+                'change',
+                ({ window }) => {
+                    if(window?.height > 0 && window?.width > 0 && Platform.OS === 'android') {
+                        this.setState({ dimensions: window });
+                    }
+                }
+            );
+        }
+    }
+
+    componentWillUnmount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription?.remove?.();
+        }
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if (prevState.ownUpdate) {
+            return {
+                ownUpdate: false,
+            };
+        } if (!isEqual(nextProps.source, prevState.source)) {
+            return { source: nextProps.source, hideSource: false };
+        }
+        return null;
+    }
+
+    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('');
+    }
+
+    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, { backgroundColor: color }]}>
+                    <Text.H4 style={[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;
+        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) {
+            return url;
+        }
+        if (quality === AvatarQuality.low) {
+            return url.replace('.png', '_s64.png');
+        }
+        if (quality === AvatarQuality.high) {
+            return url.replace('.png', '_s512.png');
+        }
+
+        return url;
+    }
+
+    mapStyleFromSize = (size) => {
+        const { dimensions } = this.state;
+        const avatarStyle = avatarSize(dimensions?.width > 0 ? dimensions?.width : null).small;
+        if (typeof size === 'object') return 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 > 0 ? dimensions?.width : null).tiny;
+                break;
+            }
+            case AvatarSize.small: {
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).small;
+                break;
+            }
+            case AvatarSize.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 > 0 ? dimensions?.width : null).large;
+                break;
+            }
+            case AvatarSize.giant: {
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).giant;
+                break;
+            }
+            default:
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).small;
+        }
+        return shortNameStyle;
+    }
+
+    mapSubIconSize = (size) => {
+        const { dimensions } = this.state;
+        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;
+        const borderWidth = get(style, 'borderWidth', 1);
+        const containerWidth = Math.round(avatarStyle.width + 2 + borderWidth);
+        return {
+            width: containerWidth,
+            height: containerWidth,
+            borderRadius: containerWidth / 2,
+            borderWidth,
+            borderColor: Colors.black_01
+        };
+    }
+
+    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 />;
+        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 />}
+
+                {iconSource && subIconSource && !subIcon ? (
+                    <Image
+                        style={[styles.subIconImage, subIconSizeStyle]}
+                        source={iconSource}
+                    />
+                )
+                    : <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
+        } = 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';
+        // add priority high for avatar
+        if (imageSource?.uri) {
+            imageSource.priority = 'high';
+            imageSource.uri = this.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 inner = (
+            <View style={[styles.container, containerSize, style]}>
+                {(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}>
+                    {inner}
+                </TouchableOpacity>
+            );
+        }
+        return inner;
+    }
+}
+
+Avatar.propTypes = {
+    name: PropTypes.string,
+    resizeMode: PropTypes.string,
+    quality: PropTypes.oneOf(['low', 'medium', 'high']),
+    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]),
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    onPress: PropTypes.func,
+    loading: PropTypes.bool,
+    cached: PropTypes.bool,
+    scaleSize: PropTypes.bool,
+    extraPropsImage: PropTypes.object,
+    number: PropTypes.string
+};
+
+Avatar.defaultProps = {
+    resizeMode: 'cover',
+    cached: true,
+    scaleSize: false,
+    quality: 'medium',
+    size: 'small'
+};

package/Avatar.web.js

@@ -1 +1,588 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.SubIconType=exports.AvatarSize=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _lodash=require("lodash");var _ValueUtil=_interopRequireDefault(require("../../utils/ValueUtil"));var _colors=_interopRequireDefault(require("../../colors"));var _icons=require("../../icons");var _typography=_interopRequireDefault(require("../typography"));var _colorCore=require("../../colors/colorCore");var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/avatar/dist/Avatar.web.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var AvatarSize={tiny:'tiny',small:'small',medium:'medium',large:'large',giant:'giant',size8:'size8',size24:'size24',size36:'size36',size44:'size44',size48:'size48',size52:'size52',size56:'size56',size64:'size64',size72:'size72',size80:'size80',size88:'size88',size96:'size96'};exports.AvatarSize=AvatarSize;var SubIconType={momo:'momo',online:'online',key:'key',none:'none'};exports.SubIconType=SubIconType;var styles=_reactNative.StyleSheet.create({container:{justifyContent:'center',alignItems:'center'},shortNameView:{justifyContent:'center',alignItems:'center',backgroundColor:_colors.default.very_light_pink_four,width:'100%',height:'100%'},shortNameText:{color:'#f6f6f6'},absolute:{position:'absolute',top:0,left:0,right:0,bottom:0},subIcon:{position:'absolute',bottom:0,right:0},subIconImage:{width:22,height:22},subIconImageOnline:{backgroundColor:_colors.default.kiwi_green,borderColor:'white',borderWidth:1}});var subIconSize=_reactNative.StyleSheet.create({tiny:{width:8,height:8,borderRadius:4},small:{width:10,height:10,borderRadius:5},medium:{width:12,height:12,borderRadius:6},large:{width:16,height:16,borderRadius:8},size8:{width:8,height:8,borderRadius:4},size24:{width:10,height:10,borderRadius:5},size36:{width:10,height:10,borderRadius:5},size44:{width:14,height:14,borderRadius:7},size48:{width:14,height:14,borderRadius:7},size52:{width:16,height:16,borderRadius:8},size56:{width:16,height:16,borderRadius:8},size64:{width:16,height:16,borderRadius:8,top:-2,left:-2},size72:{width:18,height:18,borderRadius:9,top:-3,left:-3},size80:{width:18,height:18,borderRadius:9,top:-3,left:-3},size88:{width:18,height:18,borderRadius:9,top:-4,left:-4},size96:{width:20,height:20,borderRadius:10,top:-4,left:-4},giant:{top:-5,left:-5,width:24,height:24,borderRadius:12}});var avatarSize=_reactNative.StyleSheet.create({tiny:{width:16,height:16,borderRadius:8},small:{width:32,height:32,borderRadius:16},medium:{width:40,height:40,borderRadius:20},large:{width:60,height:60,borderRadius:30},giant:{width:120,height:120,borderRadius:60},size8:{width:8,height:8,borderRadius:4},size24:{width:24,height:24,borderRadius:12},size36:{width:36,height:36,borderRadius:18},size44:{width:44,height:44,borderRadius:22},size48:{width:48,height:48,borderRadius:24},size52:{width:52,height:52,borderRadius:26},size56:{width:56,height:56,borderRadius:28},size64:{width:64,height:64,borderRadius:32},size72:{width:72,height:72,borderRadius:36},size80:{width:80,height:80,borderRadius:40},size88:{width:88,height:88,borderRadius:44},size96:{width:96,height:96,borderRadius:48}});var shortName=_reactNative.StyleSheet.create({tiny:{fontSize:5},small:{fontSize:11},medium:{fontSize:15},large:{fontSize:20},giant:{fontSize:25}});var Avatar=function(_Component){(0,_inherits2.default)(Avatar,_Component);var _super=_createSuper(Avatar);function Avatar(props){var _this;(0,_classCallCheck2.default)(this,Avatar);_this=_super.call(this,props);_this.getContactShortName=function(name){if(!name)return'';var shortNameList=name.split(' ',2);var alphabet=[];shortNameList.forEach(function(n){if(n&&n.length>0){alphabet.push(n[0].toString().toUpperCase());}});return alphabet.join('');};_this.renderShortName=function(name,avatarStyle,size){if(name){var shortedName=_this.getContactShortName(name);var shortNameStyle=_this.mapShortNameStyle(size);return _react.default.createElement(_reactNative.View,{style:[styles.shortNameView,avatarStyle],__source:{fileName:_jsxFileName,lineNumber:325,columnNumber:17}},_react.default.createElement(_typography.default.H4,{style:[styles.shortNameText,shortNameStyle],__source:{fileName:_jsxFileName,lineNumber:326,columnNumber:21}},shortedName));}return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:330,columnNumber:16}});};_this.isValidImageUrl=function(source){var validSource=source&&(source.uri&&_this.isUrl(source.uri)||typeof source==='number');return validSource;};_this.mapStyleFromSize=function(size){var avatarStyle=avatarSize.small;if(typeof size==='object')return size;if(avatarSize[size])return avatarSize[size];return avatarStyle;};_this.mapShortNameStyle=function(size){var shortNameStyle={};switch(size){case AvatarSize.tiny:{shortNameStyle=shortName.tiny;break;}case AvatarSize.small:{shortNameStyle=shortName.small;break;}case AvatarSize.medium:{shortNameStyle=shortName.medium;break;}case AvatarSize.large:{shortNameStyle=shortName.large;break;}case AvatarSize.giant:{shortNameStyle=shortName.giant;break;}default:shortNameStyle=shortName.small;}return shortNameStyle;};_this.mapSubIconSize=function(size){var subIconStyle=subIconSize.small;if(subIconSize[size])return subIconSize[size];return subIconStyle;};_this.extractSize=function(avatarStyle){var style=_this.props.style;var borderWidth=(0,_lodash.get)(style,'borderWidth',1);var containerWidth=Math.round(avatarStyle.width+2+borderWidth);return{width:containerWidth,height:containerWidth,borderRadius:containerWidth/2,borderWidth:borderWidth,borderColor:_colorCore.ColorCore.black_01};};_this.onLoadSourceError=function(){_this.setState({hideSource:true,ownUpdate:true});};_this.renderSubIcon=function(){var _this$props=_this.props,subIcon=_this$props.subIcon,size=_this$props.size,subIconSource=_this$props.subIconSource;if((!subIcon||subIcon===SubIconType.none)&&!subIconSource)return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:404,columnNumber:82}});var subIconSizeStyle=_this.mapSubIconSize(size);var iconSource=_ValueUtil.default.getImageSource(subIconSource);return _react.default.createElement(_reactNative.View,{style:styles.subIcon,__source:{fileName:_jsxFileName,lineNumber:408,columnNumber:13}},subIcon===SubIconType.momo?_react.default.createElement(_reactNative.Image,{style:[styles.subIconImage,subIconSizeStyle],source:_icons.Icons.ic_round_momo_tiny,__source:{fileName:_jsxFileName,lineNumber:411,columnNumber:25}}):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:416,columnNumber:23}}),subIcon===SubIconType.online?_react.default.createElement(_reactNative.View,{style:[styles.subIconImageOnline,subIconSizeStyle],__source:{fileName:_jsxFileName,lineNumber:418,columnNumber:23}}):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:418,columnNumber:88}}),iconSource&&subIconSource&&!subIcon?_react.default.createElement(_reactNative.Image,{style:[styles.subIconImage,subIconSizeStyle],source:iconSource,__source:{fileName:_jsxFileName,lineNumber:421,columnNumber:21}}):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:426,columnNumber:23}}));};_this.onPress=function(){var onPress=_this.props.onPress;if(onPress&&typeof onPress==='function')onPress();};_this.state={hideSource:false,ownUpdate:false,source:props.source};return _this;}(0,_createClass2.default)(Avatar,[{key:"isUrl",value:function isUrl(url){var expression=/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/gi;return expression.test(url);}},{key:"render",value:function render(){var _this$props2=this.props,size=_this$props2.size,source=_this$props2.source,name=_this$props2.name,resizeMode=_this$props2.resizeMode,style=_this$props2.style,onPress=_this$props2.onPress,isShowLoading=_this$props2.isShowLoading,loading=_this$props2.loading,cached=_this$props2.cached,extraPropsImage=_this$props2.extraPropsImage;var hideSource=this.state.hideSource;var avatarStyle=this.mapStyleFromSize(size);var containerSize=this.extractSize(avatarStyle);var imageSource=_ValueUtil.default.getImageSource(source);var showName=typeof imageSource==='object'&&Object.keys(imageSource).length===0&&typeof imageSource!=='number';var inner=_react.default.createElement(_reactNative.View,{style:[styles.container,avatarStyle,style],__source:{fileName:_jsxFileName,lineNumber:446,columnNumber:13}},showName||hideSource?this.renderShortName(name,avatarStyle,size):null,this.isValidImageUrl(imageSource)&&!hideSource?_react.default.createElement(_reactNative.Image,(0,_extends2.default)({cached:cached,loading:loading||isShowLoading,source:imageSource,onError:this.onLoadSourceError,style:avatarStyle,resizeMode:resizeMode},extraPropsImage,{__source:{fileName:_jsxFileName,lineNumber:450,columnNumber:25}})):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:459,columnNumber:25}}),this.renderSubIcon());if(onPress){return _react.default.createElement(_reactNative.TouchableOpacity,{activeOpacity:onPress?0.5:1,onPress:this.onPress,__source:{fileName:_jsxFileName,lineNumber:465,columnNumber:17}},inner);}return inner;}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,prevState){if(prevState.ownUpdate){return{ownUpdate:false};}if(!(0,_lodash.isEqual)(nextProps.source,prevState.source)){return{source:nextProps.source,hideSource:false};}return null;}}]);return Avatar;}(_react.Component);exports.default=Avatar;Avatar.propTypes={name:_propTypes.default.string,resizeMode:_propTypes.default.string,size:_propTypes.default.oneOf(['tiny','small','medium','large','giant','size8','size24','size36','size44','size48','size52','size56','size64','size72','size80','size88','size96']),source:_propTypes.default.oneOfType([_propTypes.default.shape({uri:_propTypes.default.string}),_propTypes.default.number,_propTypes.default.string]),subIcon:_propTypes.default.oneOf(['momo','online','key','none']),subIconSource:_propTypes.default.oneOfType([_propTypes.default.shape({uri:_propTypes.default.string}),_propTypes.default.number,_propTypes.default.string]),style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),onPress:_propTypes.default.func,loading:_propTypes.default.bool,cached:_propTypes.default.bool,extraPropsImage:_propTypes.default.object};Avatar.defaultProps={resizeMode:'cover',size:'medium',cached:true};
+/* eslint-disable indent */
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import {
+    View, StyleSheet, TouchableOpacity, Image, Dimensions
+} from 'react-native';
+import { get, isEqual } from 'lodash';
+import ValueUtil from '../../core/utils/ValueUtil';
+import Colors from '../../core/colors';
+import { Icons as IconSource } from '../../core/icons';
+import Text from '../../core/components/typography';
+import { RFValueHorizontal as ScaleSize } from '../../core/components/typography/reponsiveSize';
+
+export const AvatarQuality = {
+    low: 'low',
+    medium: 'medium',
+    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',
+    medium: 'medium',
+    large: 'large',
+    giant: 'giant',
+    size8: 'size8',
+    size24: 'size24',
+    size36: 'size36',
+    size44: 'size44',
+    size48: 'size48',
+    size52: 'size52',
+    size56: 'size56',
+    size64: 'size64',
+    size72: 'size72',
+    size80: 'size80',
+    size88: 'size88',
+    size96: 'size96'
+};
+
+export const SubIconType = {
+    momo: 'momo',
+    online: 'online',
+    key: 'key',
+    none: 'none'
+};
+
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    shortNameView: {
+        justifyContent: 'center',
+        alignItems: 'center',
+
+        backgroundColor: Colors.very_light_pink_four,
+        width: '100%',
+        height: '100%'
+    },
+    shortNameText: {
+        // fontSize: 17,
+        color: '#f6f6f6'
+    },
+    absolute: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+    },
+    subIcon: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0
+    },
+    subIconImage: {
+        width: 22,
+        height: 22
+    },
+    subIconImageOnline: {
+        backgroundColor: Colors.kiwi_green,
+        borderColor: 'white',
+        borderWidth: 1
+    }
+});
+
+const subIconSize = (width) => ({
+    tiny: {
+        width: 8,
+        height: 8,
+        borderRadius: 4
+    },
+    small: {
+        width: 10,
+        height: 10,
+        borderRadius: 5
+    },
+    medium: {
+        width: 12,
+        height: 12,
+        borderRadius: 6
+    },
+    large: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    size8: {
+        width: 8,
+        height: 8,
+        borderRadius: 4
+    },
+    size24: {
+        width: 10,
+        height: 10,
+        borderRadius: 5
+    },
+    size36: {
+        width: 10,
+        height: 10,
+        borderRadius: 5
+    },
+    size44: {
+        width: 14,
+        height: 14,
+        borderRadius: 7
+    },
+    size48: {
+        width: 14,
+        height: 14,
+        borderRadius: 7
+    },
+    size52: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    size56: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    size64: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        top: -2,
+        left: -2,
+    },
+    size72: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        top: -3,
+        left: -3,
+    },
+    size80: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        top: -3,
+        left: -3,
+    },
+    size88: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        top: -4,
+        left: -4,
+    },
+    size96: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        top: -4,
+        left: -4,
+    },
+    giant: {
+        top: -5,
+        left: -5,
+        width: 24,
+        height: 24,
+        borderRadius: 12
+    }
+});
+
+const avatarSize = (width) => ({
+    tiny: {
+        width: 16,
+        height: 16,
+        borderRadius: 8
+    },
+    small: {
+        width: 32,
+        height: 32,
+        borderRadius: 16
+    },
+    medium: {
+        width: 40,
+        height: 40,
+        borderRadius: 20
+    },
+    large: {
+        width: 60,
+        height: 60,
+        borderRadius: 30
+    },
+    giant: {
+        width: 120,
+        height: 120,
+        borderRadius: 60
+    },
+    size8: {
+        width: 8,
+        height: 8,
+        borderRadius: 4
+    },
+    size24: {
+        width: 24,
+        height: 24,
+        borderRadius: 12
+    },
+    size36: {
+        width: 36,
+        height: 36,
+        borderRadius: 18
+    },
+    size44: {
+        width: 44,
+        height: 44,
+        borderRadius: 22
+    },
+    size48: {
+        width: 48,
+        height: 48,
+        borderRadius: 24
+    },
+    size52: {
+        width: 52,
+        height: 52,
+        borderRadius: 26
+    },
+    size56: {
+        width: 56,
+        height: 56,
+        borderRadius: 28
+    },
+    size64: {
+        width: 64,
+        height: 64,
+        borderRadius: 32
+    },
+    size72: {
+        width: 72,
+        height: 72,
+        borderRadius: 36
+    },
+    size80: {
+        width: 80,
+        height: 80,
+        borderRadius: 40
+    },
+    size88: {
+        width: 88,
+        height: 88,
+        borderRadius: 44
+    },
+    size96: {
+        width: 96,
+        height: 96,
+        borderRadius: 48
+    }
+});
+
+const shortName = (width) => ({
+    tiny: {
+        fontSize: ScaleSize(5, width)
+    },
+    small: {
+        fontSize: ScaleSize(11, width)
+    },
+    medium: {
+        fontSize: ScaleSize(15, width)
+    },
+    large: {
+        fontSize: ScaleSize(20, width)
+    },
+    giant: {
+        fontSize: ScaleSize(25, width)
+    }
+});
+
+export default class Avatar extends Component {
+    constructor(props) {
+        super(props);
+        this.color = this.getAvatarColor(props.name);
+        this.state = {
+            hideSource: false,
+            ownUpdate: false,
+            source: props.source,
+            dimensions: {}
+        };
+    }
+
+    componentDidMount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription = Dimensions.addEventListener(
+                'change',
+                ({ window }) => {
+                    if(window?.height > 0 && window?.width > 0) {
+                        this.setState({ dimensions: window });
+                    }
+                }
+            );
+        }
+    }
+
+    componentWillUnmount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription?.remove?.();
+        }
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if (prevState.ownUpdate) {
+            return {
+                ownUpdate: false,
+            };
+        } if (!isEqual(nextProps.source, prevState.source)) {
+            return { source: nextProps.source, hideSource: false };
+        }
+        return null;
+    }
+
+    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('');
+    }
+
+    renderShortName = (name, avatarStyle, size) => {
+        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>
+            );
+        }
+        return <View />;
+    }
+
+    isUrl(url) {
+        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) {
+            return url;
+        }
+        if (quality === AvatarQuality.low) {
+            return url.replace('.png', '_s64.png');
+        }
+        if (quality === AvatarQuality.high) {
+            return url.replace('.png', '_s512.png');
+        }
+
+        return url;
+    }
+
+    mapStyleFromSize = (size) => {
+        const { dimensions } = this.state;
+        const avatarStyle = avatarSize(dimensions?.width || null).small;
+        if (typeof size === 'object') return size;
+        if (avatarSize(dimensions?.width || null)[size]) return avatarSize(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;
+                break;
+            }
+            case AvatarSize.small: {
+                shortNameStyle = shortName(dimensions?.width || null).small;
+                break;
+            }
+            case AvatarSize.medium: {
+                shortNameStyle = shortName(dimensions?.width || null).medium;
+                break;
+            }
+            case AvatarSize.large: {
+                shortNameStyle = shortName(dimensions?.width || null).large;
+                break;
+            }
+            case AvatarSize.giant: {
+                shortNameStyle = shortName(dimensions?.width || null).giant;
+                break;
+            }
+            default:
+                shortNameStyle = shortName(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];
+        return subIconStyle;
+    }
+
+    extractSize = (avatarStyle) => {
+        const { style } = this.props;
+        const borderWidth = get(style, 'borderWidth', 1);
+        const containerWidth = Math.round(avatarStyle.width + 2 + borderWidth);
+        return {
+            width: containerWidth,
+            height: containerWidth,
+            borderRadius: containerWidth / 2,
+            borderWidth,
+            borderColor: Colors.black_01
+        };
+    }
+
+    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 });
+    }
+
+    renderSubIcon = () => {
+        const { subIcon, size, subIconSource } = this.props;
+        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 />}
+
+                {iconSource && subIconSource && !subIcon ? (
+                    <Image
+                        style={[styles.subIconImage, subIconSizeStyle]}
+                        source={iconSource}
+                    />
+                )
+                    : <View />}
+            </View>
+        );
+    }
+
+    onPress = () => {
+        const { onPress } = this.props;
+        if (onPress && typeof onPress === 'function') onPress();
+    }
+
+    render() {
+        const {
+            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';
+        // add priority high for avatar
+        if (imageSource?.uri) {
+            imageSource.priority = 'high';
+            imageSource.uri = this.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 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 />}
+                {this.renderSubIcon()}
+            </View>
+        );
+        if (onPress) {
+            return (
+                <TouchableOpacity activeOpacity={onPress ? 0.5 : 1} onPress={this.onPress}>
+                    {inner}
+                </TouchableOpacity>
+            );
+        }
+        return inner;
+    }
+}
+
+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]),
+    subIcon: PropTypes.oneOf(['momo', 'online', 'key', 'none']),
+    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
+};
+
+Avatar.defaultProps = {
+    resizeMode: 'cover',
+    cached: true,
+    scaleSize: false,
+    quality: 'medium',
+};

package/index.js

@@ -1 +1,3 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _Avatar=_interopRequireDefault(require("./Avatar"));var _default=_Avatar.default;exports.default=_default;
+import Avatar from './Avatar';
+
+export default Avatar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/avatar",
-  "version": "0.0.34-beta",
+  "version": "0.0.34",
   "private": false,
   "main": "index.js",
   "dependencies": {},
@@ -8,16 +8,9 @@
     "react-native": ">=0.55",
     "prop-types": "^15.7.2",
     "react": "16.9.0",
-    "lodash": "^4.17.15",
-    "@momo-kits/core": ">=0.0.5-beta"
+    "@momo-kits/core": ">=0.0.5-beta",
+    "lodash": "^4.17.15"
   },
-  "devDependencies": {
-    "metro-react-native-babel-preset": "^0.64.0",
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5"
-  },
-  "license": "MoMo",
-  "jest": {
-    "preset": "react-native"
-  }
+  "devDependencies": {},
+  "license": "MoMo"
 }

package/publish.sh

@@ -12,7 +12,7 @@ echo VERSION: $VERSION
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' --exclude 'web.js' ./* dist
 
 # #babel component to dist
-babel ./dist -d dist --copy-files
+#babel ./dist -d dist --copy-files
 
 #copy option
 #cp -r ./src/ dist
@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-echo  '{"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"}'

package/babel.config.js

@@ -1 +0,0 @@
-module.exports={presets:['module:metro-react-native-babel-preset']};