react-grid-gallery - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

CHANGELOG.md

 # react-grid-gallery
 
+### v0.1.10 / 2016-08-21
+
+* Added option to allow disabling of lightbox image display. `enableLightbox` (PropType.bool, default `true`)
+
+* Added option to allow passing in of function to execute on thumbnail click. `onClickThumbnail` (PropType.func, default `openLightbox`)
+
 ### v0.1.9 / 2016-08-19
@@ -4,0 +10,0 @@

gulpfile.js

@@ -20,5 +20,3 @@ 'use strict';
 
-var argv = require('yargs').argv;
 
-
 gulp.task('default', function() {
@@ -96,5 +94,5 @@ gulp.start('build-all');
             })
-            .pipe(gulpif(argv.dev, source('bundle.js'), source('bundle.min.js')))
+            .pipe(gulpif((process.env.NODE_ENV == 'dev'), source('bundle.js'), source('bundle.min.js')))
             .pipe(buffer())
-            .pipe(gulpif(argv.dev, beautify(), uglify()))
+            .pipe(gulpif((process.env.NODE_ENV == 'dev'), beautify(), uglify()))
             .pipe(gulp.dest('examples/dist/js'));
@@ -121,7 +119,7 @@ }
             })
-            .pipe(gulpif(argv.dev,
+            .pipe(gulpif((process.env.NODE_ENV == 'dev'),
                          source('react-grid-gallery.bundle.js'),
                          source('react-grid-gallery.bundle.min.js')))
             .pipe(buffer())
-            //.pipe(gulpif(argv.dev, beautify(), uglify()))
+            .pipe(gulpif((process.env.NODE_ENV == 'production'), uglify()))
             .pipe(gulp.dest('lib'));
@@ -128,0 +126,0 @@ }

lib/Gallery.js

@@ -9,6 +9,2 @@ 'use strict';
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _reactImages = require('react-images');
@@ -29,3 +25,5 @@
 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; }
+//import ReactDOM from 'react-dom';
 
+
 var update = require('react-addons-update');
@@ -74,3 +72,3 @@
         value: function componentDidUpdate() {
-            if (_reactDom2.default.findDOMNode(this).clientWidth !== this.state.containerWidth) {
+            if (ReactDOM.findDOMNode(this).clientWidth !== this.state.containerWidth) {
                 this.handleResize();
@@ -83,3 +81,3 @@ }
             this.setState({
-                containerWidth: Math.floor(_reactDom2.default.findDOMNode(this).clientWidth)
+                containerWidth: Math.floor(ReactDOM.findDOMNode(this).clientWidth)
             });
@@ -138,2 +136,8 @@ }
     }, {
+        key: 'getOnClickThumbnailFunc',
+        value: function getOnClickThumbnailFunc() {
+            if (!this.props.onClickThumbnail && this.props.enableLightbox) return this.openLightbox;
+            return this.props.onClickThumbnail;
+        }
+    }, {
         key: 'calculateCutOff',
@@ -222,3 +226,3 @@ value: function calculateCutOff(len, delta, items) {
                         isSelected: this.state.selectedImages.indexOf(idx) > -1 ? true : false,
-                        onClick: this.openLightbox,
+                        onClick: this.getOnClickThumbnailFunc(),
                         onToggleSelected: this.onToggleSelected }));
@@ -277,2 +281,4 @@ idx++;
     margin: _react.PropTypes.number,
+    onClickThumbnail: _react.PropTypes.func,
+    enableLightbox: _react.PropTypes.bool,
     backdropClosesModal: _react.PropTypes.bool,
@@ -298,2 +304,3 @@ currentImage: _react.PropTypes.number,
     margin: 2,
+    enableLightbox: true,
     backdropClosesModal: false,
@@ -300,0 +307,0 @@ currentImage: 0,

lib/Image.js

@@ -142,3 +142,3 @@ 'use strict';
                         width: "100%",
