From bf70d83260b5ea356740273288c802b182b4d317 Mon Sep 17 00:00:00 2001 From: Nathan Kerr Date: Fri, 15 Dec 2017 14:55:55 -0800 Subject: [PATCH 1/6] New prop to not reload during componentDidUpdate. Debounce all layout calls. --- lib/index.js | 26 +++++++++++++++++--------- typings.d.ts | 21 +++++++++++---------- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/lib/index.js b/lib/index.js index 18f3014..a84ee0b 100644 --- a/lib/index.js +++ b/lib/index.js @@ -17,7 +17,8 @@ var propTypes = { options: PropTypes.object, elementType: PropTypes.string, onLayoutComplete: PropTypes.func, - onRemoveComplete: PropTypes.func + onRemoveComplete: PropTypes.func, + updateOnEachComponentUpdate: PropTypes.bool }; var MasonryComponent = createReactClass({ @@ -38,7 +39,8 @@ var MasonryComponent = createReactClass({ onLayoutComplete: function() { }, onRemoveComplete: function() { - } + }, + updateOnEachComponentUpdate: true }; }, @@ -211,8 +213,10 @@ var MasonryComponent = createReactClass({ this.masonry.reloadItems(); } - this.masonry.layout(); - }, + if (this.props.updateOnEachComponentUpdate) { + this.reloadLayout(); + } + }, imagesLoaded: function() { if (this.props.disableImagesLoaded) { @@ -227,11 +231,17 @@ var MasonryComponent = createReactClass({ if (this.props.onImagesLoaded) { this.props.onImagesLoaded(instance); } - this.masonry.layout(); + this.reloadLayout(); }.bind(this), 100) ); }, + reloadLayout: debounce( + function() { + this.masonry.layout(); + }, 100 + ), + initializeResizableChildren: function() { if (!this.props.enableResizableChildren) { return; @@ -245,9 +255,7 @@ var MasonryComponent = createReactClass({ }, listenToElementResize: function(el) { - this.erd.listenTo(el, function() { - this.masonry.layout() - }.bind(this)) + this.erd.listenTo(el, this.reloadLayout); }, destroyErd: function() { @@ -281,7 +289,7 @@ var MasonryComponent = createReactClass({ this.masonry.destroy(); }, - + setRef: function(n) { this.masonryContainer = n; }, diff --git a/typings.d.ts b/typings.d.ts index d57160d..937f080 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -17,16 +17,17 @@ export interface MasonryOptions { } export interface MasonryPropTypes { - enableResizableChildren?: boolean; - disableImagesLoaded?: boolean; - updateOnEachImageLoad?: boolean; - onImagesLoaded?: (instance: any) => void; - options?: MasonryOptions; - className?: string; - elementType?: string; - style?: Object; - onLayoutComplete?: (instance: any) => void; - onRemoveComplete?: (instance: any) => void; + enableResizableChildren?: boolean; + disableImagesLoaded?: boolean; + updateOnEachImageLoad?: boolean; + onImagesLoaded?: (instance: any) => void; + options?: MasonryOptions; + className?: string; + elementType?: string; + style?: Object; + onLayoutComplete?: (instance: any) => void; + onRemoveComplete?: (instance: any) => void; + updateOnEachComponentUpdate?: boolean; } declare const Masonry: ComponentClass; From dc78f4547c97c5769be103c8a724abadf47a0147 Mon Sep 17 00:00:00 2001 From: Nathan Kerr Date: Mon, 18 Dec 2017 09:15:24 -0800 Subject: [PATCH 2/6] Fix spacing. --- typings.d.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/typings.d.ts b/typings.d.ts index 937f080..6542206 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -17,17 +17,17 @@ export interface MasonryOptions { } export interface MasonryPropTypes { - enableResizableChildren?: boolean; - disableImagesLoaded?: boolean; - updateOnEachImageLoad?: boolean; - onImagesLoaded?: (instance: any) => void; - options?: MasonryOptions; - className?: string; - elementType?: string; - style?: Object; - onLayoutComplete?: (instance: any) => void; - onRemoveComplete?: (instance: any) => void; - updateOnEachComponentUpdate?: boolean; + enableResizableChildren?: boolean; + disableImagesLoaded?: boolean; + updateOnEachImageLoad?: boolean; + onImagesLoaded?: (instance: any) => void; + options?: MasonryOptions; + className?: string; + elementType?: string; + style?: Object; + onLayoutComplete?: (instance: any) => void; + onRemoveComplete?: (instance: any) => void; + updateOnEachComponentUpdate?: boolean; } declare const Masonry: ComponentClass; From fe16e099c94d893a8b56aa34abb4fba950638d62 Mon Sep 17 00:00:00 2001 From: Nathan Kerr Date: Mon, 18 Dec 2017 11:47:06 -0800 Subject: [PATCH 3/6] Force a reload if we reloadedItems. --- lib/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/index.js b/lib/index.js index a84ee0b..d7ef6ab 100644 --- a/lib/index.js +++ b/lib/index.js @@ -213,10 +213,10 @@ var MasonryComponent = createReactClass({ this.masonry.reloadItems(); } - if (this.props.updateOnEachComponentUpdate) { - this.reloadLayout(); - } - }, + if (this.props.updateOnEachComponentUpdate || reloadItems) { + this.reloadLayout(); + } + }, imagesLoaded: function() { if (this.props.disableImagesLoaded) { From 5c027f2e4e32b10ff887645d54dc172376868cc2 Mon Sep 17 00:00:00 2001 From: Nathan Kerr Date: Mon, 18 Dec 2017 12:02:40 -0800 Subject: [PATCH 4/6] Debounce at leading edge. Fix tests because of debouncing. --- lib/index.js | 4 +++- spec/react-masonry-component-test.js | 17 +++++++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/lib/index.js b/lib/index.js index d7ef6ab..dfb2a6e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -239,7 +239,9 @@ var MasonryComponent = createReactClass({ reloadLayout: debounce( function() { this.masonry.layout(); - }, 100 + }, 100, { + leading: true + } ), initializeResizableChildren: function() { diff --git a/spec/react-masonry-component-test.js b/spec/react-masonry-component-test.js index 9f8b28b..b9e51f6 100644 --- a/spec/react-masonry-component-test.js +++ b/spec/react-masonry-component-test.js @@ -25,7 +25,8 @@ describe('React Masonry Component', function() { onLayoutComplete: function() { }, onRemoveComplete: function() { - } + }, + updateOnEachComponentUpdate: true }); }); @@ -307,7 +308,7 @@ describe('React Masonry Component', function() { failureMessage(index, 'top', expectedPosition.top + 'px', element.style.top, phase)) } - it('should correctly layout remaining elements when first element is removed [columnWidth empty]', function() { + it('should correctly layout remaining elements when first element is removed [columnWidth empty]', function(done) { let wrapperContext; class Wrapper extends React.Component { constructor() { @@ -344,11 +345,15 @@ describe('React Masonry Component', function() { } wrapperContext.setState({items: localChildrenElements.slice(1)}); - const secondElements = div.querySelectorAll('.item'); + + setTimeout(function(){ + const secondElements = div.querySelectorAll('.item'); - for (let i = 0; i < secondElements.length; i++) { - expectElementPositionToMatch(secondElements[i], secondPositions[i], i, 'after removal'); - } + for (let i = 0; i < secondElements.length; i++) { + expectElementPositionToMatch(secondElements[i], secondPositions[i], i, 'after removal'); + } + done(); + }, 500); }); it('should correctly layout remaining elements when first element is removed [columnWidth fixed]', function() { From 040881202ab0c1ec90fe2d1c5649f94ccec4944e Mon Sep 17 00:00:00 2001 From: Nathan Kerr Date: Mon, 18 Dec 2017 12:12:43 -0800 Subject: [PATCH 5/6] Whitespace issues. --- spec/react-masonry-component-test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/spec/react-masonry-component-test.js b/spec/react-masonry-component-test.js index b9e51f6..a67bbd4 100644 --- a/spec/react-masonry-component-test.js +++ b/spec/react-masonry-component-test.js @@ -26,7 +26,7 @@ describe('React Masonry Component', function() { }, onRemoveComplete: function() { }, - updateOnEachComponentUpdate: true + updateOnEachComponentUpdate: true }); }); @@ -345,15 +345,15 @@ describe('React Masonry Component', function() { } wrapperContext.setState({items: localChildrenElements.slice(1)}); - - setTimeout(function(){ + + setTimeout(function(){ const secondElements = div.querySelectorAll('.item'); for (let i = 0; i < secondElements.length; i++) { expectElementPositionToMatch(secondElements[i], secondPositions[i], i, 'after removal'); } - done(); - }, 500); + done(); + }, 500); }); it('should correctly layout remaining elements when first element is removed [columnWidth fixed]', function() { From cee41b5740a5b83cae835b6e56c6b720f4ca8a59 Mon Sep 17 00:00:00 2001 From: Nathan Kerr Date: Wed, 19 Jun 2019 14:11:22 -0700 Subject: [PATCH 6/6] Fix from merge --- spec/react-masonry-component-test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/react-masonry-component-test.js b/spec/react-masonry-component-test.js index 7339ac2..f2e30f3 100644 --- a/spec/react-masonry-component-test.js +++ b/spec/react-masonry-component-test.js @@ -27,7 +27,8 @@ describe('React Masonry Component', function() { onLayoutComplete: function() { }, onRemoveComplete: function() { - } + }, + updateOnEachComponentUpdate: true }); }); @@ -53,8 +54,7 @@ describe('React Masonry Component', function() { render() { return this.masonry = c.masonry}/> } - }, - updateOnEachComponentUpdate: true + } const component = TestUtils.renderIntoDocument(); const ml = require('masonry-layout');