react-grid-gallery - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

CHANGELOG.md

 # react-grid-gallery
 
+### v0.3.3 / 2017-04-22
+
+* Added `customOverlay` functionality [PR 22](https://github.com/benhowell/react-grid-gallery/pull/22). Thanks [ValYouW](https://github.com/ValYouW).
+
+* Added demo to project page for `customOverlay`.
+
+* Updated documentation
+
+* Updated acknowledgements
+
+
 ### v0.3.2 / 2017-04-07
@@ -4,0 +15,0 @@

gulpfile.js

@@ -77,3 +77,4 @@ 'use strict';
                         './examples/demo2.js',
-                        './examples/demo3.js'], {
+                        './examples/demo3.js',
+                        './examples/demo4.js'], {
         extensions: ['.js', '.jsx']
@@ -80,0 +81,0 @@ })

lib/Image.js

@@ -125,2 +125,13 @@ 'use strict';
 
+            var customOverlay = typeof this.props.item.customOverlay === 'undefined' ? _react2.default.createElement('noscript', null) : _react2.default.createElement(
+                'div',
+                { style: {
+                        pointerEvents: "none",
+                        opacity: this.state.hover ? 1 : 0,
+                        position: "absolute",
+                        height: "100%",
+                        width: "100%" } },
+                this.props.item.customOverlay
+            );
+
             return _react2.default.createElement(
@@ -170,2 +181,3 @@ 'div',
                 ),
+                customOverlay,
                 _react2.default.createElement('div', { className: 'tile-overlay',
@@ -209,3 +221,4 @@ key: "tile-overlay-" + this.props.index,
     onClick: _react.PropTypes.func,
-    onSelectImage: _react.PropTypes.func
+    onSelectImage: _react.PropTypes.func,
+    customOverlay: _react.PropTypes.element
 };
@@ -212,0 +225,0 @@

package.json

 {
   "name": "react-grid-gallery",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Justified gallery component for React.",
@@ -5,0 +5,0 @@ "main": "lib/Gallery.js",

README.md

@@ -12,3 +12,3 @@ # React Grid Gallery
 * [Simple Gallery](https://benhowell.github.io/react-grid-gallery/#simple-gallery)
-* [Main Demo Code](https://benhowell.github.io/react-grid-gallery/#code-sample)
+* [Custom Overlay](https://benhowell.github.io/react-grid-gallery/#custom-overlay)
 
@@ -70,5 +70,5 @@ ## Installation
 caption                 | string        | undefined     | Optional. Image caption.
-srcset 	                | array 	| undefined 	| Optional. Array of srcsets for lightbox.
+srcset 	                | array         | undefined 	| Optional. Array of srcsets for lightbox.
+customOverlay           | element       | undefined     | Optional. A custom element to be rendered as a thumbnail overlay on hover.
 
-
 ## Gallery Options
@@ -141,3 +141,6 @@
 
- * [ValYouW](https://github.com/ValYouW) for lightboxWillOpen and lightBoxWillClose functionality [PR 20](https://github.com/benhowell/react-grid-gallery/pull/20).
+ * [ValYouW](https://github.com/ValYouW) for lightboxWillOpen and lightBoxWillClose functionality [PR 20](https://github.com/benhowell/react-grid-gallery/pull/20) and customOverlay option: [PR 22](https://github.com/benhowell/react-grid-gallery/pull/22).
+
+
+
  
@@ -144,0 +147,0 @@

src/Image.js

@@ -92,2 +92,13 @@ import React, { Component, PropTypes } from 'react';
 
+        var customOverlay = (typeof this.props.item.customOverlay === 'undefined')
+                ? <noscript/> :
+                <div style={{
+                    pointerEvents: "none",
+                    opacity: this.state.hover ? 1 : 0,
+                    position: "absolute",
+                    height: "100%",
+                    width: "100%"}}>
+                {this.props.item.customOverlay}
+            </div>;
+
         return (
@@ -131,2 +142,4 @@ <div className="tile"
 
+                {customOverlay}
+
                 <div className="tile-overlay"
@@ -170,3 +183,4 @@ key={"tile-overlay-"+this.props.index}
     onClick: PropTypes.func,
-    onSelectImage: PropTypes.func
+    onSelectImage: PropTypes.func,
+    customOverlay: PropTypes.element
 };
@@ -173,0 +187,0 @@

No alert changes

Improved metrics

Number of package files

22

increased by4.76%

Lines of code

3621

increased by4.83%

Number of lines in readme file

154

increased by1.99%

Worsened metrics

Total package byte prevSize

384311

decreased by-14.25%

No dependency changes