-                        background: this.state.hover && !this.props.isSelected && this.props.enableImageSelection ? 'linear-gradient(to bottom,rgba(0,0,0,0.26),transparent 56px,transparent)' : 'none' } }),
+                        background: this.state.hover && !this.props.isSelected && this.props.isSelectable ? 'linear-gradient(to bottom,rgba(0,0,0,0.26),transparent 56px,transparent)' : 'none' } }),
                 _react2.default.createElement(
@@ -145,0 +145,0 @@ 'div',

package.json

 {
   "name": "react-grid-gallery",
-  "version": "0.1.9",
-  "description": "Justified grid gallery component for React.js.",
+  "version": "0.1.10",
+  "description": "Justified gallery component for React.",
   "main": "lib/Gallery.js",
@@ -29,4 +29,3 @@ "dependencies": {
     "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.7.0",
-    "yargs": "^4.8.1"
+    "watchify": "^3.7.0"
   },
@@ -33,0 +32,0 @@ "repository": {

README.md

@@ -5,3 +5,3 @@ # React Grid Gallery
 
-No curation, no ordering and no tricks, just beautifully justified images.
+No curation and no tricks, just beautifully justified images.
 
@@ -12,2 +12,8 @@ ## Live Demo & Examples
 
+## Installation
+
+Using [npm](https://www.npmjs.com/):
+
+    npm install --save react-grid-gallery
+
 ## Quick (and dirty) Start
@@ -62,3 +68,3 @@
 
-## General Options
+## Gallery Options
 
@@ -73,2 +79,10 @@ Property	|	Type		|	Default		|	Description
 margin                  | number        | 2             | Optional. The margin around each image in the gallery.
+enableLightbox          | bool          | true          | Optional. Enable lightbox display of full size image when thumbnail clicked.
+onClickThumbnail        | func          | openLightbox  | Optional. Function to execute when gallery thumbnail clicked. Overrides openLightbox.
+
+
+## Lightbox Options
+
+Property	|	Type		|	Default		|	Description
+:-----------------------|:--------------|:--------------|:--------------------------------
 backdropClosesModal	| bool          | false	        | Optional. Allow users to exit the lightbox by clicking the backdrop.
@@ -140,3 +154,3 @@ currentImage            | number        | 0             | Optional. The index of the image to display initially (only relevant when used in conjunction with `isOpen: true` property).
 
- * Backend lightbox functionality via [React Images](https://github.com/jossmac/react-images) by [@jossmac](https://github.com/jossmac).
+ * Backend lightbox functionality via [React Images](https://github.com/jossmac/react-images) by [jossmac](https://github.com/jossmac).
 
@@ -143,0 +157,0 @@ * Demo stock photos:

src/Gallery.js

 import React, { Component, PropTypes } from 'react';
-import ReactDOM from 'react-dom';
+//import ReactDOM from 'react-dom';
 import Lightbox from 'react-images';
@@ -102,2 +102,8 @@ import Image from './Image.js';
 
+    getOnClickThumbnailFunc () {
+        if(!this.props.onClickThumbnail && this.props.enableLightbox)
+            return this.openLightbox;
+        return this.props.onClickThumbnail;
+    }
+
     calculateCutOff (len, delta, items) {
@@ -187,3 +193,3 @@ var cutoff = [];
                                 true : false}
-                    onClick={this.openLightbox}
+                    onClick={this.getOnClickThumbnailFunc()}
                     onToggleSelected={this.onToggleSelected}/>
@@ -239,2 +245,4 @@ );
     margin: PropTypes.number,
+    onClickThumbnail: PropTypes.func,
+    enableLightbox: PropTypes.bool,
     backdropClosesModal: PropTypes.bool,
@@ -260,2 +268,3 @@ currentImage: PropTypes.number,
     margin: 2,
+    enableLightbox: true,
     backdropClosesModal: false,
@@ -262,0 +271,0 @@ currentImage: 0,

src/Image.js

@@ -111,3 +111,3 @@ import React, { Component, PropTypes } from 'react';
                              && !this.props.isSelected
-                             && this.props.enableImageSelection) ?
+                             && this.props.isSelectable) ?
                     'linear-gradient(to bottom,rgba(0,0,0,0.26),transparent 56px,transparent)' : 'none'}}>
@@ -114,0 +114,0 @@ </div>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

20

decreased by-4.76%

Number of lines in readme file

160

increased by9.59%

Number of low supply chain risk alerts

6

decreased by-14.29%

Worsened metrics

Total package byte prevSize

385155

decreased by-61.73%

Lines of code

3085

decreased by-87.34%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes