Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-responsive-masonry
Advanced tools
react-responsive-masonry - npm Package Compare versions
Comparing version 2.4.1 to 2.5.0
@@ -19,27 +19,6 @@ 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); } | ||
| _proto.componentDidUpdate = function componentDidUpdate() { | ||
| if (!this.state.hasDistributed && !this.props.sequential) this.distributeChildren(); | ||
| }; | ||
| Masonry.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) { | ||
| var children = props.children, | ||
| columnsCount = props.columnsCount; | ||
| if (state && children === state.children) return null; | ||
| return _extends({}, Masonry.getEqualCountColumns(children, columnsCount), { | ||
| children: children, | ||
| hasDistributed: false | ||
| }); | ||
| }; | ||
| _proto.distributeChildren = function distributeChildren() { | ||
| var _this = this; | ||
| _proto.getColumns = function getColumns() { | ||
| var _this$props = this.props, | ||
| children = _this$props.children, | ||
| columnsCount = _this$props.columnsCount; | ||
| var columnHeights = Array(columnsCount).fill(0); | ||
| var isReady = this.state.childRefs.every(function (ref) { | ||
| return ref.current.getBoundingClientRect().height; | ||
| }); | ||
| if (!isReady) return; | ||
| var columns = Array.from({ | ||
@@ -53,50 +32,9 @@ length: columnsCount | ||
| if (child && React.isValidElement(child)) { | ||
| // .current is undefined if ref was passed to a functional component without forwardRef | ||
| // now passing ref into a wrapper div so it should always be defined | ||
| var childHeight = _this.state.childRefs[validIndex].current.getBoundingClientRect().height; | ||
| var minHeightColumnIndex = columnHeights.indexOf(Math.min.apply(Math, columnHeights)); | ||
| columnHeights[minHeightColumnIndex] += childHeight; | ||
| columns[minHeightColumnIndex].push(child); | ||
| columns[validIndex % columnsCount].push(child); | ||
| validIndex++; | ||
| } | ||
| }); | ||
| this.setState(function (p) { | ||
| return _extends({}, p, { | ||
| columns: columns, | ||
| hasDistributed: true | ||
| }); | ||
| }); | ||
| return columns; | ||
| }; | ||
| Masonry.getEqualCountColumns = function getEqualCountColumns(children, columnsCount) { | ||
| var columns = Array.from({ | ||
| length: columnsCount | ||
| }, function () { | ||
| return []; | ||
| }); | ||
| var validIndex = 0; | ||
| var childRefs = []; | ||
| React.Children.forEach(children, function (child) { | ||
| if (child && React.isValidElement(child)) { | ||
| var ref = React.createRef(); | ||
| childRefs.push(ref); | ||
| columns[validIndex % columnsCount].push( /*#__PURE__*/React.createElement("div", { | ||
| style: { | ||
| display: "flex", | ||
| justifyContent: "stretch" | ||
| }, | ||
| key: validIndex, | ||
| ref: ref | ||
| }, child) // React.cloneElement(child, {ref}) // cannot attach refs to functional components without forwardRef | ||
| ); | ||
| validIndex++; | ||
| } | ||
| }); | ||
| return { | ||
| columns: columns, | ||
| childRefs: childRefs | ||
| }; | ||
| }; | ||
| _proto.renderColumns = function renderColumns() { | ||
@@ -107,3 +45,3 @@ var _this$props2 = this.props, | ||
| itemStyle = _this$props2.itemStyle; | ||
| return this.state.columns.map(function (column, i) { | ||
| return this.getColumns().map(function (column, i) { | ||
| return React.createElement(itemTag, { | ||
@@ -157,4 +95,3 @@ key: i, | ||
| itemTag: PropTypes.string, | ||
| itemStyle: PropTypes.object, | ||
| sequential: PropTypes.bool | ||
| itemStyle: PropTypes.object | ||
| } : {}; | ||
@@ -168,5 +105,4 @@ Masonry.defaultProps = { | ||
| itemTag: "div", | ||
| itemStyle: {}, | ||
| sequential: false | ||
| itemStyle: {} | ||
| }; | ||
| export default Masonry; |
@@ -29,27 +29,6 @@ "use strict"; | ||
| _proto.componentDidUpdate = function componentDidUpdate() { | ||
| if (!this.state.hasDistributed && !this.props.sequential) this.distributeChildren(); | ||
| }; | ||
| Masonry.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) { | ||
| var children = props.children, | ||
| columnsCount = props.columnsCount; | ||
| if (state && children === state.children) return null; | ||
| return _extends({}, Masonry.getEqualCountColumns(children, columnsCount), { | ||
| children: children, | ||
| hasDistributed: false | ||
| }); | ||
| }; | ||
| _proto.distributeChildren = function distributeChildren() { | ||
| var _this = this; | ||
| _proto.getColumns = function getColumns() { | ||
| var _this$props = this.props, | ||
| children = _this$props.children, | ||
| columnsCount = _this$props.columnsCount; | ||
| var columnHeights = Array(columnsCount).fill(0); | ||
| var isReady = this.state.childRefs.every(function (ref) { | ||
| return ref.current.getBoundingClientRect().height; | ||
| }); | ||
| if (!isReady) return; | ||
| var columns = Array.from({ | ||
@@ -64,9 +43,3 @@ length: columnsCount | ||
| if (child && _react["default"].isValidElement(child)) { | ||
| // .current is undefined if ref was passed to a functional component without forwardRef | ||
| // now passing ref into a wrapper div so it should always be defined | ||
| var childHeight = _this.state.childRefs[validIndex].current.getBoundingClientRect().height; | ||
| var minHeightColumnIndex = columnHeights.indexOf(Math.min.apply(Math, columnHeights)); | ||
| columnHeights[minHeightColumnIndex] += childHeight; | ||
| columns[minHeightColumnIndex].push(child); | ||
| columns[validIndex % columnsCount].push(child); | ||
| validIndex++; | ||
@@ -76,43 +49,5 @@ } | ||
| this.setState(function (p) { | ||
| return _extends({}, p, { | ||
| columns: columns, | ||
| hasDistributed: true | ||
| }); | ||
| }); | ||
| return columns; | ||
| }; | ||
| Masonry.getEqualCountColumns = function getEqualCountColumns(children, columnsCount) { | ||
| var columns = Array.from({ | ||
| length: columnsCount | ||
| }, function () { | ||
| return []; | ||
| }); | ||
| var validIndex = 0; | ||
| var childRefs = []; | ||
| _react["default"].Children.forEach(children, function (child) { | ||
| if (child && _react["default"].isValidElement(child)) { | ||
| var ref = _react["default"].createRef(); | ||
| childRefs.push(ref); | ||
| columns[validIndex % columnsCount].push( /*#__PURE__*/_react["default"].createElement("div", { | ||
| style: { | ||
| display: "flex", | ||
| justifyContent: "stretch" | ||
| }, | ||
| key: validIndex, | ||
| ref: ref | ||
| }, child) // React.cloneElement(child, {ref}) // cannot attach refs to functional components without forwardRef | ||
| ); | ||
| validIndex++; | ||
| } | ||
| }); | ||
| return { | ||
| columns: columns, | ||
| childRefs: childRefs | ||
| }; | ||
| }; | ||
| _proto.renderColumns = function renderColumns() { | ||
@@ -123,3 +58,3 @@ var _this$props2 = this.props, | ||
| itemStyle = _this$props2.itemStyle; | ||
| return this.state.columns.map(function (column, i) { | ||
| return this.getColumns().map(function (column, i) { | ||
| return _react["default"].createElement(itemTag, { | ||
@@ -173,4 +108,3 @@ key: i, | ||
| itemTag: _propTypes["default"].string, | ||
| itemStyle: _propTypes["default"].object, | ||
| sequential: _propTypes["default"].bool | ||
| itemStyle: _propTypes["default"].object | ||
| } : {}; | ||
@@ -184,4 +118,3 @@ Masonry.defaultProps = { | ||
| itemTag: "div", | ||
| itemStyle: {}, | ||
| sequential: false | ||
| itemStyle: {} | ||
| }; | ||
@@ -188,0 +121,0 @@ var _default = Masonry; |
| { | ||
| "name": "react-responsive-masonry", | ||
| "version": "2.4.1", | ||
| "version": "2.5.0", | ||
| "author": { | ||
@@ -5,0 +5,0 @@ "name": "Cédric Delpoux", |
@@ -8,3 +8,2 @@ # react-responsive-masonry | ||
| ## Getting started | ||
@@ -85,10 +84,9 @@ | ||
| | Name | PropType | Description | Default | | ||
| | ------------ | -------- | ------------------------------------------------------ | ------- | | ||
| | columnsCount | Number | Injected by ResponsiveMasonry | 3 | | ||
| | gutter | String | Margin surrounding each item e.g. "10px" or "1.5rem" | "0" | | ||
| | containerTag | String | Tag name of the container element | "div" | | ||
| | itemTag | String | Tag name of the item element | "div" | | ||
| | itemStyle | Object | Style object applied to each item | {} | | ||
| | sequential | Boolean | If true, items are placed in the order they are passed | false | | ||
| | Name | PropType | Description | Default | | ||
| | ------------ | -------- | ---------------------------------------------------- | ------- | | ||
| | columnsCount | Number | Injected by ResponsiveMasonry | 3 | | ||
| | gutter | String | Margin surrounding each item e.g. "10px" or "1.5rem" | "0" | | ||
| | containerTag | String | Tag name of the container element | "div" | | ||
| | itemTag | String | Tag name of the item element | "div" | | ||
| | itemStyle | Object | Style object applied to each item | {} | | ||
@@ -103,5 +101,5 @@ ### ResponsiveMasonry component | ||
| * ⇄ Pull/Merge requests and ★ Stars are always welcome. | ||
| * For bugs and feature requests, please [create an issue][github-issue]. | ||
| * Pull requests must be accompanied by passing automated tests (`npm test`). | ||
| - ⇄ Pull/Merge requests and ★ Stars are always welcome. | ||
| - For bugs and feature requests, please [create an issue][github-issue]. | ||
| - Pull requests must be accompanied by passing automated tests (`npm test`). | ||
@@ -108,0 +106,0 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines |
| /*! | ||
| * react-responsive-masonry v2.4.1 - https://github.com/cedricdelpoux/react-responsive-masonry#readme | ||
| * react-responsive-masonry v2.5.0 - https://github.com/cedricdelpoux/react-responsive-masonry#readme | ||
| * MIT Licensed | ||
@@ -158,27 +158,6 @@ */ | ||
| _proto.componentDidUpdate = function componentDidUpdate() { | ||
| if (!this.state.hasDistributed && !this.props.sequential) this.distributeChildren(); | ||
| }; | ||
| Masonry.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) { | ||
| var children = props.children, | ||
| columnsCount = props.columnsCount; | ||
| if (state && children === state.children) return null; | ||
| return _extends({}, Masonry.getEqualCountColumns(children, columnsCount), { | ||
| children: children, | ||
| hasDistributed: false | ||
| }); | ||
| }; | ||
| _proto.distributeChildren = function distributeChildren() { | ||
| var _this = this; | ||
| _proto.getColumns = function getColumns() { | ||
| var _this$props = this.props, | ||
| children = _this$props.children, | ||
| columnsCount = _this$props.columnsCount; | ||
| var columnHeights = Array(columnsCount).fill(0); | ||
| var isReady = this.state.childRefs.every(function (ref) { | ||
| return ref.current.getBoundingClientRect().height; | ||
| }); | ||
| if (!isReady) return; | ||
| var columns = Array.from({ | ||
@@ -192,50 +171,9 @@ length: columnsCount | ||
| if (child && external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.isValidElement(child)) { | ||
| // .current is undefined if ref was passed to a functional component without forwardRef | ||
| // now passing ref into a wrapper div so it should always be defined | ||
| var childHeight = _this.state.childRefs[validIndex].current.getBoundingClientRect().height; | ||
| var minHeightColumnIndex = columnHeights.indexOf(Math.min.apply(Math, columnHeights)); | ||
| columnHeights[minHeightColumnIndex] += childHeight; | ||
| columns[minHeightColumnIndex].push(child); | ||
| columns[validIndex % columnsCount].push(child); | ||
| validIndex++; | ||
| } | ||
| }); | ||
| this.setState(function (p) { | ||
| return _extends({}, p, { | ||
| columns: columns, | ||
| hasDistributed: true | ||
| }); | ||
| }); | ||
| return columns; | ||
| }; | ||
| Masonry.getEqualCountColumns = function getEqualCountColumns(children, columnsCount) { | ||
| var columns = Array.from({ | ||
| length: columnsCount | ||
| }, function () { | ||
| return []; | ||
| }); | ||
| var validIndex = 0; | ||
| var childRefs = []; | ||
| 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)) { | ||
| var ref = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef(); | ||
| childRefs.push(ref); | ||
| columns[validIndex % columnsCount].push( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { | ||
| style: { | ||
| display: "flex", | ||
| justifyContent: "stretch" | ||
| }, | ||
| key: validIndex, | ||
| ref: ref | ||
| }, child) // React.cloneElement(child, {ref}) // cannot attach refs to functional components without forwardRef | ||
| ); | ||
| validIndex++; | ||
| } | ||
| }); | ||
| return { | ||
| columns: columns, | ||
| childRefs: childRefs | ||
| }; | ||
| }; | ||
| _proto.renderColumns = function renderColumns() { | ||
@@ -246,3 +184,3 @@ var _this$props2 = this.props, | ||
| itemStyle = _this$props2.itemStyle; | ||
| return this.state.columns.map(function (column, i) { | ||
| return this.getColumns().map(function (column, i) { | ||
| return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(itemTag, { | ||
@@ -296,4 +234,3 @@ key: i, | ||
| itemTag: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.string, | ||
| itemStyle: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.object, | ||
| sequential: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.bool | ||
| itemStyle: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.object | ||
| }; | ||
@@ -307,4 +244,3 @@ Masonry_Masonry.defaultProps = { | ||
| itemTag: "div", | ||
| itemStyle: {}, | ||
| sequential: false | ||
| itemStyle: {} | ||
| }; | ||
@@ -311,0 +247,0 @@ /* harmony default export */ var src_Masonry = (Masonry_Masonry); |
| /*! | ||
| * react-responsive-masonry v2.4.1 - https://github.com/cedricdelpoux/react-responsive-masonry#readme | ||
| * react-responsive-masonry v2.5.0 - 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(){return e.apply(this,arguments)||this}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.children,u=e.className,a=void 0===u?null:u,c=e.style,s=void 0===c?null:c,f=l(),d=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<f&&(t=n[e])})),t}),[f,n]);return o.a.createElement("div",{className:a,style:s},o.a.Children.map(i,(function(e,t){return o.a.cloneElement(e,{key:t,columnsCount:d})})))};t.default=c}]).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,t=e.gutter,n=e.itemTag,r=e.itemStyle;return this.getColumns().map((function(e,i){return o.a.createElement(n,{key:i,style:u({display:"flex",flexDirection:"column",justifyContent:"flex-start",alignContent:"stretch",flex:1,width:0,gap:t},r)},e.map((function(e){return e})))}))},c.render=function(){var e=this.props,t=e.gutter,n=e.className,r=e.style,i=e.containerTag;return o.a.createElement(i,{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:{},containerTag:"div",itemTag:"div",itemStyle:{}};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)("undefined"!=typeof window?window.innerWidth: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})); | ||
| //# sourceMappingURL=react-responsive-masonry.min.js.map |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-17.36%
54406
- Lines of code
- decreased by-20.8%
689
- Number of lines in readme file
- decreased by-1.6%
123
No dependency changes