react-image-gallery - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

build/image-gallery.js

@@ -32,2 +32,3 @@ 'use strict';
     onSlide: _react2['default'].PropTypes.func,
+    onClick: _react2['default'].PropTypes.func,
     startIndex: _react2['default'].PropTypes.number
@@ -220,2 +221,6 @@ },
 
+  _handleImageLoad: function _handleImageLoad(event) {
+    event.target.className += 'loaded';
+  },
+
   render: function render() {
@@ -246,4 +251,6 @@ var _this2 = this;
           key: index,
-          className: 'image-gallery-slide' + alignment + originalClass },
-        _react2['default'].createElement('img', { src: item.original }),
+          className: 'image-gallery-slide' + alignment + originalClass,
+          onClick: _this2.props.onClick,
+          onTouchStart: _this2.props.onClick },
+        _react2['default'].createElement('img', { src: item.original, onLoad: _this2._handleImageLoad }),
         item.description
@@ -250,0 +257,0 @@ );

example/app.js

@@ -33,4 +33,4 @@ 'use strict';
   _pauseSlider() {
-    if (this.refs.imageGallery) {
-      this.refs.imageGallery.pause();
+    if (this._imageGallery) {
+      this._imageGallery.pause();
       this.setState({isPlaying: false});
@@ -41,4 +41,4 @@ }
   _playSlider() {
-    if (this.refs.imageGallery) {
-      this.refs.imageGallery.play();
+    if (this._imageGallery) {
+      this._imageGallery.play();
       this.setState({isPlaying: true});
@@ -88,3 +88,3 @@ }
         <ImageGallery
-          ref='imageGallery'
+          ref={(i) => this._imageGallery = i}
           items={images}
@@ -91,0 +91,0 @@ lazyLoad={false}

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Image gallery component for React.JS",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -99,2 +99,3 @@ # react-image-gallery
 * `onSlide`: Function, `callback(index)`
+* `onClick`: Function, `callback(event)`
 
@@ -101,0 +102,0 @@

src/ImageGallery.react.jsx

@@ -21,2 +21,3 @@ 'use strict';
     onSlide: React.PropTypes.func,
+    onClick: React.PropTypes.func,
     startIndex: React.PropTypes.number
@@ -215,2 +216,6 @@ },
 
+  _handleImageLoad(event) {
+    event.target.className += 'loaded';
+  },
+
   render() {
@@ -238,5 +243,7 @@ let currentIndex = this.state.currentIndex;
           key={index}
-          className={'image-gallery-slide' + alignment + originalClass}>
-          <img src={item.original}/>
-          {item.description}
+          className={'image-gallery-slide' + alignment + originalClass}
+          onClick={this.props.onClick}
+          onTouchStart={this.props.onClick}>
+            <img src={item.original} onLoad={this._handleImageLoad}/>
+            {item.description}
         </div>
@@ -243,0 +250,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

277615

increased by0.34%

Lines of code

1912

increased by0.9%

Number of lines in readme file

115

increased by0.88%

No dependency changes