1 | import PropTypes from 'prop-types';
|
2 | import React from 'react';
|
3 | import { Image, Text, TouchableOpacity, View, StyleSheet, } from 'react-native';
|
4 | import Color from './Color';
|
5 | import { StylePropType } from './utils';
|
6 | const { carrot, emerald, peterRiver, wisteria, alizarin, turquoise, midnightBlue, } = Color;
|
7 | const styles = StyleSheet.create({
|
8 | avatarStyle: {
|
9 | justifyContent: 'center',
|
10 | alignItems: 'center',
|
11 | width: 40,
|
12 | height: 40,
|
13 | borderRadius: 20,
|
14 | },
|
15 | avatarTransparent: {
|
16 | backgroundColor: Color.backgroundTransparent,
|
17 | },
|
18 | textStyle: {
|
19 | color: Color.white,
|
20 | fontSize: 16,
|
21 | backgroundColor: Color.backgroundTransparent,
|
22 | fontWeight: '100',
|
23 | },
|
24 | });
|
25 | export default class GiftedAvatar extends React.Component {
|
26 | constructor() {
|
27 | super(...arguments);
|
28 | this.avatarName = undefined;
|
29 | this.avatarColor = undefined;
|
30 | this.handleOnPress = () => {
|
31 | const { onPress, ...other } = this.props;
|
32 | if (this.props.onPress) {
|
33 | this.props.onPress(other);
|
34 | }
|
35 | };
|
36 | this.handleOnLongPress = () => { };
|
37 | }
|
38 | setAvatarColor() {
|
39 | const userName = (this.props.user && this.props.user.name) || '';
|
40 | const name = userName.toUpperCase().split(' ');
|
41 | if (name.length === 1) {
|
42 | this.avatarName = `${name[0].charAt(0)}`;
|
43 | }
|
44 | else if (name.length > 1) {
|
45 | this.avatarName = `${name[0].charAt(0)}${name[1].charAt(0)}`;
|
46 | }
|
47 | else {
|
48 | this.avatarName = '';
|
49 | }
|
50 | let sumChars = 0;
|
51 | for (let i = 0; i < userName.length; i += 1) {
|
52 | sumChars += userName.charCodeAt(i);
|
53 | }
|
54 |
|
55 |
|
56 | const colors = [
|
57 | carrot,
|
58 | emerald,
|
59 | peterRiver,
|
60 | wisteria,
|
61 | alizarin,
|
62 | turquoise,
|
63 | midnightBlue,
|
64 | ];
|
65 | this.avatarColor = colors[sumChars % colors.length];
|
66 | }
|
67 | renderAvatar() {
|
68 | const { user } = this.props;
|
69 | if (user) {
|
70 | if (typeof user.avatar === 'function') {
|
71 | return user.avatar([styles.avatarStyle, this.props.avatarStyle]);
|
72 | }
|
73 | else if (typeof user.avatar === 'string') {
|
74 | return (<Image source={{ uri: user.avatar }} style={[styles.avatarStyle, this.props.avatarStyle]}/>);
|
75 | }
|
76 | else if (typeof user.avatar === 'number') {
|
77 | return (<Image source={user.avatar} style={[styles.avatarStyle, this.props.avatarStyle]}/>);
|
78 | }
|
79 | }
|
80 | return null;
|
81 | }
|
82 | renderInitials() {
|
83 | return (<Text style={[styles.textStyle, this.props.textStyle]}>
|
84 | {this.avatarName}
|
85 | </Text>);
|
86 | }
|
87 | render() {
|
88 | if (!this.props.user ||
|
89 | (!this.props.user.name && !this.props.user.avatar)) {
|
90 | // render placeholder
|
91 | return (<View style={[
|
92 | styles.avatarStyle,
|
93 | styles.avatarTransparent,
|
94 | this.props.avatarStyle,
|
95 | ]} accessibilityTraits='image'/>);
|
96 | }
|
97 | if (this.props.user.avatar) {
|
98 | return (<TouchableOpacity disabled={!this.props.onPress} onPress={this.props.onPress} onLongPress={this.props.onLongPress} accessibilityTraits='image'>
|
99 | {this.renderAvatar()}
|
100 | </TouchableOpacity>);
|
101 | }
|
102 | this.setAvatarColor();
|
103 | return (<TouchableOpacity disabled={!this.props.onPress} onPress={this.props.onPress} onLongPress={this.props.onLongPress} style={[
|
104 | styles.avatarStyle,
|
105 | { backgroundColor: this.avatarColor },
|
106 | this.props.avatarStyle,
|
107 | ]} accessibilityTraits='image'>
|
108 | {this.renderInitials()}
|
109 | </TouchableOpacity>);
|
110 | }
|
111 | }
|
112 | GiftedAvatar.defaultProps = {
|
113 | user: {
|
114 | name: null,
|
115 | avatar: null,
|
116 | },
|
117 | onPress: undefined,
|
118 | onLongPress: undefined,
|
119 | avatarStyle: {},
|
120 | textStyle: {},
|
121 | };
|
122 | GiftedAvatar.propTypes = {
|
123 | user: PropTypes.object,
|
124 | onPress: PropTypes.func,
|
125 | onLongPress: PropTypes.func,
|
126 | avatarStyle: StylePropType,
|
127 | textStyle: StylePropType,
|
128 | };
|
129 | //# sourceMappingURL=GiftedAvatar.js.map |
\ | No newline at end of file |