adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Drawer and Modal esc close

Browse source
This commit is contained in:
luoxiao 2024-04-07 23:36:22 +08:00 • committed by luoxiaozero
parent d5410375bb
commit 51a509cb5e
5 changed files with 167 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
thaw/src/drawer/mod.rs
View file

@ -1,6 +1,6 @@
use crate::Card;
use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
use thaw_components::{CSSTransition, Teleport};
use leptos::*;
use thaw_components::{CSSTransition, FocusTrap, Teleport};
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model, OptionalProp};
#[component]
@ -60,31 +60,12 @@ pub fn Drawer(
};
let is_lock = RwSignal::new(show.get_untracked());
let esc_handle = StoredValue::new(None::<WindowListenerHandle>);
Effect::new(move |prev| {
Effect::new(move |_| {
let is_show = show.get();
if is_show {
is_lock.set(true);
is_css_transition.set(true);
}
if close_on_esc {
if is_show && !prev.unwrap_or(false) {
let handle = window_event_listener(ev::keydown, move |e| {
if &e.code() == "Escape" {
show.set(false);
}
});
esc_handle.set_value(Some(handle));
} else {
esc_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.remove();
}
})
}
}
is_show
});
use_lock_html_scroll(is_lock.into());
let on_after_leave = move |_| {
@ -97,16 +78,12 @@ pub fn Drawer(
show.set(false);
}
};
on_cleanup(move || {
esc_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.remove();
}
})
});
let on_esc = move |_: ev::KeyboardEvent| {
show.set(false);
};
view! {
<FocusTrap disabled=!close_on_esc active=show.signal() on_esc>
<div class="thaw-drawer-container" style=move || style.get()>
<CSSTransition
node_ref=mask_ref
@ -147,6 +124,7 @@ pub fn Drawer(
</div>
</CSSTransition>
</div>
</FocusTrap>
}
}

36
thaw/src/modal/mod.rs
View file

@ -1,6 +1,6 @@
use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon};
use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
use thaw_components::{CSSTransition, OptionComp, Teleport};
use leptos::*;
use thaw_components::{CSSTransition, FocusTrap, OptionComp, Teleport};
use thaw_utils::{mount_style, use_click_position, Model};
#[slot]
@ -22,30 +22,11 @@ pub fn Modal(
mount_style("modal", include_str!("./modal.css"));
let displayed = RwSignal::new(show.get_untracked());
let esc_handle = StoredValue::new(None::<WindowListenerHandle>);
Effect::new(move |prev| {
let is_show = show.get();
if prev.is_some() && is_show {
displayed.set(true);
}
if close_on_esc {
if is_show && !prev.unwrap_or(false) {
let handle = window_event_listener(ev::keydown, move |e| {
if &e.code() == "Escape" {
show.set(false);
}
});
esc_handle.set_value(Some(handle));
} else {
esc_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.remove();
}
})
}
}
is_show
});
let on_mask_click = move |_| {
@ -53,6 +34,9 @@ pub fn Modal(
show.set(false);
}
};
let on_esc = move |_: ev::KeyboardEvent| {
show.set(false);
};
let mask_ref = NodeRef::<html::Div>::new();
let scroll_ref = NodeRef::<html::Div>::new();
@ -79,16 +63,9 @@ pub fn Modal(
let _ = modal_el.attr("style", format!("transform-origin: {}px {}px", x, y));
});
on_cleanup(move || {
esc_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.remove();
}
})
});
view! {
<Teleport>
<FocusTrap disabled=!close_on_esc active=show.signal() on_esc>
<div
class="thaw-modal-container"
style:z-index=move || z_index.get()
@ -150,6 +127,7 @@ pub fn Modal(
</CSSTransition>
</div>
</div>
</FocusTrap>
</Teleport>
}
}

1
thaw_components/Cargo.toml
View file

@ -16,6 +16,7 @@ leptos = { version = "0.6.10" }
thaw_utils = { workspace = true }
web-sys = { version = "0.3.69", features = ["DomRect"] }
cfg-if = "1.0.0"
uuid = { version = "1.7.0", features = ["v4"] }
[features]
csr = ["leptos/csr"]

59
thaw_components/src/focus_trap/mod.rs Normal file
View file

@ -0,0 +1,59 @@
use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
use std::cell::RefCell;
#[cfg(any(feature = "csr", feature = "hydrate"))]
thread_local! {
static STACK: RefCell<Vec<uuid::Uuid>> = Default::default();
}
#[component]
pub fn FocusTrap(
disabled: bool,
#[prop(into)] active: MaybeSignal<bool>,
#[prop(into)] on_esc: Callback<ev::KeyboardEvent>,
children: Children,
) -> impl IntoView {
#[cfg(any(feature = "csr", feature = "hydrate"))]
if disabled == false {
let esc_handle = StoredValue::new(None::<WindowListenerHandle>);
let id = StoredValue::new(uuid::Uuid::new_v4());
let is_current_active =
move || STACK.with_borrow(|stack| id.with_value(|id| stack.last() == Some(id)));
let deactivate = move || {
esc_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.remove();
}
});
STACK.with_borrow_mut(|stack| stack.retain(|value| id.with_value(|id| id != value)));
};
Effect::new(move |prev| {
let is_active = active.get();
if is_active && !prev.unwrap_or(false) {
let handle = window_event_listener(ev::keydown, move |e| {
if &e.code() == "Escape" {
if is_current_active() {
on_esc.call(e);
}
}
});
esc_handle.set_value(Some(handle));
STACK.with_borrow_mut(|stack| {
stack.push(id.get_value());
});
} else {
deactivate();
}
is_active
});
on_cleanup(move || {
deactivate();
});
}
children()
}

2
thaw_components/src/lib.rs
View file

@ -1,5 +1,6 @@
mod binder;
mod css_transition;
mod focus_trap;
mod if_comp;
mod option_comp;
mod teleport;
@ -7,6 +8,7 @@ mod wave;
pub use binder::{Binder, Follower, FollowerPlacement, FollowerWidth};
pub use css_transition::CSSTransition;
pub use focus_trap::FocusTrap;
pub use if_comp::{ElseIf, If, Then};
pub use option_comp::OptionComp;
pub use teleport::Teleport;