Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

list, table: Add scroll_to_item to List, scroll_to_row to Table. #535

Merged
merged 1 commit into from
Jan 9, 2025
Merged

list, table: Add scroll_to_item to List, scroll_to_row to Table. #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 39 additions & 42 deletions crates/story/src/list_story.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@ use std::time::Duration;

use fake::Fake;
use gpui::{
actions, div, px, relative, AnyElement, AppContext, ElementId, FocusHandle, FocusableView,
InteractiveElement, IntoElement, ParentElement, Render, RenderOnce, Styled, Task, Timer, View,
ViewContext, VisualContext, WindowContext,
actions, div, px, AppContext, ElementId, FocusHandle, FocusableView, InteractiveElement,
IntoElement, ParentElement, Render, RenderOnce, Styled, Task, Timer, View, ViewContext,
VisualContext, WindowContext,
};

use ui::{
button::Button,
h_flex,
label::Label,
list::{List, ListDelegate, ListItem},
theme::{hsl, ActiveTheme},
v_flex,
v_flex, Sizable,
};

actions!(list_story, [SelectedCompany]);
Expand Down Expand Up @@ -171,39 +172,6 @@ impl ListDelegate for CompanyListDelegate {
}
}

fn render_initial(&self, cx: &mut ViewContext<List<Self>>) -> Option<AnyElement> {
let histories = ["BABA", "BIDU", "GOOGL", "LB", "LP", "LBW"];

let input_history = histories
.into_iter()
.map(|name| {
div()
.rounded_xl()
.min_w(px(30.))
.border_1()
.rounded_md()
.border_color(cx.theme().muted_foreground.opacity(0.3))
.line_height(relative(1.))
.p_1()
.child(div().whitespace_nowrap().child(name).text_xs())
})
.collect::<Vec<_>>();

let element = v_flex()
.p_4()
.child(
v_flex().gap_y_2().child("History").child(
h_flex()
.gap_x_4()
.gap_y_2()
.flex_wrap()
.children(input_history),
),
)
.into_any_element();
Some(element)
}

