Skip to content

Commit

Permalink
feat: Theming support
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc2332
marc2332 committed Oct 15, 2023
1 parent 48ba28d commit 41e2970
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 57 deletions.
36 changes: 26 additions & 10 deletions crates/components/src/table.rs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
use dioxus::prelude::*;
use freya_elements::elements as dioxus_elements;
use freya_elements::events::MouseEvent;
use freya_hooks::{use_get_theme, TableTheme};

#[allow(non_snake_case)]
#[inline_props]
fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
let color = "rgb(40, 40, 40)";
let theme = use_get_theme(cx);
let TableTheme { arrow_fill, .. } = theme.table;
let rotate = match order_direction {
OrderDirection::Down => "0",
OrderDirection::Up => "180",
Expand All @@ -17,7 +19,7 @@ fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
rotate: "{rotate}deg",
svg_content: r#"
<svg viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18177 9.58579L0 2.40401L1.81823 0.585785L9 7.76756L16.1818 0.585787L18 2.40402L10.8182 9.58579L10.8185 9.58601L9.00023 11.4042L9 11.404L8.99977 11.4042L7.18154 9.58602L7.18177 9.58579Z" fill="{color}" stroke="{color}" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18177 9.58579L0 2.40401L1.81823 0.585785L9 7.76756L16.1818 0.585787L18 2.40402L10.8182 9.58579L10.8185 9.58601L9.00023 11.4042L9 11.404L8.99977 11.4042L7.18154 9.58602L7.18177 9.58579Z" fill="{arrow_fill}" stroke="{arrow_fill}" stroke-width="2"/>
</svg>
"#
})
Expand Down Expand Up @@ -69,10 +71,17 @@ pub struct TableRowProps<'a> {

#[allow(non_snake_case)]
pub fn TableRow<'a>(cx: Scope<'a, TableRowProps<'a>>) -> Element {
let theme = use_get_theme(cx);
let TableTheme {
divider_fill,
alternate_row_background,
row_background,
..
} = theme.table;
let background = if cx.props.alternate_colors {
"rgb(240, 240, 240)"
alternate_row_background
} else {
"transparent"
row_background
};
render!(
rect {
Expand All @@ -85,7 +94,7 @@ pub fn TableRow<'a>(cx: Scope<'a, TableRowProps<'a>>) -> Element {
rect {
height: "1",
width: "100%",
background: "rgb(200, 200, 200)"
background: "{divider_fill}"
}
)
}
Expand All @@ -107,23 +116,25 @@ pub struct TableCellProps<'a> {
/// The direction in which this TableCell's column will be ordered.
#[props(into)]
order_direction: Option<Option<OrderDirection>>,
/// Show a line separator to the left of this TableCell.
/// Show a line divider to the left of this TableCell.
#[props(default = true, into)]
separator: bool,
divider: bool,
}

#[allow(non_snake_case)]
pub fn TableCell<'a>(cx: Scope<'a, TableCellProps<'a>>) -> Element {
let theme = use_get_theme(cx);
let TableTheme { divider_fill, .. } = theme.table;
let config = cx.consume_context::<TableConfig>().unwrap();
let width = 100.0 / config.columns as f32;

