adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ feat: use if component

Browse source
This commit is contained in:
luoxiao 2023-06-10 13:00:41 +08:00
parent 933a9c7316
commit 95a2586276
5 changed files with 54 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/basic/src/pages/slider/mod.rs
View file

@ -3,11 +3,9 @@ use melt_ui::*;
#[component]
pub fn SliderPage(cx: Scope) -> impl IntoView {
let (value, set_value) = create_signal(cx, 0.0);
let on_value = SignalSetter::map(cx, move |value| {
set_value.set(value);
});
let value = create_rw_signal(cx, 0.0);
view! { cx,
<Slider value=value on_value=on_value/>
<Slider value/>
}
}

55
src/mobile/nav_bar/mod.rs
View file

@ -1,4 +1,4 @@
use crate::utils::mount_style::mount_style;
use crate::{utils::mount_style::mount_style, components::*};
use leptos::*;
use leptos_icons::*;
use stylers::style_sheet_str;
@ -7,11 +7,11 @@ use web_sys::MouseEvent;
#[component]
pub fn NavBar(
cx: Scope,
#[prop(optional, into)] title: MaybeSignal<String>,
#[prop(optional, into)] title: MaybeSignal<&'static str>,
#[prop(optional, into)] left_arrow: MaybeSignal<bool>,
#[prop(optional, into)] left_text: MaybeSignal<String>,
#[prop(optional, into)] left_text: MaybeSignal<&'static str>,
#[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
#[prop(optional, into)] right_text: MaybeSignal<String>,
#[prop(optional, into)] right_text: MaybeSignal<&'static str>,
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
) -> impl IntoView {
@ -30,47 +30,28 @@ pub fn NavBar(
view! { cx, class=class_name,
<div class="melt-nav-bar">
{
move || {
let left_text = left_text.get();
if left_arrow.get() || !left_text.is_empty() {
view! { cx, class=class_name,
<If cond=MaybeSignal::derive(cx, move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__left" on:click=onclick_left>
{
if left_arrow.get() {
view! { cx,
<If cond=left_arrow>
<Then slot>
<Icon icon=AiIcon::AiLeftOutlined/>
}.into()
} else {
None
}
}
{ left_text }
</Then>
</If>
{ left_text.get() }
</div>
}.into()
} else {
None
}
}
}
</Then>
</If>
<div class="melt-nav-bar__center">
{ move || title.get() }
</div>
{
move || {
let right_text = right_text.get();
if !right_text.is_empty() {
view! { cx, class=class_name,
<If cond=MaybeSignal::derive(cx, move || !right_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__right" on:click=onclick_right>
{ right_text }
{ right_text.get() }
</div>
}.into()
} else {
None
}
}
}
</Then>
</If>
</div>
}
}

34
src/progress/mod.rs
View file

@ -1,12 +1,12 @@
use crate::utils::mount_style::mount_style;
use crate::{utils::mount_style::mount_style, components::*};
use leptos::*;
use stylers::style_sheet_str;
#[component]
pub fn Progress(
cx: Scope,
#[prop(optional)] left_tip: Option<ReadSignal<String>>,
#[prop(optional)] right_tip: Option<ReadSignal<String>>,
#[prop(optional, into)] left_tip: MaybeSignal<&'static str>,
#[prop(optional, into)] right_tip: MaybeSignal<&'static str>,
percentage: ReadSignal<f64>,
) -> impl IntoView {
let class_name = mount_style("progress", || style_sheet_str!("./src/progress/progress.css"));
@ -15,15 +15,11 @@ pub fn Progress(
cx, class=class_name,
<div class="melt-progress">
<span class="melt-progress__tip-left">
{
move || {
if let Some(left_tip) = left_tip {
left_tip.get()
} else {
"".into()
}
}
}
<If cond=MaybeSignal::derive(cx, move || !left_tip.get().is_empty())>
<Then slot>
{ left_tip.get() }
</Then>
</If>
</span>
<span class="melt-progress__progress">
<span class="melt-progress__progress-inner" style=style>
@ -31,15 +27,11 @@ pub fn Progress(
</span>
</span>
<span class="melt-progress__tip-right">
{
move || {
if let Some(right_tip) = right_tip {
right_tip.get()
} else {
"".into()
}
}
}
<If cond=MaybeSignal::derive(cx, move || !right_tip.get().is_empty())>
<Then slot>
{ right_tip.get() }
</Then>
</If>
</span>
</div>
}

9
src/slider/mod.rs
View file

@ -10,8 +10,7 @@ use wasm_bindgen::JsCast;
#[component]
pub fn Slider(
cx: Scope,
#[prop(optional, into)] value: MaybeSignal<f64>,
#[prop(optional)] on_value: Option<SignalSetter<f64>>,
#[prop(into)] value: RwSignal<f64>,
#[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
) -> impl IntoView {
let theme = use_theme(cx, Theme::light);
@ -35,10 +34,8 @@ pub fn Slider(
});
let class_name = mount_style("slider", || style_sheet_str!("./src/slider/slider.css"));
let do_update_value = move |value| {
if let Some(on_value) = on_value {
on_value.set(value);
}
let do_update_value = move |val| {
value.set(val);
};
let rail_ref = create_node_ref::<html::Div>(cx);

11
src/teleport/mod.rs
View file

@ -3,9 +3,16 @@ use web_sys::Element;
/// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
#[component]
pub fn Teleport(cx: Scope, #[prop(optional)] to: Option<String>, children: Children) -> impl IntoView {
pub fn Teleport(
cx: Scope,
#[prop(optional)] to: Option<&'static str>,
children: Children,
) -> impl IntoView {
let parent = if let Some(to) = to {
document().query_selector(to.as_str()).expect("element not to exist").expect("element not to exist")
document()
.query_selector(to)
.expect("element not to exist")
.expect("element not to exist")
} else {
Element::from(document().body().expect("body element not to exist"))
};