Skip to content

Commit

Permalink
v0.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@benhowell
benhowell committed Sep 3, 2016
1 parent 89ef8fd commit e84628c
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 60 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
96 changes: 49 additions & 47 deletions lib/Gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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,
Expand Down Expand Up @@ -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)
});
}
}, {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -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,
Expand Down
16 changes: 8 additions & 8 deletions lib/react-grid-gallery.bundle.min.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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",
Expand All @@ -38,6 +37,7 @@
"lightbox",
"images",
"gallery",
"selectable",
"justified"
],
"author": "Ben Howell",
Expand Down

0 comments on commit e84628c

Please sign in to comment.