Img onerror event added Avatar

README.md

@@ -235,6 +235,7 @@ import { ChatList } from 'react-chat-elements'
 | dataSource | [] | array | chat list array |
 | 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 |
 
 ## Input Component
 
@@ -445,6 +446,7 @@ import { Avatar } from 'react-chat-elements'
 | 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 |
 | sideElement | none | component | avatar side element |
+| onError | none | component | avatar img onerror |
 
 
 ## LocationMessage Component

package.json

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

src/Avatar/Avatar.js

@@ -7,7 +7,11 @@ export class Avatar extends Component {
     render() {
         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} className={'rce-avatar'} />
+                <img
+                    alt={this.props.alt}
+                    src={this.props.src}
+                    onError={this.props.onError}
+                    className={'rce-avatar'} />
                 {this.props.sideElement}
             </div>
         );
@@ -20,6 +24,7 @@ Avatar.defaultProps = {
     src: '',
     alt: '',
     sideElement: null,
+    onError: () => void(0),
 };
 
 export default Avatar;

src/Avatar/__tests__/__snapshots__/Avatar.js.snap

@@ -7,6 +7,7 @@ exports[`Avatar component should render without issues 1`] = `
   <img
     alt=""
     className="rce-avatar"
+    onError={[Function]}
     src=""
   />
 </div>

src/ChatItem/ChatItem.js

@@ -26,6 +26,7 @@ export class ChatItem extends Component {
                                     {this.props.statusText}
                                 </span>
                             }
+                            onError={this.props.onAvatarError}
                             type={classNames('circle', {'flexible': this.props.avatarFlexible})}/>
                     </div>
 
@@ -77,6 +78,7 @@ ChatItem.defaultProps = {
     statusColor: null,
     statusText: null,
     dateString: null,
+    onAvatarError: () => void(0),
 }
 
 export default ChatItem;

src/ChatItem/__tests__/__snapshots__/ChatItem.js.snap

@@ -13,6 +13,7 @@ exports[`ChatItem component should render without issues 1`] = `
     >
       <Avatar
         alt=""
+        onError={[Function]}
         sideElement={null}
         size="large"
         src=""

src/ChatList/ChatList.js

@@ -18,6 +18,11 @@ export class ChatList extends Component {
             this.props.onContextMenu(item, i, e);
     }
 
+    onAvatarError(item, i, e) {
+        if (this.props.onAvatarError instanceof Function)
+            this.props.onAvatarError(item, i, e);
+    }
+
     render() {
         return (
             <div
@@ -29,6 +34,7 @@ export class ChatList extends Component {
                             id={x.id || i}
                             key={i}
                             {...x}
+                            onAvatarError={(e) => this.onAvatarError(x,i,e)}
                             onContextMenu={(e) => this.onContextMenu(x,i,e)}
                             onClick={() => this.onClick(x, i)}/>
                     ))

src/LocationMessage/LocationMessage.js

@@ -41,7 +41,9 @@ export class LocationMessage extends Component {
                     target={this.props.target}
                     href={this.props.href || this.props.src || this.buildURL(MAP_URL)}
                     className={this.className()}>
-                    <img className='rce-mbox-location-img'
+                    <img
+                        onError={this.props.onError}
+                        className='rce-mbox-location-img'
                         src={
                             this.props.src ||
                             this.buildURL(STATIC_URL)
@@ -63,6 +65,7 @@ LocationMessage.defaultProps = {
     apiKey: '',
     zoom: 14,
     markerColor: 'red',
+    onError: () => void(0),
 }
 
 export default LocationMessage;

src/LocationMessage/__tests__/__snapshots__/LocationMessage.js.snap

@@ -11,6 +11,7 @@ exports[`LocationMessage component should render without issues 1`] = `
   >
     <img
       className="rce-mbox-location-img"
+      onError={[Function]}
       src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2&key="
     />
   </a>

src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap

@@ -10,6 +10,7 @@ exports[`MessageBox component should render without issues 1`] = `
   >
     <div
       className="rce-mbox-body"
+      onContextMenu={null}
     >
       <div
         className="rce-mbox-text"