From 425bc43270707aaf46551ff059996deded78cd3a Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 25 Jun 2024 23:42:53 +0800 Subject: [PATCH] refactor: TimePicker --- demo/src/pages/components.rs | 8 ++--- thaw/src/date_picker/date-picker.css | 2 +- thaw/src/theme/mod.rs | 7 ++--- thaw/src/time_picker/mod.rs | 47 +++++++--------------------- thaw/src/time_picker/theme.rs | 26 --------------- thaw/src/time_picker/time-picker.css | 15 +++++---- 6 files changed, 25 insertions(+), 80 deletions(-) delete mode 100644 thaw/src/time_picker/theme.rs diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 4b2fb5c..2b0a374 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -207,6 +207,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/textarea".into(), label: "Textarea".into(), }, + MenuItemOption { + value: "/components/time-picker".into(), + label: "Time Picker".into(), + }, MenuItemOption { value: "/components/auto-complete".into(), label: "Auto Complete".into(), @@ -239,10 +243,6 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/switch".into(), label: "Switch".into(), }, - MenuItemOption { - value: "/components/time-picker".into(), - label: "Time Picker".into(), - }, MenuItemOption { value: "/components/upload".into(), label: "Upload".into(), diff --git a/thaw/src/date_picker/date-picker.css b/thaw/src/date_picker/date-picker.css index f3f6343..b79b952 100644 --- a/thaw/src/date_picker/date-picker.css +++ b/thaw/src/date_picker/date-picker.css @@ -1,4 +1,4 @@ -.thaw-date-picker-panel { +div.thaw-date-picker-panel { width: 300px; background-color: var(--colorNeutralBackground1); border-radius: var(--borderRadiusMedium); diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 052d21e..ae95a5c 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -4,8 +4,8 @@ mod common; use self::common::CommonTheme; use crate::{ mobile::{NavBarTheme, TabbarTheme}, - AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, - ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme, UploadTheme, + AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, ProgressTheme, + ScrollbarTheme, SelectTheme, UploadTheme, }; pub use color::ColorTheme; use leptos::*; @@ -28,7 +28,6 @@ pub struct Theme { pub tabbar: TabbarTheme, pub progress: ProgressTheme, pub calendar: CalendarTheme, - pub time_picker: TimePickerTheme, pub scrollbar: ScrollbarTheme, pub back_top: BackTopTheme, pub anchor: AnchorTheme, @@ -48,7 +47,6 @@ impl Theme { tabbar: TabbarTheme::light(), progress: ProgressTheme::light(), calendar: CalendarTheme::light(), - time_picker: TimePickerTheme::light(), scrollbar: ScrollbarTheme::light(), back_top: BackTopTheme::light(), anchor: AnchorTheme::light(), @@ -67,7 +65,6 @@ impl Theme { tabbar: TabbarTheme::dark(), progress: ProgressTheme::dark(), calendar: CalendarTheme::dark(), - time_picker: TimePickerTheme::dark(), scrollbar: ScrollbarTheme::dark(), back_top: BackTopTheme::dark(), anchor: AnchorTheme::dark(), diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs index 51009ff..6a1cbb8 100644 --- a/thaw/src/time_picker/mod.rs +++ b/thaw/src/time_picker/mod.rs @@ -1,10 +1,6 @@ -mod theme; - -pub use theme::TimePickerTheme; - use crate::{ - use_theme, Button, ButtonSize, ButtonAppearance, Icon, Input, InputSuffix, Scrollbar, - ScrollbarRef, SignalWatch, Theme, + Button, ButtonSize, ConfigInjection, Icon, Input, InputSuffix, Scrollbar, ScrollbarRef, + SignalWatch, }; use chrono::{Local, NaiveTime, Timelike}; use leptos::*; @@ -18,11 +14,11 @@ pub fn TimePicker( #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, ) -> impl IntoView { mount_style("time-picker", include_str!("./time-picker.css")); - let time_picker_ref = create_node_ref::(); + let time_picker_ref = NodeRef::::new(); let panel_ref = ComponentRef::::default(); - let is_show_panel = create_rw_signal(false); + let is_show_panel = RwSignal::new(false); let show_time_format = "%H:%M:%S"; - let show_time_text = create_rw_signal(String::new()); + let show_time_text = RwSignal::new(String::new()); let update_show_time_text = move || { value.with_untracked(move |time| { let text = time.as_ref().map_or(String::new(), |time| { @@ -32,7 +28,7 @@ pub fn TimePicker( }); }; update_show_time_text(); - let panel_selected_time = create_rw_signal(None::); + let panel_selected_time = RwSignal::new(None::); _ = panel_selected_time.watch(move |time| { let text = time.as_ref().map_or(String::new(), |time| { time.format(show_time_format).to_string() @@ -102,29 +98,7 @@ fn Panel( #[prop(into)] is_show_panel: MaybeSignal, comp_ref: ComponentRef, ) -> impl IntoView { - let theme = use_theme(Theme::light); - let css_vars = create_memo(move |_| { - let mut css_vars = String::new(); - theme.with(|theme| { - css_vars.push_str(&format!( - "--thaw-item-font-color: {};", - theme.common.color_primary - )); - css_vars.push_str(&format!( - "--thaw-background-color: {};", - theme.time_picker.panel_background_color - )); - css_vars.push_str(&format!( - "--thaw-item-background-color-hover: {};", - theme.time_picker.panel_time_item_background_color_hover - )); - css_vars.push_str(&format!( - "--thaw-item-border-color: {};", - theme.time_picker.panel_border_color - )); - }); - css_vars - }); + let config_provider = ConfigInjection::use_(); let now = Callback::new(move |_| { close_panel.call(Some(now_time())); }); @@ -132,7 +106,7 @@ fn Panel( close_panel.call(selected_time.get_untracked()); }); - let panel_ref = create_node_ref::(); + let panel_ref = NodeRef::::new(); #[cfg(any(feature = "csr", feature = "hydrate"))] { use leptos::wasm_bindgen::__rt::IntoJsResult; @@ -183,8 +157,9 @@ fn Panel( let:display >
diff --git a/thaw/src/time_picker/theme.rs b/thaw/src/time_picker/theme.rs deleted file mode 100644 index 12cc7ac..0000000 --- a/thaw/src/time_picker/theme.rs +++ /dev/null @@ -1,26 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct TimePickerTheme { - pub panel_background_color: String, - pub panel_time_item_background_color_hover: String, - pub panel_border_color: String, -} - -impl ThemeMethod for TimePickerTheme { - fn light() -> Self { - Self { - panel_background_color: "#fff".into(), - panel_time_item_background_color_hover: "#f1f3f5".into(), - panel_border_color: "#e0e0e6".into(), - } - } - - fn dark() -> Self { - Self { - panel_background_color: "#48484e".into(), - panel_time_item_background_color_hover: "#ffffff1a".into(), - panel_border_color: "#ffffff3d".into(), - } - } -} diff --git a/thaw/src/time_picker/time-picker.css b/thaw/src/time_picker/time-picker.css index 696938f..8e51259 100644 --- a/thaw/src/time_picker/time-picker.css +++ b/thaw/src/time_picker/time-picker.css @@ -1,11 +1,10 @@ -.thaw-time-picker-panel { +div.thaw-time-picker-panel { width: 160px; height: 260px; - background-color: var(--thaw-background-color); - border-radius: 3px; + background-color: var(--colorNeutralBackground1); + border-radius: var(--borderRadiusMedium); box-sizing: border-box; - box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow16); } .thaw-time-picker-panel__time { @@ -35,11 +34,11 @@ .thaw-time-picker-panel__time-item--slected, .thaw-time-picker-panel__time-item:hover { - background-color: var(--thaw-item-background-color-hover); + background-color: var(--colorNeutralBackground1Hover); } .thaw-time-picker-panel__time-item--slected { - color: var(--thaw-item-font-color); + color: var(--colorBrandForeground1); } .thaw-time-picker-panel__footer { @@ -48,7 +47,7 @@ height: 38px; justify-content: space-evenly; align-items: center; - border-top: 1px solid var(--thaw-item-border-color); + border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); } .thaw-time-picker-panel.fade-in-scale-up-transition-leave-active {