eiriklv / react-masonry-component

A React.js component for using @desandro's Masonry
MIT License
1.44k stars 145 forks source link

fix layout of prepended elements #32

Closed anyab5 closed 8 years ago

anyab5 commented 8 years ago

The issue We are using the Masonry to render a grid with flexible column width. The issue encountered is similar to described in #11. Tiles appear to be stacked after filtering operations.

The change: Don't perform reloadItems after append if there are items to prepend. More details: Currently in case that we have items that some are categorised to be appended and the other are prepended then MasonryComponnet would append the items and immediately perform reloadItems, after it will attempt to prepend. This resulted with wrong prepended elements layout. The change was to perform reloadItems after append only if no prepeneded items found.

Explanation as a result of masonry.reloadItems invocation this.items in outlayer.js will already contain the items that should only now be prepended. As you can see in the code of prepend function below they will be used in layout of new items and as previous items at the same time.

proto.prepended = function( elems ) {
  var items = this._itemize( elems );
  if ( !items.length ) {
    return;
  }
  // add items to beginning of collection
  var previousItems = this.items.slice(0); // at this point this.items already contain the prepended element and thus will be contained in the previous items list as well.
  this.items = items.concat( previousItems );
  // start new layout
  this._resetLayout();
  this._manageStamps();
  // layout new stuff without transition
  this.layoutItems( items, true );
  this.reveal( items );
  // layout previous items
  this.layoutItems( previousItems );
};
afram commented 8 years ago

hi @anyab5

Thanks for your contribution and a great explanation! :-)

Will get this merged in asap - is it possible to ask for a test as well please to make sure this doesn't regress?

anyab5 commented 8 years ago

Hi @afram,

Thanks for your response. I adjusted the style per your suggestion. I try I will get to write the test soon and hopefully I will not run into issues of creating the test scenario which is more complex than the current examples.

afram commented 8 years ago

@anyab5 I've merged this in as I'm sure people want to use it.