fn set_selected_index(&mut self, ix: Option<usize>, cx: &mut ViewContext<List<Self>>) {
if let Some(ix) = ix {
self.selected_index = ix;
Expand Down Expand Up @@ -357,14 +325,43 @@ impl FocusableView for ListStory {

impl Render for ListStory {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
div()
v_flex()
.track_focus(&self.focus_handle)
.on_action(cx.listener(Self::selected_company))
.size_full()
.gap_4()
.border_1()
.border_color(cx.theme().border)
.rounded_md()
.child(self.company_list.clone())
.child(
h_flex()
.gap_2()
.child(
Button::new("scroll-top")
.child("Scroll to Top")
.small()
.on_click(cx.listener(|this, _, cx| {
this.company_list.update(cx, |list, cx| {
list.scroll_to_item(0, cx);
})
})),
)
.child(
Button::new("scroll-bottom")
.child("Scroll to Bottom")
.small()
.on_click(cx.listener(|this, _, cx| {
this.company_list.update(cx, |list, cx| {
list.scroll_to_item(list.delegate().items_count(cx) - 1, cx);
})
})),
),
)
.child(
div()
.flex_1()
.w_full()
.border_1()
.border_color(cx.theme().border)
.rounded_md()
.child(self.company_list.clone()),
)
}
}
102 changes: 72 additions & 30 deletions crates/story/src/table_story.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ use gpui::{
};
use serde::Deserialize;
use ui::{
button::{Button, ButtonVariants},
button::Button,
checkbox::Checkbox,
h_flex,
indicator::Indicator,
Expand All @@ -18,7 +18,7 @@ use ui::{
prelude::FluentBuilder as _,
table::{ColFixed, ColSort, Table, TableDelegate, TableEvent},
theme::ActiveTheme as _,
v_flex, Selectable, Size, StyleSized as _,
v_flex, Selectable, Sizable as _, Size, StyleSized as _,
};

#[derive(Clone, PartialEq, Eq, Deserialize)]
Expand Down Expand Up @@ -707,34 +707,6 @@ impl Render for TableStory {
.items_center()
.gap_3()
.flex_wrap()
.child(
Button::new("size")
.compact()
.outline()
.label(format!("size: {:?}", self.size))
.popup_menu(move |menu, _| {
menu.menu_with_check(
"Large",
size == Size::Large,
Box::new(ChangeSize(Size::Large)),
)
.menu_with_check(
"Medium",
size == Size::Medium,
Box::new(ChangeSize(Size::Medium)),
)
.menu_with_check(
"Small",
size == Size::Small,
Box::new(ChangeSize(Size::Small)),
)
.menu_with_check(
"XSmall",
size == Size::XSmall,
Box::new(ChangeSize(Size::XSmall)),
)
}),
)
.child(
Checkbox::new("loop-selection")
.label("Loop Selection")
Expand Down Expand Up @@ -784,6 +756,76 @@ impl Render for TableStory {
.on_click(cx.listener(Self::toggle_refresh_data)),
),
)
.child(
h_flex()
.gap_2()
.child(
Button::new("size")
.small()
.label(format!("size: {:?}", self.size))
.popup_menu(move |menu, _| {
menu.menu_with_check(
"Large",
size == Size::Large,
Box::new(ChangeSize(Size::Large)),
)
.menu_with_check(
"Medium",
size == Size::Medium,
Box::new(ChangeSize(Size::Medium)),
)
.menu_with_check(
"Small",
size == Size::Small,
Box::new(ChangeSize(Size::Small)),
)
.menu_with_check(
"XSmall",
size == Size::XSmall,
Box::new(ChangeSize(Size::XSmall)),
)
}),
)
.child(
Button::new("scroll-top")
.child("Scroll to Top")
.small()
.on_click(cx.listener(|this, _, cx| {
this.table.update(cx, |table, cx| {
table.scroll_to_row(0, cx);
})
})),
)
.child(
Button::new("scroll-bottom")
.child("Scroll to Bottom")
.small()
.on_click(cx.listener(|this, _, cx| {
this.table.update(cx, |table, cx| {
table.scroll_to_row(table.delegate().rows_count(cx) - 1, cx);
})
})),
), // .child(
// Button::new("scroll-first-col")
// .child("Scroll to First Column")
// .small()
// .on_click(cx.listener(|this, _, cx| {
// this.table.update(cx, |table, cx| {
// table.scroll_to_col(0, cx);
// })
// })),
// )
// .child(
// Button::new("scroll-last-col")
// .child("Scroll to Last Column")
// .small()
// .on_click(cx.listener(|this, _, cx| {
// this.table.update(cx, |table, cx| {
// table.scroll_to_col(table.delegate().cols_count(cx), cx);
// })
// })),
// ),
)
.child(
h_flex().items_center().gap_2().child(
h_flex()
Expand Down
12 changes: 12 additions & 0 deletions crates/ui/src/list/list.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,18 @@ where
))
}

/// Scroll to the item at the given index.
pub fn scroll_to_item(&mut self, ix: usize, cx: &mut ViewContext<Self>) {
self.vertical_scroll_handle
.scroll_to_item(ix, ScrollStrategy::Top);
cx.notify();
}

/// Get scroll handle
pub fn scroll_handle(&self) -> &UniformListScrollHandle {
&self.vertical_scroll_handle
}

fn scroll_to_selected_item(&mut self, _cx: &mut ViewContext<Self>) {
if let Some(ix) = self.selected_index {
self.vertical_scroll_handle
Expand Down
20 changes: 19 additions & 1 deletion crates/ui/src/table.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,12 +367,30 @@ where
cx.notify();
}

fn scroll_to_row(&mut self, row_ix: usize, cx: &mut ViewContext<Self>) {
/// Scroll to the row at the given index.
pub fn scroll_to_row(&mut self, row_ix: usize, cx: &mut ViewContext<Self>) {
self.vertical_scroll_handle
.scroll_to_item(row_ix, ScrollStrategy::Top);
cx.notify();
}

// Scroll to the column at the given index.
// TODO: Fix scroll to selected col, this was not working after fixed col.
// pub fn scroll_to_col(&mut self, col_ix: usize, cx: &mut ViewContext<Self>) {
// self.horizontal_scroll_handle.scroll_to_item(col_ix);
// cx.notify();
// }

/// Get scroll handle
pub fn scroll_handle(&self) -> &UniformListScrollHandle {
&self.vertical_scroll_handle
}

/// Get horizontal scroll handle
pub fn horizontal_scroll_handle(&self) -> &ScrollHandle {
&self.horizontal_scroll_handle
}

/// Returns the selected row index.
pub fn selected_row(&self) -> Option<usize> {
self.selected_row
Expand Down
Loading