v0.4.0

Author: ben

CHANGELOG.md

@@ -1,5 +1,25 @@
 # react-grid-gallery
 
+### v0.4.0 / 2017-06-29
+
+* Added optional `tileViewportStyle` prop as a function to determine style of tile viewport. This function leverages [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
+
+* Added optional `thumbnailStyle` prop as a function to determine style of each gallery thumbnail. This function leverages [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
+
+* Refactored implementation of `onSelectImage` prop. This function leverages [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
+
+* Refactored implementation of `onClickThumbnail` prop. This function leverages [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
+
+* Refactored implementation of `lightboxWillOpen` prop. This function leverages [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
+
+* Refactored implementation of `lightboxWillClose` prop. This function leverages [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
+
+
+### v0.3.7 / 2017-06-26
+
+* Added optional `tagStyle` prop to style thumbnail tags.
+
+
 ### v0.3.6 / 2017-06-07
 
 * Added optional lightbox prop `showLightboxThumbnails` to display thumbnails beneath the Lightbox image.

lib/Gallery.js

@@ -93,7 +93,7 @@ var Gallery = function (_Component) {
                 event.preventDefault();
             }
             if (this.props.lightboxWillOpen) {
-                this.props.lightboxWillOpen(index);
+                this.props.lightboxWillOpen.call(this, index);
             }
 
             this.setState({
@@ -105,7 +105,7 @@ var Gallery = function (_Component) {
         key: 'closeLightbox',
         value: function closeLightbox() {
             if (this.props.lightboxWillClose) {
-                this.props.lightboxWillClose();
+                this.props.lightboxWillClose.call(this);
             }
 
             this.setState({
@@ -137,7 +137,7 @@ var Gallery = function (_Component) {
         key: 'onSelectImage',
         value: function onSelectImage(index, event) {
             event.preventDefault();
-            if (this.props.onSelectImage) this.props.onSelectImage(index, this.state.images[index]);
+            if (this.props.onSelectImage) this.props.onSelectImage.call(this, index, this.state.images[index]);
         }
     }, {
         key: 'gotoImage',
@@ -283,7 +283,9 @@ var Gallery = function (_Component) {
                     isSelectable: _this2.props.enableImageSelection,
                     onClick: _this2.getOnClickThumbnailFn(),
                     onSelectImage: _this2.onSelectImage,
-                    tagStyle: _this2.props.tagStyle
+                    tagStyle: _this2.props.tagStyle,
+                    tileViewportStyle: _this2.props.tileViewportStyle,
+                    thumbnailStyle: _this2.props.thumbnailStyle
                 });
             });
 
@@ -359,6 +361,7 @@ Gallery.propTypes = {
     showImageCount: _propTypes2.default.bool,
     lightboxWidth: _propTypes2.default.number,
     tileViewportStyle: _propTypes2.default.func,
+    thumbnailStyle: _propTypes2.default.func,
     showLightboxThumbnails: _propTypes2.default.bool,
     onClickLightboxThumbnail: _propTypes2.default.func,
     tagStyle: _propTypes2.default.object

lib/Image.js

@@ -41,21 +41,6 @@ var Image = function (_Component) {
     }
 
     _createClass(Image, [{
-        key: 'tileViewportStyle',
-        value: function tileViewportStyle() {
-            if (this.props.item.isSelected) return {
-                width: this.props.item.vwidth - 32,
-                height: this.props.height - 32,
-                margin: 16,
-                overflow: "hidden"
-            };
-            return {
-                width: this.props.item.vwidth,
-                height: this.props.height,
-                overflow: "hidden"
-            };
-        }
-    }, {
         key: 'tagStyle',
         value: function tagStyle() {
             if (this.props.tagStyle) return this.props.tagStyle;
@@ -73,9 +58,26 @@ var Image = function (_Component) {
                 borderRadius: ".25em"
             };
         }
+    }, {
+        key: 'tileViewportStyle',
+        value: function tileViewportStyle() {
+            if (this.props.tileViewportStyle) return this.props.tileViewportStyle.call(this);
+            if (this.props.item.isSelected) return {
+                width: this.props.item.vwidth - 32,
+                height: this.props.height - 32,
+                margin: 16,
+                overflow: "hidden"
+            };
+            return {
+                width: this.props.item.vwidth,
+                height: this.props.height,
+                overflow: "hidden"
+            };
+        }
     }, {
         key: 'thumbnailStyle',
         value: function thumbnailStyle() {
+            if (this.props.thumbnailStyle) return this.props.thumbnailStyle.call(this);
             if (this.props.item.isSelected) {
                 var ratio = this.props.item.scaletwidth / this.props.height;
                 var height = 0;
@@ -127,7 +129,6 @@ var Image = function (_Component) {
         value: function render() {
             var _this2 = this;
 
-            var self = this;
             var tags = typeof this.props.item.tags === 'undefined' ? _react2.default.createElement('noscript', null) : this.props.item.tags.map(function (tag) {
                 return _react2.default.createElement(
                     'div',
@@ -139,7 +140,7 @@ var Image = function (_Component) {
                             margin: "2px" } },
                     _react2.default.createElement(
                         'span',
-                        { style: self.tagStyle() },
+                        { style: _this2.tagStyle() },
                         tag.value
                     )
                 );
@@ -216,7 +217,7 @@ var Image = function (_Component) {
                         style: this.tileViewportStyle(),
                         key: "tile-viewport-" + this.props.index,
                         onClick: this.props.onClick ? function (e) {
-                            return _this2.props.onClick(_this2.props.index, e);
+                            return _this2.props.onClick.call(_this2, _this2.props.index, e);
                         } : null },
                     _react2.default.createElement('img', {
                         key: "img-" + this.props.index,
@@ -239,6 +240,7 @@ Image.propTypes = {
     onClick: _propTypes2.default.func,
     onSelectImage: _propTypes2.default.func,
     tileViewportStyle: _propTypes2.default.func,
+    thumbnailStyle: _propTypes2.default.func,
     tagStyle: _propTypes2.default.object,
     customOverlay: _propTypes2.default.element
 };

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

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-gallery",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Justified gallery component for React.",
   "main": "lib/Gallery.js",
   "dependencies": {