feat: add reactivity to Button and Label (#62)

noviga · Nov 5, 2023 · d6adc37 · d6adc37
1 parent b892f48
commit d6adc37
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 20 deletions.
diff --git a/examples/blur.rs b/examples/blur.rs
@@ -7,7 +7,7 @@ pub fn Blur() -> impl IntoView {
     let on_click = move |_| set_blur.set(!blur.get());
 
     view! {
-        <Slide blur=blur.into() background_color=Color::MistyRose>
+        <Slide blur=blur background_color=Color::MistyRose>
             <Button on_click=on_click>
                 "Blur " {move || if blur.get() { "ON" } else { "OFF" }}
             </Button>

diff --git a/examples/buttons.rs b/examples/buttons.rs
@@ -8,12 +8,19 @@ pub fn Buttons() -> impl IntoView {
         logging::log!("Clicked");
         set_counter.set(counter.get() + 1);
     };
+    let bob_color = create_memo(move |_| {
+        if counter.get() % 2 == 0 {
+            Color::LightCoral
+        } else {
+            Color::LightSkyBlue
+        }
+    });
 
     view! {
         <Slide>
             <Grid cols=3 rows=3>
                 <Button on_click=on_click>"Alice"</Button>
-                <Button width=300 height=300 radius=150 on_click=on_click>"Bob"</Button>
+                <Button width=300 height=300 radius=150 color=bob_color on_click=on_click>"Bob"</Button>
                 <Button font_size=72 text_color=Color::DarkCyan on_click=on_click>"Charlie"</Button>
                 <Button on_click=on_click>
                     <tspan font-size="96" fill="red" alignment-baseline="central">"Da"</tspan>

diff --git a/examples/pointer.rs b/examples/pointer.rs
@@ -7,7 +7,7 @@ pub fn Pointer() -> impl IntoView {
     let on_click = move |_| set_pointer.set(!pointer.get());
 
     view! {
-        <Slide pointer=pointer.into()>
+        <Slide pointer=pointer>
             <Button on_click=on_click>
                 "Pointer " {move || if pointer.get() { "ON" } else { "OFF" }}
             </Button>

diff --git a/examples/stack.rs b/examples/stack.rs
@@ -4,7 +4,7 @@ use lerni::*;
 #[component]
 pub fn StackExample() -> impl IntoView {
     view! {
-        <Slide>
+        <Slide pointer=true>
             <Stack count=2>
                 <SvgFile width=128 height=64 scale=2.0 src=include_str!("logo.svg") />
                 <Label font_size=96 valign=VAlign::Top>"Hello,"</Label>

diff --git a/src/widgets/button.rs b/src/widgets/button.rs
@@ -14,11 +14,11 @@ pub fn Button<CB>(
     #[prop(default = HEIGHT)] height: i32,
     #[prop(default = 24)] radius: i32,
     #[prop(optional)] font: String,
-    #[prop(default = 48)] font_size: i32,
-    #[prop(default = Color::AliceBlue)] color: Color,
-    #[prop(default = Color::Black)] text_color: Color,
-    #[prop(default = 12)] border_width: i32,
-    #[prop(default = Color::RoyalBlue)] border_color: Color,
+    #[prop(default = 48.into(), into)] font_size: MaybeSignal<i32>,
+    #[prop(default = Color::AliceBlue.into(), into)] color: MaybeSignal<Color>,
+    #[prop(default = Color::Black.into(), into)] text_color: MaybeSignal<Color>,
+    #[prop(default = 12.into())] border_width: MaybeSignal<i32>,
+    #[prop(default = Color::RoyalBlue.into(), into)] border_color: MaybeSignal<Color>,
     #[prop(default = Align::Center)] align: Align,
     #[prop(default = VAlign::Middle)] valign: VAlign,
     children: Children,
@@ -54,14 +54,14 @@ where
     };
     provide_frame(frame);
 
-    let x = x + border_width / 2;
-    let y = y + border_width / 2;
-    let width = width - border_width;
-    let height = height - border_width;
+    let x = x + border_width.get() / 2;
+    let y = y + border_width.get() / 2;
+    let width = width - border_width.get();
+    let height = height - border_width.get();
 
-    let (border, set_border) = create_signal(border_width);
-    let on_mousedown = move |_| set_border.set(border_width + 6);
-    let on_mouseup = move |_| set_border.set(border_width);
+    let (border, set_border) = create_signal(border_width.get());
+    let on_mousedown = move |_| set_border.set(border_width.get() + 6);
+    let on_mouseup = move |_| set_border.set(border_width.get());
 
     view! {
         <rect

diff --git a/src/widgets/label.rs b/src/widgets/label.rs
@@ -6,10 +6,10 @@ use crate::{use_frame, Align, Color, VAlign};
 pub fn Label(
     #[prop(optional)] bold: bool,
     #[prop(optional)] font: String,
-    #[prop(default = 48)] font_size: i32,
+    #[prop(default = 48.into(), into)] font_size: MaybeSignal<i32>,
     #[prop(default = Align::Center)] align: Align,
     #[prop(default = VAlign::Middle)] valign: VAlign,
-    #[prop(default = Color::Black)] color: Color,
+    #[prop(default = Color::Black.into(), into)] color: MaybeSignal<Color>,
     children: Children,
 ) -> impl IntoView {
     let f = use_frame();

diff --git a/src/widgets/slide.rs b/src/widgets/slide.rs
@@ -18,8 +18,8 @@ pub fn Slide(
     #[prop(default = HEIGHT)] height: i32,
     #[prop(optional)] background_color: Color,
     #[prop(optional, into)] background_image: String,
-    #[prop(optional)] pointer: MaybeSignal<bool>,
-    #[prop(optional)] blur: MaybeSignal<bool>,
+    #[prop(optional, into)] pointer: MaybeSignal<bool>,
+    #[prop(optional, into)] blur: MaybeSignal<bool>,
     #[prop(default = 15)] blur_radius: i32,
     children: Children,
 ) -> impl IntoView {