Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/component click outside #334

Merged
merged 2 commits into from
Dec 5, 2024
Merged

Fix/component click outside #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
292a6a4
fix: Clicking the outer part of the Popover component does not close
luoxiaozero Dec 5, 2024
d2603c4
fix: Clicking the outer part of the Menu component does not close
luoxiaozero Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 41 additions & 30 deletions thaw/src/menu/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ pub use menu_item::*;
use crate::ConfigInjection;
use leptos::{
context::Provider,
either::Either,
ev::{self, on},
html::Div,
leptos_dom::helpers::TimeoutHandle,
Expand All @@ -13,10 +14,7 @@ use leptos::{
};
use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{
add_event_listener, call_on_click_outside, class_list, mount_style, ArcOneCallback,
BoxCallback, BoxOneCallback,
};
use thaw_utils::{class_list, mount_style, on_click_outside, ArcOneCallback, BoxOneCallback};

#[slot]
pub struct MenuTrigger<T> {
Expand Down Expand Up @@ -47,7 +45,6 @@ where
let config_provider = ConfigInjection::expect_context();

let menu_ref = NodeRef::<Div>::new();
let target_ref = NodeRef::<thaw_utils::Element>::new();
let is_show_menu = RwSignal::new(false);
let show_menu_handle = StoredValue::new(None::<TimeoutHandle>);

Expand Down Expand Up @@ -80,27 +77,47 @@ where
});
};

if trigger_type != MenuTriggerType::Hover {
call_on_click_outside(menu_ref, BoxCallback::new(move || is_show_menu.set(false)));
}

Effect::new(move |_| {
let Some(target_el) = target_ref.get() else {
return;
};
let handler = add_event_listener(target_el, ev::click, move |event| {
if trigger_type != MenuTriggerType::Click {
return;
}
event.stop_propagation();
is_show_menu.update(|show| *show = !*show);
});
on_cleanup(move || handler.remove());
});

let MenuTrigger {
children: trigger_children,
} = menu_trigger;
let trigger_children = trigger_children.into_inner()()
.into_inner()
.add_any_attr(tachys_class(("thaw-menu-trigger", true)));

let trigger_children = match trigger_type {
MenuTriggerType::Click => {
let trigger_ref = NodeRef::<thaw_utils::Element>::new();
on_click_outside(
move || {
if !is_show_menu.get_untracked() {
return None;
}
let Some(trigger_el) = trigger_ref.get_untracked() else {
return None;
};
let Some(menu_el) = menu_ref.get_untracked() else {
return None;
};
Some(vec![menu_el.into(), trigger_el])
},
move || is_show_menu.set(false),
);
Either::Left(
trigger_children
.add_any_attr(node_ref(trigger_ref))
.add_any_attr(on(ev::click, move |_| {
is_show_menu.update(|show| {
*show = !*show;
});
})),
)
}
MenuTriggerType::Hover => Either::Right(
trigger_children
.add_any_attr(on(ev::mouseenter, on_mouse_enter))
.add_any_attr(on(ev::mouseleave, on_mouse_leave)),
),
};

let menu_injection = MenuInjection {
has_icon: RwSignal::new(false),
Expand All @@ -112,13 +129,7 @@ where

view! {
<Binder>
{trigger_children
.into_inner()()
.into_inner()
.add_any_attr(tachys_class(("thaw-menu-trigger", true)))
.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))}
{trigger_children}
<Follower slot show=is_show_menu placement=position>
<Provider value=menu_injection>
<CSSTransition
Expand Down
100 changes: 44 additions & 56 deletions thaw/src/popover/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ pub use types::*;

use crate::ConfigInjection;
use leptos::{
either::Either,
ev::{self, on},
html,
leptos_dom::helpers::TimeoutHandle,
Expand All @@ -12,7 +13,7 @@ use leptos::{
};
use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower};
use thaw_utils::{add_event_listener, class_list, mount_style, BoxCallback};
use thaw_utils::{class_list, mount_style, on_click_outside, BoxCallback};

