Create Theme component

dioxus-community · Oct 22, 2023 · cc11096 · cc11096
1 parent 1048b4f
commit cc11096
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 69 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/button.rs b/examples/button.rs
@@ -1,12 +1,12 @@
 use dioxus::prelude::*;
-use dioxus_material::{use_theme_provider, Button, TextButton, Theme};
+use dioxus_material::{Button, TextButton, Theme};
 
 fn app(cx: Scope) -> Element {
-    use_theme_provider(cx, Theme::default());
-
     render!(
-        Button { onpress: |_| log::info!("clicked!"), "Click me!" }
-        TextButton { onpress: |_| log::info!("clicked!"), "Click me!" }
+        Theme {
+            Button { onpress: |_| log::info!("clicked!"), "Click me!" }
+            TextButton { onpress: |_| log::info!("clicked!"), "Click me!" }
+        }
     )
 }
 

diff --git a/examples/navigation_rail.rs b/examples/navigation_rail.rs
@@ -1,23 +1,23 @@
 use dioxus::prelude::*;
-use dioxus_material::{use_theme_provider, NavigationRail, NavigationRailItem, Theme};
+use dioxus_material::{NavigationRail, NavigationRailItem, Theme};
 
 fn app(cx: Scope) -> Element {
-    use_theme_provider(cx, Theme::default());
-
     render!(
-        NavigationRail {
-            NavigationRailItem {
-                icon: render!("A"),
-                label: render!("All files"),
-                is_selected: false,
-                onselect: |_| {}
-            }
-            NavigationRailItem { icon: render!("B"), label: render!("Recent"), is_selected: true, onselect: |_| {} }
-            NavigationRailItem {
-                icon: render!("C"),
-                label: render!("Photos"),
-                is_selected: false,
-                onselect: |_| {}
+        Theme {
+            NavigationRail {
+                NavigationRailItem {
+                    icon: render!("A"),
+                    label: render!("All files"),
+                    is_selected: false,
+                    onselect: |_| {}
+                }
+                NavigationRailItem { icon: render!("B"), label: render!("Recent"), is_selected: true, onselect: |_| {} }
+                NavigationRailItem {
+                    icon: render!("C"),
+                    label: render!("Photos"),
+                    is_selected: false,
+                    onselect: |_| {}
+                }
             }
         }
     )

diff --git a/examples/tab_row.rs b/examples/tab_row.rs
@@ -1,15 +1,21 @@
 use dioxus::prelude::*;
-use dioxus_material::{Tab, TabRow};
+use dioxus_material::{Tab, TabRow, Theme};
 
 fn app(cx: Scope) -> Element {
-    render!(TabRow {
-        onselect: |idx| log::info!("{}", idx),
-        tabs: cx.bump().alloc([
-            render!(Tab { "Tab 1" }),
-            render!(Tab { "Tab 2" }),
-            render!(Tab { "Tab 3" }),
-        ])
-    })
+    render!(
+        Theme {
+            TabRow {
+                onselect: |idx| log::info!("{}", idx),
+                tabs: cx
+                    .bump()
+                    .alloc([
+                        render!(Tab { "Tab 1" }),
+                        render!(Tab { "Tab 2" }),
+                        render!(Tab { "Tab 3" }),
+                    ])
+            }
+        }
+    )
 }
 
 fn main() {

diff --git a/examples/text_field.rs b/examples/text_field.rs
@@ -1,15 +1,17 @@
 use dioxus::prelude::*;
-use dioxus_material::{use_theme_provider, TextField, Theme};
+use dioxus_material::{TextField, Theme};
 
 fn app(cx: Scope) -> Element {
-    use_theme_provider(cx, Theme::default());
-
     let value = use_state(cx, || String::from("Filled"));
-    render!(TextField {
-        label: "Text field",
-        value: "{value}",
-        onchange: move |event: FormEvent| value.set(event.value.clone())
-    })
+    render!(
+        Theme {
+            TextField {
+                label: "Text field",
+                value: "{value}",
+                onchange: move |event: FormEvent| value.set(event.value.clone())
+            }
+        }
+    )
 }
 
 fn main() {

diff --git a/lookbook/src/main.rs b/lookbook/src/main.rs
@@ -67,24 +67,20 @@ fn Home(cx: Scope) -> Element {
             h5 { "Material You design library for dioxus." }
             a { href: "https://github.com/matthunz/dioxus-material", "Github" }
 
-            div {
-                margin_top: "20px",
+            div { margin_top: "20px",
                 "Made with "
                 a { href: "https://github.com/matthunz/lookbook", "Lookbook" }
                 "."
             }
-
         }
     )
 }
 
 fn app(cx: Scope) -> Element {
-    render!(
-        LookBook {
-            home: Home,
-            previews: [ButtonPreview, TextButtonPreview, TextFieldPreview]
-        }
-    )
+    render!(LookBook {
+        home: Home,
+        previews: [ButtonPreview, TextButtonPreview, TextFieldPreview]
+    })
 }
 
 fn main() {

diff --git a/src/lib.rs b/src/lib.rs
@@ -11,7 +11,7 @@ mod tab_row;
 pub use tab_row::TabRow;
 
 mod theme;
-pub use theme::{use_theme, use_theme_provider, Theme};
+pub use theme::{use_theme, Theme, UseTheme};
 
 mod text_field;
 pub use text_field::TextField;

diff --git a/src/theme.rs b/src/theme.rs
@@ -1,7 +1,51 @@
 use dioxus::prelude::*;
 use std::{borrow::Cow, rc::Rc};
 
-pub struct Theme {
+#[component]
+pub fn Theme<'a>(
+    cx: Scope<'a>,
+
+    /// Primary color.
+    #[props(into, default = Cow::Borrowed("#6750A4"))]
+    primary_color: Cow<'static, str>,
+
+    /// Background color.
+    #[props(into, default = Cow::Borrowed("#eeeeee"))]
+    background_color: Cow<'static, str>,
+
+    /// Secondary container color.
+    #[props(into, default = Cow::Borrowed("#E8DEF8"))]
+    secondary_container_color: Cow<'static, str>,
+
+    /// Border radius.
+    #[props(into, default = Cow::Borrowed("25px"))]
+    border_radius: Cow<'static, str>,
+
+    /// Small label font size.
+    #[props(default = 12.)]
+    label_small: f32,
+
+    /// Medium label font size.
+    #[props(default = 16.)]
+    label_medium: f32,
+
+    children: Element<'a>,
+) -> Element<'a> {
+    use_context_provider(cx, move || {
+        Rc::new(UseTheme {
+            primary_color: primary_color.clone(),
+            background_color: background_color.clone(),
+            secondary_container_color: secondary_container_color.clone(),
+            border_radius: border_radius.clone(),
+            label_small: *label_small,
+            label_medium: *label_medium,
+        })
+    });
+
+    render!(children)
+}
+
+pub struct UseTheme {
     pub primary_color: Cow<'static, str>,
     pub background_color: Cow<'static, str>,
     pub secondary_container_color: Cow<'static, str>,
@@ -10,24 +54,7 @@ pub struct Theme {
     pub label_medium: f32,
 }
 
-impl Default for Theme {
-    fn default() -> Self {
-        Self {
-            primary_color: Cow::Borrowed("#6750A4"),
-            background_color: Cow::Borrowed("#eeeeee"),
-            secondary_container_color: Cow::Borrowed("#E8DEF8"),
-            border_radius: Cow::Borrowed("25px"),
-            label_small: 12.,
-            label_medium: 16.,
-        }
-    }
-}
-
-pub fn use_theme_provider<T>(cx: Scope<T>, theme: Theme) {
-    use_context_provider(cx, move || Rc::new(theme));
-}
-
-pub fn use_theme<T>(cx: Scope<T>) -> &Theme {
-    let rc: &Rc<Theme> = use_context(cx).unwrap();
+pub fn use_theme<T>(cx: Scope<T>) -> &UseTheme {
+    let rc: &Rc<UseTheme> = use_context(cx).unwrap();
     rc.as_ref()
 }