react-grid-gallery - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

CHANGELOG.md

 # react-grid-gallery
 
+### v0.5.4 / 2019-03-10
+
+* CSS class names are prefoxed with ReactGridGallery_
+* Add way to inject a custom thumbnail image component (for lazy-loading) [PR 104](https://github.com/benhowell/react-grid-gallery/pull/104). Thanks [pxpeterxu](https://github.com/pxpeterxu).
+* Fix crash when this.props.images.length - 1 < this.state.currentImage [PR #111](https://github.com/benhowell/react-grid-gallery/pull/111). Thanks [lryta](https://github.com/lryta).
+
+
 ### v0.5.3 / 2018-09-30
@@ -4,0 +11,0 @@

gulpfile.js

@@ -8,3 +8,2 @@ 'use strict';
 var browserify = require('browserify');
-var watchify = require('watchify');
 var uglify = require('gulp-uglify');
@@ -30,3 +29,3 @@ var beautify = require('gulp-beautify');
         'build-lib',
-        'build-cljs-lib',
+        /*'build-cljs-lib',*/
         'clean-web',
@@ -75,3 +74,3 @@ ['browserify', 'copy-css', 'copy-html'],
     var bundle =
-            //watchify(
+           
             browserify(['./examples/app.js',
@@ -86,3 +85,3 @@ './examples/demo1.js',
         })
-//)
+
     ;
@@ -89,0 +88,0 @@ bundle.transform(babelify, {'presets': ['es2015', 'react']});

lib/CheckButton.js

@@ -27,3 +27,3 @@ 'use strict';
 
-        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CheckButton).call(this, props));
+        var _this = _possibleConstructorReturn(this, (CheckButton.__proto__ || Object.getPrototypeOf(CheckButton)).call(this, props));
 
@@ -30,0 +30,0 @@ _this.state = {

lib/Gallery.js

@@ -35,3 +35,3 @@ 'use strict';
 
-        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Gallery).call(this, props));
+        var _this = _possibleConstructorReturn(this, (Gallery.__proto__ || Object.getPrototypeOf(Gallery)).call(this, props));
 
@@ -65,2 +65,5 @@ _this.state = {
         value: function componentWillReceiveProps(np) {
+            if (this.state.currentImage > np.images.length - 1) {
+                this.setState({ currentImage: np.images.length - 1 });
+            }
             if (this.state.images != np.images || this.props.maxRows != np.maxRows) {
@@ -257,3 +260,3 @@ this.setState({
         value: function renderThumbs(containerWidth) {
-            var images = arguments.length <= 1 || arguments[1] === undefined ? this.state.images : arguments[1];
+            var images = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.images;
 
@@ -305,3 +308,4 @@ if (!images) return [];
                     tileViewportStyle: _this2.props.tileViewportStyle,
-                    thumbnailStyle: _this2.props.thumbnailStyle
+                    thumbnailStyle: _this2.props.thumbnailStyle,
+                    thumbnailImageComponent: _this2.props.thumbnailImageComponent
                 });
@@ -406,3 +410,4 @@ });
     onClickLightboxThumbnail: _propTypes2.default.func,
-    tagStyle: _propTypes2.default.object
+    tagStyle: _propTypes2.default.object,
+    thumbnailImageComponent: _propTypes2.default.func
 };
@@ -409,0 +414,0 @@

lib/Image.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -36,3 +38,3 @@
 
-        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Image).call(this, props));
+        var _this = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props));
 
