From e52741cf20224802f12435c99719b1ed289979e3 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 26 Jun 2024 23:24:43 +0800 Subject: [PATCH] refactor: Calendar --- thaw/src/calendar/calendar.css | 13 +++---- thaw/src/calendar/mod.rs | 66 ++++++++++------------------------ thaw/src/calendar/theme.rs | 26 -------------- thaw/src/theme/mod.rs | 9 +---- 4 files changed, 26 insertions(+), 88 deletions(-) delete mode 100644 thaw/src/calendar/theme.rs diff --git a/thaw/src/calendar/calendar.css b/thaw/src/calendar/calendar.css index 62519dd..72fa068 100644 --- a/thaw/src/calendar/calendar.css +++ b/thaw/src/calendar/calendar.css @@ -23,7 +23,8 @@ grid-auto-rows: 1fr; border-top: 1px solid; border-left: 1px solid; - border-color: var(--thaw-border-color); + border-color: var(--colorNeutralStroke2); + border-radius: var(--borderRadiusMedium); } .thaw-calendar-item { @@ -31,16 +32,16 @@ padding: 8px 12px; border-right: 1px solid; border-bottom: 1px solid; - border-color: var(--thaw-border-color); + border-color: var(--colorNeutralStroke2); cursor: pointer; } .thaw-calendar-item:hover { - background-color: var(--thaw-background-color-hover); + background-color: var(--colorNeutralBackground1Hover); } .thaw-calendar-item--other-month { - color: var(--thaw-font-color-other-month); + color: var(--colorNeutralForegroundDisabled); } .thaw-calendar-item__header { @@ -53,7 +54,7 @@ justify-content: center; align-items: center; color: white; - background-color: var(--thaw-background-color-today); + background-color: var(--colorBrandBackground); border-radius: 50%; margin-left: -0.4em; margin-top: -0.3em; @@ -66,6 +67,6 @@ left: 0; right: 0; bottom: 0; - background-color: var(--thaw-background-color-today); + background-color: var(--colorBrandBackground); height: 3px; } diff --git a/thaw/src/calendar/mod.rs b/thaw/src/calendar/mod.rs index 98efb6f..795f951 100644 --- a/thaw/src/calendar/mod.rs +++ b/thaw/src/calendar/mod.rs @@ -1,8 +1,4 @@ -mod theme; - -pub use theme::CalendarTheme; - -use crate::{use_theme, Button, ButtonGroup, Theme}; +use crate::{Button, ButtonGroup}; use chrono::{Datelike, Days, Local, Month, Months, NaiveDate}; use leptos::*; use std::ops::Deref; @@ -14,31 +10,8 @@ pub fn Calendar( #[prop(optional, into)] value: Model>, ) -> impl IntoView { mount_style("calendar", include_str!("./calendar.css")); - 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-background-color-today: {};", - theme.common.color_primary - )); - css_vars.push_str(&format!( - "--thaw-font-color-other-month: {};", - theme.calendar.other_month_font_color, - )); - css_vars.push_str(&format!( - "--thaw-border-color: {};", - theme.calendar.border_color - )); - css_vars.push_str(&format!( - "--thaw-background-color-hover: {};", - theme.calendar.background_color_hover - )); - }); - css_vars - }); - let show_date = create_rw_signal(value.get_untracked().unwrap_or(now_date())); - create_effect(move |_| { + let show_date = RwSignal::new(value.get_untracked().unwrap_or(now_date())); + Effect::new(move |_| { if let Some(selected_date) = value.get() { let show_date_data = show_date.get_untracked(); if selected_date.year() != show_date_data.year() @@ -49,7 +22,7 @@ pub fn Calendar( } }); - let dates = create_memo(move |_| { + let dates = Memo::new(move |_| { let show_date = show_date.get(); let show_date_month = show_date.month(); let mut dates = vec![]; @@ -115,7 +88,6 @@ pub fn Calendar( view! {
@@ -132,21 +104,19 @@ pub fn Calendar( }} - - - - +
@@ -172,7 +142,7 @@ fn CalendarItem( index: usize, date: CalendarItemDate, ) -> impl IntoView { - let is_selected = create_memo({ + let is_selected = Memo::new({ let date = date.clone(); move |_| value.with(|value_date| value_date.as_ref() == Some(date.deref())) }); diff --git a/thaw/src/calendar/theme.rs b/thaw/src/calendar/theme.rs deleted file mode 100644 index c5143ae..0000000 --- a/thaw/src/calendar/theme.rs +++ /dev/null @@ -1,26 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct CalendarTheme { - pub border_color: String, - pub other_month_font_color: String, - pub background_color_hover: String, -} - -impl ThemeMethod for CalendarTheme { - fn light() -> Self { - Self { - border_color: "#efeff5".into(), - other_month_font_color: "#c2c2c2".into(), - background_color_hover: "#f3f3f5".into(), - } - } - - fn dark() -> Self { - Self { - border_color: "#2d2d30".into(), - other_month_font_color: "#ffffff61".into(), - background_color_hover: "#2d2d30".into(), - } - } -} diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 23af080..387cce0 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -2,10 +2,7 @@ mod color; mod common; use self::common::CommonTheme; -use crate::{ - AlertTheme, AnchorTheme, CalendarTheme, MessageTheme, ProgressTheme, ScrollbarTheme, - SelectTheme, -}; +use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme}; pub use color::ColorTheme; use leptos::*; @@ -23,7 +20,6 @@ pub struct Theme { pub message: MessageTheme, pub select: SelectTheme, pub progress: ProgressTheme, - pub calendar: CalendarTheme, pub scrollbar: ScrollbarTheme, pub anchor: AnchorTheme, } @@ -37,9 +33,7 @@ impl Theme { alert: AlertTheme::light(), message: MessageTheme::light(), select: SelectTheme::light(), - progress: ProgressTheme::light(), - calendar: CalendarTheme::light(), scrollbar: ScrollbarTheme::light(), anchor: AnchorTheme::light(), } @@ -53,7 +47,6 @@ impl Theme { message: MessageTheme::dark(), select: SelectTheme::dark(), progress: ProgressTheme::dark(), - calendar: CalendarTheme::dark(), scrollbar: ScrollbarTheme::dark(), anchor: AnchorTheme::dark(), }