Refresh Grid after component size changes

[derwydd]

I have an application that starts off with minimalized items. When the user clicks on a particular item it is re-rendered and the width and height changes. However, when the small component is replaced by the larger, the other un-clicked smaller components stack over the larger component as if it does not recognize that it is present. Only when I change the browser size does it re-render the grid correctly taking the larger component into exception.

<StackGrid columnWidth={350} duration={480} gutterWidth={5} gutterHeight={5} easing={easings.quartOut} appear={flip.appear} appeared={flip.appeared} enter={flip.enter} entered={flip.entered} leaved={flip.leaved} monitorImagesLoaded={true} > {this.groupLoop(groups, groupSelected)} </StackGrid>

With in groupLoop, its decides if the component is small or large, the large component is rendered by calling another component whereas the small was are not. I can give more details if needed.

[wadackel]

Hi @derwydd, Thanks for Issues 😃
I think it is probably the same issue as # 19.

---

As a solution there is a way to detect the size change of each item of the grid, but it will greatly degrade performance.

Instead, I'm considering an API to rerender the grid manually:

/**
 * It calls the API of the StackGrid instance
 * when the height of the grid item changes.
 */
class YourComponent extends React.Component {
  /**
   * It simulates when the height of the grid item changes.
   */
  something() {
    this.node.updateLayout();
  }

  // ...

  render() {
    return (
      <StackGrid
        onInitialized={node => this.node = node}
      >
        {/* Grid items */}
      </StackGrid>
    );
  }
}

It is an idea to handle item clicks and run updateLayout().
What do you think of this idea?

[derwydd]

This would be great. The ability to call a function with in an event change make best sense. What would be the time frame for this? We would love to use this library in a production App.

[wadackel]

@derwydd , Thanks for quick response !

What would be the time frame for this?

The promise is difficult, but I think we can release it this week.

We would love to use this library in a production App.

Thanks, very encouraging for me... 😉

[wadackel]

Hi @derwydd.
Released version 0.3.0 which supports manual layout update 🎉
Please check when you have time.

Reference

• Live Demo (Source Code)
• How to manually update layout ?

Note: The onInitialized used in the proposal is renamed to gridRef.

[derwydd]

We were able to implement, but it seems that it does not work in every GridItem height. We have some items/panels that are about 900px height and the height is dynamic and not set. Should we be setting the height? Also is there a way for a particular item to grow in width that is greater than the column width?

[derwydd]

The UI that we are using Material, I'm not sure if that is a factor

Can I send you pictures via email to demonstrate what is happening?

[wadackel]

Hi @derwydd, Thank you for confirmation.

Also is there a way for a particular item to grow in width that is greater than the column width?

No, unfortunately react-stack-grid does not support it.

Can I send you pictures via email to demonstrate what is happening?

Thanks for your cooperation. Instead of e-mail, it is helpful to share the minimum reproducible code.
A repository like react-stack-grid-issue-XXX is ideal.