#[component]
pub fn Popover<T>(
Expand Down Expand Up @@ -41,7 +42,6 @@ where
let config_provider = ConfigInjection::expect_context();

let popover_ref = NodeRef::<html::Div>::new();
let target_ref = NodeRef::<thaw_utils::Element>::new();
let is_show_popover = RwSignal::new(false);
let show_popover_handle = StoredValue::new(None::<TimeoutHandle>);

Expand Down Expand Up @@ -93,67 +93,55 @@ where
.ok();
});
};
#[cfg(any(feature = "csr", feature = "hydrate"))]
{
let handle = window_event_listener(ev::click, move |ev| {
use leptos::wasm_bindgen::__rt::IntoJsResult;
if trigger_type != PopoverTriggerType::Click {
return;
}
if !is_show_popover.get_untracked() {
return;
}
let el = ev.target();
let mut el: Option<web_sys::Element> =
el.into_js_result().map_or(None, |el| Some(el.into()));
let body = document().body().unwrap();
while let Some(current_el) = el {
if current_el == *body {
break;
};
let Some(popover_el) = popover_ref.get_untracked() else {
break;
};
if current_el == **popover_el {
return;
}
el = current_el.parent_element();
}
is_show_popover.set(false);
});
on_cleanup(move || handle.remove());
}

Effect::new(move |_| {
let Some(target_el) = target_ref.get() else {
return;
};
let handler = add_event_listener(target_el, ev::click, move |event| {
if trigger_type != PopoverTriggerType::Click {
return;
}
event.stop_propagation();
is_show_popover.update(|show| *show = !*show);
});
on_cleanup(move || handler.remove());
});

let PopoverTrigger {
children: trigger_children,
} = popover_trigger;
let trigger_children = 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()
})));

let trigger_children = match trigger_type {
PopoverTriggerType::Click => {
let trigger_ref = NodeRef::<thaw_utils::Element>::new();
on_click_outside(
move || {
if !is_show_popover.get_untracked() {
return None;
}
let Some(trigger_el) = trigger_ref.get_untracked() else {
return None;
};
let Some(popover_el) = popover_ref.get_untracked() else {
return None;
};
Some(vec![popover_el.into(), trigger_el])
},
move || is_show_popover.set(false),
);
Either::Left(
trigger_children
.add_any_attr(node_ref(trigger_ref))
.add_any_attr(on(ev::click, move |_| {
is_show_popover.update(|show| {
*show = !*show;
});
})),
)
}
PopoverTriggerType::Hover => Either::Right(
trigger_children
.add_any_attr(on(ev::mouseenter, on_mouse_enter))
.add_any_attr(on(ev::mouseleave, on_mouse_leave)),
),
};

view! {
<Binder>
{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))}
{trigger_children}
<Follower slot show=is_show_popover placement=position>
<CSSTransition
name="popover-transition"
Expand Down
26 changes: 26 additions & 0 deletions thaw_utils/src/on_click_outside.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,29 @@ pub fn call_on_click_outside_with_list(refs: Vec<NodeRef<Div>>, on_click: BoxCal
let _ = on_click;
}
}

pub fn on_click_outside<EF, CF>(els: EF, on_click: CF)
where
EF: Fn() -> Option<Vec<web_sys::Element>> + 'static,
CF: Fn() + 'static,
{
#[cfg(any(feature = "csr", feature = "hydrate"))]
{
let handle = window_event_listener(::leptos::ev::click, move |ev| {
let Some(els) = els() else {
return;
};
let composed_path = ev.composed_path();
if els.iter().any(|el| composed_path.includes(&el, 0)) {
return;
}
on_click();
});
on_cleanup(move || handle.remove());
}
#[cfg(not(any(feature = "csr", feature = "hydrate")))]
{
let _ = els;
let _ = on_click;
}
}
Loading