feat: General cleanup of freya's components (#313)

Author: marc2332

book/src/guides/animating.md

@@ -23,9 +23,8 @@ fn main() {
 
     let progress = animation.value();
 
-    use_effect(cx, (), move |_| {
+    use_memo(cx, (), move |_| {
         animation.start(Animation::new_linear(0.0..=100.0, 50));
-        async move {}
     });
 
     render!(rect {

crates/components/Cargo.toml

@@ -31,6 +31,7 @@ dioxus-router = { workspace = true }
 
 winit = { workspace = true }
 tokio = { workspace = true }
+tracing = { workspace = true }
 
 open = "1"
 reqwest = { version = "0.11.13", features = ["json"] }

crates/components/src/accordion.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_animation, use_get_theme, use_node, Animation};
+use freya_hooks::{use_animation, use_get_theme, use_node, AccordionTheme, Animation};
 
 /// [`Accordion`] component properties.
 #[derive(Props)]
@@ -23,15 +23,15 @@ pub struct AccordionProps<'a> {
 #[allow(non_snake_case)]
 pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     let theme = use_get_theme(cx);
-    let accordion_theme = &theme.accordion;
     let animation = use_animation(cx, || 0.0);
     let open = use_state(cx, || false);
     let (node_ref, size) = use_node(cx);
 
     let animation_value = animation.value();
+    let AccordionTheme { background, color } = theme.accordion;
 
     // Adapt the accordion if the body size changes
-    use_effect(
+    use_memo(
         cx,
         &(
             size.area.width(),
@@ -44,7 +44,6 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
                 if (height as f64) < animation.value() && !animating {
                     animation.set_value(size.area.height() as f64);
                 }
-                async move {}
             }
         },
     );
@@ -62,12 +61,12 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     render!(
         rect {
             overflow: "clip",
-            color: "{accordion_theme.color}",
+            color: "{color}",
             padding: "10",
             corner_radius: "3",
             width: "100%",
             height: "auto",
-            background: "{accordion_theme.background}",
+            background: "{background}",
             onclick: onclick,
             &cx.props.summary
             rect {

crates/components/src/dropdown.rs

@@ -170,9 +170,8 @@ where
     let color = theme.dropdown.font_theme.color;
 
     // Update the provided value if the passed value changes
-    use_effect(cx, &cx.props.value, move |value| {
+    use_memo(cx, &cx.props.value, move |value| {
         *selected.write() = value;
-        async move {}
     });
 
     // Close the dropdown if clicked anywhere

crates/components/src/external_link.rs

@@ -47,7 +47,6 @@ pub struct ExternalLinkProps<'a> {
 #[allow(non_snake_case)]
 pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
     let theme = use_get_theme(cx);
-    let theme = &theme.external_link;
     let is_hovering = use_state(cx, || false);
     let show_tooltip = cx.props.show_tooltip.unwrap_or(true);
 
@@ -68,7 +67,7 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
     };
 
     let color = if *is_hovering.get() {
-        theme.highlight_color
+        theme.external_link.highlight_color
     } else {
         "inherit"
     };

crates/components/src/gesture_area.rs

@@ -62,7 +62,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
     let touch_events = use_ref::<EventsQueue>(cx, VecDeque::new);
 
-    use_effect(cx, touch_events, move |_| {
+    use_memo(cx, touch_events, move |_| {
         // Keep the touch events queue under a certain size
         if touch_events.read().len() > MAX_EVENTS_QUEUE {
             touch_events.write_silent().pop_front();
@@ -132,8 +132,6 @@ pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
                 _ => {}
             }
         }
-
-        async move {}
     });
 
     let ontouchcancel = |e: TouchEvent| {

crates/components/src/graph.rs

@@ -45,7 +45,7 @@ pub struct GraphProps {
 pub fn Graph(cx: Scope<GraphProps>) -> Element {
     let platform = use_platform(cx);
 
-    use_effect(cx, (cx.props,), move |_| async move {
+    use_memo(cx, (cx.props,), move |_| {
         platform.send(EventMessage::RequestRerender)
     });
 

crates/components/src/input.rs

@@ -3,6 +3,8 @@ use crate::ScrollView;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{KeyboardData, MouseEvent};
+use freya_hooks::ButtonTheme;
+use freya_hooks::FontTheme;
 use freya_hooks::{
     use_editable, use_focus, use_get_theme, EditableConfig, EditableEvent, EditableMode, TextEditor,
 };
@@ -66,20 +68,18 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
     let focus_manager = use_focus(cx);
 
     let text = &cx.props.value;
-    let button_theme = &theme.button;
     let cursor_attr = editable.cursor_attr(cx);
     let highlights_attr = editable.highlights_attr(cx, 0);
     let width = &cx.props.width;
     let height = &cx.props.height;
     let max_lines = &cx.props.max_lines;
 
-    use_effect(cx, &(cx.props.value.to_string(),), {
+    use_memo(cx, &(cx.props.value.to_string(),), {
         to_owned![editable];
         move |(text,)| {
             editable.editor().with_mut(|editor| {
                 editor.set(&text);
             });
-            async move {}
         }
     });
 
@@ -122,8 +122,11 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
     } else {
         "none".to_string()
     };
-    let background = button_theme.background;
-    let color = button_theme.font_theme.color;
+    let ButtonTheme {
+        background,
+        font_theme: FontTheme { color, .. },
+        ..
+    } = theme.button;
 
     render!(
         CursorArea {

crates/components/src/loader.rs

@@ -2,7 +2,7 @@ use std::time::Duration;
 
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::use_get_theme;
+use freya_hooks::{use_get_theme, LoaderTheme};
 use tokio::time::interval;
 
 /// [`Loader`] component properties. Currently empty.
@@ -22,7 +22,10 @@ pub fn Loader(cx: Scope<LoaderProps>) -> Element {
     let theme = use_get_theme(cx);
     let degrees = use_state(cx, || 0);
 
-    let loader_theme = theme.loader;
+    let LoaderTheme {
+        primary_color,
+        secondary_color,
+    } = theme.loader;
 
     use_effect(cx, (), move |_| {
         to_owned![degrees];
@@ -45,8 +48,8 @@ pub fn Loader(cx: Scope<LoaderProps>) -> Element {
         height: "31",
         svg_content: r#"
                 <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M15.5235 27.6652C22.2292 27.6652 27.6652 22.2292 27.6652 15.5235C27.6652 8.81783 22.2292 3.38182 15.5235 3.38182C8.81783 3.38182 3.38182 8.81783 3.38182 15.5235C3.38182 22.2292 8.81783 27.6652 15.5235 27.6652Z" stroke="{loader_theme.primary_color}"  stroke-width="4"/>
-                    <path d="M27.6652 15.5235C27.6652 8.81859 22.2284 3.38182 15.5235 3.38182" stroke="{loader_theme.secondary_color}" stroke-width="4"/>
+                    <path d="M15.5235 27.6652C22.2292 27.6652 27.6652 22.2292 27.6652 15.5235C27.6652 8.81783 22.2292 3.38182 15.5235 3.38182C8.81783 3.38182 3.38182 8.81783 3.38182 15.5235C3.38182 22.2292 8.81783 27.6652 15.5235 27.6652Z" stroke="{primary_color}"  stroke-width="4"/>
+                    <path d="M27.6652 15.5235C27.6652 8.81859 22.2284 3.38182 15.5235 3.38182" stroke="{secondary_color}" stroke-width="4"/>
                 </svg>
             "#
     })

crates/components/src/scroll_views/scroll_bar.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::use_get_theme;
+use freya_hooks::{use_get_theme, ScrollbarTheme};
 
 #[derive(Props)]
 pub struct ScrollBarProps<'a> {
@@ -22,7 +22,8 @@ pub struct ScrollBarProps<'a> {
 #[allow(non_snake_case)]
 pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
     let theme = use_get_theme(cx);
-    let scrollbar_theme = &theme.scrollbar;
+    let ScrollbarTheme { background, .. } = &theme.scrollbar;
+
     render!(
         rect {
             overflow: "clip",
@@ -31,7 +32,7 @@ pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
             height: "{cx.props.height}",
             offset_x: "{cx.props.offset_x}",
             offset_y: "{cx.props.offset_y}",
-            background: "{scrollbar_theme.background}",
+            background: "{background}",
             &cx.props.children
         }
     )