Merge pull request #66 from Detaysoft/next

onLoad event added on PhotoMessage

Author: abdurrahmanekr

README.md

@@ -133,6 +133,7 @@ import { MessageBox } from 'react-chat-elements'
 | onClick | none | function | message on click (message(object) is returned) |
 | onOpen | none | function | message on open (file or photo) (message(object) is returned) |
 | onDownload | none | function | message on download (file or photo) (message(object) is returned) |
+| onLoad | none | function | message on load photo |
 | onTitleClick | none | function | message title on click event |
 | onForwardClick | none | function | message forward on click event |
 | forwarded | none | boolean | message forward icon |

example/App.js

@@ -109,6 +109,9 @@ export class App extends Component {
                         latitude: '37.773972',
                         longitude: '-122.431297',
                     },
+                    onLoad: () => {
+                        console.log('Photo loaded');
+                    },
                     status: status,
                     date: new Date(),
                     dateString: moment(new Date()).format('HH:mm'),

package.json

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

src/MessageBox/MessageBox.js

@@ -110,6 +110,7 @@ export class MessageBox extends Component {
                                     <PhotoMessage
                                         onOpen={this.props.onOpen}
                                         onDownload={this.props.onDownload}
+                                        onLoad={this.props.onLoad}
                                         data={this.props.data}
                                         width={this.props.width}
                                         height={this.props.height}
@@ -220,6 +221,7 @@ MessageBox.defaultProps = {
     onClick: null,
     onOpen: null,
     onDownload: null,
+    onLoad: null,
     forwarded: false,
     status: null,
     dateString: null,

src/PhotoMessage/PhotoMessage.js

@@ -34,7 +34,11 @@ export class PhotoMessage extends Component {
                         width: this.props.data.width,
                         height: this.props.data.height,
                     }}>
-                    <img src={this.props.data.uri} alt={this.props.data.alt} onClick={this.props.onOpen}/>
+                    <img
+                        src={this.props.data.uri}
+                        alt={this.props.data.alt}
+                        onClick={this.props.onOpen}
+                        onLoad={this.props.onLoad}/>
                     {
                         this.props.data.status &&
                         !this.props.data.status.download &&
@@ -75,6 +79,7 @@ PhotoMessage.defaultProps = {
     data: {},
     onDownload: null,
     onOpen: null,
+    onLoad: null,
 };