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 '@rocket.chat/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;