search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.12k stars 1.14k forks source link

Add <ScrollFlex> #772

Closed AlicanC closed 8 months ago

AlicanC commented 4 years ago

🙋 Feature Request

I would love to see <ScrollFlex> added as a scrollable counterpart of <Flex>. Scrollability could also be achieved by adding necessary props to <Flex>, but having a separate component would be inline with SwiftUI, React Native, and others.

🤔 Expected Behavior

The <ScrollFlex> component should strictly extend <Flex> in functionality, everything available for <Flex> should be available here. It should have props for controlling scroll, for example for scroll-snap. Scroll direction should follow the "direction" prop, vertically scrolling horizontal flexes or the other way around shouldn't be possible.

devongovett commented 4 years ago

That's an interesting idea. Would this be equivalent to overflow: auto on the container or something more? I think SwiftUI's Lazy stacks are virtualized. Is that what you're thinking?

AlicanC commented 4 years ago

I thought about virtualization. What we really need is not just virtualization, but solving the whole "representing a big amount of items" problem. That involves infinite scrolling in both directions, loading items async, managing loading state, cleaning data for unused items and a lot more. It seemed it would be out of scope of this project so I didn't mention.

So I was just thinking about an explicit component for scrollable views. I want scrollability to be clearly seen and not hidden under props, styles or classes. I also believe this will push developers to be more conscious about them. (Accidentally nesting them causes problems hard to catch for example.)

devongovett commented 4 years ago

Yeah. We have a <Virtualizer> component that we use internally inside components like Picker and ListBox already, which supports different configurable layouts. It supports most of the features you mentioned there. I really liked SwiftUI's LazyHStack/LazyVStack components when I saw them, so I think some kind of LazyFlex component might make sense for React Spectrum. It could possibly use the Virtualizer internally.

dannify commented 8 months ago

Closing as stale. This is not work that the team is able to take on in the near future.