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

feat: loading bar transition end

Browse source
This commit is contained in:
luoxiao 2023-11-07 11:02:48 +08:00
parent a05cda35d7
commit 0ab779041f
6 changed files with 105 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/gh-pages

@ -1 +0,0 @@
Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

13
demo/src/app.rs
View file

@ -31,8 +31,16 @@ pub fn App() -> impl IntoView {
#[component]
fn TheRouter() -> impl IntoView {
let loading_bar = use_loading_bar();
let set_is_routing = SignalSetter::map(move |is_routing| {
if is_routing {
loading_bar.start();
} else {
loading_bar.finish();
}
});
view! {
<Router base="/thaw">
<Router base="/thaw" set_is_routing>
<Routes base="/thaw".to_string()>
<Route path="/" view=Home/>
<Route path="/components" view=ComponentsPage>
@ -66,6 +74,7 @@ fn TheRouter() -> impl IntoView {
<Route path="/switch" view=SwitchPage/>
<Route path="/tag" view=TagPage/>
<Route path="/upload" view=UploadPage/>
<Route path="/loading-bar" view=LoadingBarPage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>
@ -81,7 +90,9 @@ fn Provider(theme: RwSignal<Theme>, children: Children) -> impl IntoView {
<ThemeProvider theme>
<GlobalStyle />
<MessageProvider>
<LoadingBarProvider>
{children()}
</LoadingBarProvider>
</MessageProvider>
</ThemeProvider>
}

4
demo/src/pages/components.rs
View file

@ -167,6 +167,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
MenuGroupOption {
label: "Navigation Components".into(),
children: vec![
MenuItemOption {
value: "loading-bar".into(),
label: "Loading Bar".into(),
},
MenuItemOption {
value: "menu".into(),
label: "Menu".into(),

62
demo/src/pages/loading_bar/mod.rs Normal file
View file

@ -0,0 +1,62 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn LoadingBarPage() -> impl IntoView {
let loading_bar = use_loading_bar();
let start = move |_| {
loading_bar.start();
};
let finish = move |_| {
loading_bar.finish();
};
let error = move |_| {
loading_bar.error();
};
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Loading Bar"</h1>
<Alert variant=AlertVariant::Warning title="Prerequisite">
"If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API."
</Alert>
<Demo>
<Space>
<Button on_click=start>"start"</Button>
<Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button>
</Space>
<DemoCode
slot
html=highlight_str!(
r#"
let loading_bar = use_loading_bar();
let start = move |_| {
loading_bar.start();
};
let finish = move |_| {
loading_bar.finish();
};
let error = move |_| {
loading_bar.error();
};
view! {
<Space>
<Button on_click=start>"start"</Button>
<Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button>
</Space>
}
"#,
"rust"
)
>
""
""
</DemoCode>
</Demo>
</div>
}
}

2
demo/src/pages/mod.rs
View file

@ -14,6 +14,7 @@ mod icon;
mod image;
mod input;
mod input_number;
mod loading_bar;
mod menu;
mod message;
mod mobile;
@ -48,6 +49,7 @@ pub use icon::*;
pub use image::*;
pub use input::*;
pub use input_number::*;
pub use loading_bar::*;
pub use menu::*;
pub use message::*;
pub use mobile::*;

38
src/loading_bar/mod.rs
View file

@ -5,7 +5,7 @@ use leptos::*;
pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
#[derive(Clone)]
pub struct LoadingBarRef {
pub(crate) struct LoadingBarRef {
start: Callback<()>,
finish: Callback<()>,
error: Callback<()>,
@ -24,7 +24,7 @@ impl LoadingBarRef {
}
#[component]
pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
mount_style("loading-bar", include_str!("./loading-bar.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
@ -57,15 +57,20 @@ pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> im
.style("max-width", "80%");
}
});
let is_on_transitionend = store_value(false);
let on_transitionend = move |_| {
if is_on_transitionend.get_value() {
is_on_transitionend.set_value(false);
loading.set(false);
}
};
let finish = Callback::new(move |_| {
if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
let loading_bar_ref = loading_bar_ref
loading_bar_ref
.style("background-color", "var(--thaw-background-color)")
.style("transition", "max-width 0.5s linear")
.style("max-width", "1000%");
loading_bar_ref.on(ev::transitionend, move |_| {
loading.set(false);
});
.style("max-width", "100%");
is_on_transitionend.set_value(true);
}
});
let error = Callback::new(move |_| {
@ -78,13 +83,11 @@ pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> im
.style("max-width", "0");
_ = loading_bar_ref.offset_width();
}
let loading_bar_ref = loading_bar_ref
loading_bar_ref
.style("background-color", "var(--thaw-background-color-error)")
.style("transition", "max-width 0.5s linear")
.style("max-width", "100%");
loading_bar_ref.on(ev::transitionend, move |_| {
loading.set(false);
});
is_on_transitionend.set_value(true);
}
});
@ -94,9 +97,16 @@ pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> im
error,
});
view! {
<div class="thaw-loading-bar-container">
<div class="thaw-loading-bar" ref=loading_bar_ref style=move || css_vars.get()>
</div>
<div
class="thaw-loading-bar-container"
style=move || (!loading.get()).then(|| "display: none;")
>
<div
class="thaw-loading-bar"
ref=loading_bar_ref
style=move || css_vars.get()
on:transitionend=on_transitionend
></div>
</div>
}
}