react-responsive-masonry - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

es/Masonry/index.js

@@ -28,5 +28,7 @@ function _extends() { _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; }; return _extends.apply(this, arguments); }
     });
-    React.Children.forEach(children, function (child, index) {
+    var validIndex = 0;
+    React.Children.forEach(children, function (child) {
       if (child && React.isValidElement(child)) {
-        columns[index % columnsCount].push(child);
+        columns[validIndex % columnsCount].push(child);
+        validIndex++;
       }
@@ -33,0 +35,0 @@ });

es/ResponsiveMasonry/index.js

@@ -20,3 +20,3 @@ import PropTypes from "prop-types";
 
-  var _useState2 = useState(0),
+  var _useState2 = useState(window.innerWidth),
       width = _useState2[0],
@@ -23,0 +23,0 @@ setWidth = _useState2[1];

lib/Masonry/index.js

@@ -36,6 +36,8 @@ "use strict";
     });
+    var validIndex = 0;
 
-    _react["default"].Children.forEach(children, function (child, index) {
+    _react["default"].Children.forEach(children, function (child) {
       if (child && _react["default"].isValidElement(child)) {
-        columns[index % columnsCount].push(child);
+        columns[validIndex % columnsCount].push(child);
+        validIndex++;
       }
@@ -42,0 +44,0 @@ });

lib/ResponsiveMasonry/index.js

@@ -33,3 +33,3 @@ "use strict";
 
-  var _useState2 = (0, _react.useState)(0),
+  var _useState2 = (0, _react.useState)(window.innerWidth),
       width = _useState2[0],
@@ -36,0 +36,0 @@ setWidth = _useState2[1];

package.json

 {
   "name": "react-responsive-masonry",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "author": {
@@ -30,3 +30,3 @@ "name": "Cédric Delpoux",
   "scripts": {
-    "build": "nwb build-react-component",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider nwb build-react-component",
     "clean": "nwb clean-module && nwb clean-demo",
@@ -41,3 +41,5 @@ "deploy": "gh-pages -d demo/dist",
   },
-  "dependencies": {},
+  "dependencies": {
+    "caniuse-lite": "^1.0.30001638"
+  },
   "devDependencies": {
@@ -44,0 +46,0 @@ "@babel/core": "^7.16.0",

umd/react-responsive-masonry.js

 /*!
- * react-responsive-masonry v2.1.7 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
+ * react-responsive-masonry v2.2.1 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
  * MIT Licensed
@@ -167,5 +167,7 @@ */
     });
-    external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.forEach(children, function (child, index) {
+    var validIndex = 0;
+    external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.forEach(children, function (child) {
       if (child && external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.isValidElement(child)) {
-        columns[index % columnsCount].push(child);
+        columns[validIndex % columnsCount].push(child);
+        validIndex++;
       }
@@ -252,3 +254,3 @@ });
 
-  var _useState2 = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(0),
+  var _useState2 = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(window.innerWidth),
       width = _useState2[0],
@@ -255,0 +257,0 @@ setWidth = _useState2[1];

umd/react-responsive-masonry.min.js

 /*!
- * react-responsive-masonry v2.1.7 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
+ * react-responsive-masonry v2.2.1 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
  * MIT Licensed
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactResponsiveMasonry=t(require("react")):e.ReactResponsiveMasonry=t(e.React)}(window,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"ResponsiveMasonry",(function(){return l}));var r=n(0),o=n.n(r);function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var c=function(e){var t,n;function r(){return e.apply(this,arguments)||this}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,i(t,n);var c=r.prototype;return c.getColumns=function(){var e=this.props,t=e.children,n=e.columnsCount,r=Array.from({length:n},(function(){return[]}));return o.a.Children.forEach(t,(function(e,t){e&&o.a.isValidElement(e)&&r[t%n].push(e)})),r},c.renderColumns=function(){var e=this.props.gutter;return this.getColumns().map((function(t,n){return o.a.createElement("div",{key:n,style:{display:"flex",flexDirection:"column",justifyContent:"flex-start",alignContent:"stretch",flex:1,width:0,gap:e}},t.map((function(e){return e})))}))},c.render=function(){var e=this.props,t=e.gutter,n=e.className,r=e.style;return o.a.createElement("div",{style:u({display:"flex",flexDirection:"row",justifyContent:"center",alignContent:"stretch",boxSizing:"border-box",width:"100%",gap:t},r),className:n},this.renderColumns())},r}(o.a.Component);c.defaultProps={columnsCount:3,gutter:"0",className:null,style:{}};var a=c,s="undefined"!=typeof window?r.useLayoutEffect:r.useEffect,f=function(){var e=function(){var e=Object(r.useState)(!1),t=e[0],n=e[1];return s((function(){n(!0)}),[]),t}(),t=Object(r.useState)(0),n=t[0],o=t[1],u=Object(r.useCallback)((function(){e&&o(window.innerWidth)}),[e]);return s((function(){if(e)return window.addEventListener("resize",u),u(),function(){return window.removeEventListener("resize",u)}}),[e,u]),n},l=function(e){var t=e.columnsCountBreakPoints,n=void 0===t?{350:1,750:2,900:3}:t,u=e.children,i=e.className,c=void 0===i?null:i,a=e.style,s=void 0===a?null:a,l=f(),p=Object(r.useMemo)((function(){var e=Object.keys(n).sort((function(e,t){return e-t})),t=e.length>0?n[e[0]]:1;return e.forEach((function(e){e<l&&(t=n[e])})),t}),[l,n]);return o.a.createElement("div",{className:c,style:s},o.a.Children.map(u,(function(e,t){return o.a.cloneElement(e,{key:t,columnsCount:p})})))};t.default=a}]).default}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactResponsiveMasonry=t(require("react")):e.ReactResponsiveMasonry=t(e.React)}(window,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"ResponsiveMasonry",(function(){return l}));var r=n(0),o=n.n(r);function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var c=function(e){var t,n;function r(){return e.apply(this,arguments)||this}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,i(t,n);var c=r.prototype;return c.getColumns=function(){var e=this.props,t=e.children,n=e.columnsCount,r=Array.from({length:n},(function(){return[]})),u=0;return o.a.Children.forEach(t,(function(e){e&&o.a.isValidElement(e)&&(r[u%n].push(e),u++)})),r},c.renderColumns=function(){var e=this.props.gutter;return this.getColumns().map((function(t,n){return o.a.createElement("div",{key:n,style:{display:"flex",flexDirection:"column",justifyContent:"flex-start",alignContent:"stretch",flex:1,width:0,gap:e}},t.map((function(e){return e})))}))},c.render=function(){var e=this.props,t=e.gutter,n=e.className,r=e.style;return o.a.createElement("div",{style:u({display:"flex",flexDirection:"row",justifyContent:"center",alignContent:"stretch",boxSizing:"border-box",width:"100%",gap:t},r),className:n},this.renderColumns())},r}(o.a.Component);c.defaultProps={columnsCount:3,gutter:"0",className:null,style:{}};var a=c,s="undefined"!=typeof window?r.useLayoutEffect:r.useEffect,f=function(){var e=function(){var e=Object(r.useState)(!1),t=e[0],n=e[1];return s((function(){n(!0)}),[]),t}(),t=Object(r.useState)(window.innerWidth),n=t[0],o=t[1],u=Object(r.useCallback)((function(){e&&o(window.innerWidth)}),[e]);return s((function(){if(e)return window.addEventListener("resize",u),u(),function(){return window.removeEventListener("resize",u)}}),[e,u]),n},l=function(e){var t=e.columnsCountBreakPoints,n=void 0===t?{350:1,750:2,900:3}:t,u=e.children,i=e.className,c=void 0===i?null:i,a=e.style,s=void 0===a?null:a,l=f(),p=Object(r.useMemo)((function(){var e=Object.keys(n).sort((function(e,t){return e-t})),t=e.length>0?n[e[0]]:1;return e.forEach((function(e){e<l&&(t=n[e])})),t}),[l,n]);return o.a.createElement("div",{className:c,style:s},o.a.Children.map(u,(function(e,t){return o.a.cloneElement(e,{key:t,columnsCount:p})})))};t.default=a}]).default}));
 //# sourceMappingURL=react-responsive-masonry.min.js.map

No alert changes

Improved metrics

Total package byte prevSize

51781

increased by0.73%

Lines of code

647

increased by1.09%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedcaniuse-lite@^1.0.30001638

• + Addedcaniuse-lite@1.0.30001702(transitive)