wadackel / react-stack-grid Goto Github PK

Hello,

Thank you for this great library.

When using the <StackGrid> component with both gutterWidth and a percentage value in columnWidth, the position of the grid items seems incorrect. They are centered in the container leaving an horizontal space at the beginning and the end of it. This space seems to be equal to the number of gutters times the gutter space.

So for instance if I'm using a 4 columns layout with a 10 pixels gutterWidth, I will have a 10×4 = 40px margin on the left and on the right of my container.

Hello,

I am working with the react-stack-grid, and when the page loads, all of the cards in the grid are minimized within the grid until the user scrolls. Is there a method to force these to be full-sized upon first going to the page?

I got an error while rendering
StackGrid Component's Opacity:0 style attribute does not change 😢

I found a strange prop in the div element that render in the Grid Component.

and it comes GridItem Component

It looks like a react transition error 😢

Appreciate any help! 🙏

Hello! I'm curious on how I can prevent this from happening:

The layout will update it's height (and not overlap) on the second "tag" submission but not on the first one that causes the overlap. It also doesn't re-update when removing tags and the grid item returns to it's original size.

handleChange = (tags) => {
  this.setState(tags);
  return this.grid.updateLayout();
}

 <StackGrid
  columnWidth={'33%'}
  gutterWidth={10}
  gutterHeight={10}
  gridRef={(grid) => this.grid = grid}
>
  {widgets.map((widget) =>
      <TagInput
          key={widget.id}
          id={widget.id}
          name={widget.name}
          description={widget.description}
          value={this.state[widget.id] || []}
          options={{placeholder: widget.placeholder}}
          handleChange={this.handleChange}
      />
  )}
</StackGrid>

We may downgrade version of react-sizeme from v2.4.2 to v2.4.1
ctrlplusb/react-sizeme#134

Hi! Is there an option to set different width for item?
For example, I have 6 columns and I need first and second elements to be 4 columns width each and third, four and five set to 2 columns width with posibility to wrap all other items around those 5 bigger items.

Thanks!

I hope the subject line explains it,

Basically we load some data from the back-end that increases the height of a component. As a result, components right below render on top of the first component.

We have a way to change it by maybe updating the logic, however, I thought it would be a good idea to ask here as well. Maybe you have a function or something simpler to update the layout after back-end data is fully rendered.

Thank you!

Initially, the component is empty. I think the Grid renders its height according to the empty component

The data loads pushing the component down,

After I resize the browser, Grid rerenders and everything is placed in the right position.

I am using this with server-side rendering, which I know is discouraged for some reason, but it's all working fine except for this warning on initial load.

Warning: Prop `style` did not match. Server: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:0;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(0px) translateY(10px);-webkit-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transform:translateX(0px) translateY(10px)" Client: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:NaNpx;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(NaNpx) translateY(10px)"

Breakdown

Server Style

Server: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:0;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(0px) translateY(10px);-webkit-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transform:translateX(0px) translateY(10px)"

Client Style

Client: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:NaNpx;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(NaNpx) translateY(10px)"

For all intents and purposes, I don't need styling or position determined until it reaches the client side. I only need to load the content server-side for SEO purposes.

It's fine if none of the style calculations happen until reaching client side. The problem is that if I disable the enableSSR feature, it omits all of the content from server-side which is not desirable.

the images overlap when the page is visited for the first time. upon refresh, the images load correctly.
https://pinter.herokuapp.com/
there is how react-stack-grid is used:
https://github.com/moT01/pinterest/blob/master/client/src/components/main/MainPage.js

I want to have a bit larger margin between cells. How to achieve that? Thanks!

i like to run the jsx-code of your plugin to be able to change it a bit.

but when i try to do this i get an "unexpected token" error, you can see it here: https://postimg.org/image/ppgts6rk5/

i understand that writing e.g.

export * as easings

is something that is not supported yet (but might come in ES7).

so i tried to get it to work using this babel-plugin but still no success: http://babeljs.io/docs/plugins/transform-export-extensions/

this is my .babelrc

{ "presets": [ "flow", "es2015", "react", "stage-1" ], "plugins": [ "react-hot-loader/babel", "transform-export-extensions" ] }
any help would be appreciated!

it's not very stable from what I check, sometimes the image will overlap and the result is not right then

if refreshed, it would be right for some chance but no always

Hey there,

Thanks for making this!

There is an assumption in your getItemHeight function that creates an inflexibility around some use cases which I will attempt to describe.

