mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
feat(leptos-v0.7): error
This commit is contained in:
parent
8ccef81e44
commit
54b23447ee
16 changed files with 91 additions and 48 deletions
|
@ -16,5 +16,5 @@ thaw_components = { version = "0.1.1", path = "./thaw_components" }
|
|||
thaw_macro = { version = "0.1.0", path = "./thaw_macro" }
|
||||
thaw_utils = { version = "0.0.3", path = "./thaw_utils" }
|
||||
|
||||
leptos = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
|
||||
leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
|
||||
leptos = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
|
||||
leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
|
|
@ -9,14 +9,14 @@ edition = "2021"
|
|||
[dependencies]
|
||||
leptos = { workspace = true }
|
||||
leptos_meta = { workspace = true }
|
||||
leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
|
||||
leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
|
||||
thaw = { path = "../thaw" }
|
||||
demo_markdown = { path = "../demo_markdown" }
|
||||
icondata = "0.3.0"
|
||||
palette = "0.7.4"
|
||||
chrono = "0.4.33"
|
||||
cfg-if = "1.0.0"
|
||||
leptos-use = "0.10.10"
|
||||
# leptos-use = "0.10.10"
|
||||
send_wrapper = "0.6"
|
||||
|
||||
[features]
|
||||
|
|
|
@ -30,7 +30,7 @@ pub fn App() -> impl IntoView {
|
|||
|
||||
#[component]
|
||||
fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
||||
let loading_bar = use_loading_bar();
|
||||
let loading_bar = LoadingBarInjection::expect_use();
|
||||
_ = is_routing.watch(move |is_routing| {
|
||||
if *is_routing {
|
||||
loading_bar.start();
|
||||
|
|
|
@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
|
|||
<Button
|
||||
appearance=ButtonAppearance::Primary
|
||||
on_click=move |_| {
|
||||
let navigate = use_navigate();
|
||||
let navigate = use_navigate();
|
||||
navigate("/components/button", Default::default());
|
||||
}
|
||||
>
|
||||
|
|
|
@ -10,16 +10,16 @@
|
|||
</MessageBar>
|
||||
|
||||
```rust demo
|
||||
let loading_bar = use_loading_bar();
|
||||
let start = Callback::new(move |_| {
|
||||
let loading_bar = LoadingBarInjection::expect_use();
|
||||
let start = move |_| {
|
||||
loading_bar.start();
|
||||
});
|
||||
let finish = Callback::new(move |_| {
|
||||
};
|
||||
let finish = move |_| {
|
||||
loading_bar.finish();
|
||||
});
|
||||
let error = Callback::new(move |_| {
|
||||
};
|
||||
let error = move |_| {
|
||||
loading_bar.error();
|
||||
});
|
||||
};
|
||||
|
||||
view! {
|
||||
<Space>
|
||||
|
|
|
@ -28,7 +28,7 @@ web-sys = { version = "0.3.69", features = [
|
|||
wasm-bindgen = "0.2.92"
|
||||
icondata_core = "0.1.0"
|
||||
icondata_ai = "0.0.10"
|
||||
uuid = { version = "1.7.0", features = ["v4"] }
|
||||
uuid = { version = "1.10.0", features = ["v4", "js"] }
|
||||
cfg-if = "1.0.0"
|
||||
chrono = "0.4.35"
|
||||
palette = "0.7.5"
|
||||
|
|
|
@ -132,9 +132,9 @@ pub fn AutoComplete(
|
|||
//}
|
||||
//}
|
||||
//};
|
||||
input_ref.on_load(move |_| {
|
||||
comp_ref.load(AutoCompleteRef { input_ref });
|
||||
});
|
||||
comp_ref.load(AutoCompleteRef { input_ref });
|
||||
// input_ref.on_load(move |_| {
|
||||
// });
|
||||
|
||||
view! {
|
||||
<Binder target_ref=auto_complete_ref>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
use leptos::prelude::*;
|
||||
use thaw_components::OptionComp;
|
||||
use leptos::{either::Either, prelude::*};
|
||||
use thaw_utils::{class_list, mount_style};
|
||||
|
||||
#[component]
|
||||
|
@ -26,9 +25,13 @@ pub fn Badge(
|
|||
move || format!("thaw-badge--{}", color.get().as_str()),
|
||||
class
|
||||
]>
|
||||
<OptionComp value=children let:children>
|
||||
{children()}
|
||||
</OptionComp>
|
||||
{
|
||||
if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -26,6 +26,10 @@ pub struct LoadingBarInjection {
|
|||
impl Copy for LoadingBarInjection {}
|
||||
|
||||
impl LoadingBarInjection {
|
||||
pub fn expect_use() -> Self {
|
||||
expect_context::<Self>()
|
||||
}
|
||||
|
||||
pub fn start(&self) {
|
||||
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
|
||||
loading_bar_ref.start();
|
||||
|
@ -44,7 +48,3 @@ impl LoadingBarInjection {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn use_loading_bar() -> LoadingBarInjection {
|
||||
expect_context::<LoadingBarInjection>()
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
mod loading_bar_provider;
|
||||
|
||||
pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
|
||||
pub use loading_bar_provider::*;
|
||||
|
||||
use crate::ConfigInjection;
|
||||
use leptos::{html, prelude::*};
|
||||
|
@ -26,7 +26,7 @@ impl LoadingBarRef {
|
|||
}
|
||||
|
||||
#[component]
|
||||
pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
|
||||
fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
|
||||
mount_style("loading-bar", include_str!("./loading-bar.css"));
|
||||
let config_provider = ConfigInjection::use_();
|
||||
let loading_bar_ref = NodeRef::<html::Div>::new();
|
||||
|
@ -83,7 +83,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
|
|||
<div
|
||||
class="thaw-config-provider thaw-loading-bar-container"
|
||||
data-thaw-id=config_provider.id().clone()
|
||||
style=move || (!loading.get()).then_some("display: none;").unwrap_or_default()
|
||||
style=move || if loading.get() { "" } else { "display: none;" }
|
||||
>
|
||||
<div
|
||||
class="thaw-loading-bar"
|
||||
|
|
|
@ -105,6 +105,7 @@ impl SpaceJustify {
|
|||
|
||||
#[cfg(test)]
|
||||
mod test {
|
||||
#[test]
|
||||
fn main() {
|
||||
use leptos::prelude::*;
|
||||
use super::Space;
|
||||
|
|
|
@ -16,7 +16,7 @@ leptos = { workspace = true }
|
|||
thaw_utils = { workspace = true }
|
||||
web-sys = { version = "0.3.69", features = ["DomRect"] }
|
||||
cfg-if = "1.0.0"
|
||||
uuid = { version = "1.7.0", features = ["v4"] }
|
||||
uuid = { version = "1.10.0", features = ["v4", "js"] }
|
||||
send_wrapper = "0.6"
|
||||
|
||||
[features]
|
||||
|
|
|
@ -30,28 +30,35 @@ pub fn Teleport(
|
|||
let render_root = element;
|
||||
let mut mountable = render_root.build();
|
||||
mountable.mount(&mount, None);
|
||||
// TODO
|
||||
// on_cleanup(move || {
|
||||
// mountable.unmount();
|
||||
// });
|
||||
on_cleanup({
|
||||
let mut mountable = send_wrapper::SendWrapper::new(mountable);
|
||||
move || {
|
||||
mountable.unmount();
|
||||
}
|
||||
});
|
||||
} else if let Some(children) = children.take() {
|
||||
let container = document()
|
||||
.create_element("div")
|
||||
.expect("element creation to work");
|
||||
|
||||
thaw_utils::with_hydration_off(|| {
|
||||
// use leptos::leptos_dom::Mountable;
|
||||
// let _ = container.append_child(&children().into_view().get_mountable_node());
|
||||
let mountable = thaw_utils::with_hydration_off(|| {
|
||||
let view = children().into_view();
|
||||
let mut mountable = view.build();
|
||||
mountable.mount(&container, None);
|
||||
mountable
|
||||
});
|
||||
|
||||
let render_root = container;
|
||||
let _ = mount.append_child(&render_root);
|
||||
// on_cleanup(move || {
|
||||
// let _ = mount.remove_child(&render_root);
|
||||
// });
|
||||
on_cleanup({
|
||||
let mount = send_wrapper::SendWrapper::new(mount);
|
||||
let render_root = send_wrapper::SendWrapper::new(render_root);
|
||||
let mut mountable = send_wrapper::SendWrapper::new(mountable);
|
||||
move || {
|
||||
mountable.unmount();
|
||||
let _ = mount.remove_child(&render_root);
|
||||
}
|
||||
});
|
||||
}
|
||||
})));
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@ license = "MIT"
|
|||
|
||||
[dependencies]
|
||||
leptos = { workspace = true }
|
||||
leptos_meta = { version = "0.6.10", optional = true }
|
||||
leptos_meta = { workspace = true, optional = true }
|
||||
web-sys = "0.3.69"
|
||||
wasm-bindgen = "0.2.92"
|
||||
cfg-if = "1.0.0"
|
||||
|
|
|
@ -3,7 +3,6 @@ use leptos::reactive_graph::wrappers::read::MaybeSignal;
|
|||
pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
|
||||
#[cfg(any(feature = "csr", feature = "hydrate"))]
|
||||
{
|
||||
// use leptos::{create_render_effect, document, on_cleanup, SignalGet, StoredValue};
|
||||
use leptos::prelude::{
|
||||
document, effect::RenderEffect, on_cleanup, traits::Get, StoredValue,
|
||||
};
|
||||
|
@ -19,7 +18,7 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
|
|||
});
|
||||
};
|
||||
|
||||
let _ = RenderEffect::new(move |_| {
|
||||
let effect = RenderEffect::new(move |_| {
|
||||
if is_lock.get() {
|
||||
let head = document().head().expect("head no exist");
|
||||
let style = document()
|
||||
|
@ -36,7 +35,10 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
|
|||
}
|
||||
});
|
||||
|
||||
on_cleanup(remove_style_el)
|
||||
on_cleanup(move || {
|
||||
drop(effect);
|
||||
remove_style_el();
|
||||
});
|
||||
}
|
||||
|
||||
#[cfg(not(any(feature = "csr", feature = "hydrate")))]
|
||||
|
|
|
@ -4,9 +4,10 @@
|
|||
// };
|
||||
|
||||
use leptos::{
|
||||
prelude::{request_animation_frame_with_handle, AnimationFrameRequestHandle},
|
||||
prelude::window,
|
||||
reactive_graph::owner::{on_cleanup, StoredValue},
|
||||
};
|
||||
use wasm_bindgen::{closure::Closure, JsCast, JsValue, UnwrapThrowExt};
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct NextFrame(StoredValue<Option<AnimationFrameRequestHandle>>);
|
||||
|
@ -35,10 +36,9 @@ impl NextFrame {
|
|||
|
||||
let next_frame_hadnle = self.0.clone();
|
||||
let handle = request_animation_frame_with_handle(move || {
|
||||
let handle = request_animation_frame_with_handle(cb).unwrap();
|
||||
let handle = request_animation_frame_with_handle(cb);
|
||||
next_frame_hadnle.set_value(Some(handle));
|
||||
})
|
||||
.unwrap();
|
||||
});
|
||||
self.0.set_value(Some(handle));
|
||||
}
|
||||
|
||||
|
@ -50,3 +50,33 @@ impl NextFrame {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
|
||||
pub struct AnimationFrameRequestHandle(i32);
|
||||
|
||||
impl AnimationFrameRequestHandle {
|
||||
pub fn cancel(&self) {
|
||||
let _ = window().cancel_animation_frame(self.0);
|
||||
}
|
||||
}
|
||||
|
||||
fn request_animation_frame_with_handle(cb: impl FnOnce() + 'static) -> AnimationFrameRequestHandle {
|
||||
#[inline(never)]
|
||||
fn raf(cb: JsValue) -> Result<AnimationFrameRequestHandle, JsValue> {
|
||||
window()
|
||||
.request_animation_frame(cb.as_ref().unchecked_ref())
|
||||
.map(AnimationFrameRequestHandle)
|
||||
}
|
||||
|
||||
raf(closure_once(cb)).expect_throw("request_animation_frame_with_handle")
|
||||
}
|
||||
|
||||
fn closure_once(cb: impl FnOnce() + 'static) -> JsValue {
|
||||
let mut wrapped_cb: Option<Box<dyn FnOnce()>> = Some(Box::new(cb));
|
||||
let closure = Closure::new(move || {
|
||||
if let Some(cb) = wrapped_cb.take() {
|
||||
cb()
|
||||
}
|
||||
});
|
||||
closure.into_js_value()
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue