Merge pull request #88 from Detaysoft/lazy-feature

LazyLoadingImage feature added.

Author: abdurrahmanekr

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

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

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

src/ChatItem/ChatItem.js

@@ -27,6 +27,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 +79,7 @@ ChatItem.defaultProps = {
     statusColor: null,
     statusText: null,
     dateString: null,
+    lazyLoadingImage: undefined,
     onAvatarError: () => void(0),
 }
 

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;