render!(
if cx.props.separator {
if cx.props.divider {
rsx!(
rect {
width: "1",
height: "35",
background: "rgb(200, 200, 200)"
background: "{divider_fill}"
}
)
}
Expand Down Expand Up @@ -170,6 +181,10 @@ pub struct TableProps<'a> {

#[allow(non_snake_case)]
pub fn Table<'a>(cx: Scope<'a, TableProps<'a>>) -> Element {
let theme = use_get_theme(cx);
let TableTheme {
background, color, ..
} = theme.table;
cx.provide_context(TableConfig {
columns: cx.props.columns,
});
Expand All @@ -178,7 +193,8 @@ pub fn Table<'a>(cx: Scope<'a, TableProps<'a>>) -> Element {
render!(
rect {
overflow: "clip",
background: "white",
color: "{color}",
background: "{background}",
corner_radius: "6",
shadow: "0 2 15 5 rgb(35, 35, 35, 70)",
height: "{height}",
Expand Down
28 changes: 28 additions & 0 deletions crates/hooks/src/use_theme.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,17 @@ pub struct ProgressBarTheme {
pub progress_background: &'static str,
}

/// Theming properties for Table component.
#[derive(Clone, Debug, PartialEq, Eq)]
pub struct TableTheme {
pub color: &'static str,
pub background: &'static str,
pub arrow_fill: &'static str,
pub alternate_row_background: &'static str,
pub row_background: &'static str,
pub divider_fill: &'static str,
}

/// Theming properties for Themes.
#[derive(Clone, Debug, PartialEq, Eq)]
pub struct Theme {
Expand All @@ -138,6 +149,7 @@ pub struct Theme {
pub accordion: AccordionTheme,
pub loader: LoaderTheme,
pub progress_bar: ProgressBarTheme,
pub table: TableTheme,
}

impl Default for Theme {
Expand Down Expand Up @@ -210,6 +222,14 @@ pub const LIGHT_THEME: Theme = Theme {
background: "rgb(210, 210, 210)",
progress_background: "rgb(103, 80, 164)",
},
table: TableTheme {
color: "black",
background: "white",
arrow_fill: "rgb(40, 40, 40)",
row_background: "transparent",
alternate_row_background: "rgb(240, 240, 240)",
divider_fill: "rgb(200, 200, 200)",
},
};

/// `Dark` theme
Expand Down Expand Up @@ -270,4 +290,12 @@ pub const DARK_THEME: Theme = Theme {
background: "rgb(60, 60, 60)",
progress_background: "rgb(255, 95, 0)",
},
table: TableTheme {
color: "white",
background: "rgb(25, 25, 25)",
arrow_fill: "rgb(150, 150, 150)",
row_background: "transparent",
alternate_row_background: "rgb(50, 50, 50)",
divider_fill: "rgb(100, 100, 100)",
},
};
58 changes: 11 additions & 47 deletions examples/table.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,51 +34,15 @@ fn app(cx: Scope) -> Element {
let order = use_state(cx, || OrderBy::Name);
let data = use_state(cx, || {
vec![
vec![
"aaaa".to_string(),
"bbbb".to_string(),
"111".to_string(),
],
vec![
"bbbb".to_string(),
"aaaa".to_string(),
"333".to_string(),
],
vec![
"wwww".to_string(),
"777".to_string(),
"ccc".to_string(),
],
vec![
"dddd".to_string(),
"222".to_string(),
"111".to_string(),
],
vec![
"hhhh".to_string(),
"444".to_string(),
"aaa".to_string(),
],
vec![
"555".to_string(),
"ffff".to_string(),
"zzzz".to_string(),
],
vec![
"llll".to_string(),
"999".to_string(),
"eeee".to_string(),
],
vec![
"abcd".to_string(),
"987".to_string(),
"wwww".to_string(),
],
vec![
"rrrr".to_string(),
"333".to_string(),
"888".to_string(),
],
vec!["aaaa".to_string(), "bbbb".to_string(), "111".to_string()],
vec!["bbbb".to_string(), "aaaa".to_string(), "333".to_string()],
vec!["wwww".to_string(), "777".to_string(), "ccc".to_string()],
vec!["dddd".to_string(), "222".to_string(), "111".to_string()],
vec!["hhhh".to_string(), "444".to_string(), "aaa".to_string()],
vec!["555".to_string(), "ffff".to_string(), "zzzz".to_string()],
vec!["llll".to_string(), "999".to_string(), "eeee".to_string()],
vec!["abcd".to_string(), "987".to_string(), "wwww".to_string()],
vec!["rrrr".to_string(), "333".to_string(), "888".to_string()],
]
});
let columns = cx.use_hook(|| {
Expand Down Expand Up @@ -132,7 +96,7 @@ fn app(cx: Scope) -> Element {
for (n, (text, order_by)) in columns.iter().enumerate() {
TableCell {
key: "{n}",
separator: n > 0,
divider: n > 0,
order_direction: if *order.get() == *order_by { Some(*order_direction.get()) } else { None },
onclick: move |_| on_column_head_click(order_by),
label {
Expand All @@ -153,7 +117,7 @@ fn app(cx: Scope) -> Element {
for (n, item) in items.iter().enumerate() {
TableCell {
key: "{n}",
separator: n > 0,
divider: n > 0,
label {
width: "100%",
align: "right",
Expand Down

0 comments on commit 41e2970

Please sign in to comment.