v0.2.0

Author: ben

CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-grid-gallery
 
+### v0.2.0 / 2016-09-03
+
+* Construction of thumbnail images and image rows removed from render. Thumbnails and rows now only rebuilt when container size changes.
+
+* `selectedImages` state now set via props change.
+
+* `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. 
+
+* Internal image access now via state instead of props.
+
+* Thumbnail generation now atomic function rather than whole array at once. 
+
 ### v0.1.14 / 2016-08-22
 
 * `selectedImages` state set on `componentWillReceiveProps` allowing selections from outside component to trigger state update.

lib/Gallery.js

@@ -22,8 +22,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var update = require('react-addons-update');
-
 var Gallery = function (_Component) {
     _inherits(Gallery, _Component);
 
@@ -33,6 +31,8 @@ var Gallery = function (_Component) {
         var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Gallery).call(this, props));
 
         _this.state = {
+            images: _this.props.images,
+            thumbnails: [],
             lightboxIsOpen: _this.props.isOpen,
             selectedImages: _this.props.selectedImages,
             currentImage: _this.props.currentImage,
@@ -63,26 +63,28 @@ var Gallery = function (_Component) {
                     selectedImages: np.selectedImages
                 });
             }
-        }
-    }, {
-        key: 'componentWillUpdate',
-        value: function componentWillUpdate(np, ns) {
-            if (np.selectedImages != ns.selectedImages) {
-                if (this.props.onSelectedImagesChange) this.props.onSelectedImagesChange(ns.selectedImages);
+
+            if (this.state.images != np.images) {
+                this.setState({
+                    images: np.images
+                });
             }
         }
     }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate() {
+            if (!this._gallery) return;
             if (this._gallery.clientWidth !== this.state.containerWidth) {
                 this.handleResize();
             }
         }
     }, {
         key: 'handleResize',
         value: function handleResize() {
+            if (!this._gallery) return;
             this.setState({
-                containerWidth: Math.floor(this._gallery.clientWidth)
+                containerWidth: Math.floor(this._gallery.clientWidth),
+                thumbnails: this.renderThumbs(this._gallery.clientWidth)
             });
         }
     }, {
@@ -127,13 +129,10 @@ var Gallery = function (_Component) {
         value: function onToggleSelected(index, event) {
             event.preventDefault();
             var i = this.state.selectedImages.indexOf(index);
-            if (i == -1) {
-                this.setState({ selectedImages: update(this.state.selectedImages, { $push: [index] }) });
-            } else {
-                this.setState({
-                    selectedImages: update(this.state.selectedImages, { $splice: [[i, 1]] })
-                });
-            }
+            var selectedImages = this.state.selectedImages.slice();
+            if (i == -1) selectedImages.push(index);else selectedImages.splice(i, 1);
+
+            if (this.props.onSelectedImagesChange) this.props.onSelectedImagesChange(selectedImages);
         }
     }, {
         key: 'getOnClickThumbnailFunc',
@@ -166,17 +165,17 @@ var Gallery = function (_Component) {
         }
     }, {
         key: 'buildImageRow',
-        value: function buildImageRow(items) {
+        value: function buildImageRow(items, containerWidth) {
             var row = [];
             var len = 0;
             var imgMargin = 2 * this.props.margin;
-            while (items.length > 0 && len < this.state.containerWidth) {
+            while (items.length > 0 && len < containerWidth) {
                 var item = items.shift();
                 row.push(item);
                 len += item.scaletwidth + imgMargin;
             }
 
-            var delta = len - this.state.containerWidth;
+            var delta = len - containerWidth;
             if (row.length > 0 && delta > 0) {
                 var cutoff = this.calculateCutOff(len, delta, row);
                 for (var i in row) {
@@ -186,49 +185,39 @@ var Gallery = function (_Component) {
                     item.vwidth = item.scaletwidth - pixelsToRemove;
                 }
             } else {
-                for (var i in row) {
-                    item = row[i];
+                for (var j in row) {
+                    item = row[j];
                     item.marginLeft = 0;
                     item.vwidth = item.scaletwidth;
                 }
             }
             return row;
         }
     }, {
-        key: 'scaleThumbs',
-        value: function scaleThumbs(items) {
-            for (var i in items) {
-                items[i].scaletwidth = Math.floor(this.props.rowHeight * (items[i].thumbnailWidth / items[i].thumbnailHeight));
-            }
-            return items;
+        key: 'setThumbScale',
+        value: function setThumbScale(item) {
+            item.scaletwidth = Math.floor(this.props.rowHeight * (item.thumbnailWidth / item.thumbnailHeight));
         }
     }, {
-        key: 'renderImages',
-        value: function renderImages() {
-            if (!this.props.images) return;
-            if (this.state.containerWidth == 0) return;
-            var items = this.scaleThumbs(this.props.images.slice());
+        key: 'renderThumbs',
+        value: function renderThumbs(containerWidth) {
+            if (!this.state.images) return [];
+            if (containerWidth == 0) return [];
+
+            var items = this.state.images.slice();
+            for (var t in items) {
+                this.setThumbScale(items[t]);
+            }
+
             var images = [];
             var rows = [];
             while (items.length > 0) {
-                rows.push(this.buildImageRow(items));
+                rows.push(this.buildImageRow(items, containerWidth));
             }
-
-            var idx = 0;
             for (var r in rows) {
                 for (var i in rows[r]) {
                     var item = rows[r][i];
-                    images.push(_react2.default.createElement(_Image2.default, {
-                        key: "Image-" + idx,
-                        item: item,
-                        index: idx,
-                        margin: this.props.margin,
-                        height: this.props.rowHeight,
-                        isSelectable: this.props.enableImageSelection,
-                        isSelected: this.state.selectedImages.indexOf(idx) > -1 ? true : false,
-                        onClick: this.getOnClickThumbnailFunc(),
-                        onToggleSelected: this.onToggleSelected }));
-                    idx++;
+                    images.push(item);
                 }
             }
             return images;
@@ -238,12 +227,25 @@ var Gallery = function (_Component) {
         value: function render() {
             var _this2 = this;
 
+            var images = this.state.thumbnails.map(function (item, idx) {
+                return _react2.default.createElement(_Image2.default, {
+                    key: "Image-" + idx,
+                    item: item,
+                    index: idx,
+                    margin: _this2.props.margin,
+                    height: _this2.props.rowHeight,
+                    isSelectable: _this2.props.enableImageSelection,
+                    isSelected: _this2.state.selectedImages.indexOf(idx) > -1 ? true : false,
+                    onClick: _this2.getOnClickThumbnailFunc(),
+                    onToggleSelected: _this2.onToggleSelected });
+            });
+
             return _react2.default.createElement(
                 'div',
                 { id: 'Gallery', ref: function ref(c) {
                         return _this2._gallery = c;
                     } },
-                this.renderImages(),
+                images,
                 _react2.default.createElement(_reactImages2.default, {
                     images: this.props.images,
                     backdropClosesModal: this.props.backdropClosesModal,

lib/react-grid-gallery.bundle.min.js

@@ -1,7 +1,7 @@
 {
   "name": "react-grid-gallery",
-  "version": "0.1.14",
-  "description": "Justified gallery component for React.",
+  "version": "0.2.0",
+  "description": "Justified gallery component for ReactJS.",
   "main": "lib/Gallery.js",
   "dependencies": {
     "react-images": "^0.4.11"
@@ -20,9 +20,8 @@
     "gulp-gh-pages": "^0.5.4",
     "gulp-if": "^2.0.1",
     "gulp-uglify": "^2.0.0",
-    "react": "^15.3.0",
-    "react-addons-update": "^15.3.0",
-    "react-dom": "^15.3.0",
+    "react": "^15.3.1",
+    "react-dom": "^15.3.1",
     "run-sequence": "^1.2.2",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
@@ -38,6 +37,7 @@
     "lightbox",
     "images",
     "gallery",
+    "selectable",
     "justified"
   ],
   "author": "Ben Howell",