refactor: TimePicker

demo/src/pages/components.rs

@@ -207,6 +207,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     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<MenuGroupOption> {
                     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(),

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);

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(),

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::<html::Div>();
+    let time_picker_ref = NodeRef::<html::Div>::new();
     let panel_ref = ComponentRef::<PanelRef>::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::<NaiveTime>);
+    let panel_selected_time = RwSignal::new(None::<NaiveTime>);
     _ = 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<bool>,
     comp_ref: ComponentRef<PanelRef>,
 ) -> 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::<html::Div>();
+    let panel_ref = NodeRef::<html::Div>::new();
     #[cfg(any(feature = "csr", feature = "hydrate"))]
     {
         use leptos::wasm_bindgen::__rt::IntoJsResult;
@@ -183,8 +157,9 @@ fn Panel(
             let:display
         >
             <div
-                class="thaw-time-picker-panel"
-                style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
+                class="thaw-config-provider thaw-time-picker-panel"
+                data-thaw-id=config_provider.id().clone()
+                style=move || display.get()
                 ref=panel_ref
             >
                 <div class="thaw-time-picker-panel__time">

thaw/src/time_picker/theme.rs

@@ -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(),
-        }
-    }
-}

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 {