dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

table: Render table stripe on background even there is no enough rows (#256)

Browse source 
<img width="1202" alt="image"
src="https://github.com/user-attachments/assets/57a744c3-673a-4118-ba97-03837b0b9390">

- And add `flex_shrink_0` to table head.

Fix https://github.com/huacnlee/gpui-component/issues/160

---------

Co-authored-by: Jason Lee <huacnlee@gmail.com>
This commit is contained in:
xda 2024-09-24 23:07:27 +09:00 committed by GitHub
parent 2a331fcb79
commit 1e44b5659f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 144 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
crates/ui/src/table.rs
View file

@ -284,6 +284,11 @@ where
cx.notify(); cx.notify();
} }
fn scroll_to_row(&mut self, row_ix: usize, cx: &mut ViewContext<Self>) {
self.vertical_scroll_handle.scroll_to_item(row_ix);
cx.notify();
}
fn set_selected_row(&mut self, row_ix: usize, cx: &mut ViewContext<Self>) { fn set_selected_row(&mut self, row_ix: usize, cx: &mut ViewContext<Self>) {
self.selection_state = SelectionState::Row; self.selection_state = SelectionState::Row;
self.selected_row = Some(row_ix); self.selected_row = Some(row_ix);
@ -737,6 +742,28 @@ where
let cols_count: usize = self.delegate.cols_count(); let cols_count: usize = self.delegate.cols_count();
let rows_count = self.delegate.rows_count(); let rows_count = self.delegate.rows_count();
let row_height = self.vertical_scroll_handle.0.borrow().last_item_height;
let total_height = self
.vertical_scroll_handle
.0
.borrow()
.base_handle
.bounds()
.size
.height;
// Calculate the extra rows needed to fill the table for stripe style.
let mut extra_rows_needed = 0;
if let Some(row_height) = row_height {
if row_height > px(0.) {
let actual_height = row_height * rows_count as f32;
let remaining_height = total_height - actual_height;
if remaining_height > px(0.) {
extra_rows_needed = (remaining_height / row_height).ceil() as usize;
}
}
}
fn last_empty_col(_: &mut WindowContext) -> Div { fn last_empty_col(_: &mut WindowContext) -> Div {
h_flex().w(px(100.)).h_full().flex_shrink_0() h_flex().w(px(100.)).h_full().flex_shrink_0()
} }
@ -761,6 +788,7 @@ where
.flex_grow() .flex_grow()
.h_10() .h_10()
.w_full() .w_full()
.flex_shrink_0()
.border_b_1() .border_b_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.child( .child(
@ -795,13 +823,27 @@ where
} else { } else {
this.child( this.child(
h_flex().id("table-body").flex_grow().size_full().child( h_flex().id("table-body").flex_grow().size_full().child(
uniform_list(view, "table-uniform-list", rows_count, { uniform_list(
view,
"table-uniform-list",
rows_count + extra_rows_needed,
{
let horizontal_scroll_handle = horizontal_scroll_handle.clone(); let horizontal_scroll_handle = horizontal_scroll_handle.clone();
move |table, visible_range, cx| { move |table, visible_range, cx| {
table.load_more(visible_range.clone(), cx); table.load_more(visible_range.clone(), cx);
if visible_range.end > rows_count {
table.scroll_to_row(
std::cmp::min(visible_range.start, rows_count - 1),
cx,
);
}
// Render fake rows to fill the table
visible_range visible_range
.map(|row_ix| { .map(|row_ix| {
// Render real rows for available data
if row_ix < rows_count {
table table
.delegate .delegate
.render_tr(row_ix, cx) .render_tr(row_ix, cx)
@ -811,9 +853,10 @@ where
this.border_t_1() this.border_t_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
}) })
.when(table.stripe && row_ix % 2 != 0, |this| { .when(
this.bg(cx.theme().table_even) table.stripe && row_ix % 2 != 0,
}) |this| this.bg(cx.theme().table_even),
)
.hover(|this| { .hover(|this| {
if table.selected_row == Some(row_ix) { if table.selected_row == Some(row_ix) {
this this
@ -823,15 +866,23 @@ where
}) })
.children((0..cols_count).map(|col_ix| { .children((0..cols_count).map(|col_ix| {
table table
.col_wrap(col_ix, cx) // Make the row scroll sync with the horizontal_scroll_handle to support horizontal scrolling. // Make the row scroll sync with the horizontal_scroll_handle to support horizontal scrolling.
.left(horizontal_scroll_handle.offset().x) .col_wrap(col_ix, cx)
.left(
horizontal_scroll_handle
.offset()
.x,
)
.child( .child(
table table
.render_cell(col_ix, cx) .render_cell(col_ix, cx)
.flex_shrink_0() .flex_shrink_0()
.child( .child(
table.delegate.render_td( table
row_ix, col_ix, cx, .delegate
.render_td(
row_ix, col_ix,
cx,
), ),
), ),
) )
@ -845,7 +896,11 @@ where
row_ix == selected_row row_ix == selected_row
&& table.selection_state && table.selection_state
== SelectionState::Row, == SelectionState::Row,
|this| this.bg(cx.theme().table_active), |this| {
this.bg(cx
.theme()
.table_active)
},
) )
}, },
) )
@ -855,10 +910,41 @@ where
this.on_row_click(row_ix, cx); this.on_row_click(row_ix, cx);
}), }),
) )
} else {
// Render fake rows to fill the rest table space
table
.delegate
.render_tr(row_ix, cx)
.id(("table-row-fake", row_ix))
.w_full()
.h_full()
.border_t_1()
.border_color(cx.theme().border)
.when(
table.stripe && row_ix % 2 != 0,
|this| this.bg(cx.theme().table_even),
)
.children((0..cols_count).map(|col_ix| {
h_flex()
.left(
horizontal_scroll_handle
.offset()
.x,
)
.child(
table
.render_cell(col_ix, cx)
.flex_shrink_0()
.child(div().size_full()),
)
}))
.child(last_empty_col(cx))
}
}) })
.collect::<Vec<_>>() .collect::<Vec<_>>()
} }
}) },
)
.flex_grow() .flex_grow()
.size_full() .size_full()
.with_sizing_behavior(gpui::ListSizingBehavior::Auto) .with_sizing_behavior(gpui::ListSizingBehavior::Auto)