Add a List example (#8)

https://github.com/huacnlee/gpui-component/assets/5518/2554bb6c-94f6-4808-87d6-9a04d7421b26

Cargo.lock

@@ -1146,6 +1146,12 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "deunicode"
+version = "1.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "339544cc9e2c4dc3fc7149fd630c5f22263a4fdf18a98afd0075784968b5cf00"
+
 [[package]]
 name = "digest"
 version = "0.10.7"
@@ -1421,6 +1427,16 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "fake"
+version = "2.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1c25829bde82205da46e1823b2259db6273379f626fc211f126f65654a2669be"
+dependencies = [
+ "deunicode",
+ "rand 0.8.5",
+]
+
 [[package]]
 name = "fastrand"
 version = "1.9.0"
@@ -5115,7 +5131,10 @@ dependencies = [
 name = "ui-story"
 version = "0.1.0"
 dependencies = [
+ "anyhow",
+ "fake",
  "gpui",
+ "serde",
  "ui",
 ]
 

README.md

@@ -1,4 +1,4 @@
-# GPUI App Example
+# GPUI Compoment
 
 This is an example of build app by using GPUI.
 

assets/icons/ellipsis-vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>

assets/icons/ellipsis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>

assets/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

assets/icons/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

crates/ui-story/Cargo.toml

@@ -6,6 +6,9 @@ edition = "2021"
 [dependencies]
 ui.workspace = true
 gpui.workspace = true
+serde.workspace = true
+fake = "2.9.2"
+anyhow = "1"
 
 [lints]
 workspace = true

crates/ui-story/src/lib.rs

@@ -2,6 +2,7 @@ mod button_story;
 mod checkbox_story;
 mod dropdown_story;
 mod input_story;
+mod list_story;
 mod picker_story;
 mod popover_story;
 mod switch_story;
@@ -25,6 +26,7 @@ use button_story::ButtonStory;
 use checkbox_story::CheckboxStory;
 use dropdown_story::DropdownStory;
 use input_story::InputStory;
+use list_story::ListStory;
 use picker_story::PickerStory;
 use popover_story::PopoverStory;
 use switch_story::SwitchStory;
@@ -84,6 +86,7 @@ enum StoryType {
     Checkbox,
     Switch,
     Picker,
+    List,
     Dropdown,
     Tooltip,
     Popover,
@@ -97,6 +100,7 @@ impl Display for StoryType {
             Self::Checkbox => write!(f, "Checkbox"),
             Self::Switch => write!(f, "Switch"),
             Self::Picker => write!(f, "Picker"),
+            Self::List => write!(f, "List"),
             Self::Dropdown => write!(f, "Dropdown"),
             Self::Tooltip => write!(f, "Tooltip"),
             Self::Popover => write!(f, "Popover"),
@@ -112,6 +116,7 @@ pub struct Stories {
     checkbox_story: View<CheckboxStory>,
     switch_story: View<SwitchStory>,
     picker_story: View<PickerStory>,
+    list_story: View<ListStory>,
     dropdown_story: View<DropdownStory>,
     tooltip_story: View<TooltipStory>,
     popover_story: View<PopoverStory>,
@@ -127,6 +132,7 @@ impl Stories {
             switch_story: cx.new_view(|cx| SwitchStory::new(cx)),
             tooltip_story: cx.new_view(|_| TooltipStory),
             picker_story: cx.new_view(PickerStory::new),
+            list_story: cx.new_view(|cx| ListStory::new(cx)),
             dropdown_story: cx.new_view(DropdownStory::new),
             popover_story: cx.new_view(PopoverStory::new),
         }
@@ -158,6 +164,7 @@ impl Stories {
                 ),
                 self.tab("story-switch", StoryType::Switch, None, cx),
                 self.tab("story-picker", StoryType::Picker, None, cx),
+                self.tab("story-list", StoryType::List, None, cx),
                 self.tab("story-dropdown", StoryType::Dropdown, None, cx),
                 self.tab("story-tooltip", StoryType::Tooltip, None, cx),
                 self.tab("story-popover", StoryType::Popover, None, cx),
@@ -202,6 +209,7 @@ impl Render for Stories {
                 StoryType::Checkbox => this.child(self.checkbox_story.clone()),
                 StoryType::Switch => this.child(self.switch_story.clone()),
                 StoryType::Picker => this.child(self.picker_story.clone()),
+                StoryType::List => this.child(self.list_story.clone()),
                 StoryType::Dropdown => this.child(self.dropdown_story.clone()),
                 StoryType::Tooltip => this.child(self.tooltip_story.clone()),
                 StoryType::Popover => this.child(self.popover_story.clone()),

crates/ui-story/src/list_story.rs

@@ -0,0 +1,291 @@
+use core::time;
+use std::{cell::RefCell, fmt::format, rc::Rc};
+
+use fake::Fake;
+use gpui::{
+    actions, div, impl_actions, prelude::FluentBuilder as _, px, Action, ElementId,
+    InteractiveElement, IntoElement, ParentElement, Render, RenderOnce, Styled, Timer, View,
+    ViewContext, VisualContext, WindowContext,
+};
+
+use ui::{
+    h_flex,
+    label::Label,
+    list::ListItem,
+    picker::{Picker, PickerDelegate},
+    theme::{hsl, ActiveTheme, Colorize as _},
+    v_flex,
+};
+
+use super::story_case;
+
+actions!(list_story, [SelectedCompany]);
+
+#[derive(Clone)]
+struct Company {
+    name: String,
+    industry: String,
+    last_done: f64,
+    prev_close: f64,
+    description: String,
+}
+
+impl Company {
+    fn random_update(&mut self) {
+        self.last_done = self.prev_close * (1.0 + (-0.2..0.2).fake::<f64>());
+    }
+
+    fn change_percent(&self) -> f64 {
+        (self.last_done - self.prev_close) / self.prev_close
+    }
+}
+
+#[derive(IntoElement)]
+struct CompanyListItem {
+    base: ListItem,
+    ix: usize,
+    copmpany: Company,
+    selected: bool,
+}
+
+impl CompanyListItem {
+    pub fn new(id: impl Into<ElementId>, copmpany: Company, ix: usize, selected: bool) -> Self {
+        CompanyListItem {
+            copmpany,
+            ix,
+            base: ListItem::new(id),
+            selected,
+        }
+    }
+}
+
+impl RenderOnce for CompanyListItem {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let text_color = if self.selected {
+            cx.theme().accent_foreground
+        } else {
+            cx.theme().foreground
+        };
+
+        let trend_color = match self.copmpany.change_percent() {
+            change if change > 0.0 => hsl(0.0, 79.0, 53.0),
+            change if change < 0.0 => hsl(100.0, 79.0, 53.0),
+            _ => cx.theme().foreground,
+        };
+
+        let bg_color = if self.selected {
+            cx.theme().accent
+        } else {
+            if self.ix % 2 == 0 {
+                cx.theme().background
+            } else {
+                cx.theme().accent.opacity(0.3)
+            }
+        };
+
+        self.base
+            .px_3()
+            .py_1()
+            .rounded_lg()
+            .overflow_x_hidden()
+            .bg(bg_color)
+            .child(
+                h_flex()
+                    .items_center()
+                    .justify_between()
+                    .gap_2()
+                    .text_color(text_color)
+                    .child(
+                        v_flex()
+                            .gap_2()
+                            .max_w(px(500.))
+                            .overflow_x_hidden()
+                            .flex_nowrap()
+                            .child(Label::new(self.copmpany.name.clone()).whitespace_nowrap())
+                            .child(
+                                div().text_sm().overflow_x_hidden().child(
+                                    Label::new(self.copmpany.industry.clone())
+                                        .whitespace_nowrap()
+                                        .text_color(text_color.opacity(0.5)),
+                                ),
+                            ),
+                    )
+                    .child(
+                        h_flex()
+                            .gap_2()
+                            .items_center()
+                            .justify_end()
+                            .child(
+                                div()
+                                    .w(px(65.))
+                                    .text_color(text_color)
+                                    .child(format!("{:.2}", self.copmpany.last_done)),
+                            )
+                            .child(
+                                h_flex().w(px(65.)).justify_end().child(
+                                    div()
+                                        .rounded_md()
+                                        .whitespace_nowrap()
+                                        .text_size(px(12.))
+                                        .px_1()
+                                        .text_color(trend_color)
+                                        .child(format!("{:.2}%", self.copmpany.change_percent())),
+                                ),
+                            ),
+                    ),
+            )
+    }
+}
+
+struct CompanyListDelegate {
+    companies: Vec<Company>,
+    selected_index: usize,
+}
+
+impl PickerDelegate for CompanyListDelegate {
+    type ListItem = CompanyListItem;
+
+    fn match_count(&self) -> usize {
+        self.companies.len()
+    }
+
+    fn selected_index(&self) -> usize {
+        self.selected_index
+    }
+
+    fn set_selected_index(&mut self, ix: usize, cx: &mut ViewContext<ui::picker::Picker<Self>>) {
+        self.selected_index = ix;
+        cx.dispatch_action(Box::new(SelectedCompany));
+    }
+
+    fn render_item(
+        &self,
+        ix: usize,
+        selected: bool,
+        _cx: &mut ViewContext<ui::picker::Picker<Self>>,
+    ) -> Option<Self::ListItem> {
+        if let Some(company) = self.companies.get(ix) {
+            return Some(CompanyListItem::new(ix, company.clone(), ix, selected));
+        }
+
+        None
+    }
+}
+
+impl CompanyListDelegate {
+    fn selected_company(&self) -> Option<Company> {
+        self.companies.get(self.selected_index).cloned()
+    }
+}
+
+pub struct ListStory {
+    company_list: View<Picker<CompanyListDelegate>>,
+    selected_company: Option<Company>,
+}
+
+fn random_company() -> Company {
+    let last_done = (0.0..999.0).fake::<f64>();
+    let prev_close = last_done * (-0.1..0.1).fake::<f64>();
+    Company {
+        name: fake::faker::company::en::CompanyName().fake(),
+        industry: fake::faker::company::en::Industry().fake(),
+        description: fake::faker::lorem::en::Paragraph(3..5).fake(),
+        last_done,
+        prev_close,
+    }
+}
+
+impl ListStory {
+    pub(crate) fn new(cx: &mut ViewContext<Self>) -> Self {
+        let companies = (0..10_000)
+            .into_iter()
+            .map(|_| random_company())
+            .collect::<Vec<Company>>();
+
+        let company_list = cx.new_view(|cx| {
+            Picker::uniform_list(
+                CompanyListDelegate {
+                    companies,
+                    selected_index: 0,
+                },
+                cx,
+            )
+            .no_query()
+        });
+
+        // Spawn a background to random refresh the list
+        cx.spawn(move |this, mut cx| async move {
+            loop {
+                Timer::after(time::Duration::from_secs_f64(0.5)).await;
+                this.update(&mut cx, |this, cx| {
+                    this.company_list.update(cx, |picker, cx| {
+                        picker
+                            .delegate_mut()
+                            .companies
+                            .iter_mut()
+                            .for_each(|company| {
+                                company.random_update();
+                            });
+                    });
+                    cx.notify();
+                })
+                .ok();
+            }
+        })
+        .detach();
+
+        Self {
+            company_list,
+            selected_company: None,
+        }
+    }
+
+    fn selected_company(&mut self, _: &SelectedCompany, cx: &mut ViewContext<Self>) {
+        let picker = self.company_list.read(cx);
+        if let Some(company) = picker.delegate().selected_company() {
+            self.selected_company = Some(company);
+        }
+    }
+}
+
+impl Render for ListStory {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        story_case("List", "A list for container 10K ListItems.").child(
+            h_flex()
+                .size_full()
+                .on_action(cx.listener(Self::selected_company))
+                .gap_4()
+                .mb_4()
+                .child(
+                    div()
+                        .h_full()
+                        .border_1()
+                        .border_color(cx.theme().border)
+                        .p_1()
+                        .rounded_md()
+                        .w(px(400.))
+                        .child(self.company_list.clone()),
+                )
+                .child(
+                    div()
+                        .flex_1()
+                        .size_full()
+                        .border_1()
+                        .border_color(cx.theme().border)
+                        .py_1()
+                        .px_4()
+                        .rounded_md()
+                        .when_some(self.selected_company.clone(), |this, company| {
+                            this.child(
+                                div()
+                                    .flex_1()
+                                    .gap_2()
+                                    .child(div().text_3xl().mb_6().child(company.name.clone()))
+                                    .child(company.industry.clone())
+                                    .child(company.description.clone()),
+                            )
+                        }),
+                ),
+        )
+    }
+}

crates/ui-story/src/switch_story.rs

@@ -64,7 +64,7 @@ impl Render for SwitchStory {
                     card(cx)
                     .child(
                         title("Marketing emails").child(
-                            Label::new("Receive emails about new products, features, and more.").text_color(theme.muted)
+                            Label::new("Receive emails about new products, features, and more.").text_color(theme.muted_foreground)
                         )
                     )
                         .child(
@@ -82,7 +82,7 @@ impl Render for SwitchStory {
                     card(cx)
                     .child(
                         title("Security emails").child(
-                            Label::new("Receive emails about your account security. When turn off, you never recive email again.").text_color(theme.muted)
+                            Label::new("Receive emails about your account security. When turn off, you never recive email again.").text_color(theme.muted_foreground)
                         )
                     )
                         .child(

crates/ui/src/icon.rs

@@ -14,6 +14,10 @@ pub enum IconName {
     Close,
     ChevronDown,
     ChevronsUpDown,
+    Plus,
+    Info,
+    Ellipsis,
+    EllipsisVertical,
 }
 
 impl IconName {
@@ -27,6 +31,10 @@ impl IconName {
             IconName::Close => "icons/close.svg",
             IconName::ChevronDown => "icons/chevron-down.svg",
             IconName::ChevronsUpDown => "icons/chevrons-up-down.svg",
+            IconName::Plus => "icons/plus.svg",
+            IconName::Info => "icons/info.svg",
+            IconName::Ellipsis => "icons/ellipsis.svg",
+            IconName::EllipsisVertical => "icons/ellipsis-vertical.svg",
         }
         .into()
     }

crates/ui/src/label.rs

@@ -38,6 +38,8 @@ impl RenderOnce for Label {
             self.label
         };
 
-        self.base.text_color(cx.theme().foreground).child(text)
+        div()
+            .text_color(cx.theme().foreground)
+            .child(self.base.child(text))
     }
 }

crates/ui/src/list/list_item.rs

@@ -1,5 +1,5 @@
 use gpui::{
-    prelude::FluentBuilder as _, ClickEvent, Div, ElementId, InteractiveElement, IntoElement,
+    div, prelude::FluentBuilder as _, ClickEvent, Div, ElementId, InteractiveElement, IntoElement,
     MouseButton, MouseDownEvent, ParentElement, RenderOnce, Stateful,
     StatefulInteractiveElement as _, Styled, WindowContext,
 };
@@ -19,7 +19,7 @@ pub struct ListItem {
 impl ListItem {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
-            base: h_flex().id(id.into()),
+            base: div().id(id.into()),
             disabled: false,
             selected: false,
             on_click: None,
@@ -85,9 +85,9 @@ impl ParentElement for ListItem {
 
 impl RenderOnce for ListItem {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        h_flex()
+        div()
             .id("item-group")
-            .flex_none()
+            .w_full()
             .relative()
             .gap_x_2()
             .text_base()
@@ -99,19 +99,22 @@ impl RenderOnce for ListItem {
             .when_some(self.on_secondary_mouse_down, |this, on_mouse_down| {
                 this.on_mouse_down(MouseButton::Right, move |ev, cx| (on_mouse_down)(ev, cx))
             })
-            .when(!self.selected, |this| {
-                this.hover(|this| this.bg(cx.theme().accent))
-            })
             .when(self.selected, |this| this.bg(cx.theme().accent))
-            .child(self.base.w_full().items_center().justify_between().when(
+            .child(
-                self.selected,
+                self.base
-                |this| {
+                    .when(!self.selected, |this| {
-                    if let Some(icon) = self.check_icon {
+                        this.hover(|this| this.bg(cx.theme().accent))
-                        this.child(icon.text_color(cx.theme().muted))
+                    })
-                    } else {
+                    .w_full()
-                        this
+                    .items_center()
-                    }
+                    .justify_between()
-                },
+                    .when(self.selected, |this| {
-            ))
+                        if let Some(icon) = self.check_icon {
+                            this.child(icon.text_color(cx.theme().muted))
+                        } else {
+                            this
+                        }
+                    }),
+            )
     }
 }

crates/ui/src/list/mod.rs

@@ -1,3 +1,2 @@
 mod list_item;
-
 pub use list_item::*;

crates/ui/src/picker.rs

@@ -187,7 +187,7 @@ impl<D: PickerDelegate> Picker<D> {
             head: cx.new_view(Empty::new),
             width: None,
             is_modal: false,
-            max_height: Some(rems(20.).into()),
+            max_height: None,
             element_container,
             pending_update_matches: None,
         }
@@ -206,6 +206,14 @@ impl<D: PickerDelegate> Picker<D> {
         input
     }
 
+    pub fn delegate(&self) -> &D {
+        &self.delegate
+    }
+
+    pub fn delegate_mut(&mut self) -> &mut D {
+        &mut self.delegate
+    }
+
     pub fn list(delegate: D, cx: &mut ViewContext<Self>) -> Self {
         let query_input = Self::new_query_input("Search...", cx);
         Self::new(delegate, ContainerKind::List, Some(query_input), cx)

crates/ui/src/theme.rs

@@ -10,10 +10,12 @@ impl ActiveTheme for AppContext {
     }
 }
 
+/// Make a [gpui::Hsla] color.
+///
 /// h - 0 - 360.0
 /// s - 0.0 - 100.0
 /// l - 0.0 - 100.0
-fn hsl(h: f32, s: f32, l: f32) -> Hsla {
+pub fn hsl(h: f32, s: f32, l: f32) -> Hsla {
     hsla(h / 360., s / 100.0, l / 100.0, 1.0)
 }