mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
refactor: DatePicker
This commit is contained in:
parent
14437c07a8
commit
cdcc764b48
4 changed files with 13 additions and 40 deletions
|
@ -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()
|
||||||
|
|
|
@ -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()))
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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())
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue