mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 06:19: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_macro = { version = "0.1.0", path = "./thaw_macro" }
|
||||||
thaw_utils = { version = "0.0.3", path = "./thaw_utils" }
|
thaw_utils = { version = "0.0.3", path = "./thaw_utils" }
|
||||||
|
|
||||||
leptos = { 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 = "ae0dc13c" }
|
leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
|
|
@ -9,14 +9,14 @@ edition = "2021"
|
||||||
[dependencies]
|
[dependencies]
|
||||||
leptos = { workspace = true }
|
leptos = { workspace = true }
|
||||||
leptos_meta = { 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" }
|
thaw = { path = "../thaw" }
|
||||||
demo_markdown = { path = "../demo_markdown" }
|
demo_markdown = { path = "../demo_markdown" }
|
||||||
icondata = "0.3.0"
|
icondata = "0.3.0"
|
||||||
palette = "0.7.4"
|
palette = "0.7.4"
|
||||||
chrono = "0.4.33"
|
chrono = "0.4.33"
|
||||||
cfg-if = "1.0.0"
|
cfg-if = "1.0.0"
|
||||||
leptos-use = "0.10.10"
|
# leptos-use = "0.10.10"
|
||||||
send_wrapper = "0.6"
|
send_wrapper = "0.6"
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
|
|
|
@ -30,7 +30,7 @@ pub fn App() -> impl IntoView {
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
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| {
|
_ = is_routing.watch(move |is_routing| {
|
||||||
if *is_routing {
|
if *is_routing {
|
||||||
loading_bar.start();
|
loading_bar.start();
|
||||||
|
|
|
@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
|
||||||
<Button
|
<Button
|
||||||
appearance=ButtonAppearance::Primary
|
appearance=ButtonAppearance::Primary
|
||||||
on_click=move |_| {
|
on_click=move |_| {
|
||||||
let navigate = use_navigate();
|
let navigate = use_navigate();
|
||||||
navigate("/components/button", Default::default());
|
navigate("/components/button", Default::default());
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
@ -10,16 +10,16 @@
|
||||||
</MessageBar>
|
</MessageBar>
|
||||||
|
|
||||||
```rust demo
|
```rust demo
|
||||||
let loading_bar = use_loading_bar();
|
let loading_bar = LoadingBarInjection::expect_use();
|
||||||
let start = Callback::new(move |_| {
|
let start = move |_| {
|
||||||
loading_bar.start();
|
loading_bar.start();
|
||||||
});
|
};
|
||||||
let finish = Callback::new(move |_| {
|
let finish = move |_| {
|
||||||
loading_bar.finish();
|
loading_bar.finish();
|
||||||
});
|
};
|
||||||
let error = Callback::new(move |_| {
|
let error = move |_| {
|
||||||
loading_bar.error();
|
loading_bar.error();
|
||||||
});
|
};
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Space>
|
<Space>
|
||||||
|
|
|
@ -28,7 +28,7 @@ web-sys = { version = "0.3.69", features = [
|
||||||
wasm-bindgen = "0.2.92"
|
wasm-bindgen = "0.2.92"
|
||||||
icondata_core = "0.1.0"
|
icondata_core = "0.1.0"
|
||||||
icondata_ai = "0.0.10"
|
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"
|
cfg-if = "1.0.0"
|
||||||
chrono = "0.4.35"
|
chrono = "0.4.35"
|
||||||
palette = "0.7.5"
|
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! {
|
view! {
|
||||||
<Binder target_ref=auto_complete_ref>
|
<Binder target_ref=auto_complete_ref>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
use leptos::prelude::*;
|
use leptos::{either::Either, prelude::*};
|
||||||
use thaw_components::OptionComp;
|
|
||||||
use thaw_utils::{class_list, mount_style};
|
use thaw_utils::{class_list, mount_style};
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
|
@ -26,9 +25,13 @@ pub fn Badge(
|
||||||
move || format!("thaw-badge--{}", color.get().as_str()),
|
move || format!("thaw-badge--{}", color.get().as_str()),
|
||||||
class
|
class
|
||||||
]>
|
]>
|
||||||
<OptionComp value=children let:children>
|
{
|
||||||
{children()}
|
if let Some(children) = children {
|
||||||
</OptionComp>
|
Either::Left(children())
|
||||||
|
} else {
|
||||||
|
Either::Right(())
|
||||||
|
}
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,10 @@ pub struct LoadingBarInjection {
|
||||||
impl Copy for LoadingBarInjection {}
|
impl Copy for LoadingBarInjection {}
|
||||||
|
|
||||||
impl LoadingBarInjection {
|
impl LoadingBarInjection {
|
||||||
|
pub fn expect_use() -> Self {
|
||||||
|
expect_context::<Self>()
|
||||||
|
}
|
||||||
|
|
||||||
pub fn start(&self) {
|
pub fn start(&self) {
|
||||||
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
|
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
|
||||||
loading_bar_ref.start();
|
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;
|
mod loading_bar_provider;
|
||||||
|
|
||||||
pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
|
pub use loading_bar_provider::*;
|
||||||
|
|
||||||
use crate::ConfigInjection;
|
use crate::ConfigInjection;
|
||||||
use leptos::{html, prelude::*};
|
use leptos::{html, prelude::*};
|
||||||
|
@ -26,7 +26,7 @@ impl LoadingBarRef {
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[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"));
|
mount_style("loading-bar", include_str!("./loading-bar.css"));
|
||||||
let config_provider = ConfigInjection::use_();
|
let config_provider = ConfigInjection::use_();
|
||||||
let loading_bar_ref = NodeRef::<html::Div>::new();
|
let loading_bar_ref = NodeRef::<html::Div>::new();
|
||||||
|
@ -83,7 +83,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
|
||||||
<div
|
<div
|
||||||
class="thaw-config-provider thaw-loading-bar-container"
|
class="thaw-config-provider thaw-loading-bar-container"
|
||||||
data-thaw-id=config_provider.id().clone()
|
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
|
<div
|
||||||
class="thaw-loading-bar"
|
class="thaw-loading-bar"
|
||||||
|
|
|
@ -105,6 +105,7 @@ impl SpaceJustify {
|
||||||
|
|
||||||
#[cfg(test)]
|
#[cfg(test)]
|
||||||
mod test {
|
mod test {
|
||||||
|
#[test]
|
||||||
fn main() {
|
fn main() {
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use super::Space;
|
use super::Space;
|
||||||
|
|
|
@ -16,7 +16,7 @@ leptos = { workspace = true }
|
||||||
thaw_utils = { workspace = true }
|
thaw_utils = { workspace = true }
|
||||||
web-sys = { version = "0.3.69", features = ["DomRect"] }
|
web-sys = { version = "0.3.69", features = ["DomRect"] }
|
||||||
cfg-if = "1.0.0"
|
cfg-if = "1.0.0"
|
||||||
uuid = { version = "1.7.0", features = ["v4"] }
|
uuid = { version = "1.10.0", features = ["v4", "js"] }
|
||||||
send_wrapper = "0.6"
|
send_wrapper = "0.6"
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
|
|
|
@ -30,28 +30,35 @@ pub fn Teleport(
|
||||||
let render_root = element;
|
let render_root = element;
|
||||||
let mut mountable = render_root.build();
|
let mut mountable = render_root.build();
|
||||||
mountable.mount(&mount, None);
|
mountable.mount(&mount, None);
|
||||||
// TODO
|
on_cleanup({
|
||||||
// on_cleanup(move || {
|
let mut mountable = send_wrapper::SendWrapper::new(mountable);
|
||||||
// mountable.unmount();
|
move || {
|
||||||
// });
|
mountable.unmount();
|
||||||
|
}
|
||||||
|
});
|
||||||
} else if let Some(children) = children.take() {
|
} else if let Some(children) = children.take() {
|
||||||
let container = document()
|
let container = document()
|
||||||
.create_element("div")
|
.create_element("div")
|
||||||
.expect("element creation to work");
|
.expect("element creation to work");
|
||||||
|
|
||||||
thaw_utils::with_hydration_off(|| {
|
let mountable = thaw_utils::with_hydration_off(|| {
|
||||||
// use leptos::leptos_dom::Mountable;
|
|
||||||
// let _ = container.append_child(&children().into_view().get_mountable_node());
|
|
||||||
let view = children().into_view();
|
let view = children().into_view();
|
||||||
let mut mountable = view.build();
|
let mut mountable = view.build();
|
||||||
mountable.mount(&container, None);
|
mountable.mount(&container, None);
|
||||||
|
mountable
|
||||||
});
|
});
|
||||||
|
|
||||||
let render_root = container;
|
let render_root = container;
|
||||||
let _ = mount.append_child(&render_root);
|
let _ = mount.append_child(&render_root);
|
||||||
// on_cleanup(move || {
|
on_cleanup({
|
||||||
// let _ = mount.remove_child(&render_root);
|
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]
|
[dependencies]
|
||||||
leptos = { workspace = true }
|
leptos = { workspace = true }
|
||||||
leptos_meta = { version = "0.6.10", optional = true }
|
leptos_meta = { workspace = true, optional = true }
|
||||||
web-sys = "0.3.69"
|
web-sys = "0.3.69"
|
||||||
wasm-bindgen = "0.2.92"
|
wasm-bindgen = "0.2.92"
|
||||||
cfg-if = "1.0.0"
|
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>) {
|
pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
|
||||||
#[cfg(any(feature = "csr", feature = "hydrate"))]
|
#[cfg(any(feature = "csr", feature = "hydrate"))]
|
||||||
{
|
{
|
||||||
// use leptos::{create_render_effect, document, on_cleanup, SignalGet, StoredValue};
|
|
||||||
use leptos::prelude::{
|
use leptos::prelude::{
|
||||||
document, effect::RenderEffect, on_cleanup, traits::Get, StoredValue,
|
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() {
|
if is_lock.get() {
|
||||||
let head = document().head().expect("head no exist");
|
let head = document().head().expect("head no exist");
|
||||||
let style = document()
|
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")))]
|
#[cfg(not(any(feature = "csr", feature = "hydrate")))]
|
||||||
|
|
|
@ -4,9 +4,10 @@
|
||||||
// };
|
// };
|
||||||
|
|
||||||
use leptos::{
|
use leptos::{
|
||||||
prelude::{request_animation_frame_with_handle, AnimationFrameRequestHandle},
|
prelude::window,
|
||||||
reactive_graph::owner::{on_cleanup, StoredValue},
|
reactive_graph::owner::{on_cleanup, StoredValue},
|
||||||
};
|
};
|
||||||
|
use wasm_bindgen::{closure::Closure, JsCast, JsValue, UnwrapThrowExt};
|
||||||
|
|
||||||
#[derive(Clone)]
|
#[derive(Clone)]
|
||||||
pub struct NextFrame(StoredValue<Option<AnimationFrameRequestHandle>>);
|
pub struct NextFrame(StoredValue<Option<AnimationFrameRequestHandle>>);
|
||||||
|
@ -35,10 +36,9 @@ impl NextFrame {
|
||||||
|
|
||||||
let next_frame_hadnle = self.0.clone();
|
let next_frame_hadnle = self.0.clone();
|
||||||
let handle = request_animation_frame_with_handle(move || {
|
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));
|
next_frame_hadnle.set_value(Some(handle));
|
||||||
})
|
});
|
||||||
.unwrap();
|
|
||||||
self.0.set_value(Some(handle));
|
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