In cases where an element has overflowing children - regardless of what the parent's overflow value is set to, this calculation results in a value that accounts for the children's full dimensions (exceeding the parent's dimensions). This does make sense.. if I have a div whose overflow is visible, and its children exceed it's bounds, then presumably I would want the grid to align with the outer bounds of the child item, not the parent. This is not true if I want to animate the height of a grid item as described below.

A little background - I'm working on a pinterest style grid that has animated expanding/collapsing items in it. I've been fighting the stack-grid layout algorithm a bit since I need to coordinate when to update the layout around the animations (since I'm animating height). I refactored some code so that my grid items' height doesn't animate allowing the grid to update immediately with the correct height. At the same time, I am transitioning the height of a grid item child node. This works great when expanding since the grid-item becomes it's final height instantly while the inner child animates to that height. On collapse, however, I have to have overflow: visible on the parent in order to be able to see the transition on the child's height but at the same time, stack-grid wants to immediately measure and transition the grid, but because it uses scrollHeight the calculation is wrong (it accounts for the overflowing child).

I wonder if this is too crazy of a use case to warrant an option - perhaps you could allow the user to define the function that getItemHeight uses to extract the height from the node? If that were the case, I could just pass a function that ignores scrollHeight and just uses clientHeight or offsetHeight.

Thanks!

sometimes the transforms end up being non integer pixels (e.g. transformX: 117.5px), which results in blurry pixels in chrome. could the transform final value be rounded to the nearest whole pixel coordinate to avoid this?

It seems that react deprecated the way this package uses PropTypes.

Consumers above React version 15.5 get the following warning:
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Included is the link from the react documents about its deprecation and replacement.
https://facebook.github.io/react/warnings/dont-call-proptypes.html

Otherwise this project is exactly what I have been looking for. Great work.

Hi!

It seems, that the dropdown to pick a transition on the demo page https://tsuyoshiwada.github.io/react-stack-grid/#/ is not working.

I tried different browsers, but the issue was persistent, making it difficult to select on option up front without coding, e.g. with a designer.

I've decided to use this grid in one of my projects. But a real-life feed would need to load items on the fly. Do you have plans on adding an infinite scroll feature to the grid? How would you go ahead to implement something like that?

Hello, thanks a lot for these components. Your live demo is really nice.
It's not an issue, more an understanding problem by my side, as i'm a newbie with React, but seeing more complete component code and how you use different properties and how you control your grid will be really helpfull. Or at least seeing how your live demo is made, especially the "real world" example. I'm trying to understand it through react developper tool, but i'm not recognizing the code structure.

Does this lib have a way for us to do windowing to increase performance?

https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists

Is there any way to align items on the left of their grid?

Using the same code as from the Real World example, but the images are getting overlapped, instead of getting resized as is shown in the live demo.

Any reason why this is happening?

Version: [email protected]

Hi there - I know this was already mentioned in other issues, but I have a problem when toggling between two views that change heights: Card View and List View. I tried the updateLayout approach specified here, but did not receive any different results.

I have included screenshots to provide more context:

Let's say my custom GridItem component has 2 visual states: normal and extended. Extended means that height of GridItem is 200% from normal.

By default, all items have the normal states, but on click event the item is extended. The problem is that right now item's positions are not recalculated in the column and so I have items overlapping.

Getting the following error when I try to use StackGrid in my Meteor app. Following the link provided to fb, it hints that I have multiple copies of React but I'm not sure how...

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). at invariant (modules.js?hash=559d975…:38188) at Object.addComponentAsRefTo (modules.js?hash=559d975…:51979) at attachRef (modules.js?hash=559d975…:51836) at Object.ReactRef.attachRefs (modules.js?hash=559d975…:51855) at ReactCompositeComponentWrapper.attachRefs (modules.js?hash=559d975…:51659) at CallbackQueue.notifyAll (modules.js?hash=559d975…:51553) at ReactReconcileTransaction.close (modules.js?hash=559d975…:61827) at ReactReconcileTransaction.closeAll (modules.js?hash=559d975…:52712) at ReactReconcileTransaction.perform (modules.js?hash=559d975…:52659) at ReactUpdatesFlushTransaction.perform (modules.js?hash=559d975…:52646) at ReactUpdatesFlushTransaction.perform (modules.js?hash=559d975…:51306) at Object.flushBatchedUpdates (modules.js?hash=559d975…:51389) at ReactDefaultBatchingStrategyTransaction.closeAll (modules.js?hash=559d975…:52712) at ReactDefaultBatchingStrategyTransaction.perform (modules.js?hash=559d975…:52659) at Object.batchedUpdates (modules.js?hash=559d975…:61525) at Object.enqueueUpdate (modules.js?hash=559d975…:51417)

You mentioned react-stonecutter in your readme. Right now I'm in the beginning of evaluating a lot of react lists and grids and I can't really tell where the difference is between your project and stonecutter. Could you please help me out here and maybe describe it in the readme more clearly?

Is it about the placeholder thing? Thank you very much

This library is an excellent piece of work. Thanks a lot 😅

But, Images do overlap on low-end devices... 🙇🏻‍♀️
They fail to load on Iphone SE, but renders like WOW on IphoneX...

I would like some help regarding the persisting issue. 😃

Here's my portfolio website using your library. kumar.now.sh
When I load images for the first time, there are few rendering issues though 😅

Here's how I am using your library...
1:https://github.com/KumarAbhirup/kumarabhirup/blob/master/src/components/mobirise/PortfolioExtended.js
2: https://github.com/KumarAbhirup/kumarabhirup/blob/master/src/components/mobirise/Portfolio.js

Complete error in Chrome console:

Warning: `Infinity` is an invalid value for the `height` css style property.

Check the render method of `TransitionGroup`.

It didn't locate where that error comes from. It's simply a warning.js error. I'm getting this message after using react-stack-grid.

would it be possible to add support for react-virtualized? Would help greatly in rendering large stack grids efficiently.

I found that this works by updating the layout after 1 animation frame:

const grid = useRef(null);

  useEffect(() => {
    requestAnimationFrame(() => {
      if (grid.current) {
        grid.current.updateLayout();
      }
    });
  }, [grid]);

<StackGrid
      gridRef={r => (grid.current = r)}
    >{children}</StackGrid>

in my app i have text inside the cards & cards will get added & removed in real time, so i'd like to minimize the amount of shuffling. from the animation above, you can see that sometimes appending an item triggers a new column & can shuffle all a few cards to the left. happy to work on a PR if this isn't intentional.

is there any solutions , or something nearest implemented? Something like http://valerybugakov.github.io/react-selectable-fast/ or http://pablofierro.github.io/react-drag-select/ to omplement with this great library

Basically if an item (with same key) disappears then appears again quickly then the item is rendered on the DOM but the item CSS properties make it be invisible.

If the disappear animation is allowed to play until the end before showing the item again then it works correctly.

Thank you for such an amazing library. It works great and is very easy to setup.

During window resize I receive following warning:

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the GridItem component.
printWarning	                                        @ warning.js:36
warning	                                                @ warning.js:60
getInternalInstanceReadyForUpdate	@ ReactUpdateQueue.js:48
enqueueSetState	                                @ ReactUpdateQueue.js:200
ReactComponent.setState	                @ ReactComponent.js:63
(anonymous)	                                        @ GridItem.js:70

After the warning I get following TypeError:

Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined
    at ReactTransitionGroup._this._handleDoneLeaving (ReactTransitionGroup.js:121)

I'm curious about the recommended way to show different styles for different screen sizes.

i.e., I have a two column layout for tablet and up, but for mobile, I'd like for my grid to stack to one column. Is that currently possible is should I just hide/show my content for responsive?

From the demo page there's a really nice animation which plays when an item is removed: https://tsuyoshiwada.github.io/react-stack-grid/#/

I wanted to know how I can accopmplish this?

My setup looks something like this:

//render function:
let items: JSX.Element[] = [];
// populate items from this.props.items
 <StackGrid> {items} </StackGrid>

and I remove entries from this.props.items and re-render. However if I want to delete an item from the middle the entire list repopulates making me think there's a better way to do this given the demo page

This is the configuration I am using....
<StackGrid
columnWidth={${colWidthPercent}%}
gutterWidth={gutterSize}
gutterHeight={gutterSize}
duration={0}
monitorImagesLoaded={true}
easing={easings.cubicOut}
appearDelay={0}
className={Style.outerContainer}
enableSSR={true}
>

What extra config should be used?

When rendering images, it will take the position of the preceding images and create overlaps (will adjust automatically when resizing the browser).

The new image inherits the preceding image's translateX such as translateX(757px) translateY(434px), when resizing the browser it gets updated to translateX(0px) translateY(513px).

Here's what I mean: https://imgur.com/a/kPpHRzh

Here's my component:

export class Display extends React.Component {
    render () {
            return (
                <div>
                {
                    (this.props.returnImage(1) == null) ? (console.log('Nothing inside')) : (

                    <ImagesLoaded
                            elementType={'div'} 
                            className={'images'} 
                            onAlways={this.handleOnAlways}
                            onProgress={this.handleOnProgress}
                            onFail={this.handleOnFail}
                            done={this.handleDone}
                            background=".image" 
                    >       
                            <StackGrid columnWidth={'34.341231%'} monitorImagesLoaded={true}>
                            <div key="key1"><img src={this.props.returnImage(1)}/></div>
                            <div key="key2"><img src={this.props.returnImage(2)}/></div>
                            <div key="key3"><img src={this.props.returnImage(3)}/></div>
                            <div key="key4"><img src={this.props.returnImage(4)}/></div>
                            <div key="key5"><img src={this.props.returnImage(5)}/></div>
                            <div key="key6"><img src={this.props.returnImage(6)}/></div>
                            </StackGrid>
                    </ImagesLoaded>
                )
                }
                </div>
            )
        }
    }

Basically if this.props.returnImage(1) is not empty return the StackGrid component (I had to do this otherwise everything would overlap from the first try).

Please let me know if you know a turnaround!

This component is amazing. Exactly what I was looking for and more.

That said, I'm having a little bit of trouble with the animation. On the first load, all of my items animate all at once. Then, when I revisit the page, it loads as expected, fading in as I scroll down the page, using the correct delay / duration settings.

Here are the settings I'm using:

import StackGrid, { transitions, easings } from 'react-stack-grid';
const { fadeUp } = transitions;

      <StackGrid
                appearDelay={1200}
                gutterWidth={15}
                duration={800}
                easing={easings.cubicOut}
                gutterHeight={-120}
                appear={fadeUp.appear}
                appeared={fadeUp.appeared}
                enter={fadeUp.enter}
                entered={fadeUp.entered}
                leaved={fadeUp.leaved}
                columnWidth={770}
             >

              {this.props.items &&
                this.props.items.map((item, index) => (
   ...

Appreciate any help!

Is there an event that fires when the layout of all children is completed? if not would you consider to add it?

Would be great to be able to pass an onLayout prop to get notified after a layout update.

<StackGrid onLayout={::this.handleLayout} ... />

Hi,

In a mobile view I have a StackGrid which can either have 1 column in portrait orientation, and 2 columns in landscape mode. I'm using size-me/component-queries as recommended in #10 and this is working well expect for the gutter height that is either too big or too small when switching between the 2 layouts.

Edit: This seems to be the case only with column widths defined with percentage strings.

I've tried hard, but I couldn't get a dynamic update to work.

I've a websocket connection where new stuff is coming in. If new stuff is coming in, I want the grid to update it's layout. This is what I've tried:

I've removed some stuff which is not necessary to understand the problem (`withWebsocket' is a higher order component)

As you can see, each time data is coming in I'll update the data and the gridlayout, but the grid is actually never being rendered again.

Obviously I'm using it wrong.. It would be much helpful to see the source of your demo to understand the usage a bit better...

EDIT: I got it to work by setting the state, but this triggers the complete render method which is a huge overhead.. :-/

import React, {Component} from 'react';
import StackGrid from 'react-stack-grid';

class Wall extends Component {

    constructor(props) {
        super(props);
        this.internalData = [];
    }


    componentWillMount = () => {
        this.props.internalEmitter.on('wallUpdates', update => {
            this.internalData.push(update);
            this.grid.updateLayout();
        });
    };

    render = () => {
        return (
            <StackGrid
                gridRef={grid => this.grid = grid}
                gutterWidth={20}
                gutterHeight={20}
            >
                {
                    this.internalData.map(data =>{
                        return <div key={tweet.id} style={
                            {
                                height: Math.floor(Math.random() * 200) + 100,
                                backgroundColor: 'rgba(' + (Math.floor(Math.random() * 200) + 10) + ',' + (Math.floor(Math.random() * 200) + 10) + ',23,1)'
                            }
                        }>{data.text}</div>})
                    })
                }
            </StackGrid>
        );
    }
}


export default withWebsockets(Wall, ['wallUpdates']);

Thanks for your awesome work.
Is there any chance to add horizontal flow into option?

Is there anyone who maintains this repo?

Its the only sane component for react masonry grids, but it lacks SSR

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.

NPM/Yarn emits the following warning when installing react-stack-grid:

warning react-stack-grid > [email protected]: This package is deprecated and will no longer work with React 16+. We recommend you use TransitionGroup from 'react-transition-group' instead.

This is documented here.

Is there a way to manually set the z-index of the spans that are created by stack grid component? Need z-index set to none in order for individual dropdowns to work properly.

Is there any chance for react-native port?

It appears that if you try to render more than one react-stack-grid you cannot.

To repro: place two react-stack-grid components on the screen and notice that only one renders