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

feat: CSSTransition adds appear and hooks

Browse source
This commit is contained in:
luoxiao 2024-03-30 01:16:04 +08:00 • committed by luoxiaozero
parent 63564e814d
commit 32976ed6e1
2 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
demo/Trunk.toml
View file

@ -5,7 +5,13 @@ target = "index.html"
# filehash = false # filehash = false
[watch] [watch]
watch = ["../thaw", "./src", "../demo_markdown"] watch = [
"../thaw",
"../thaw_components",
"../thaw_utils",
"./src",
"../demo_markdown",
]
[serve] [serve]
address = "127.0.0.1" address = "127.0.0.1"

19
thaw_components/src/css_transition/mod.rs
View file

@ -10,8 +10,12 @@ pub fn CSSTransition<T, CF, IV>(
node_ref: NodeRef<T>, node_ref: NodeRef<T>,
#[prop(into)] show: MaybeSignal<bool>, #[prop(into)] show: MaybeSignal<bool>,
#[prop(into)] name: MaybeSignal<String>, #[prop(into)] name: MaybeSignal<String>,
#[prop(optional)] appear: bool,
#[prop(optional, into)] on_before_enter: Option<Callback<()>>,
#[prop(optional, into)] on_enter: Option<Callback<()>>, #[prop(optional, into)] on_enter: Option<Callback<()>>,
#[prop(optional, into)] on_after_enter: Option<Callback<()>>, #[prop(optional, into)] on_after_enter: Option<Callback<()>>,
#[prop(optional, into)] on_before_leave: Option<Callback<()>>,
#[prop(optional, into)] on_leave: Option<Callback<()>>,
#[prop(optional, into)] on_after_leave: Option<Callback<()>>, #[prop(optional, into)] on_after_leave: Option<Callback<()>>,
children: CF, children: CF,
) -> impl IntoView ) -> impl IntoView
@ -100,6 +104,9 @@ where
let on_enter_fn = { let on_enter_fn = {
let class_list = class_list.clone(); let class_list = class_list.clone();
Callback::new(move |name: String| { Callback::new(move |name: String| {
if let Some(on_before_enter) = on_before_enter {
on_before_enter.call(());
}
let enter_from = format!("{name}-enter-from"); let enter_from = format!("{name}-enter-from");
let enter_active = format!("{name}-enter-active"); let enter_active = format!("{name}-enter-active");
let enter_to = format!("{name}-enter-to"); let enter_to = format!("{name}-enter-to");
@ -130,6 +137,9 @@ where
let on_leave_fn = { let on_leave_fn = {
let class_list = class_list.clone(); let class_list = class_list.clone();
Callback::new(move |name: String| { Callback::new(move |name: String| {
if let Some(on_before_leave) = on_before_leave {
on_before_leave.call(());
}
let leave_from = format!("{name}-leave-from"); let leave_from = format!("{name}-leave-from");
let leave_active = format!("{name}-leave-active"); let leave_active = format!("{name}-leave-active");
let leave_to = format!("{name}-leave-to"); let leave_to = format!("{name}-leave-to");
@ -149,13 +159,20 @@ where
} }
}); });
on_end.call(remove); on_end.call(remove);
if let Some(on_leave) = on_leave {
on_leave.call(());
}
}); });
}) })
}; };
create_render_effect(move |prev: Option<bool>| { create_render_effect(move |prev: Option<bool>| {
let show = show.get(); let show = show.get();
let Some(prev) = prev else { let prev = if let Some(prev) = prev {
prev
} else if show && appear {
false
} else {
return show; return show;
}; };