feat: Show the Hand cursor when hovering the Button, Slider and Switc…

…h components (#373)
marc2332 · Nov 11, 2023 · f2306ca · f2306ca
1 parent 6d41744
commit f2306ca
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 23 deletions.
diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
@@ -1,7 +1,8 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_focus, use_get_theme};
+use freya_hooks::{use_focus, use_get_theme, use_platform};
+use winit::window::CursorIcon;
 
 /// [`Button`] component properties.
 #[derive(Props)]
@@ -67,6 +68,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
     let focus = use_focus(cx);
     let theme = use_get_theme(cx);
     let status = use_state(cx, ButtonStatus::default);
+    let platform = use_platform(cx);
 
     let focus_id = focus.attribute(cx);
 
@@ -77,11 +79,25 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
         }
     };
 
-    let onmouseenter = move |_| {
-        status.set(ButtonStatus::Hovering);
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.get() == ButtonStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
+        }
+    });
+
+    let onmouseenter = {
+        to_owned![status, platform];
+        move |_| {
+            platform.set_cursor(CursorIcon::Hand);
+            status.set(ButtonStatus::Hovering);
+        }
     };
 
     let onmouseleave = move |_| {
+        platform.set_cursor(CursorIcon::default());
         status.set(ButtonStatus::default());
     };
 

diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs
@@ -1,8 +1,9 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{MouseEvent, WheelEvent};
-use freya_hooks::{use_get_theme, use_node_ref};
+use freya_hooks::{use_get_theme, use_node_ref, use_platform};
 use tracing::info;
+use winit::window::CursorIcon;
 
 /// [`Slider`] component properties.
 #[derive(Props)]
@@ -28,6 +29,16 @@ fn ensure_correct_slider_range(value: f64) -> f64 {
     }
 }
 
+/// Describes the current status of the Slider.
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum SliderStatus {
+    /// Default state.
+    #[default]
+    Idle,
+    /// Mouse is hovering the slider.
+    Hovering,
+}
+
 /// Controlled `Slider` component.
 ///
 /// You must pass a percentage from 0.0 to 100.0 and listen for value changes with `onmoved` and then decide if this changes are applicable,
@@ -63,22 +74,39 @@ fn ensure_correct_slider_range(value: f64) -> f64 {
 pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
     let theme = use_get_theme(cx);
     let theme = &theme.slider;
-    let hovering = use_state(cx, || false);
+    let status = use_ref(cx, SliderStatus::default);
     let clicking = use_state(cx, || false);
+    let platform = use_platform(cx);
+
     let value = ensure_correct_slider_range(cx.props.value);
     let (node_reference, size) = use_node_ref(cx);
     let width = cx.props.width + 14.0;
 
     let progress = (value / 100.0) * cx.props.width + 0.5;
 
-    let onmouseleave = |_: MouseEvent| {
-        if !(*clicking.get()) {
-            hovering.set(false);
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.read() == SliderStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
+        }
+    });
+
+    let onmouseleave = {
+        to_owned![platform, status];
+        move |_: MouseEvent| {
+            *status.write_silent() = SliderStatus::Idle;
+            platform.set_cursor(CursorIcon::default());
         }
     };
 
+    let onmouseenter = move |_: MouseEvent| {
+        *status.write_silent() = SliderStatus::Hovering;
+        platform.set_cursor(CursorIcon::Hand);
+    };
+
     let onmouseover = move |e: MouseEvent| {
-        hovering.set(true);
         if *clicking.get() {
             let coordinates = e.get_element_coordinates();
             let mut x = coordinates.x - 7.5 - size.read().area.min_x() as f64;
@@ -119,6 +147,7 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
             height: "20",
             onmousedown: onmousedown,
             onglobalclick: onclick,
+            onmouseenter: onmouseenter,
             onglobalmouseover: onmouseover,
             onmouseleave: onmouseleave,
             onwheel: onwheel,

diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
@@ -1,7 +1,8 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_animation, use_get_theme, Animation};
+use freya_hooks::{use_animation, use_get_theme, use_platform, Animation};
+use winit::window::CursorIcon;
 
 /// [`Switch`] component properties.
 #[derive(Props)]
@@ -12,6 +13,16 @@ pub struct SwitchProps<'a> {
     pub ontoggled: EventHandler<'a, ()>,
 }
 
+/// Describes the current status of the Switch.
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum SwitchStatus {
+    /// Default state.
+    #[default]
+    Idle,
+    /// Mouse is hovering the switch.
+    Hovering,
+}
+
 /// Controlled `Switch` component.
 ///
 /// # Props
@@ -42,25 +53,32 @@ pub struct SwitchProps<'a> {
 pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
     let animation = use_animation(cx, || 0.0);
     let theme = use_get_theme(cx);
-    let hovering = use_state(cx, || false);
-    let clicking = use_state(cx, || false);
+    let platform = use_platform(cx);
+    let status = use_ref(cx, SwitchStatus::default);
 
-    let onmouseleave = |_: MouseEvent| {
-        if !(*clicking.get()) {
-            hovering.set(false);
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.read() == SwitchStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
         }
-    };
+    });
 
-    let onmouseover = |_: MouseEvent| {
-        hovering.set(true);
+    let onmouseleave = {
+        to_owned![platform];
+        move |_: MouseEvent| {
+            *status.write_silent() = SwitchStatus::Idle;
+            platform.set_cursor(CursorIcon::default());
+        }
     };
 
-    let onmousedown = |_: MouseEvent| {
-        clicking.set(true);
+    let onmouseenter = move |_: MouseEvent| {
+        *status.write_silent() = SwitchStatus::Hovering;
+        platform.set_cursor(CursorIcon::Hand);
     };
 
     let onclick = |_: MouseEvent| {
-        clicking.set(false);
         cx.props.ontoggled.call(());
     };
 
@@ -96,8 +114,8 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
             padding: "1",
             corner_radius: "50",
             background: "{border}",
-            onmousedown: onmousedown,
-            onmouseover: onmouseover,
+            onmousedown: |_| {},
+            onmouseenter: onmouseenter,
             onmouseleave: onmouseleave,
             onclick: onclick,
             rect {