react-grid-gallery - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

CHANGELOG.md

 # react-grid-gallery
 
+### v0.2.1 / 2016-09-11
+
+* Fixes [Bug](https://github.com/benhowell/react-grid-gallery/pull/7) where updating an image caused wrong aspect due to thumb not resizing. Bug caused by using array index as react key rather than something unique to the image. Thanks to [cust0dian](https://github.com/cust0dian) for the [pull request](https://github.com/benhowell/react-grid-gallery/pull/7) which fixes this issue by assigning src attribute as key.
+
+* Fixes [bug](https://github.com/benhowell/react-grid-gallery/pull/6) where only thumbnails are updated when images props changes, meaning re-render doesn't happen until window is resized. Thanks again to [cust0dian](https://github.com/cust0dian) for the [pull request](https://github.com/benhowell/react-grid-gallery/pull/6) which fixes this issue.
+
 ### v0.2.0 / 2016-09-03
@@ -9,3 +15,3 @@
 
-* `onSelectedImagesChange` callback now called directly from `onToggleSelected` rather than `componentWillUpdate`. Perviously, a combination of setting `selectedImages` state and triggering `onSelectedImagesChange` when `componentWillUpdate` due to that state change caused a double render. 
+* `onSelectedImagesChange` callback now called directly from `onToggleSelected`. Previously, a combination of setting `selectedImages` state and triggering `onSelectedImagesChange` inside `componentWillUpdate` caused a double render.
 
@@ -16,2 +22,4 @@ * Internal image access now via state instead of props.
 
+* * *
+
 ### v0.1.14 / 2016-08-22
@@ -18,0 +26,0 @@

examples/demo1.js

@@ -12,6 +12,15 @@ import React from 'react';
             images: this.props.images,
-            selected: [3,7,5]
+            selectedImages: [3,7,5]
         };
+
+        this.setSelectedImages = this.setSelectedImages.bind(this);
+
     }
 
+    setSelectedImages (selectedImages) {
+        this.setState({
+            selectedImages: selectedImages
+        });
+    }
+
     render () {
@@ -27,3 +36,4 @@ return (
             images={this.state.images}
-            selectedImages={this.state.selected}/>
+            selectedImages={this.state.selectedImages}
+            onSelectedImagesChange={this.setSelectedImages}/>
                 </div>
@@ -30,0 +40,0 @@ );

lib/Gallery.js

@@ -69,3 +69,4 @@ 'use strict';
                 this.setState({
-                    images: np.images
+                    images: np.images,
+                    thumbnails: this.renderThumbs(this._gallery.clientWidth, np.images)
                 });
@@ -205,6 +206,8 @@ }
         value: function renderThumbs(containerWidth) {
-            if (!this.state.images) return [];
+            var images = arguments.length <= 1 || arguments[1] === undefined ? this.state.images : arguments[1];
+
+            if (!images) return [];
             if (containerWidth == 0) return [];
 
-            var items = this.state.images.slice();
+            var items = images.slice();
             for (var t in items) {
@@ -214,3 +217,3 @@ this.setThumbScale(items[t]);
 
-            var images = [];
+            var thumbs = [];
             var rows = [];
@@ -220,9 +223,10 @@ while (items.length > 0) {
             }
+
             for (var r in rows) {
                 for (var i in rows[r]) {
                     var item = rows[r][i];
-                    images.push(item);
+                    thumbs.push(item);
                 }
             }
-            return images;
+            return thumbs;
         }
@@ -236,3 +240,3 @@ }, {
                 return _react2.default.createElement(_Image2.default, {
-                    key: "Image-" + idx,
+                    key: item.src,
                     item: item,
@@ -239,0 +243,0 @@ index: idx,

package.json

 {
   "name": "react-grid-gallery",
-  "version": "0.2.0",
-  "description": "Justified gallery component for ReactJS.",
+  "version": "0.2.1",
+  "description": "Justified gallery component for React.",
   "main": "lib/Gallery.js",
@@ -6,0 +6,0 @@ "dependencies": {

README.md

 # React Grid Gallery
 
-Justified gallery component for [React.js](http://facebook.github.io/react/).
+Justified gallery component for [React](http://facebook.github.io/react/).
 
-No curation and no hacks, just beautifully justified images.
+Just beautifully justified images.
 
@@ -7,0 +7,0 @@ ## Live Demo & Examples

src/Gallery.js

@@ -41,3 +41,5 @@ import React, { Component, PropTypes } from 'react';
             this.setState({
-                images: np.images
+                images: np.images,
+                thumbnails: this.renderThumbs(this._gallery.clientWidth,
+                                              np.images)
             });
@@ -168,3 +170,2 @@ }
 
-
     setThumbScale (item) {
@@ -176,8 +177,7 @@ item.scaletwidth =
 
-
-    renderThumbs (containerWidth) {
-        if (!this.state.images) return [];
+    renderThumbs (containerWidth, images = this.state.images) {
+        if (!images) return [];
         if (containerWidth == 0) return [];
 
-        var items = this.state.images.slice();
+        var items = images.slice();
         for (var t in items) {
@@ -187,3 +187,3 @@ this.setThumbScale(items[t]);
 
-        var images = [];
+        var thumbs = [];
         var rows = [];
@@ -193,9 +193,10 @@ while(items.length > 0) {
         }
+
         for(var r in rows) {
             for(var i in rows[r]) {
                 var item = rows[r][i];
-                images.push(item);
+                thumbs.push(item);
             }
         }
-        return images;
+        return thumbs;
     }
@@ -206,3 +207,3 @@
             return <Image
-            key={"Image-"+idx}
+            key={item.src}
             item={item}
@@ -209,0 +210,0 @@ index={idx}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

435455

increased by0.47%

Lines of code

3273

increased by0.34%

No dependency changes