@@ -189,3 +191,3 @@ _this.state = {
                 'div',
-                { className: 'custom-overlay',
+                { className: 'ReactGridGallery_custom-overlay',
                     key: "custom-overlay-" + this.props.index,
@@ -201,5 +203,15 @@ style: {
 
+            var thumbnailProps = {
+                key: "img-" + this.props.index,
+                src: this.props.item.thumbnail,
+                alt: alt,
+                title: this.props.item.caption,
+                style: this.thumbnailStyle()
+            };
+
+            var ThumbnailImageComponent = this.props.thumbnailImageComponent;
+
             return _react2.default.createElement(
                 'div',
-                { className: 'tile',
+                { className: 'ReactGridGallery_tile',
                     key: "tile-" + this.props.index,
@@ -221,3 +233,3 @@ onMouseEnter: function onMouseEnter(e) {
                     'div',
-                    { className: 'tile-icon-bar',
+                    { className: 'ReactGridGallery_tile-icon-bar',
                         key: "tile-icon-bar-" + this.props.index,
@@ -234,3 +246,3 @@ style: {
                     'div',
-                    { className: 'tile-bottom-bar',
+                    { className: 'ReactGridGallery_tile-bottom-bar',
                         key: "tile-bottom-bar-" + this.props.index,
@@ -250,3 +262,3 @@ style: {
                 customOverlay,
-                _react2.default.createElement('div', { className: 'tile-overlay',
+                _react2.default.createElement('div', { className: 'ReactGridGallery_tile-overlay',
                     key: "tile-overlay-" + this.props.index,
@@ -262,3 +274,3 @@ style: {
                     'div',
-                    { className: 'tile-viewport',
+                    { className: 'ReactGridGallery_tile-viewport',
                         style: this.tileViewportStyle(),
@@ -269,12 +281,7 @@ key: "tile-viewport-" + this.props.index,
                         } : null },
-                    _react2.default.createElement('img', {
-                        key: "img-" + this.props.index,
-                        src: this.props.item.thumbnail,
-                        alt: alt,
-                        title: this.props.item.caption,
-                        style: this.thumbnailStyle() })
+                    ThumbnailImageComponent ? _react2.default.createElement(ThumbnailImageComponent, _extends({}, this.props, { imageProps: thumbnailProps })) : _react2.default.createElement('img', thumbnailProps)
                 ),
                 this.props.item.thumbnailCaption && _react2.default.createElement(
                     'div',
-                    { className: 'tile-description',
+                    { className: 'ReactGridGallery_tile-description',
                         style: {
@@ -310,3 +317,4 @@ background: "white",
     tagStyle: _propTypes2.default.object,
-    customOverlay: _propTypes2.default.element
+    customOverlay: _propTypes2.default.element,
+    thumbnailImageComponent: _propTypes2.default.func
 };
@@ -313,0 +321,0 @@

package.json

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

README.md

@@ -97,2 +97,3 @@ # React Grid Gallery
 thumbnailStyle 	        | func 	        | thumbnailStyle | Optional. Function to style the image thumbnail. Allows access to image object using `this` (See [Programmers notes](#programmers-notes) for more info about implicit `this`). Overrides internal thumbnailStyle function.
+thumbnailImageComponent | React component | undefined   | Optional. Substitute in a React component that would get passed `imageProps` (the props that would have been passed to the `<img>` tag) and `item` (the original item in `images`) to be used to render thumbnails; useful for lazy loading.
 
@@ -99,0 +100,0 @@ ## Lightbox Options

src/Gallery.js

@@ -33,2 +33,5 @@ import PropTypes from 'prop-types';
     componentWillReceiveProps (np) {
+        if (this.state.currentImage > np.images.length - 1) {
+            this.setState({currentImage: np.images.length - 1});
+        }
         if(this.state.images != np.images || this.props.maxRows != np.maxRows){
@@ -267,2 +270,3 @@ this.setState({
             thumbnailStyle={this.props.thumbnailStyle}
+            thumbnailImageComponent={this.props.thumbnailImageComponent}
                 />;});
@@ -367,3 +371,4 @@ var resizeIframeStyles = {
     onClickLightboxThumbnail: PropTypes.func,
-    tagStyle: PropTypes.object
+    tagStyle: PropTypes.object,
+    thumbnailImageComponent: PropTypes.func
 };
@@ -386,5 +391,5 @@
     lightboxWidth: 1024,
-    showLightboxThumbnails: false
+    showLightboxThumbnails: false,
 };
 
 module.exports = Gallery;

src/Image.js

@@ -37,3 +37,3 @@ import PropTypes from 'prop-types';
         if(this.props.item.nano) {
-            nanoBase64Backgorund = { 
+            nanoBase64Backgorund = {
                 background: `url(${this.props.item.nano})`,
@@ -154,3 +154,3 @@ backgroundSize: 'cover',
                 ? <noscript/> :
-                <div className="custom-overlay"
+            <div className="ReactGridGallery_custom-overlay"
         key={"custom-overlay-"+this.props.index}
@@ -166,4 +166,14 @@ style={{
 
+        var thumbnailProps = {
+            key: "img-"+this.props.index,
+            src: this.props.item.thumbnail,
+            alt: alt,
+            title: this.props.item.caption,
+            style: this.thumbnailStyle(),
+        };
+
+        var ThumbnailImageComponent = this.props.thumbnailImageComponent;
+
         return (
-                <div className="tile"
+                <div className="ReactGridGallery_tile"
             key={"tile-"+this.props.index}
@@ -180,3 +190,3 @@ onMouseEnter={(e) => this.setState({hover: true})}
 
-                <div className="tile-icon-bar"
+                <div className="ReactGridGallery_tile-icon-bar"
             key={"tile-icon-bar-"+this.props.index}
@@ -192,3 +202,3 @@ style={{
 
-                <div className="tile-bottom-bar"
+                <div className="ReactGridGallery_tile-bottom-bar"
             key={"tile-bottom-bar-"+this.props.index}
@@ -210,3 +220,3 @@ style={{
 
-                <div className="tile-overlay"
+                <div className="ReactGridGallery_tile-overlay"
             key={"tile-overlay-"+this.props.index}
@@ -225,3 +235,3 @@ style={{
 
-                <div className="tile-viewport"
+                <div className="ReactGridGallery_tile-viewport"
             style={this.tileViewportStyle()}
@@ -231,11 +241,8 @@ key={"tile-viewport-"+this.props.index}
                      (e) => this.props.onClick.call(this, this.props.index, e) : null}>
-                <img
-            key={"img-"+this.props.index}
-            src={this.props.item.thumbnail}
-            alt={alt}
-            title={this.props.item.caption}
-            style={this.thumbnailStyle()} />
+                {ThumbnailImageComponent ?
+                    <ThumbnailImageComponent {...this.props} imageProps={thumbnailProps} /> :
+                    <img {...thumbnailProps} />}
                 </div>
                 {this.props.item.thumbnailCaption && (
-                        <div className="tile-description"
+                        <div className="ReactGridGallery_tile-description"
                     style={{
@@ -270,3 +277,4 @@ background: "white",
     tagStyle: PropTypes.object,
-    customOverlay: PropTypes.element
+    customOverlay: PropTypes.element,
+    thumbnailImageComponent: PropTypes.func
 };
@@ -273,0 +281,0 @@

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

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

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

209

increased by0.48%

Number of low supply chain risk alerts

4

decreased by-33.33%

Worsened metrics

Total package byte prevSize

173515

decreased by-60.91%

Lines of code

3509

decreased by-19.35%

No dependency changes