Is it possible to use react-virtualized's WindowScroller (for searching and scrolling to an item)?

[Avivhdr]

Is there a way to access react-virtualized's WindowScroller functionality or something like that?
In case i have an id of one of the nodes that were sent to the Tree component, is there a way to use a method that will scroll that node in to view?

Like in this example:
https://bvaughn.github.io/react-virtualized/#/components/WindowScroller

Thanks!

[diogofcunha]

Hi @Avivhdr at the moment it isn't possible to do that but it seems a reasonable thing to support, I will tackle that over the weekend.

I think spreading the scroll prop down should be enough

[Avivhdr]

Hi @diogofcunha,
With a bit of instructions i would be happy to try and tackle this issue my self.

[mishaberman]

I would love this feature as well :) Let me know if you need me to test :)

[diogofcunha]

I think it would be a good idea to create a slack or gitter chat and discuss how to do this, we can start just by passing the prop down.

Docs for the List can be found in https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md, I think allowing scrollToIndex as a prop for the tree should be enough. If the logic to get the id becomes too complicated we can just have a prop named scroolToId and get the index internally based on the flattened nodes.

[Avivhdr]

@diogofcunha
I think scrollToId would be a good idea but maybe it would need to get an array of ids, just in case there would be a duplicate id for a group and a child. the first item would be the group's id, the second item would be the child's id.
And for the gitter/slack idea: avivhdr@gmail.com

[diogofcunha]

Added gitter chat link to the readme file.

hmm, although I can't see many issues with the current code base using repeated ids I wouldn't recommend it, it can be fragile in the long term, if someone assumes all ids are unique in a future PR and for some reason it passes code review it can be prone to break.

I played around with this really quickly yesterday and found that the property on the window scroller works fine. as long as the correct index is supplied it will scroll there, no the question here is who to get the index in an efficient way. As getting that index can be coupled to the way people represent that data I may be in favour of:

1. Just expose an optional prop called getScrollToIndex, this prop is a function that receives the flattened nodes and needs to return either a number or undefined.
2. Create a few selectors and export them separately and offer the liberty on "how to get to the index" on the users side and not as a coupled internal feature.

[diogofcunha]

Released as part of version 2.2.0

Thanks for your contribution @Avivhdr

[FilipeCosta06]

Hi @diogofcunha

Is there any documentation about this feature available somewhere here (that it a nifty feature that should be showcased imo) ?

However, my IntelliSense isn't listing any function function called scrollToIndex from the Tree object (which is actually Tree Container). Only scrollToId is exposed (and scrollToAlignment) but this (potentially) loops over all the data since it's using _.findIndex() and that might pose a problem as I will be dealing with big amounts of data.

The nodes have their flattened index with them (they receive it from the rowRenderer) and if that is the value returned by scrollToId, then all I need is a direct way to scrollToIndex. Do you think this could be achieved or should I fork the project for just this (I am already replacing the left margin by a left padding, for UI reasons) or was scrollToIndex not exposed by mistake in a recent release ?

Lastly, we get a warning when supplying a string to scrollToId, saying it is expecting a number

tl;dr:

• Can you expose scrollToIndex ?
• I think there is a PropTypes error on scrollToId (expects number instead of string)

Edit:
Just gave it a shot (adding and using scrollToIndex directly and had a lot of clipping/half the row would disappear after scrolling a bit. Could be related to bvaughn/react-virtualized#683 (since we also have dynamic height etc...) but if you can make this work it'd be lovely. If there is a specific reason that this functionality isn't available, I'd also like to know.

Thanks in advance