| 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>
- );
- }
-}
- |
-