react-native-user-avatar
Version:
React Native component for a user avatar with fallback to colored initials
2 lines • 3.4 kB
JavaScript
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"generateBackgroundColor",{enumerable:true,get:function get(){return _helpers.generateBackgroundColor;}});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");require("abortcontroller-polyfill/dist/abortcontroller-polyfill-only");var _components=require("./components/");var _helpers=require("./helpers");var _jsxFileName="/Users/Avishay.Bar/dev/personal/react-native-user-avatar/src/index.js";;var UserAvatar=function UserAvatar(props){var name=props.name,src=props.src,bgColor=props.bgColor,bgColors=props.bgColors,textColor=props.textColor,size=props.size,imageStyle=props.imageStyle,style=props.style,borderRadius=props.borderRadius,component=props.component,noUpperCase=props.noUpperCase,textStyle=props.textStyle;if(typeof size==='string'){console.warn('size prop should be a number');size=parseInt(size);}var _useState=(0,_react.useState)(_react.default.createElement(_components.TextAvatar,{textColor:textColor,size:size,name:name,noUpperCase:noUpperCase,textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:7}})),_useState2=(0,_slicedToArray2.default)(_useState,2),inner=_useState2[0],setInner=_useState2[1];(0,_react.useEffect)(function(){if(component){setInner(_react.default.createElement(_components.CustomAvatar,{size:size,component:component,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:16}}));}else if(src){var controller=new(AbortController||window.AbortController)();(0,_helpers.fetchImage)(src,{signal:controller.signal}).then(function(isImage){if(isImage){setInner(_react.default.createElement(_components.ImageAvatar,{src:src,size:size,imageStyle:imageStyle,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:15}}));}});return function(){return controller.abort();};}else{setInner(_react.default.createElement(_components.TextAvatar,{textColor:textColor,size:size,name:name,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:16}}));}},[textColor,size,name,component,imageStyle,src]);return _react.default.createElement(_reactNative.View,{style:[(0,_helpers.generateBackgroundStyle)(name,bgColor,bgColors),(0,_helpers.getContainerStyle)(size,src,borderRadius),style],__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:5}},inner);};UserAvatar.propTypes={name:_propTypes.default.string,src:_propTypes.default.string,bgColor:_propTypes.default.string,bgColors:_propTypes.default.array,textColor:_propTypes.default.string,size:_propTypes.default.number,imageStyle:_propTypes.default.object,style:_propTypes.default.object,textStyle:_propTypes.default.object,borderRadius:_propTypes.default.number,component:_propTypes.default.any,noUpperCase:_propTypes.default.bool,textStyle:_propTypes.default.object};UserAvatar.defaultProps={size:32,textColor:'#fff',name:'John Doe',bgColors:['#2ecc71','#3498db','#8e44ad','#e67e22','#e74c3c','#1abc9c','#2c3e50'],textStyle:{}};var _default=UserAvatar;exports.default=_default;
//# sourceMappingURL=index.js.map