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

fix: Drawer cannot be closed when the placement is changed (#115)

Browse source
This commit is contained in:
luoxiaozero 2024-02-24 13:03:16 +08:00 • committed by GitHub
parent 1dbe00b5af
commit 7c01e7e56d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
demo/src/components/syntect-css.css
View file

@ -1,5 +1,10 @@
/** https://github.com/AmjadHD/sublime_one_theme */
.syntect-comment {
font-style: italic;
color: hsl(220, 10%, 40%);
}
/** light */
.color-scheme--light .syntect-support.syntect-function,

2
demo_markdown/docs/drawer/mod.md
View file

@ -5,6 +5,8 @@ let show = create_rw_signal(false);
let placement = create_rw_signal(DrawerPlacement::Top);
let open = Callback::new(move |new_placement: DrawerPlacement| {
// Note: Since `show` changes are made in real time,
// please put it in front of `show.set(true)` when changing `placement`.
placement.set(new_placement);
show.set(true);
});

4
thaw/src/components/css_transition/mod.rs
View file

@ -7,6 +7,7 @@ pub fn CSSTransition<T, CF, IV>(
#[prop(into)] show: MaybeSignal<bool>,
#[prop(into)] name: MaybeSignal<String>,
#[prop(optional, into)] on_enter: Option<Callback<()>>,
#[prop(optional, into)] on_after_enter: Option<Callback<()>>,
#[prop(optional, into)] on_after_leave: Option<Callback<()>>,
children: CF,
) -> impl IntoView
@ -28,6 +29,9 @@ where
match class {
RemoveClassName::Enter(active, to) => {
let _ = class_list.remove_2(&active, &to);
if let Some(on_after_enter) = on_after_enter {
on_after_enter.call(());
}
}
RemoveClassName::Leave(active, to) => {
let _ = class_list.remove_2(&active, &to);

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

@ -40,15 +40,29 @@ pub fn Drawer(
let mask_ref = NodeRef::<html::Div>::new();
let drawer_ref = NodeRef::<html::Div>::new();
let is_css_transition = RwSignal::new(false);
let placement = Memo::new(move |_| {
if is_css_transition.get() {
placement.get_untracked().as_str()
} else {
placement.get_untracked().as_str()
}
});
let on_after_enter = move |_| {
is_css_transition.set(false);
};
let is_lock = RwSignal::new(show.get_untracked());
Effect::new(move |_| {
if show.get() {
is_lock.set(true);
is_css_transition.set(true);
}
});
use_lock_html_scroll(is_lock.into());
let on_after_leave = move |_| {
is_lock.set(false);
is_css_transition.set(false);
};
view! {
@ -70,15 +84,17 @@ pub fn Drawer(
node_ref=drawer_ref
show=show.signal()
name=Memo::new(move |_| {
format!("slide-in-from-{}-transition", placement.get().as_str())
format!("slide-in-from-{}-transition", placement.get())
})
on_after_enter
on_after_leave
let:display
>
<div
class=class_list![
"thaw-drawer", move || format!("thaw-drawer--placement-{}", placement
.get().as_str()), class.map(| c | move || c.get())
.get()), class.map(| c | move || c.get())
]
style=move || display.get()