Update scroll view (#66)

crates/story/src/scrollable_story.rs

@@ -7,7 +7,7 @@ use gpui::{
 };
 use ui::button::Button;
 use ui::divider::Divider;
-use ui::scroll::{scroll_view, Scrollbar, ScrollbarAxis, ScrollbarState};
+use ui::scroll::{Scrollable, Scrollbar, ScrollbarAxis, ScrollbarState};
 use ui::theme::ActiveTheme;
 use ui::{h_flex, v_flex, Clickable};
 
@@ -171,7 +171,6 @@ impl Render for ScrollableStory {
                     ),
             )
             .child({
-                let view = cx.view().clone();
                 let items = self.items.clone();
                 let test_width = self.test_width;
 
@@ -181,13 +180,18 @@ impl Render for ScrollableStory {
                     .border_color(cx.theme().border)
                     .w_full()
                     .h(px(200.))
-                    .child(scroll_view("scrollview-1", view).content(move |cx| {
+                    .child(
-                        v_flex().m_3().w(test_width).gap_1().children(
+                        v_flex()
-                            items
+                            .m_3()
-                                .iter()
+                            .w(test_width)
-                                .map(|s| div().bg(cx.theme().card).child(s.clone())),
+                            .gap_1()
-                        )
+                            .children(
-                    }))
+                                items
+                                    .iter()
+                                    .map(|s| div().bg(cx.theme().card).child(s.clone())),
+                            )
+                            .scrollable("scroll-view1", cx.view().clone()),
+                    )
             })
     }
 }

crates/ui/src/scroll/mod.rs

@@ -2,6 +2,19 @@ mod scroll_view;
 mod scrollable;
 mod scrollbar;
 
+use gpui::{AnyElement, AnyView, Div, Element, ElementId};
 pub use scroll_view::*;
 pub use scrollable::*;
 pub use scrollbar::*;
+
+pub trait Scrollable: Element + Sized {
+    /// Wraps the element in a ScrollView.
+    ///
+    /// Current this is only have a vertical scrollbar.
+    fn scrollable(self, id: impl Into<ElementId>, view: impl Into<AnyView>) -> ScrollView {
+        ScrollView::new(id.into(), view, ScrollbarAxis::Vertical).content(move |_| self)
+    }
+}
+
+impl Scrollable for AnyElement {}
+impl Scrollable for Div {}

crates/ui/src/scroll/scroll_view.rs

@@ -21,7 +21,11 @@ pub struct ScrollView {
 }
 
 impl ScrollView {
-    fn new(id: impl Into<ElementId>, view: impl Into<AnyView>, axis: ScrollbarAxis) -> Self {
+    pub(super) fn new(
+        id: impl Into<ElementId>,
+        view: impl Into<AnyView>,
+        axis: ScrollbarAxis,
+    ) -> Self {
         let view: AnyView = view.into();
         Self {
             id: ElementId::Name(SharedString::from(format!(