From d8a3c22b82b2a94711f418e37655b9a2975da0b3 Mon Sep 17 00:00:00 2001
From: Abdurrahman eker <abdurrahmaneker58@gmail.com>
Date: Wed, 13 Feb 2019 14:01:15 +0300
Subject: [PATCH] LazyLoadingImage feature added.

---
 README.md                |  3 +++
 src/Avatar/Avatar.css    | 16 ++++++++++++
 src/Avatar/Avatar.js     | 54 ++++++++++++++++++++++++++++++++++++++--
 src/ChatItem/ChatItem.js |  3 +++
 src/ChatList/ChatList.js |  2 ++
 5 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 97b29b60..edddf33a 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,7 @@ import { ChatItem } from 'react-chat-elements'
 | onContextMenu | none | function | ChatItem on context menu |
 | statusColor | none | color | ChatItem status color |
 | statusText | none | color | ChatItem status text |
+| lazyLoadingImage | none | image path | lazy loading image |
 
 
 
@@ -237,6 +238,7 @@ import { ChatList } from 'react-chat-elements'
 | onClick | none | function | chat list item on click (chat(object) is returned) |
 | onContextMenu | none | function | chat list item on context menu (chat(object) is returned) |
 | onAvatarError | none | function | chat list item on error avatar img |
+| lazyLoadingImage | none | image path | lazy loading image |
 
 ## Input Component
 
@@ -448,6 +450,7 @@ import { Avatar } from 'react-chat-elements'
 | type | default | string | types: default, circle, rounded(border radius 5px), flexible |
 | sideElement | none | component | avatar side element |
 | onError | none | component | avatar img onerror |
+| lazyLoadingImage | none | image path | lazy loading image |
 
 
 ## LocationMessage Component
diff --git a/src/Avatar/Avatar.css b/src/Avatar/Avatar.css
index 9b201061..806fd422 100644
--- a/src/Avatar/Avatar.css
+++ b/src/Avatar/Avatar.css
@@ -55,3 +55,19 @@
     width: 55px;
     height: 55px;
 }
+
+@keyframes avatarLazy {
+    0% {
+        opacity:1;
+    }
+    50% {
+        opacity:.5;
+    }
+    100% {
+        opacity:1;
+    }
+}
+
+.rce-avatar-lazy {
+    animation: avatarLazy normal 2s infinite ease-in-out;
+}
diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
index eb657ece..303c1976 100644
--- a/src/Avatar/Avatar.js
+++ b/src/Avatar/Avatar.js
@@ -3,15 +3,64 @@ import './Avatar.css';
 
 const classNames = require('classnames');
 
+const loadedAvatars = [];
+
 export class Avatar extends Component {
+    constructor(props) {
+        super(props);
+
+        this.requestImage = this.requestImage.bind(this);
+    }
+
+    isLoaded(src) {
+        return loadedAvatars.indexOf(src) !== -1;
+    }
+
+    requestImage(src) {
+        var self = this;
+        this.loading = true;
+
+        var loaded = () => {
+            loadedAvatars.push(src);
+            delete self.loading;
+            self.setState({});
+        };
+
+        var img = document.createElement('img');
+        img.src = src;
+        img.onload = loaded;
+        img.onerror = loaded;
+    }
+
     render() {
+        var src = this.props.src;
+        var isLazyImage = false;
+
+        if (this.props.lazyLoadingImage) {
+            isLazyImage = true;
+
+            if (!this.isLoaded(src)) {
+                src = this.props.lazyLoadingImage; // lazy image
+
+                if (!this.loading) {
+                    this.requestImage(this.props.src);
+                }
+            }
+            else {
+                isLazyImage = false;
+            }
+        }
+
         return (
             <div className={classNames('rce-avatar-container', this.props.type, this.props.size, this.props.className)}>
                 <img
                     alt={this.props.alt}
-                    src={this.props.src}
+                    src={src}
                     onError={this.props.onError}
-                    className={'rce-avatar'} />
+                    className={classNames(
+                        'rce-avatar',
+                        {'rce-avatar-lazy': isLazyImage},
+                    )} />
                 {this.props.sideElement}
             </div>
         );
@@ -24,6 +73,7 @@ Avatar.defaultProps = {
     src: '',
     alt: '',
     sideElement: null,
+    lazyLoadingImage: undefined,
     onError: () => void(0),
 };
 
diff --git a/src/ChatItem/ChatItem.js b/src/ChatItem/ChatItem.js
index 082e98e7..636c21e9 100644
--- a/src/ChatItem/ChatItem.js
+++ b/src/ChatItem/ChatItem.js
@@ -11,6 +11,7 @@ export class ChatItem extends Component {
     render() {
         return (
             <div
+                id={this.props.id}
                 className={classNames('rce-container-citem', this.props.className)}
                 onClick={this.props.onClick}
                 onContextMenu={this.props.onContextMenu}>
@@ -27,6 +28,7 @@ export class ChatItem extends Component {
                                 </span>
                             }
                             onError={this.props.onAvatarError}
+                            lazyLoadingImage={this.props.lazyLoadingImage}
                             type={classNames('circle', {'flexible': this.props.avatarFlexible})}/>
                     </div>
 
@@ -78,6 +80,7 @@ ChatItem.defaultProps = {
     statusColor: null,
     statusText: null,
     dateString: null,
+    lazyLoadingImage: undefined,
     onAvatarError: () => void(0),
 }
 
diff --git a/src/ChatList/ChatList.js b/src/ChatList/ChatList.js
index 5b495421..af800dc7 100644
--- a/src/ChatList/ChatList.js
+++ b/src/ChatList/ChatList.js
@@ -33,6 +33,7 @@ export class ChatList extends Component {
                         <ChatItem
                             id={x.id || i}
                             key={i}
+                            lazyLoadingImage={this.props.lazyLoadingImage}
                             {...x}
                             onAvatarError={(e) => this.onAvatarError(x,i,e)}
                             onContextMenu={(e) => this.onContextMenu(x,i,e)}
@@ -47,6 +48,7 @@ export class ChatList extends Component {
 ChatList.defaultProps = {
     dataSource: [],
     onClick: null,
+    lazyLoadingImage: undefined,
 };
 
 export default ChatList;