From 4490618c4a1fc55550f4b56e1f0eebe2dadb677d Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Fri, 16 Aug 2024 14:34:53 +0800 Subject: [PATCH] Update table to support to support toggle col selection. (#159) - Add `border` method to enable/disable border, default: `true`. - Update `stripe` default to false. - Update theme to remove table head color, just use window bg like. image Closes #155 --- crates/story/src/table_story.rs | 21 ++++++++++++++++++++- crates/ui/src/table.rs | 32 +++++++++++++++++++++++++++----- crates/ui/src/theme.rs | 4 ++-- 3 files changed, 49 insertions(+), 8 deletions(-) diff --git a/crates/story/src/table_story.rs b/crates/story/src/table_story.rs index 78d8d611..91118801 100644 --- a/crates/story/src/table_story.rs +++ b/crates/story/src/table_story.rs @@ -83,6 +83,7 @@ struct CustomerTableDelegate { col_resize: bool, col_order: bool, col_sort: bool, + col_selection: bool, } impl CustomerTableDelegate { @@ -109,6 +110,7 @@ impl CustomerTableDelegate { col_resize: true, col_order: true, col_sort: true, + col_selection: true, } } } @@ -161,6 +163,10 @@ impl TableDelegate for CustomerTableDelegate { return self.col_resize && col_ix > 1; } + fn can_select_col(&self, _: usize) -> bool { + return self.col_selection; + } + fn render_td( &self, row_ix: usize, @@ -363,12 +369,19 @@ impl TableStory { fn toggle_col_sort(&mut self, checked: &bool, cx: &mut ViewContext) { let table = self.table.clone(); table.update(cx, |table, cx| { - println!("- toggle_col_sort: {}", checked); table.delegate_mut().col_sort = *checked; cx.notify(); }); } + fn toggle_col_selection(&mut self, checked: &bool, cx: &mut ViewContext) { + let table = self.table.clone(); + table.update(cx, |table, cx| { + table.delegate_mut().col_selection = *checked; + cx.notify(); + }); + } + fn on_table_event( &mut self, _: View>, @@ -419,6 +432,12 @@ impl Render for TableStory { .label("Column Sort") .selected(delegate.col_sort) .on_click(cx.listener(Self::toggle_col_sort)), + ) + .child( + Checkbox::new("col-selection") + .label("Column Selection") + .selected(delegate.col_selection) + .on_click(cx.listener(Self::toggle_col_selection)), ), ) .child(self.table.clone()) diff --git a/crates/ui/src/table.rs b/crates/ui/src/table.rs index 4d5b5a53..40799fd5 100644 --- a/crates/ui/src/table.rs +++ b/crates/ui/src/table.rs @@ -113,6 +113,8 @@ pub struct Table { /// Set stripe style of the table. stripe: bool, + /// Set to use border style of the table. + border: bool, } #[allow(unused)] @@ -130,6 +132,11 @@ pub trait TableDelegate: Sized + 'static { true } + /// Returns whether the column at the given index can be selected. Default: false + fn can_select_col(&self, col_ix: usize) -> bool { + false + } + /// Returns the width of the column at the given index. /// Return None, use auto width. /// @@ -210,7 +217,8 @@ where selected_col: None, resizing_col: None, bounds: Bounds::default(), - stripe: true, + stripe: false, + border: true, }; this.prepare_col_groups(cx); @@ -225,11 +233,18 @@ where &mut self.delegate } + /// Set to use stripe style of the table, default to false. pub fn stripe(mut self, stripe: bool) -> Self { self.stripe = stripe; self } + /// Set to use border style of the table, default to true. + pub fn border(mut self, border: bool) -> Self { + self.border = border; + self + } + fn prepare_col_groups(&mut self, cx: &mut ViewContext) { self.col_groups = (0..self.delegate.cols_count()) .map(|col_ix| ColGroup { @@ -266,6 +281,10 @@ where } fn on_col_head_click(&mut self, col_ix: usize, cx: &mut ViewContext) { + if !self.delegate.can_select_col(col_ix) { + return; + } + self.set_selected_col(col_ix, cx) } @@ -342,7 +361,10 @@ where /// Show Column selection style, when the column is selected and the selection state is Column. fn col_wrap(&self, col_ix: usize, cx: &mut ViewContext) -> Div { - if self.selected_col == Some(col_ix) && self.selection_state == SelectionState::Column { + if self.delegate().can_select_col(col_ix) + && self.selected_col == Some(col_ix) + && self.selection_state == SelectionState::Column + { h_flex().bg(cx.theme().table_active) } else { h_flex() @@ -796,9 +818,9 @@ where let view = cx.view().clone(); div() .size_full() - .rounded_md() - .border_1() - .border_color(cx.theme().border) + .when(self.border, |this| { + this.rounded_md().border_1().border_color(cx.theme().border) + }) .bg(cx.theme().table) .child(inner_table) .child(ScrollableMask::new( diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index 29de7c6a..5f7636a8 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -202,7 +202,7 @@ impl Colors { list: hsl(0.0, 0.0, 100.), list_even: hsl(240.0, 5.0, 96.0), list_active: hsl(240.0, 7., 88.0).opacity(0.75), - list_head: hsl(240.0, 0., 94.), + list_head: hsl(0.0, 0.0, 100.), link: hsl(221.0, 83.0, 53.0), menu: hsl(0.0, 0.0, 97.0), } @@ -244,7 +244,7 @@ impl Colors { list: hsl(0.0, 0.0, 6.0), list_even: hsl(240.0, 3.7, 8.0), list_active: hsl(240.0, 3.7, 15.0), - list_head: hsl(240.0, 3.7, 10.9), + list_head: hsl(0.0, 0.0, 6.0), link: hsl(221.0, 83.0, 53.0), menu: hsl(300.0, 2.0, 12.), }