feat: PopoverTrigger can only contain one child

thaw-ui · Dec 1, 2024 · f82d8a3 · f82d8a3
1 parent 76a7d2f
commit f82d8a3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/thaw/src/popover/docs/mod.md b/thaw/src/popover/docs/mod.md
@@ -1,5 +1,26 @@
 # Popover
 
+
+```rust
+/// Prerequisite
+/// PopoverTrigger can only contain one child.
+view!{
+    // ✅
+    <PopoverTrigger slot>
+        <button>"Click"</button>
+    </PopoverTrigger>
+    // ✅
+    <PopoverTrigger slot>
+        <Button>"Click"</Button>
+    </PopoverTrigger>
+    // 🙅
+    <PopoverTrigger slot>
+        <button>"Click"</button>
+        <button>"Click"</button>
+    </PopoverTrigger>
+}
+```
+
 ```rust demo
 view! {
     <Space>

diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
@@ -3,19 +3,25 @@ mod types;
 pub use types::*;
 
 use crate::ConfigInjection;
-use leptos::{ev, html, leptos_dom::helpers::TimeoutHandle, prelude::*};
+use leptos::{
+    ev::{self, on},
+    html,
+    leptos_dom::helpers::TimeoutHandle,
+    prelude::*,
+    tachys::html::{class::class as tachys_class, node_ref::node_ref},
+};
 use std::time::Duration;
 use thaw_components::{Binder, CSSTransition, Follower};
 use thaw_utils::{add_event_listener, class_list, mount_style, BoxCallback};
 
 #[component]
-pub fn Popover(
+pub fn Popover<T>(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Action that displays the popover.
     #[prop(optional)]
     trigger_type: PopoverTriggerType,
     /// The element or component that triggers popover.
-    popover_trigger: PopoverTrigger,
+    popover_trigger: PopoverTrigger<T>,
     /// Configures the position of the Popover.
     #[prop(optional)]
     position: PopoverPosition,
@@ -27,7 +33,10 @@ pub fn Popover(
     #[prop(optional, into)] on_open: Option<BoxCallback>,
     #[prop(optional, into)] on_close: Option<BoxCallback>,
     children: Children,
-) -> impl IntoView {
+) -> impl IntoView
+where
+    T: AddAnyAttr + IntoView + Send + 'static,
+{
     mount_style("popover", include_str!("./popover.css"));
     let config_provider = ConfigInjection::expect_context();
 
@@ -130,24 +139,21 @@ pub fn Popover(
     });
 
     let PopoverTrigger {
-        class: trigger_class,
         children: trigger_children,
     } = popover_trigger;
 
     view! {
         <Binder target_ref>
-            <div
-                class=class_list![
-                    "thaw-popover-trigger",
-                    move || is_show_popover.get().then(|| "thaw-popover-trigger--open".to_string()),
-                    trigger_class
-                ]
-                node_ref=target_ref
-                on:mouseenter=on_mouse_enter
-                on:mouseleave=on_mouse_leave
-            >
-                {trigger_children()}
-            </div>
+            {trigger_children
+                .into_inner()()
+                .into_inner()
+                .add_any_attr(tachys_class(("thaw-popover-trigger", true)))
+                .add_any_attr(
+                    tachys_class(("thaw-popover-trigger--open", move || is_show_popover.get())),
+                )
+                .add_any_attr(node_ref(target_ref))
+                .add_any_attr(on(ev::mouseenter, on_mouse_enter))
+                .add_any_attr(on(ev::mouseleave, on_mouse_leave))}
             <Follower slot show=is_show_popover placement=position>
                 <CSSTransition
                     node_ref=popover_ref

diff --git a/thaw/src/popover/popover.css b/thaw/src/popover/popover.css
@@ -39,10 +39,6 @@ div.thaw-popover-surface--inverted {
     height: 10px;
 }
 
-.thaw-popover-trigger {
-    display: inline-block;
-}
-
 [data-thaw-placement="top-start"] > .thaw-popover-surface,
 [data-thaw-placement="top-end"] > .thaw-popover-surface,
 [data-thaw-placement="top"] > .thaw-popover-surface {

diff --git a/thaw/src/popover/types.rs b/thaw/src/popover/types.rs
@@ -80,8 +80,6 @@ impl From<PopoverPosition> for FollowerPlacement {
 }
 
 #[slot]
-pub struct PopoverTrigger {
-    #[prop(optional, into)]
-    class: MaybeProp<String>,
-    children: Children,
+pub struct PopoverTrigger<T> {
+    children: TypedChildren<T>,
 }