react-responsive-masonry - npm Package Compare versions

Comparing version 2.7.0 to 2.7.1

es/Masonry/index.js

@@ -34,3 +34,4 @@ 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); }
         columnsCount = props.columnsCount;
-    if (state && children === state.children) return null;
+    var hasColumnsChanged = columnsCount !== state.columns.length;
+    if (state && children === state.children && !hasColumnsChanged) return null;
     return _extends({}, Masonry.getEqualCountColumns(children, columnsCount), {
@@ -42,2 +43,6 @@ children: children,
 
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    return nextProps.children !== this.state.children || nextProps.columnsCount !== this.props.columnsCount;
+  };
+
   _proto.distributeChildren = function distributeChildren() {
@@ -44,0 +49,0 @@ var _this2 = this;

es/ResponsiveMasonry/index.js

@@ -48,3 +48,4 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
   } : _ref$columnsCountBrea,
-      gutterBreakPoints = _ref.gutterBreakPoints,
+      _ref$gutterBreakPoint = _ref.gutterBreakPoints,
+      gutterBreakPoints = _ref$gutterBreakPoint === void 0 ? {} : _ref$gutterBreakPoint,
       children = _ref.children,
@@ -51,0 +52,0 @@ _ref$className = _ref.className,

lib/Masonry/index.js

@@ -44,3 +44,4 @@ "use strict";
         columnsCount = props.columnsCount;
-    if (state && children === state.children) return null;
+    var hasColumnsChanged = columnsCount !== state.columns.length;
+    if (state && children === state.children && !hasColumnsChanged) return null;
     return _extends({}, Masonry.getEqualCountColumns(children, columnsCount), {
@@ -52,2 +53,6 @@ children: children,
 
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    return nextProps.children !== this.state.children || nextProps.columnsCount !== this.props.columnsCount;
+  };
+
   _proto.distributeChildren = function distributeChildren() {
@@ -54,0 +59,0 @@ var _this2 = this;

lib/ResponsiveMasonry/index.js

@@ -63,3 +63,4 @@ "use strict";
   } : _ref$columnsCountBrea,
-      gutterBreakPoints = _ref.gutterBreakPoints,
+      _ref$gutterBreakPoint = _ref.gutterBreakPoints,
+      gutterBreakPoints = _ref$gutterBreakPoint === void 0 ? {} : _ref$gutterBreakPoint,
       children = _ref.children,
@@ -66,0 +67,0 @@ _ref$className = _ref.className,

package.json

 {
   "name": "react-responsive-masonry",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "author": {
@@ -73,3 +73,4 @@ "name": "Cédric Delpoux",
     "react-test-renderer": "^16.13.1"
-  }
+  },
+  "dependencies": {}
 }

umd/react-responsive-masonry.js

 /*!
- * react-responsive-masonry v2.7.0 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
+ * react-responsive-masonry v2.7.1 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
  * MIT Licensed
@@ -173,3 +173,4 @@ */
         columnsCount = props.columnsCount;
-    if (state && children === state.children) return null;
+    var hasColumnsChanged = columnsCount !== state.columns.length;
+    if (state && children === state.children && !hasColumnsChanged) return null;
     return _extends({}, Masonry.getEqualCountColumns(children, columnsCount), {
@@ -181,2 +182,6 @@ children: children,
 
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    return nextProps.children !== this.state.children || nextProps.columnsCount !== this.props.columnsCount;
+  };
+
   _proto.distributeChildren = function distributeChildren() {
@@ -365,3 +370,4 @@ var _this2 = this;
   } : _ref$columnsCountBrea,
-      gutterBreakPoints = _ref.gutterBreakPoints,
+      _ref$gutterBreakPoint = _ref.gutterBreakPoints,
+      gutterBreakPoints = _ref$gutterBreakPoint === void 0 ? {} : _ref$gutterBreakPoint,
       children = _ref.children,
@@ -368,0 +374,0 @@ _ref$className = _ref.className,

umd/react-responsive-masonry.min.js

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

No alert changes

Improved metrics

Total package byte prevSize

70752

increased by2.58%

Lines of code

934

increased by1.74%

No dependency changes