verdnatura-chat/app/views/WorkspaceView/ServerAvatar.js

82 lines
2.0 KiB
JavaScript
Raw Permalink Normal View History

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { createImageProgress } from 'react-native-image-progress';
import * as Progress from 'react-native-progress';
import FastImage from 'react-native-fast-image';
import sharedStyles from '../Styles';
import { themes } from '../../constants/colors';
import { isTablet } from '../../utils/deviceInfo';
const ImageProgress = createImageProgress(FastImage);
const SIZE = 96;
const MARGIN_TOP = isTablet ? 0 : 64;
const BORDER_RADIUS = 6;
const styles = StyleSheet.create({
container: {
marginBottom: 16,
width: '100%',
height: SIZE + MARGIN_TOP,
justifyContent: 'flex-end',
alignItems: 'center'
},
image: {
width: SIZE,
height: SIZE,
borderRadius: BORDER_RADIUS
},
fallback: {
width: SIZE,
height: SIZE,
borderRadius: BORDER_RADIUS,
alignItems: 'center',
justifyContent: 'center'
},
initial: {
...sharedStyles.textBold,
fontSize: 42
}
});
const getInitial = url => url && url.replace(/http(s?):\/\//, '').slice(0, 1);
const Fallback = ({ theme, initial }) => (
<View style={[styles.container, styles.fallback, { backgroundColor: themes[theme].dangerColor }]}>
<Text style={[styles.initial, { color: themes[theme].buttonText }]}>{initial}</Text>
</View>
);
const ServerAvatar = React.memo(({ theme, url, image }) => (
<View style={styles.container}>
{image && (
<ImageProgress
style={[styles.image, { borderColor: themes[theme].borderColor }]}
source={{ uri: `${ url }/${ image }` }}
resizeMode={FastImage.resizeMode.cover}
indicator={Progress.Pie}
indicatorProps={{
color: themes[theme].actionTintColor
}}
renderError={() => <Fallback theme={theme} initial={getInitial(url)} />}
/>
)}
</View>
));
ServerAvatar.propTypes = {
theme: PropTypes.string,
url: PropTypes.string,
image: PropTypes.string
};
ServerAvatar.displayName = 'ServerAvatar';
Fallback.propTypes = {
theme: PropTypes.string,
initial: PropTypes.string
};
export default ServerAvatar;