79 lines
1.6 KiB
JavaScript
79 lines
1.6 KiB
JavaScript
import { Text, View } from 'react-native'
|
|
import { Image as ExpoImage } from 'expo-image'
|
|
import { responsiveWidth } from '../actions/responsiveSizes.js'
|
|
import { getInitials } from '../helpers'
|
|
import { Fonts, Style } from '../styles'
|
|
|
|
export default ({ name = '', url = null, size = responsiveWidth(7), containerStyle = {} }) => {
|
|
const colors = [
|
|
'#FB68A8',
|
|
'#FA6DA8',
|
|
'#F971A7',
|
|
'#F876A7',
|
|
'#F67BA6',
|
|
'#F580A6',
|
|
'#F384A5',
|
|
'#F289A5',
|
|
'#F08EA4',
|
|
'#EF93A4',
|
|
'#ED97A3',
|
|
'#EC9CA3',
|
|
'#EAA1A2',
|
|
'#E8A6A2',
|
|
'#E7AAA1',
|
|
'#E5AFA1',
|
|
'#E3B4A0',
|
|
'#E2B9A0',
|
|
'#E0BDAF',
|
|
'#DFC2AE',
|
|
'#DDC7AE',
|
|
'#DBCBAE',
|
|
'#DACFAE',
|
|
'#D8D4AE',
|
|
'#D6D8AE',
|
|
'#D5DCAE',
|
|
'#D3E1AE',
|
|
'#D2E5AE',
|
|
'#D0E9AE',
|
|
'#CFEDAE',
|
|
]
|
|
|
|
const pickColor = (name) => {
|
|
const sumChars = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
|
|
const index = sumChars % 30
|
|
|
|
return colors[index]
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
...Style.containerRound,
|
|
width: size,
|
|
height: size,
|
|
backgroundColor: pickColor(name),
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
{url ? (
|
|
<ExpoImage
|
|
source={{ uri: url }}
|
|
cachePolicy="memory-disk"
|
|
priority="high"
|
|
contentFit="cover"
|
|
transition={100}
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
borderRadius: size / 2,
|
|
}}
|
|
/>
|
|
) : (
|
|
<Text style={Fonts({ type: 'section', style: { fontSize: size / 3 } })}>
|
|
{getInitials(name)}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|