From 7a13d330565e762c82ca28b6c513380c169ce69c Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 24 Jul 2024 15:38:07 +0800
Subject: [PATCH] Add `.scrollable` method to Element to wraps in a ScrollView.

---
 crates/story/src/scrollable_story.rs | 22 +++++++++++++---------
 crates/ui/src/scroll/mod.rs          | 13 +++++++++++++
 crates/ui/src/scroll/scroll_view.rs  |  6 +++++-
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/crates/story/src/scrollable_story.rs b/crates/story/src/scrollable_story.rs
index e657b9cb..5061b152 100644
--- a/crates/story/src/scrollable_story.rs
+++ b/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| {
-                        v_flex().m_3().w(test_width).gap_1().children(
-                            items
-                                .iter()
-                                .map(|s| div().bg(cx.theme().card).child(s.clone())),
-                        )
-                    }))
+                    .child(
+                        v_flex()
+                            .m_3()
+                            .w(test_width)
+                            .gap_1()
+                            .children(
+                                items
+                                    .iter()
+                                    .map(|s| div().bg(cx.theme().card).child(s.clone())),
+                            )
+                            .scrollable("scroll-view1", cx.view().clone()),
+                    )
             })
     }
 }
diff --git a/crates/ui/src/scroll/mod.rs b/crates/ui/src/scroll/mod.rs
index e3190b4d..d1d2cbac 100644
--- a/crates/ui/src/scroll/mod.rs
+++ b/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 {}
diff --git a/crates/ui/src/scroll/scroll_view.rs b/crates/ui/src/scroll/scroll_view.rs
index bb955d03..6f0a2d3a 100644
--- a/crates/ui/src/scroll/scroll_view.rs
+++ b/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!(