| 1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+49
+50
+51
+52
+53
+54
+55
+56
+57
+58
+59
+60
+61
+62
+63
+64
+65
+66
+67
+68
+69
+70
+71
+72
+73
+74
+75
+76
+77
+78
+79
+80
+81
+82
+83
+84
+85
+86
+87
+88
+89
+90
+91
+92
+93
+94
+95
+96
+97
+98
+99
+100
+101
+102
+103
+104
+105
+106
+107
+108
+109
+110
+111
+112
+113
+114
+115
+116
+117
+118
+119
+120
+121
+122
+123
+124
+125
+126
+127
+128
+129 |
+
+
+
+
+
+
+
+1x
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+1x
+
+1x
+
+
+
+
+
+
+1x
+
+
+
+1x
+1x
+1x
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+1x
+1x
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+1x
+
+1x
+
+
+
+
+
+
+
+
+ | import React from 'react';
+import { CachedImage } from 'react-native-img-cache';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import PropTypes from 'prop-types';
+import { View, Text, StyleSheet } from 'react-native';
+
+import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
+
+const styles = StyleSheet.create({
+ container: {
+ // flex: 1,
+ flexDirection: 'row',
+ paddingLeft: 16,
+ paddingRight: 16,
+ height: 56,
+ alignItems: 'center'
+ },
+ number: {
+ minWidth: 20,
+ borderRadius: 5,
+ backgroundColor: '#1d74f5',
+ color: '#fff',
+ textAlign: 'center',
+ overflow: 'hidden',
+ fontSize: 14,
+ paddingLeft: 5,
+ paddingRight: 5
+ },
+ roomName: {
+ flex: 1,
+ fontSize: 16,
+ color: '#444',
+ marginLeft: 16,
+ marginRight: 4
+ },
+ iconContainer: {
+ height: 40,
+ width: 40,
+ borderRadius: 20,
+ overflow: 'hidden',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ icon: {
+ fontSize: 20,
+ color: '#fff'
+ },
+ avatar: {
+ width: 40,
+ height: 40,
+ position: 'absolute',
+ borderRadius: 20
+ },
+ avatarInitials: {
+ fontSize: 20,
+ color: '#ffffff'
+ }
+});
+
+export default class RoomItem extends React.PureComponent {
+ static propTypes = {
+ type: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ unread: PropTypes.number,
+ baseUrl: PropTypes.string
+ }
+
+ get icon() {
+ const { type, name, baseUrl } = this.props;
+
+ const icon = {
+ d: 'at',
+ c: 'pound',
+ p: 'lock',
+ l: 'account'
+ }[type];
+
+ Iif (!icon) {
+ return null;
+ }
+
+ Eif (type === 'd') {
+ const { initials, color } = avatarInitialsAndColor(name);
+ return (
+ <View style={[styles.iconContainer, { backgroundColor: color }]}>
+ <Text style={styles.avatarInitials}>{initials}</Text>
+ <CachedImage style={styles.avatar} source={{ uri: `${ baseUrl }/avatar/${ name }` }} />
+ </View>
+ );
+ }
+
+ const { color } = avatarInitialsAndColor(name);
+
+ return (
+ <View style={[styles.iconContainer, { backgroundColor: color }]}>
+ <MaterialCommunityIcons name={icon} style={styles.icon} />
+ </View>
+ );
+ }
+
+ renderNumber = (unread) => {
+ Eif (!unread || unread <= 0) {
+ return;
+ }
+
+ if (unread >= 1000) {
+ unread = '999+';
+ }
+
+ return (
+ <Text style={styles.number}>
+ { unread }
+ </Text>
+ );
+ }
+
+ render() {
+ const { unread, name } = this.props;
+
+ return (
+ <View style={styles.container}>
+ {this.icon}
+ <Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
+ {this.renderNumber(unread)}
+ </View>
+ );
+ }
+}
+ |
+