refactor: DatePicker

This commit is contained in:
luoxiao 2024-06-25 23:31:05 +08:00
parent 14437c07a8
commit cdcc764b48
4 changed files with 13 additions and 40 deletions

View file

@ -13,9 +13,9 @@ pub fn DatePicker(
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("date-picker", include_str!("./date-picker.css")); mount_style("date-picker", include_str!("./date-picker.css"));
let date_picker_ref = create_node_ref::<html::Div>(); let date_picker_ref = NodeRef::<html::Div>::new();
let is_show_panel = create_rw_signal(false); let is_show_panel = RwSignal::new(false);
let show_date_text = create_rw_signal(String::new()); let show_date_text = RwSignal::new(String::new());
let show_date_format = "%Y-%m-%d"; let show_date_format = "%Y-%m-%d";
let update_show_date_text = move || { let update_show_date_text = move || {
value.with_untracked(move |date| { value.with_untracked(move |date| {
@ -27,7 +27,7 @@ pub fn DatePicker(
}; };
update_show_date_text(); update_show_date_text();
let panel_ref = ComponentRef::<PanelRef>::default(); let panel_ref = ComponentRef::<PanelRef>::default();
let panel_selected_date = create_rw_signal(None::<NaiveDate>); let panel_selected_date = RwSignal::new(None::<NaiveDate>);
_ = panel_selected_date.watch(move |date| { _ = panel_selected_date.watch(move |date| {
let text = date.as_ref().map_or(String::new(), |date| { let text = date.as_ref().map_or(String::new(), |date| {
date.format(show_date_format).to_string() date.format(show_date_format).to_string()

View file

@ -1,5 +1,5 @@
use super::PanelVariant; use super::PanelVariant;
use crate::{Button, ButtonSize, ButtonAppearance, CalendarItemDate}; use crate::{Button, ButtonAppearance, ButtonSize, CalendarItemDate};
use chrono::{Datelike, Days, Month, Months, NaiveDate}; use chrono::{Datelike, Days, Month, Months, NaiveDate};
use leptos::*; use leptos::*;
use std::ops::Deref; use std::ops::Deref;
@ -12,7 +12,7 @@ pub fn DatePanel(
close_panel: Callback<Option<NaiveDate>>, close_panel: Callback<Option<NaiveDate>>,
panel_variant: RwSignal<PanelVariant>, panel_variant: RwSignal<PanelVariant>,
) -> impl IntoView { ) -> impl IntoView {
let dates = create_memo(move |_| { let dates = Memo::new(move |_| {
let show_date = show_date.get(); let show_date = show_date.get();
let show_date_month = show_date.month(); let show_date_month = show_date.month();
let mut dates = vec![]; let mut dates = vec![];
@ -167,7 +167,7 @@ pub fn DatePanel(
#[component] #[component]
fn DatePanelItem(value: RwSignal<Option<NaiveDate>>, date: CalendarItemDate) -> impl IntoView { fn DatePanelItem(value: RwSignal<Option<NaiveDate>>, date: CalendarItemDate) -> impl IntoView {
let is_selected = create_memo({ let is_selected = Memo::new({
let date = date.clone(); let date = date.clone();
move |_| value.with(|value_date| value_date.as_ref() == Some(date.deref())) move |_| value.with(|value_date| value_date.as_ref() == Some(date.deref()))
}); });

View file

@ -20,34 +20,7 @@ pub fn Panel(
#[prop(optional)] comp_ref: ComponentRef<PanelRef>, #[prop(optional)] comp_ref: ComponentRef<PanelRef>,
) -> impl IntoView { ) -> impl IntoView {
let config_provider = ConfigInjection::use_(); let config_provider = ConfigInjection::use_();
// let css_vars = create_memo(move |_| { let panel_ref = NodeRef::<html::Div>::new();
// 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"))] #[cfg(any(feature = "csr", feature = "hydrate"))]
{ {
use leptos::wasm_bindgen::__rt::IntoJsResult; use leptos::wasm_bindgen::__rt::IntoJsResult;
@ -82,8 +55,8 @@ pub fn Panel(
_ = date_picker_ref; _ = date_picker_ref;
_ = panel_ref; _ = panel_ref;
} }
let panel_variant = create_rw_signal(PanelVariant::Date); let panel_variant = RwSignal::new(PanelVariant::Date);
let show_date = create_rw_signal(selected_date.get_untracked().unwrap_or(now_date())); let show_date = RwSignal::new(selected_date.get_untracked().unwrap_or(now_date()));
comp_ref.load(PanelRef { comp_ref.load(PanelRef {
show_date, show_date,
variant: panel_variant, variant: panel_variant,

View file

@ -1,5 +1,5 @@
use super::PanelVariant; use super::PanelVariant;
use crate::{Button, ButtonSize, ButtonAppearance}; use crate::{Button, ButtonAppearance, ButtonSize};
use chrono::{Datelike, Month, Months, NaiveDate}; use chrono::{Datelike, Month, Months, NaiveDate};
use leptos::*; use leptos::*;
@ -8,7 +8,7 @@ pub fn MonthPanel(
date_panel_show_date: RwSignal<NaiveDate>, date_panel_show_date: RwSignal<NaiveDate>,
panel_variant: RwSignal<PanelVariant>, panel_variant: RwSignal<PanelVariant>,
) -> impl IntoView { ) -> impl IntoView {
let show_date = create_rw_signal(date_panel_show_date.get_untracked()); let show_date = RwSignal::new(date_panel_show_date.get_untracked());
let previous_year = move |_| { let previous_year = move |_| {
show_date.update(|date| { show_date.update(|date| {
*date = *date - Months::new(12); *date = *date - Months::new(12);
@ -72,7 +72,7 @@ pub fn MonthPanel(
#[component] #[component]
fn MonthPanelItem(date_panel_show_date: RwSignal<NaiveDate>, month: Month) -> impl IntoView { fn MonthPanelItem(date_panel_show_date: RwSignal<NaiveDate>, month: Month) -> impl IntoView {
let is_selected = create_memo(move |_| { let is_selected = Memo::new(move |_| {
date_panel_show_date.with(|date| date.month() == month.number_from_month()) date_panel_show_date.with(|date| date.month() == month.number_from_month())
}); });