mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
feat(lepots-v0.7): thaw_components
This commit is contained in:
parent
3bfdac9e44
commit
5f74f5914e
7 changed files with 28 additions and 23 deletions
|
@ -13,7 +13,7 @@ license = "MIT"
|
||||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
leptos = { version = "0.6.10" }
|
leptos = { workspace = true }
|
||||||
thaw_components = { workspace = true }
|
thaw_components = { workspace = true }
|
||||||
thaw_macro = { workspace = true }
|
thaw_macro = { workspace = true }
|
||||||
thaw_utils = { workspace = true }
|
thaw_utils = { workspace = true }
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
use crate::AccordionInjection;
|
use crate::AccordionInjection;
|
||||||
use leptos::*;
|
use leptos::{prelude::*, html};
|
||||||
use thaw_components::CSSTransition;
|
use thaw_components::CSSTransition;
|
||||||
use thaw_utils::{mount_style, StoredMaybeSignal};
|
use thaw_utils::{mount_style, StoredMaybeSignal};
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@ pub fn AccordionItem(
|
||||||
<div class="thaw-accordion-header">
|
<div class="thaw-accordion-header">
|
||||||
<button
|
<button
|
||||||
class="thaw-accordion-header__button"
|
class="thaw-accordion-header__button"
|
||||||
aria-expanded=move || is_show_panel.get().to_string()
|
// aria_expanded=move || is_show_panel.get().to_string() #TODO
|
||||||
type="button"
|
type="button"
|
||||||
on:click=on_click
|
on:click=on_click
|
||||||
>
|
>
|
||||||
|
@ -58,8 +58,8 @@ pub fn AccordionItem(
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="thaw-accordion-panel"
|
class="thaw-accordion-panel"
|
||||||
ref=panel_ref
|
node_ref=panel_ref
|
||||||
style=move || display.get()
|
style=move || display.get().map(|d| d.to_string())
|
||||||
>
|
>
|
||||||
{children()}
|
{children()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,7 +2,7 @@ mod accordion_item;
|
||||||
|
|
||||||
pub use accordion_item::*;
|
pub use accordion_item::*;
|
||||||
|
|
||||||
use leptos::*;
|
use leptos::{context::Provider, prelude::*};
|
||||||
use std::collections::HashSet;
|
use std::collections::HashSet;
|
||||||
use thaw_utils::Model;
|
use thaw_utils::Model;
|
||||||
|
|
||||||
|
|
|
@ -185,7 +185,7 @@ fn FollowerContainer<E>(
|
||||||
children: Children,
|
children: Children,
|
||||||
) -> impl IntoView
|
) -> impl IntoView
|
||||||
where
|
where
|
||||||
E: ElementType,
|
E: ElementType + 'static,
|
||||||
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static,
|
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static,
|
||||||
{
|
{
|
||||||
let content_ref = NodeRef::<html::Div>::new();
|
let content_ref = NodeRef::<html::Div>::new();
|
||||||
|
@ -239,11 +239,14 @@ where
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if show.get() {
|
if show.get() {
|
||||||
request_animation_frame(move || {
|
request_animation_frame({
|
||||||
sync_position.call(());
|
let sync_position = sync_position.clone();
|
||||||
|
move || {
|
||||||
|
sync_position.call(());
|
||||||
|
}
|
||||||
});
|
});
|
||||||
add_scroll_listener.call(sync_position);
|
add_scroll_listener.call(sync_position.clone());
|
||||||
add_resize_listener.call(sync_position);
|
add_resize_listener.call(sync_position.clone());
|
||||||
} else {
|
} else {
|
||||||
remove_scroll_listener.call(());
|
remove_scroll_listener.call(());
|
||||||
remove_resize_listener.call(());
|
remove_resize_listener.call(());
|
||||||
|
@ -261,5 +264,5 @@ where
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
|
|
||||||
view! { <Teleport element=children immediate=show/> }
|
view! { <Teleport element=children.into_any() immediate=show/> }
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
use leptos::{ev, html::ElementType, prelude::*};
|
use leptos::{ev, html::ElementType, prelude::*};
|
||||||
use std::{ops::Deref, time::Duration};
|
use std::{ops::Deref, time::Duration};
|
||||||
|
use tachys::view::any_view::AnyView;
|
||||||
use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
|
use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
|
||||||
use web_sys::wasm_bindgen::JsCast;
|
use web_sys::wasm_bindgen::JsCast;
|
||||||
|
|
||||||
|
@ -22,9 +23,9 @@ pub fn CSSTransition<E, CF, IV>(
|
||||||
) -> impl IntoView
|
) -> impl IntoView
|
||||||
where
|
where
|
||||||
E: ElementType + 'static,
|
E: ElementType + 'static,
|
||||||
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static,
|
E::Output: JsCast + Clone + Deref<Target = web_sys::HtmlElement> + 'static,
|
||||||
CF: FnOnce(ReadSignal<Option<&'static str>>) -> IV + 'static,
|
CF: FnOnce(ReadSignal<Option<&'static str>>) -> IV + Send + 'static,
|
||||||
IV: IntoView,
|
IV: IntoView + 'static,
|
||||||
{
|
{
|
||||||
let display = RwSignal::new((!show.get_untracked()).then_some("display: none;"));
|
let display = RwSignal::new((!show.get_untracked()).then_some("display: none;"));
|
||||||
|
|
||||||
|
@ -92,13 +93,13 @@ where
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let handle = match types {
|
let handle = match types {
|
||||||
AnimationTypes::Transition => {
|
AnimationTypes::Transition => add_event_listener(
|
||||||
add_event_listener(el.deref().clone(), ev::transitionend, move |_| {
|
el.deref().clone().into(),
|
||||||
event_listener()
|
ev::transitionend,
|
||||||
})
|
move |_| event_listener(),
|
||||||
}
|
),
|
||||||
AnimationTypes::Animation => {
|
AnimationTypes::Animation => {
|
||||||
add_event_listener(el.deref().clone(), ev::animationend, move |_| {
|
add_event_listener(el.deref().clone().into(), ev::animationend, move |_| {
|
||||||
event_listener()
|
event_listener()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,7 @@ pub fn FocusTrap(
|
||||||
Effect::new(move |prev| {
|
Effect::new(move |prev| {
|
||||||
let is_active = active.get();
|
let is_active = active.get();
|
||||||
if is_active && !prev.unwrap_or(false) {
|
if is_active && !prev.unwrap_or(false) {
|
||||||
|
let on_esc = on_esc.clone();
|
||||||
let handle = window_event_listener(ev::keydown, move |e| {
|
let handle = window_event_listener(ev::keydown, move |e| {
|
||||||
if &e.code() == "Escape" {
|
if &e.code() == "Escape" {
|
||||||
if is_current_active() {
|
if is_current_active() {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
use cfg_if::cfg_if;
|
use cfg_if::cfg_if;
|
||||||
use leptos::{html::{AnyElement, HtmlElement}, prelude::*};
|
use leptos::prelude::*;
|
||||||
use tachys::view::any_view::AnyView;
|
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
|
||||||
|
@ -7,7 +7,7 @@ use tachys::view::any_view::AnyView;
|
||||||
pub fn Teleport(
|
pub fn Teleport(
|
||||||
#[prop(default = true.into(), into)] immediate: MaybeSignal<bool>,
|
#[prop(default = true.into(), into)] immediate: MaybeSignal<bool>,
|
||||||
#[prop(into, optional)] mount: Option<web_sys::Element>,
|
#[prop(into, optional)] mount: Option<web_sys::Element>,
|
||||||
#[prop(optional, into)] element: Option<HtmlElement<AnyElement>>,
|
#[prop(optional, into)] element: Option<AnyView<Dom>>,
|
||||||
#[prop(optional)] children: Option<Children>,
|
#[prop(optional)] children: Option<Children>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
|
cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
|
||||||
|
|
Loading…
Add table
Reference in a new issue