adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: DatePicker

Browse source
This commit is contained in:
luoxiao 2024-06-25 22:57:44 +08:00
parent 2cbb4daa9a
commit 14437c07a8
6 changed files with 50 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
demo/src/pages/components.rs
View file

@ -163,6 +163,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/config-provider".into(),
label: "Config Provider".into(),
},
MenuItemOption {
value: "/components/date-picker".into(),
label: "Date Picker".into(),
},
MenuItemOption {
value: "/components/divider".into(),
label: "Divider".into(),
@ -215,10 +219,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/checkbox".into(),
label: "Checkbox".into(),
},
MenuItemOption {
value: "/components/date-picker".into(),
label: "Date Picker".into(),
},
MenuItemOption {
value: "/components/input".into(),
label: "Input".into(),

38
thaw/src/date_picker/date-picker.css
View file

@ -1,10 +1,9 @@
.thaw-date-picker-panel {
width: 300px;
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-date-picker-date-panel__calendar {
@ -18,10 +17,6 @@
justify-content: space-between;
}
.thaw-date-picker-date-panel__header > button {
color: var(--thaw-font-color-other-month);
}
.thaw-date-picker-date-panel__header-month-year {
flex: 1;
display: flex;
@ -37,7 +32,7 @@
}
.thaw-date-picker-date-panel__weekdays {
border-bottom: 1px solid var(--thaw-item-border-color);
border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
margin-bottom: 2px;
padding: 6px 4px;
}
@ -55,7 +50,7 @@
}
.thaw-date-picker-date-panel__item--other-month {
color: var(--thaw-font-color-other-month);
color: var(--colorNeutralForegroundDisabled);
}
.thaw-date-picker-date-panel__item-day {
@ -75,17 +70,17 @@
height: 4px;
width: 4px;
border-radius: 2px;
background-color: var(--thaw-background-color-today);
background-color: var(--colorBrandBackground);
}
.thaw-date-picker-date-panel__item:hover
.thaw-date-picker-date-panel__item-day {
background-color: var(--thaw-item-background-color-hover);
background-color: var(--colorNeutralBackground1Hover);
}
.thaw-date-picker-date-panel__item--selected
.thaw-date-picker-date-panel__item-day {
background-color: var(--thaw-background-color-today) !important;
background-color: var(--colorBrandBackground) !important;
color: white;
}
@ -95,7 +90,7 @@
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--thaw-item-border-color);
border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
}
.thaw-date-picker-date-panel__header-year {
@ -110,7 +105,7 @@
grid-template-columns: 28px 1fr 28px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--thaw-item-border-color);
border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
padding: 2px 6px;
}
@ -118,15 +113,10 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--thaw-item-border-color);
border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
padding: 4px 6px;
}
.thaw-date-picker-year-panel__header > button,
.thaw-date-picker-month-panel__header > button {
color: var(--thaw-font-color-other-month);
}
.thaw-date-picker-year-panel__years,
.thaw-date-picker-month-panel__months {
display: grid;
@ -137,7 +127,7 @@
.thaw-date-picker-year-panel__item:first-child,
.thaw-date-picker-year-panel__item:last-child {
color: var(--thaw-font-color-other-month);
color: var(--colorNeutralForegroundDisabled);
}
.thaw-date-picker-year-panel__item,
@ -153,7 +143,7 @@
.thaw-date-picker-year-panel__item-year,
.thaw-date-picker-month-panel__item--selected
.thaw-date-picker-month-panel__item-month {
background-color: var(--thaw-background-color-today) !important;
background-color: var(--colorBrandBackground) !important;
color: white;
}
@ -161,7 +151,7 @@
.thaw-date-picker-year-panel__item-year,
.thaw-date-picker-month-panel__item:hover
.thaw-date-picker-month-panel__item-month {
background-color: var(--thaw-item-background-color-hover);
background-color: var(--colorNeutralBackground1Hover);
}
.thaw-date-picker-year-panel__item-year,

4
thaw/src/date_picker/mod.rs
View file

@ -1,8 +1,4 @@
mod panel;
mod theme;
pub use theme::DatePickerTheme;
use crate::{Icon, Input, InputSuffix, SignalWatch};
use chrono::NaiveDate;
use leptos::*;

61
thaw/src/date_picker/panel/mod.rs
View file

@ -2,7 +2,7 @@ mod date_panel;
mod month_panel;
mod year_panel;
use crate::{use_theme, Theme};
use crate::ConfigInjection;
use chrono::NaiveDate;
use date_panel::DatePanel;
use leptos::*;
@ -19,33 +19,33 @@ pub fn Panel(
#[prop(into)] is_show_panel: MaybeSignal<bool>,
#[prop(optional)] 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-background-color-today: {};",
theme.common.color_primary
));
css_vars.push_str(&format!(
"--thaw-font-color-other-month: {};",
theme.date_picker.panel_other_month_font_color,
));
css_vars.push_str(&format!(
"--thaw-background-color: {};",
theme.date_picker.panel_background_color
));
css_vars.push_str(&format!(
"--thaw-item-background-color-hover: {};",
theme.date_picker.panel_date_item_background_color_hover
));
css_vars.push_str(&format!(
"--thaw-item-border-color: {};",
theme.date_picker.panel_border_color
));
});
css_vars
});
let config_provider = ConfigInjection::use_();
// 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.date_picker.panel_other_month_font_color,
// ));
// css_vars.push_str(&format!(
// "--thaw-background-color: {};",
// theme.date_picker.panel_background_color
// ));
// css_vars.push_str(&format!(
// "--thaw-item-background-color-hover: {};",
// theme.date_picker.panel_date_item_background_color_hover
// ));
// css_vars.push_str(&format!(
// "--thaw-item-border-color: {};",
// theme.date_picker.panel_border_color
// ));
// });
// css_vars
// });
let panel_ref = create_node_ref::<html::Div>();
#[cfg(any(feature = "csr", feature = "hydrate"))]
@ -98,8 +98,9 @@ pub fn Panel(
let:display
>
<div
class="thaw-date-picker-panel"
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
class="thaw-config-provider thaw-date-picker-panel"
data-thaw-id=config_provider.id().clone()
style=move || display.get()
ref=panel_ref
>

29
thaw/src/date_picker/theme.rs
View file

@ -1,29 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct DatePickerTheme {
pub panel_background_color: String,
pub panel_date_item_background_color_hover: String,
pub panel_border_color: String,
pub panel_other_month_font_color: String,
}
impl ThemeMethod for DatePickerTheme {
fn light() -> Self {
Self {
panel_background_color: "#fff".into(),
panel_date_item_background_color_hover: "#f1f3f5".into(),
panel_border_color: "#e0e0e6".into(),
panel_other_month_font_color: "#c2c2c2".into(),
}
}
fn dark() -> Self {
Self {
panel_background_color: "#48484e".into(),
panel_date_item_background_color_hover: "#ffffff1a".into(),
panel_border_color: "#ffffff3d".into(),
panel_other_month_font_color: "#ffffff61".into(),
}
}
}

5
thaw/src/theme/mod.rs
View file

@ -4,7 +4,7 @@ mod common;
use self::common::CommonTheme;
use crate::{
mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, DatePickerTheme, MessageTheme,
AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme,
ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme, UploadTheme,
};
pub use color::ColorTheme;
@ -29,7 +29,6 @@ pub struct Theme {
pub progress: ProgressTheme,
pub calendar: CalendarTheme,
pub time_picker: TimePickerTheme,
pub date_picker: DatePickerTheme,
pub scrollbar: ScrollbarTheme,
pub back_top: BackTopTheme,
pub anchor: AnchorTheme,
@ -50,7 +49,6 @@ impl Theme {
progress: ProgressTheme::light(),
calendar: CalendarTheme::light(),
time_picker: TimePickerTheme::light(),
date_picker: DatePickerTheme::light(),
scrollbar: ScrollbarTheme::light(),
back_top: BackTopTheme::light(),
anchor: AnchorTheme::light(),
@ -70,7 +68,6 @@ impl Theme {
progress: ProgressTheme::dark(),
calendar: CalendarTheme::dark(),
time_picker: TimePickerTheme::dark(),
date_picker: DatePickerTheme::dark(),
scrollbar: ScrollbarTheme::dark(),
back_top: BackTopTheme::dark(),
anchor: AnchorTheme::dark(),