diff --git a/Cargo.lock b/Cargo.lock index 0969fad..0fa3baf 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2238,6 +2238,15 @@ dependencies = [ "web-sys", ] +[[package]] +name = "leptos-maybe-callback" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "bff44378da0a611bd446e8354585fa0768206610b8e4b0ab8e6ce5988e06a0cc" +dependencies = [ + "leptos", +] + [[package]] name = "leptos-node-ref" version = "0.2.0" @@ -3151,6 +3160,9 @@ name = "radix-leptos-label" version = "0.0.2" dependencies = [ "leptos", + "leptos-maybe-callback", + "leptos-node-ref", + "radix-leptos-primitive", "web-sys", ] diff --git a/book/src/primitives/components/label.md b/book/src/primitives/components/label.md index f4e8786..ff453ce 100644 --- a/book/src/primitives/components/label.md +++ b/book/src/primitives/components/label.md @@ -103,9 +103,10 @@ Contains the content for the label. {{#tabs global="framework" }} {{#tab name="Leptos" }} -| Prop | Type | Default | -| --------------- | ------------------------------ | ------- | -| `on_mouse_down` | `Option>` | - | +| Prop | Type | Default | +| --------------- | --------------------------- | ------- | +| `as_child` | `MaybeProp` | `false` | +| `on_mouse_down` | `MaybeCallback` | - | {{#endtab }} {{#tab name="Yew" }} diff --git a/packages/primitives/leptos/label/Cargo.toml b/packages/primitives/leptos/label/Cargo.toml index 78faa6a..9f0f79d 100644 --- a/packages/primitives/leptos/label/Cargo.toml +++ b/packages/primitives/leptos/label/Cargo.toml @@ -11,4 +11,7 @@ version.workspace = true [dependencies] leptos.workspace = true +leptos-maybe-callback.workspace = true +leptos-node-ref.workspace = true +radix-leptos-primitive = { path = "../primitive", version = "0.0.2" } web-sys.workspace = true diff --git a/packages/primitives/leptos/label/src/label.rs b/packages/primitives/leptos/label/src/label.rs index eb186c9..792f860 100644 --- a/packages/primitives/leptos/label/src/label.rs +++ b/packages/primitives/leptos/label/src/label.rs @@ -1,62 +1,39 @@ -use leptos::{ev::MouseEvent, prelude::*}; - -pub struct UseLabelProps { - on_mouse_down: Option>, -} - -pub struct UseLabelAttrs { - on_mouse_down: Callback, -} - -pub fn use_label(props: UseLabelProps) -> UseLabelAttrs { - UseLabelAttrs { - on_mouse_down: Callback::new(move |event: MouseEvent| { - // Only prevent text selection if clicking inside the label itself. - let target = event_target::(&event); - if target - .closest("button, input, select, textarea") - .expect("Element should be able to query closest.") - .is_some() - { - return; - } - - if let Some(on_mouse_down) = props.on_mouse_down { - on_mouse_down.run(event.clone()); - } - - // Prevent text selection when double clicking label. - if !event.default_prevented() && event.detail() > 1 { - event.prevent_default(); - } - }), - } -} +use leptos::{ev::MouseEvent, html, prelude::*}; +use leptos_maybe_callback::MaybeCallback; +use leptos_node_ref::AnyNodeRef; +use radix_leptos_primitive::Primitive; #[component] pub fn Label( - #[prop(into, optional)] on_mouse_down: Option>, - #[prop(optional)] children: Option, + #[prop(into, optional)] on_mouse_down: MaybeCallback, + #[prop(into, optional)] as_child: MaybeProp, + #[prop(into, optional)] node_ref: AnyNodeRef, + children: TypedChildrenFn, ) -> impl IntoView { - let UseLabelAttrs { on_mouse_down } = use_label(UseLabelProps { on_mouse_down }); - view! { - - } -} + (&event); + if target + .closest("button, input, select, textarea") + .expect("Element should be able to query closest.") + .is_some() + { + return; + } -#[component] -pub fn LabelAsChild( - #[prop(into, optional)] on_mouse_down: Option>, - render: R, -) -> impl IntoView -where - R: Fn(UseLabelAttrs) -> RV, - RV: IntoView, -{ - let attrs = use_label(UseLabelProps { on_mouse_down }); + on_mouse_down.run(event.clone()); - render(attrs) + // Prevent text selection when double clicking label. + if !event.default_prevented() && event.detail() > 1 { + event.prevent_default(); + } + } + /> + } }