react-photo-gallery - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

examples/src/app.js

@@ -46,3 +46,3 @@ import React from 'react';
             let photos = data.photoset.photo.map(function(obj,i){
-                let ar = parseFloat(obj.width_o / obj.height_o);
+                let aspect_ratio = parseFloat(obj.width_o / obj.height_o);
                 return {
@@ -53,3 +53,3 @@ gallery_src: obj.url_m,
                     height: parseInt(obj.height_o),
-                    ar: ar
+                    aspect_ratio: aspect_ratio
                 };
@@ -68,2 +68,7 @@ });
     },
+    renderGallery(){
+	return(
+	    <Gallery photos={this.state.photos} lightboxStyles={lightboxStyles} />
+	);
+    },
     render: function(){
@@ -74,3 +79,3 @@ // no loading sign if its all loaded
 		<div className="App">
-			<Gallery photos={this.state.photos} lightboxStyles={lightboxStyles} />
+		    {this.renderGallery()}
 		</div>
@@ -82,3 +87,3 @@ );
 		<div className="App">
-			<Gallery photos={this.state.photos} lightboxStyles={lightboxStyles} />
+		    {this.renderGallery()}
 			<div className="loading-msg" id="msg-loading-more">Loading</div>
@@ -85,0 +90,0 @@ </div>

package.json

 {
   "name": "react-photo-gallery",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "Responsive React Photo Gallery Component",
@@ -5,0 +5,0 @@ "main": "lib/Gallery.js",

README.md

@@ -51,3 +51,3 @@ # React Responsive Photo Gallery
 
-It is possible to serve up different images to the lightbox using srcset which is supported by [React Images](https://github.com/jossmac/react-images).  The same srcset property can be passed into the photos property.  See react-images documentation for more information on the properties.  More lightbox properties to be supported soon.
+It is possible to serve up different images to the lightbox using srcset which is supported by [React Images](https://github.com/jossmac/react-images).  The same srcset property can be passed into the photos property.  See react-images documentation for more information on the properties.
 
@@ -54,0 +54,0 @@ ## Demo

src/Gallery.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import Lightbox from 'react-images';
-import _ from 'lodash';
 
@@ -16,3 +15,3 @@ var Gallery = React.createClass({
                 height: React.PropTypes.number.isRequired,
-                ar: React.PropTypes.number.isRequired
+                aspect_ratio: React.PropTypes.number.isRequired
             })
@@ -30,3 +29,2 @@ ).isRequired,
 	this.setState({containerWidth: ReactDOM.findDOMNode(this).clientWidth - 15})
-        this.handleResize = _.debounce(this.handleResize, 400);
         window.addEventListener('resize', this.handleResize);
@@ -77,3 +75,3 @@ },
             // eg. if rowLimit is 3 it will  loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set
-            var ar=0,
+            var aspect_ratio=0,
                 totalAr=0,
@@ -85,3 +83,3 @@ commonHeight = 0;
                 }
-		totalAr += this.props.photos[j].ar;
+		totalAr += this.props.photos[j].aspect_ratio;
             }
@@ -97,3 +95,3 @@ commonHeight = contWidth / totalAr;
                      <div key={k} style={style}>
-                        <a href="#" className={k} onClick={this.openLightbox.bind(this, k)}><img src={src} style={{display:'block', border:0}} height={commonHeight} width={commonHeight * this.props.photos[k].ar} alt="" /></a>
+                        <a href="#" className={k} onClick={this.openLightbox.bind(this, k)}><img src={src} style={{display:'block', border:0}} height={commonHeight} width={commonHeight * this.props.photos[k].aspect_ratio} alt="" /></a>
                      </div>
@@ -100,0 +98,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

3584714

decreased by-29.22%

Number of package files

22

decreased by-4.35%

Lines of code

46128

decreased by-35.86%

Number of low supply chain risk alerts

8

increased by33.33%

No dependency changes