Merge pull request #112 from Detaysoft/avatar-letter-item

added avatar letter item

Author: abdurrahmanekr

README.md

@@ -472,6 +472,7 @@ import { Avatar } from 'react-chat-elements'
 | alt | none | string | image alt description |
 | size | default | string | image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px) |
 | type | default | string | types: default, circle, rounded(border radius 5px), flexible |
+| letterItem | none | object | avatar to be a letter |
 | sideElement | none | component | avatar side element |
 | onError | none | component | avatar img onerror |
 | lazyLoadingImage | none | image path | lazy loading image |

native/ChatItem/ChatItem.js

@@ -22,6 +22,7 @@ export class ChatItem extends Component {
                         <Avatar
                             src={this.props.avatar}
                             alt={this.props.alt}
+                            letterItem={this.props.letterItem}
                             sideElement={
                                 this.props.statusColor &&
                                 <View

native/MessageBox/MessageBox.js

@@ -57,6 +57,7 @@ export class MessageBox extends Component {
                                                             width: 30,
                                                             height: 30,
                                                         }}
+                                                        letterItem={this.props.letterItem}
                                                         src={this.props.avatar}/>
                                             </View>
                                         }

src/Avatar/Avatar.css

@@ -75,3 +75,18 @@
     box-sizing: border-box;
     position: relative;
 }
+
+.rce-avatar-letter {
+    margin-top: 5px;
+    font-size: 20px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.rce-avatar-letter-background{
+    height: 35px;
+    width: 35px;
+    border-radius: 20px;
+}

src/Avatar/Avatar.js

@@ -42,6 +42,20 @@ export class Avatar extends Component {
         img.onerror = loaded;
     }
 
+    stringToColour (str) {
+        var hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        var colour = '#';
+        for (let i = 0; i < 3; i++) {
+            var value = (hash >> (i * 8)) & 0xFF;
+            value = (value % 150) + 50;
+            colour += ('00' + value.toString(16)).substr(-2);
+        }
+        return colour;
+    }
+
     render() {
         let src = this.props.src;
         let isLazyImage = false;
@@ -63,14 +77,25 @@ export class Avatar extends Component {
 
         return (
             <div className={classNames('rce-avatar-container', this.props.type, this.props.size, this.props.className)}>
-                <img
-                    alt={this.props.alt}
-                    src={src}
-                    onError={this.props.onError}
-                    className={classNames(
-                        'rce-avatar',
-                        {'rce-avatar-lazy': isLazyImage},
-                    )} />
+                {
+                    this.props.letterItem ?
+                    <div
+                        className="rce-avatar-letter-background"
+                        style={{ backgroundColor: this.stringToColour(this.props.letterItem.id)}}>
+                        <span class="rce-avatar-letter">
+                            {this.props.letterItem.letter}
+                        </span>
+                    </div>
+                    :
+                    <img
+                        alt={this.props.alt}
+                        src={src}
+                        onError={this.props.onError}
+                        className={classNames(
+                            'rce-avatar',
+                            {'rce-avatar-lazy': isLazyImage},
+                        )} />
+                }
                 {this.props.sideElement}
             </div>
         );

src/ChatItem/ChatItem.js

@@ -31,6 +31,7 @@ export class ChatItem extends Component {
                             alt={this.props.alt}
                             className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
                             size="large"
+                            letterItem={this.props.letterItem}
                             sideElement={
                                 this.props.statusColor &&
                                 <span

src/MessageBox/MessageBox.js

@@ -94,6 +94,7 @@ export class MessageBox extends Component {
                                         {
                                             this.props.avatar &&
                                             <Avatar
+                                                letterItem={this.props.letterItem}
                                                 src={this.props.avatar}/>
                                         }
                                         {