thaw_components: upgrade leptosv0.7

This commit is contained in:
luoxiao 2024-06-14 09:55:49 +08:00 committed by luoxiaozero
parent 42d76917d0
commit f152a19322
7 changed files with 27 additions and 23 deletions

View file

@ -4,7 +4,9 @@ pub use get_placement_style::FollowerPlacement;
use crate::Teleport; use crate::Teleport;
use get_placement_style::{get_follower_placement_offset, FollowerPlacementOffset}; use get_placement_style::{get_follower_placement_offset, FollowerPlacementOffset};
use leptos::{html::ElementDescriptor, leptos_dom::helpers::WindowListenerHandle, *}; use leptos::{
ev, html, html::ElementDescriptor, leptos_dom::helpers::WindowListenerHandle, prelude::*,
};
use thaw_utils::{ use thaw_utils::{
add_event_listener, get_scroll_parent, mount_style, with_hydration_off, EventListenerHandle, add_event_listener, get_scroll_parent, mount_style, with_hydration_off, EventListenerHandle,
}; };
@ -69,9 +71,9 @@ pub fn Binder<El: ElementDescriptor + Clone + 'static>(
children: follower_children, children: follower_children,
} = follower; } = follower;
let scroll_listener = store_value(None::<Callback<()>>); let scroll_listener = StoredValue::new(None::<Callback<()>>);
let scrollable_element_handle_vec = store_value::<Vec<EventListenerHandle>>(vec![]); let scrollable_element_handle_vec = StoredValue::new::<Vec<EventListenerHandle>>(vec![]);
let resize_handle = store_value(None::<WindowListenerHandle>); let resize_handle = StoredValue::new(None::<WindowListenerHandle>);
let ensure_scroll_listener = move || { let ensure_scroll_listener = move || {
let Some(el) = target_ref.get_untracked().map(|target| target.into_any()) else { let Some(el) = target_ref.get_untracked().map(|target| target.into_any()) else {
@ -167,9 +169,9 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
#[prop(into)] remove_resize_listener: Callback<()>, #[prop(into)] remove_resize_listener: Callback<()>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
let content_ref = create_node_ref::<html::Div>(); let content_ref = NodeRef::<html::Div>::new();
let content_style = create_rw_signal(String::new()); let content_style = RwSignal::new(String::new());
let placement_str = create_rw_signal(placement.as_str()); let placement_str = RwSignal::new(placement.as_str());
let sync_position: Callback<()> = Callback::new(move |_| { let sync_position: Callback<()> = Callback::new(move |_| {
let Some(content_ref) = content_ref.get_untracked() else { let Some(content_ref) = content_ref.get_untracked() else {
return; return;

View file

@ -1,13 +1,13 @@
use leptos::{html::ElementDescriptor, *}; use leptos::{ev, html::ElementType, prelude::*};
use std::{ops::Deref, time::Duration}; use std::{ops::Deref, time::Duration};
use thaw_utils::{add_event_listener, use_next_frame, EventListenerHandle}; use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
/// # CSS Transition /// # CSS Transition
/// ///
/// Reference to https://vuejs.org/guide/built-ins/transition.html /// Reference to https://vuejs.org/guide/built-ins/transition.html
#[component] #[component]
pub fn CSSTransition<T, CF, IV>( pub fn CSSTransition<E, CF, IV>(
node_ref: NodeRef<T>, node_ref: NodeRef<E>,
#[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)] appear: bool,
@ -20,17 +20,18 @@ pub fn CSSTransition<T, CF, IV>(
children: CF, children: CF,
) -> impl IntoView ) -> impl IntoView
where where
T: ElementDescriptor + Clone + 'static, E: ElementType,
E::Output: 'static,
CF: FnOnce(ReadSignal<Option<&'static str>>) -> IV + 'static, CF: FnOnce(ReadSignal<Option<&'static str>>) -> IV + 'static,
IV: IntoView, IV: IntoView,
{ {
let display = create_rw_signal((!show.get_untracked()).then_some("display: none;")); let display = RwSignal::new((!show.get_untracked()).then_some("display: none;"));
node_ref.on_load(move |node_el| { node_ref.on_load(move |node_el| {
let any_el = node_el.clone().into_any(); let any_el = node_el.clone().into_any();
let el = any_el.deref().clone(); let el = any_el.deref().clone();
let class_list = el.class_list(); let class_list = el.class_list();
let next_frame = use_next_frame(); let next_frame = NextFrame::use_();
let end_handle = StoredValue::new(None::<EventListenerHandle>); let end_handle = StoredValue::new(None::<EventListenerHandle>);
let end_count = StoredValue::new(None::<usize>); let end_count = StoredValue::new(None::<usize>);
let finish = StoredValue::new(None::<Callback<()>>); let finish = StoredValue::new(None::<Callback<()>>);
@ -166,7 +167,7 @@ where
}) })
}; };
create_render_effect(move |prev: Option<bool>| { RenderEffect::new(move |prev: Option<bool>| {
let show = show.get(); let show = show.get();
let prev = if let Some(prev) = prev { let prev = if let Some(prev) = prev {
prev prev

View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::{ev, prelude::*};
#[cfg(any(feature = "csr", feature = "hydrate"))] #[cfg(any(feature = "csr", feature = "hydrate"))]
thread_local! { thread_local! {

View file

@ -1,5 +1,5 @@
use super::Fallback; use super::Fallback;
use leptos::*; use leptos::prelude::*;
#[slot] #[slot]
pub struct Then { pub struct Then {

View file

@ -14,7 +14,7 @@ pub use option_comp::OptionComp;
pub use teleport::Teleport; pub use teleport::Teleport;
pub use wave::{Wave, WaveRef}; pub use wave::{Wave, WaveRef};
use leptos::*; use leptos::prelude::{slot, ChildrenFn};
#[slot] #[slot]
pub struct Fallback { pub struct Fallback {

View file

@ -1,5 +1,6 @@
use cfg_if::cfg_if; use cfg_if::cfg_if;
use leptos::{html::AnyElement, *}; use leptos::{html::{AnyElement, HtmlElement}, prelude::*};
use tachys::view::any_view::AnyView;
/// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
#[component] #[component]

View file

@ -1,4 +1,4 @@
use leptos::{leptos_dom::helpers::TimeoutHandle, *}; use leptos::{html, leptos_dom::helpers::TimeoutHandle, prelude::*};
use std::time::Duration; use std::time::Duration;
use thaw_utils::{mount_style, ComponentRef}; use thaw_utils::{mount_style, ComponentRef};
@ -16,8 +16,8 @@ impl WaveRef {
#[component] #[component]
pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView { pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView {
mount_style("wave", include_str!("./wave.css")); mount_style("wave", include_str!("./wave.css"));
let wave_ref = create_node_ref::<html::Div>(); let wave_ref = NodeRef::<html::Div>::new();
let animation_timeout_handle = create_rw_signal(None::<TimeoutHandle>); let animation_timeout_handle = RwSignal::new(None::<TimeoutHandle>);
let play = Callback::new(move |_: ()| { let play = Callback::new(move |_: ()| {
if let Some(handle) = animation_timeout_handle.get() { if let Some(handle) = animation_timeout_handle.get() {
handle.clear(); handle.clear();
@ -51,7 +51,7 @@ pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView
move || animation_timeout_handle.with(|handle| handle.is_some()), move || animation_timeout_handle.with(|handle| handle.is_some()),
) )
ref=wave_ref node_ref=wave_ref
></div> ></div>
} }
} }