I have several list components in a tree-like data structure and I want to animate them in a way that when I click on an item, its children slide in from the right and at the same time the previous list slides out to the left.
I used an array for this with react-transition-group, if I add items to it, it works, but if I try to remove one from it, it fails.
I have a demo here:
https://codesandbox.io/s/k1wyqo64lo
If I uncomment line 91 path.shift() it stops animating.
How can I make them animate at the same time?
Related
I'm attempting to use react-window-infinite-loader with a FixedSizeGrid from react-window.
Before I start, I created a codesandbox with a minimal example which I'll reference in the question.
The issues I'm having are:
The grid doesn't seem to load all of the items in view. This is seen on initial load where the bottom two items on the first page are still in the loading state. This is strange because according to the docs, the infinite loader will load rows up until the threshold, which is 15 by default.
When scrolling, items near the end of the grid are not loaded in. In the example this can be seen by scrolling to the bottom and the seeing a batch of items in the loading state.
I think that my issues are due to using the infinite loader with a grid but following the example of the list. I think that part of the issue is the isItemLoaded function because the index I get from that doesn't seem to correspond with the index of the item, but I think it's the row?
In the end I'm not sure how to resolve these as the documentation I've seen has the infinite loader being used with a list component instead of a grid component.
I am trying to show an infinite scrolled list inside a material-ui Autocomplete dropdown list, using react-window-infinite-loader. When I scroll to the bottom of the list, I want to fetch the next page of items from the server. I created a codesandbox example which combines the material-ui Autocomplete example for a virtualized list with the react-window-infinite-loader example. When I scroll to the bottom of the list, the next page of data is loaded, however something is causing the list to scroll back to the top. How can I keep the scroll position after new data is loaded?
Thanks!
I got this to work by using the useAutocomplete hook. I created a sandbox which shows the working code:
https://codesandbox.io/s/material-demo-0fbyb
There is only one problem, that I still cannot figure out. When pressing the down arrow key on the keyboard to select items in the list, you can select items beyond the visible "window" of items. There must be a way to get the list to scroll to the selected item. I am guessing this is because the autocomplete ref needs to be set on the FixedSizeList component, but how can I do this when the InfiniteLoader also needs to pass a ref to the FixedSizeList component?
I'm using react-selectable-fast on a list of items that can be selected. However an item or a group of selected items should also be draggable, which is implemented using react-dnd.
The issue is that the selecting comes in the way of dragging; when hovering on top of an item and trying to drag it I end up selecting instead.
I've managed to fix the issue with a hack: store in state whether currently hovering an item or a group of selected items and if so disable the <SelectableGroup>. However this means that the whole list of items is rerendered every time I move the mouse over an item.
So I would like a better solution but I haven't been able to find one. In the last attempt I put the draggable element (using connectDragSource) on top of the selectable element (using createSelectable) again on top of <SelectableGroup /> and gave them increasing z-indexes, also tried playing around with stopPropagation() and preventDefault() but still the selecting overrides the dragging.
Any ideas?
I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.
The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.
Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?
Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.
Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D
I have a ListView component, which is a live-updating feed, rendering a collection of child component ListItem.
Each time a new ListItem is added, I want to add a transition animation.
Problem is, I don't know how to accomplish this without applying the transition on the initial load. The list often have 30+ elements initially, these should not be animated.
I tried setting a 'initialLoad' state, and doing something with transitionEnter={!initialLoad} but this ended up being messy
How can this be accomplished?