82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
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;
|