Update Label to Leptos 0.7 (#427)

* Update Label to Leptos 0.7

* Cleanup

---------

Co-authored-by: geoffreygarrett <geoffrey@apollo.xyz>
Co-authored-by: Daniëlle Huisman <danielle@huisman.me>

Author: 3 people

Cargo.lock

@@ -103,9 +103,10 @@ Contains the content for the label.
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop            | Type                           | Default |
-| --------------- | ------------------------------ | ------- |
-| `on_mouse_down` | `Option<Callback<MouseEvent>>` | -       |
+| Prop            | Type                        | Default |
+| --------------- | --------------------------- | ------- |
+| `as_child`      | `MaybeProp<bool>`           | `false` |
+| `on_mouse_down` | `MaybeCallback<MouseEvent>` | -       |
 
 {{#endtab }}
 {{#tab name="Yew" }}

book/src/primitives/components/label.md

@@ -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

packages/primitives/leptos/label/Cargo.toml

@@ -1,62 +1,39 @@
-use leptos::{ev::MouseEvent, prelude::*};
-
-pub struct UseLabelProps {
-    on_mouse_down: Option<Callback<MouseEvent>>,
-}
-
-pub struct UseLabelAttrs {
-    on_mouse_down: Callback<MouseEvent>,
-}
-
-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::<web_sys::Element>(&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<Callback<MouseEvent>>,
-    #[prop(optional)] children: Option<Children>,
+    #[prop(into, optional)] on_mouse_down: MaybeCallback<MouseEvent>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    children: TypedChildrenFn<impl IntoView + 'static>,
 ) -> impl IntoView {
-    let UseLabelAttrs { on_mouse_down } = use_label(UseLabelProps { on_mouse_down });
-
     view! {
-        <label on:mousedown=move |event| on_mouse_down.run(event)>
-            {children.map(|children| children())}
-        </label>
-    }
-}
+        <Primitive
+            element=html::label
+            as_child=as_child
+            node_ref=node_ref
+            children=children
+            on:mousedown=move |event: MouseEvent| {
+                // Only prevent text selection if clicking inside the label itself.
+                let target = event_target::<web_sys::Element>(&event);
+                if target
+                    .closest("button, input, select, textarea")
+                    .expect("Element should be able to query closest.")
+                    .is_some()
+                {
+                    return;
+                }
 
-#[component]
-pub fn LabelAsChild<R, RV>(
-    #[prop(into, optional)] on_mouse_down: Option<Callback<MouseEvent>>,
-    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();
+                }
+            }
+        />
+    }
 }