vn-verdnaturachat/app/containers/Avatar.js

90 lines
2.0 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, Text, View } from 'react-native';
import { CachedImage } from 'react-native-img-cache';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
2017-09-01 20:20:34 +00:00
import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
const styles = StyleSheet.create({
iconContainer: {
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center'
},
avatar: {
position: 'absolute'
},
avatarInitials: {
color: '#ffffff'
}
});
@connect(state => ({
baseUrl: state.settings.Site_Url
}))
class Avatar extends React.PureComponent {
render() {
2017-11-13 12:58:35 +00:00
const {
text = '', size = 25, baseUrl, borderRadius = 4, style, avatar, type = 'd'
2017-11-13 12:58:35 +00:00
} = this.props;
const { initials, color } = avatarInitialsAndColor(`${ text }`);
2017-09-01 20:20:34 +00:00
const iconContainerStyle = {
backgroundColor: color,
width: size,
height: size,
borderRadius
};
const avatarInitialsStyle = {
fontSize: size / 2
};
const avatarStyle = {
width: size,
height: size,
borderRadius
2017-09-01 20:20:34 +00:00
};
if (type === 'd') {
const uri = avatar || `${ baseUrl }/avatar/${ text }`;
const image = (avatar || baseUrl) && (
<CachedImage
style={[styles.avatar, avatarStyle]}
source={{ uri }}
/>
);
return (
<View style={[styles.iconContainer, iconContainerStyle, style]}>
2017-12-11 20:37:33 +00:00
<Text style={[styles.avatarInitials, avatarInitialsStyle]} allowFontScaling={false}>{initials}</Text>
{image}
</View>);
}
const icon = {
c: 'pound',
p: 'lock',
l: 'account'
}[type];
2017-09-01 20:20:34 +00:00
return (
2017-09-01 20:20:34 +00:00
<View style={[styles.iconContainer, iconContainerStyle, style]}>
<MaterialCommunityIcons name={icon} style={[styles.avatarInitials, avatarInitialsStyle]} />
</View>
);
}
}
Avatar.propTypes = {
style: PropTypes.object,
baseUrl: PropTypes.string,
text: PropTypes.string.isRequired,
avatar: PropTypes.string,
size: PropTypes.number,
borderRadius: PropTypes.number,
type: PropTypes.string
};
export default Avatar;