dioxus_material/
ripple.rs

1use crate::use_ripple;
2use dioxus::prelude::*;
3use std::time::Duration;
4
5#[component]
6pub fn Ripple(
7    onclick: EventHandler<Event<MouseData>>,
8    children: Element,
9    duration: Option<Duration>,
10) -> Element {
11    let duration = duration.unwrap_or(Duration::from_millis(200));
12    let mut ripple = use_ripple(duration);
13
14    rsx!(
15        div {
16            display: "inline-flex",
17            flex: 1,
18            position: "relative",
19            overflow: "hidden",
20            cursor: "pointer",
21            onmounted: move |event| ripple.container_ref.onmounted(event),
22            onmousedown: move |_| ripple.onmousedown(),
23            onmouseup: move |event| {
24                if ripple.onmouseup() {
25                    onclick.call(event)
26                }
27            },
28            onmouseleave: move |_| ripple.onmouseleave(),
29            div { onmounted: move |event| ripple.animated_ref.onmounted(event) }
30            div {
31                position: "relative",
32                z_index: 9,
33                user_select: "none",
34                webkit_user_select: "none",
35                {children}
36            }
37        }
38    )
39}