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

refactor: DatePicker

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

6
thaw/src/date_picker/panel/date_panel.rs
View file

@ -1,5 +1,5 @@
use super::PanelVariant;
use crate::{Button, ButtonSize, ButtonAppearance, CalendarItemDate};
use crate::{Button, ButtonAppearance, ButtonSize, CalendarItemDate};
use chrono::{Datelike, Days, Month, Months, NaiveDate};
use leptos::*;
use std::ops::Deref;
@ -12,7 +12,7 @@ pub fn DatePanel(
close_panel: Callback<Option<NaiveDate>>,
panel_variant: RwSignal<PanelVariant>,
) -> impl IntoView {
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![];
@ -167,7 +167,7 @@ pub fn DatePanel(
#[component]
fn DatePanelItem(value: RwSignal<Option<NaiveDate>>, 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()))
});

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

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

6
thaw/src/date_picker/panel/month_panel.rs
View file

@ -1,5 +1,5 @@
use super::PanelVariant;
use crate::{Button, ButtonSize, ButtonAppearance};
use crate::{Button, ButtonAppearance, ButtonSize};
use chrono::{Datelike, Month, Months, NaiveDate};
use leptos::*;
@ -8,7 +8,7 @@ pub fn MonthPanel(
date_panel_show_date: RwSignal<NaiveDate>,
panel_variant: RwSignal<PanelVariant>,
) -> 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 |_| {
show_date.update(|date| {
*date = *date - Months::new(12);
@ -72,7 +72,7 @@ pub fn MonthPanel(
#[component]
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())
});