Merge branch 'dev' of https://github.com/SammyIsra/photostream-react …

…into dev

README.md

@@ -52,8 +52,33 @@ class VacationPictures extends Component {
 export default VacationPictures
 ```
 
-#### Instructions
-To render a wall of photos, you just need to pass to `<PhotoStream />` a list of image links as property `imageList`. You can pass either an array of image links, or an object of the format `{ image, altText }`. The image is the image link, and the altText is the alternate text to show on the photo itself (as the alt attribute on `<img />`).
+### Instructions
+To render a wall of photos, you just need to pass to `<PhotoStream />` a list of image links as property `imageList`. 
+You can pass either an array of image links, or an object of the format `{ image, altText }`. The image is the image link, and the altText is the alternate text to show on the photo itself (as the alt attribute on `<img />`).
+
+#### Using custom event handlers
+To use custom event handlers, pass to Photostream a prop called eventHandlers, which must be an object with any of the following: `onClick`, `onMouseEnter`, `onMouseLeave`.
+
+```javascript
+import React from 'react';
+import Photostream from 'react-photostream';
+
+function Example(props){
+
+  //When an image is clicked, the Component's image prop will be printed (which is the source of the image)
+  const onClickEventHandler = function(event, self){
+    console.log(self.props.image);
+  }
+
+  const images = ["image1", "image2", "image3"];
+
+  return <Photostream eventHandlers={{onClick: onClickEventHandler}} imageList={images} />;
+}
+
+export default Example
+```
+
+Note: if your event handler needs to use information from the image component (say, if you want to use props) then the event handler should receive two arguments, `event` and `self`, where `self` is the `this` object of each Photo component.  
 
 [build-badge]: https://img.shields.io/travis/SammyIsra/photostream-react/master.png?style=flat-square
 [build]: https://travis-ci.org/SammyIsra/photostream-react

demo/src/index.js

@@ -35,9 +35,8 @@ class Demo extends Component {
     ];
 
     const eventHandler = {
-      onMouseEnter:()=>{console.log("MouseEnter")},
-      onClick:()=>{console.log("Click")},
-      onMouseLeave:()=>{console.log("MouseLeave")}
+      onMouseEnter: (event, self)=>{console.log(self)},
+      onClick: (event, self)=>{console.log(self)}
     }
 
     return (
@@ -51,7 +50,7 @@ class Demo extends Component {
         <PhotoStream imageList={listOfNotSquareImages} />
         <hr />
         <h2>List of image objects "{"{image, altText}"}"</h2>
-        <PhotoStream imageList={listOfImageObjects} />
+        <PhotoStream imageList={listOfImageObjects} eventHandlers={eventHandler} />
       </div>
     );
   }

src/Photo.js

@@ -2,22 +2,44 @@ import React from 'react';
 
 import './Photo.css';
 
-//Functional component of a photo in the stream
-const Photo = (props) => {
-
-    //prop photo
-    const {picture, altText, eventHandlers} = props;
-
-    return (
-        <img
-            className="photostream_photo"
-            src={picture}
-            alt={altText}
-            onMouseEnter={eventHandlers? eventHandlers.onMouseEnter : undefined}
-            onMouseLeave={eventHandlers? eventHandlers.onMouseLeave : undefined}
-            onClick={eventHandlers? eventHandlers.onClick : undefined}
-        />
-    );
+//Component of a photo in the stream
+class Photo extends React.Component {
+
+    constructor(props){
+        super(props);
+        this.ReturnBoundEventHandlerOrUndefined = this.ReturnBoundEventHandlerOrUndefined.bind(this)
+    }
+
+    //Return a function that takes 'event' and calls the eventHandler with that event as an arg
+    ReturnBoundEventHandlerOrUndefined(eventHandler){
+        if(!eventHandler)
+            return undefined;
+        return (event)=>{
+            eventHandler(event, this);
+        }
+    }
+
+    render(){
+
+        //Destructure values from props
+        const {picture, altText, eventHandlers} = this.props;
+
+        //Get properly structured functions for the event handlers from the provided ones
+        const onMouseEnterHandler = this.ReturnBoundEventHandlerOrUndefined(eventHandlers.onMouseEnter);
+        const onMouseLeaveHandler = this.ReturnBoundEventHandlerOrUndefined(eventHandlers.onMouseLeave);
+        const onClickHandler = this.ReturnBoundEventHandlerOrUndefined(eventHandlers.onClick);
+
+        return (
+            <img
+                className="photostream_photo"
+                src={picture}
+                alt={altText}
+                onMouseEnter={onMouseEnterHandler}
+                onMouseLeave={onMouseLeaveHandler}
+                onClick={onClickHandler}
+            />
+        );
+    }
 }
 
 export default Photo;

src/Photostream.js

@@ -25,7 +25,7 @@ class PhotoStream extends Component {
                 <Photo key={index}
                     picture={item.image || item} 
                     altText={item.altText || undefined}
-                    eventHandlers={eventHandlers}
+                    eventHandlers={eventHandlers || {} }
                 />
             );
         });