From 219312a6f03cf98d7b4f2d193a1d13dc2452f62a Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 11 Oct 2023 21:25:11 +0800 Subject: [PATCH] feat: change prop --- demo/src/pages/components.rs | 2 +- demo/src/pages/menu/mod.rs | 8 ++++---- demo/src/pages/tabbar/mod.rs | 8 ++++---- demo/src/pages/tabs/mod.rs | 10 +++++----- src/input/mod.rs | 4 ++-- src/menu/mod.rs | 10 +++++----- src/mobile/tabbar/mod.rs | 15 +++++++++------ src/slider/mod.rs | 8 ++++++-- src/tabs/mod.rs | 21 +++++++++++++++------ 9 files changed, 51 insertions(+), 35 deletions(-) diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index d73cb0d..e5e03b2 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -29,7 +29,7 @@ pub fn ComponentsPage() -> impl IntoView { - + diff --git a/demo/src/pages/menu/mod.rs b/demo/src/pages/menu/mod.rs index 1c4c0ed..57e9425 100644 --- a/demo/src/pages/menu/mod.rs +++ b/demo/src/pages/menu/mod.rs @@ -5,12 +5,12 @@ use prisms::highlight_str; #[component] pub fn MenuPage() -> impl IntoView { - let selected = create_rw_signal(String::from("o")); + let value = create_rw_signal(String::from("o")); view! {

"Menu"

- + @@ -18,9 +18,9 @@ pub fn MenuPage() -> impl IntoView { slot html=highlight_str!( r#" - let selected = create_rw_signal(String::from("o")); + let value = create_rw_signal(String::from("o")); - + diff --git a/demo/src/pages/tabbar/mod.rs b/demo/src/pages/tabbar/mod.rs index 9868e49..f721bc6 100644 --- a/demo/src/pages/tabbar/mod.rs +++ b/demo/src/pages/tabbar/mod.rs @@ -18,9 +18,9 @@ pub fn TabbarPage() -> impl IntoView { slot html=highlight_str!( r#" - let selected = create_rw_signal(String::from("o")); + let value = create_rw_signal(String::from("o")); - + "and" @@ -49,10 +49,10 @@ pub fn TabbarPage() -> impl IntoView { #[component] pub fn TabbarDemoPage() -> impl IntoView { - let selected = create_rw_signal(String::from("o")); + let value = create_rw_signal(String::from("o")); view! {
- {move || selected.get()} + {move || value.get()} "and" "if" diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs index 22691a2..8a5e971 100644 --- a/demo/src/pages/tabs/mod.rs +++ b/demo/src/pages/tabs/mod.rs @@ -5,12 +5,12 @@ use prisms::highlight_str; #[component] pub fn TabsPage() -> impl IntoView { - let active_key = create_rw_signal("apple"); + let value = create_rw_signal("apple"); view! {
-

"Tabs"

+

"Tabs2"

- + "apple" @@ -22,8 +22,8 @@ pub fn TabsPage() -> impl IntoView { slot html=highlight_str!( r#" - let active_key = create_rw_signal("apple"); - + let value = create_rw_signal("apple"); + "apple" diff --git a/src/input/mod.rs b/src/input/mod.rs index d02f673..4334dba 100644 --- a/src/input/mod.rs +++ b/src/input/mod.rs @@ -2,7 +2,7 @@ mod theme; use crate::{ theme::{use_theme, Theme}, - utils::mount_style::mount_style, + utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style}, }; use leptos::*; pub use theme::InputTheme; @@ -25,7 +25,7 @@ impl InputVariant { #[component] pub fn Input( - #[prop(into)] value: RwSignal, + #[prop(optional, into)] value: MaybeRwSignal, #[prop(optional, into)] variant: MaybeSignal, ) -> impl IntoView { let theme = use_theme(Theme::light); diff --git a/src/menu/mod.rs b/src/menu/mod.rs index f69af91..13c5e2b 100644 --- a/src/menu/mod.rs +++ b/src/menu/mod.rs @@ -10,12 +10,12 @@ pub use theme::MenuTheme; #[component] pub fn Menu( - #[prop(optional, into)] selected: MaybeRwSignal, + #[prop(optional, into)] value: MaybeRwSignal, children: Children, ) -> impl IntoView { - let menu_injection_key = create_rw_signal(MenuInjectionKey::new(selected.get_untracked())); + let menu_injection_key = create_rw_signal(MenuInjectionKey::new(value.get_untracked())); create_effect(move |_| { - let selected_key = selected.get(); + let selected_key = value.get(); let key = menu_injection_key.get_untracked(); if selected_key != key.value { menu_injection_key.set(MenuInjectionKey::new(selected_key)); @@ -23,10 +23,10 @@ pub fn Menu( }); create_effect(move |_| { - let selected_key = selected.get_untracked(); + let selected_key = value.get_untracked(); let key = menu_injection_key.get(); if selected_key != key.value { - selected.set(key.value); + value.set(key.value); } }); provide_context(menu_injection_key); diff --git a/src/mobile/tabbar/mod.rs b/src/mobile/tabbar/mod.rs index 64cb234..1ef3349 100644 --- a/src/mobile/tabbar/mod.rs +++ b/src/mobile/tabbar/mod.rs @@ -1,17 +1,20 @@ mod tabbar_item; -use crate::utils::mount_style::mount_style; +use crate::utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style}; use leptos::*; pub use tabbar_item::*; #[component] -pub fn Tabbar(#[prop(into)] selected: RwSignal, children: Children) -> impl IntoView { +pub fn Tabbar( + #[prop(optional, into)] value: MaybeRwSignal, + children: Children, +) -> impl IntoView { mount_style("tabbar", include_str!("./tabbar.css")); - let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(selected.get())); + let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(value.get())); create_effect(move |_| { - let selected_key = selected.get(); + let selected_key = value.get(); let key = tabbar_injection_key.get_untracked(); if selected_key != key.value { tabbar_injection_key.set(TabbarInjectionKey::new(selected_key)); @@ -19,10 +22,10 @@ pub fn Tabbar(#[prop(into)] selected: RwSignal, children: Children) -> i }); create_effect(move |_| { - let selected_key = selected.get_untracked(); + let selected_key = value.get_untracked(); let key = tabbar_injection_key.get(); if selected_key != key.value { - selected.set(key.value); + value.set(key.value); } }); provide_context(tabbar_injection_key); diff --git a/src/slider/mod.rs b/src/slider/mod.rs index 89da2e4..89aa0d3 100644 --- a/src/slider/mod.rs +++ b/src/slider/mod.rs @@ -1,10 +1,14 @@ -use crate::{theme::use_theme, utils::mount_style::mount_style, Theme}; +use crate::{ + theme::use_theme, + utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style}, + Theme, +}; use leptos::*; use wasm_bindgen::JsCast; #[component] pub fn Slider( - #[prop(into)] value: RwSignal, + #[prop(optional, into)] value: MaybeRwSignal, #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal, ) -> impl IntoView { let theme = use_theme(Theme::light); diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs index 6a7abde..b5bd3df 100644 --- a/src/tabs/mod.rs +++ b/src/tabs/mod.rs @@ -1,15 +1,24 @@ mod tab; -use crate::{theme::use_theme, utils::mount_style::mount_style, Theme}; +use std::ops::Deref; + +use crate::{ + theme::use_theme, + utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style}, + Theme, +}; use leptos::*; pub use tab::*; #[component] -pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl IntoView { +pub fn Tabs( + #[prop(optional, into)] value: MaybeRwSignal<&'static str>, + children: Children, +) -> impl IntoView { mount_style("tabs", include_str!("./tabs.css")); let tab_options_vec = create_rw_signal(vec![]); provide_context(TabsInjectionKey { - active_key: active_key.clone(), + active_key: value.deref().clone(), tab_options_vec: tab_options_vec.clone(), }); let theme = use_theme(Theme::light); @@ -48,7 +57,7 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into let Some(label_list) = label_list_ref.get() else { return; }; - if options.key == active_key.get() { + if options.key == value.get() { request_animation_frame(move || { let list_rect = label_list.get_bounding_client_rect(); let rect = label.get_bounding_client_rect(); @@ -67,10 +76,10 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into class="melt-tabs__label" class=( "melt-tabs__label--active", - move || options.key == active_key.get(), + move || options.key == value.get(), ) - on:click=move |_| active_key.set(options.key) + on:click=move |_| value.set(options.key) ref=label_ref > {options.label}