From e8942dc2120db6b5b0bbd81ea1f8dc5a08f12f0e Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 5 Jun 2024 10:04:34 +0800 Subject: [PATCH] refactor: tab --- demo/src/app.rs | 2 +- demo/src/pages/components.rs | 8 +- demo_markdown/docs/{tabs => tab_list}/mod.md | 10 ++- demo_markdown/src/lib.rs | 2 +- thaw/src/lib.rs | 4 +- thaw/src/{tabs => tab_list}/mod.rs | 0 thaw/src/{tabs => tab_list}/tab-list.css | 0 thaw/src/{tabs => tab_list}/tab.css | 0 thaw/src/tab_list/tab.rs | 77 ++++++++++++++++++ thaw/src/tabs/tab.rs | 83 -------------------- thaw/src/theme/common.rs | 2 + 11 files changed, 95 insertions(+), 93 deletions(-) rename demo_markdown/docs/{tabs => tab_list}/mod.md (90%) rename thaw/src/{tabs => tab_list}/mod.rs (100%) rename thaw/src/{tabs => tab_list}/tab-list.css (100%) rename thaw/src/{tabs => tab_list}/tab.css (100%) create mode 100644 thaw/src/tab_list/tab.rs delete mode 100644 thaw/src/tabs/tab.rs diff --git a/demo/src/app.rs b/demo/src/app.rs index 37d666f..5b8b81d 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -82,8 +82,8 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { + - diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 0094390..70e5811 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -175,6 +175,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/spinner".into(), label: "Spinner".into(), }, + MenuItemOption { + value: "/components/tab-list".into(), + label: "Tab List".into(), + }, MenuItemOption { value: "/components/tag".into(), label: "Tag".into(), @@ -251,10 +255,6 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/loading-bar".into(), label: "Loading Bar".into(), }, - MenuItemOption { - value: "/components/tabs".into(), - label: "Tabs".into(), - }, MenuItemOption { value: "/components/alert".into(), label: "Alert".into(), diff --git a/demo_markdown/docs/tabs/mod.md b/demo_markdown/docs/tab_list/mod.md similarity index 90% rename from demo_markdown/docs/tabs/mod.md rename to demo_markdown/docs/tab_list/mod.md index f473ad7..27dc788 100644 --- a/demo_markdown/docs/tabs/mod.md +++ b/demo_markdown/docs/tab_list/mod.md @@ -6,10 +6,16 @@ let selected_value = RwSignal::new(String::new()); view! { - "🍎 Apple" + "Apple" - "🍐 Pear" + "Pear" + + + "Item 1" + + + "Item 2" } diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index 9a4b6cb..fa52d79 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -64,8 +64,8 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt "SpinButtonMdPage" => "../docs/spin_button/mod.md", "SpinnerMdPage" => "../docs/spinner/mod.md", "SwitchMdPage" => "../docs/switch/mod.md", + "TabListMdPage" => "../docs/tab_list/mod.md", "TableMdPage" => "../docs/table/mod.md", - "TabsMdPage" => "../docs/tabs/mod.md", "TagMdPage" => "../docs/tag/mod.md", "TimePickerMdPage" => "../docs/time_picker/mod.md", "TextMdPage" => "../docs/text/mod.md", diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs index 499152f..ae8b15f 100644 --- a/thaw/src/lib.rs +++ b/thaw/src/lib.rs @@ -38,7 +38,7 @@ mod spin_button; mod spinner; mod switch; mod table; -mod tabs; +mod tab_list; mod tag; mod text; mod theme; @@ -84,7 +84,7 @@ pub use spin_button::*; pub use spinner::*; pub use switch::*; pub use table::*; -pub use tabs::*; +pub use tab_list::*; pub use tag::*; pub use text::*; pub use thaw_utils::{create_component_ref, ComponentRef, SignalWatch}; diff --git a/thaw/src/tabs/mod.rs b/thaw/src/tab_list/mod.rs similarity index 100% rename from thaw/src/tabs/mod.rs rename to thaw/src/tab_list/mod.rs diff --git a/thaw/src/tabs/tab-list.css b/thaw/src/tab_list/tab-list.css similarity index 100% rename from thaw/src/tabs/tab-list.css rename to thaw/src/tab_list/tab-list.css diff --git a/thaw/src/tabs/tab.css b/thaw/src/tab_list/tab.css similarity index 100% rename from thaw/src/tabs/tab.css rename to thaw/src/tab_list/tab.css diff --git a/thaw/src/tab_list/tab.rs b/thaw/src/tab_list/tab.rs new file mode 100644 index 0000000..faac59c --- /dev/null +++ b/thaw/src/tab_list/tab.rs @@ -0,0 +1,77 @@ +use super::{TabListInjection, TabRegisterData}; +use leptos::*; +use std::ops::Deref; +use thaw_utils::{class_list, mount_style}; + +#[component] +pub fn Tab( + #[prop(optional, into)] class: MaybeProp, + #[prop(into)] value: String, + children: Children, +) -> impl IntoView { + mount_style("tab", include_str!("./tab.css")); + + let tab_ref = NodeRef::::new(); + let tab_list = TabListInjection::use_(); + let value = StoredValue::new(value); + tab_list.register(TabRegisterData { + value: value.get_value(), + tab_ref, + }); + on_cleanup(move || { + value.with_value(|v| tab_list.unregister(v)); + }); + + let selected = Memo::new(move |_| { + tab_list + .selected_value + .with(|selected_value| value.with_value(|value| value == selected_value)) + }); + + let on_select = move |_| { + tab_list.registered_tabs.with_untracked(|registered_tabs| { + if let Some(previous_selected_tab) = tab_list + .selected_value + .with_untracked(|selected_value| registered_tabs.get(selected_value)) + { + let tab_el = tab_ref.get_untracked().unwrap(); + let selected_tab_rect = tab_el.get_bounding_client_rect(); + let previous_selected_tab_rect = previous_selected_tab + .tab_ref + .get_untracked() + .unwrap() + .get_bounding_client_rect(); + + let offset = previous_selected_tab_rect.x() - selected_tab_rect.x(); + let scale = previous_selected_tab_rect.width() / selected_tab_rect.width(); + + let style = tab_el.deref().style(); + let _ = + style.set_property("--thaw-tab__indicator--offset", &format!("{offset:.0}px")); + let _ = style.set_property("--thaw-tab__indicator--scale", &format!("{scale:.2}")); + + request_animation_frame(move || { + let _ = style.set_property("--thaw-tab__indicator--offset", "0px"); + let _ = style.set_property("--thaw-tab__indicator--scale", "1"); + }); + } + }); + tab_list.on_select(value.get_value()); + }; + + view! { + + } +} diff --git a/thaw/src/tabs/tab.rs b/thaw/src/tabs/tab.rs deleted file mode 100644 index 32d4484..0000000 --- a/thaw/src/tabs/tab.rs +++ /dev/null @@ -1,83 +0,0 @@ -use super::{TabListInjection, TabRegisterData}; -use leptos::*; -use std::ops::Deref; -use thaw_utils::{class_list, mount_style}; - -#[component] -pub fn Tab( - #[prop(optional, into)] class: MaybeProp, - #[prop(into)] value: String, - children: Children, -) -> impl IntoView { - mount_style("tab", include_str!("./tab.css")); - - let tab_ref = NodeRef::::new(); - let tab_list = TabListInjection::use_(); - let value = StoredValue::new(value); - tab_list.register(TabRegisterData { - value: value.get_value(), - tab_ref, - }); - on_cleanup(move || { - value.with_value(|v| tab_list.unregister(v)); - }); - - let selected = Memo::new(move |_| { - tab_list - .selected_value - .with(|selected_value| value.with_value(|value| value == selected_value)) - }); - - Effect::new(move |_| { - let selected = selected.get(); - if selected { - tab_list.registered_tabs.with_untracked(|registered_tabs| { - if let Some(previous_selected_tab) = tab_list - .previous_selected_value - .with_value(|selected_value| registered_tabs.get(selected_value)) - { - let tab_el = tab_ref.get_untracked().unwrap(); - let selected_tab_rect = tab_el.get_bounding_client_rect(); - let previous_selected_tab_rect = previous_selected_tab - .tab_ref - .get_untracked() - .unwrap() - .get_bounding_client_rect(); - - let offset = previous_selected_tab_rect.x() - selected_tab_rect.x(); - let scale = previous_selected_tab_rect.width() / selected_tab_rect.width(); - - let style = tab_el.deref().style(); - let _ = style - .set_property("--thaw-tab__indicator--offset", &format!("{offset:.0}px")); - let _ = - style.set_property("--thaw-tab__indicator--scale", &format!("{scale:.2}")); - - // let _ = style.get_property_value("offsetWidth"); - - // let _ = style.set_property("--thaw-tab__indicator--offset", "0px"); - // let _ = style.set_property("--thaw-tab__indicator--scale", "1"); - } - }) - } - - selected - }); - - view! { - - } -} diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs index ff8179d..f720706 100644 --- a/thaw/src/theme/common.rs +++ b/thaw/src/theme/common.rs @@ -57,6 +57,7 @@ pub struct CommonTheme { pub spacing_horizontal_m_nudge: String, pub spacing_horizontal_m: String, pub spacing_horizontal_l: String, + pub spacing_vertical_none: String, pub spacing_vertical_s: String, pub spacing_vertical_m_nudge: String, pub spacing_vertical_m: String, @@ -137,6 +138,7 @@ impl CommonTheme { spacing_horizontal_m_nudge: "10px".into(), spacing_horizontal_m: "12px".into(), spacing_horizontal_l: "16px".into(), + spacing_vertical_none: "0".into(), spacing_vertical_s: "8px".into(), spacing_vertical_m_nudge: "10px".into(), spacing_vertical_m: "12px".into(),