[*] DatePicker: fix date range selection

Author: ddudenin

primitives/src/calendar.rs

@@ -557,7 +557,6 @@ pub fn Calendar(props: CalendarProps) -> Element {
 pub struct RangeCalendarContext {
     // The date that the user clicked on to begin range selection
     anchor_date: Signal<Option<Date>>,
-    set_anchor_date: Callback<Option<Date>>,
     // Currently highlighted date range
     highlighted_range: Signal<Option<DateRange>>,
     set_selected_range: Callback<Option<DateRange>>,
@@ -570,7 +569,6 @@ impl RangeCalendarContext {
             Some(anchor) => {
                 if let Some(date) = date {
                     self.anchor_date.set(None);
-                    self.set_anchor_date.call(None);
 
                     let range = DateRange::new(date, anchor);
                     self.set_selected_range.call(Some(range));
@@ -579,7 +577,6 @@ impl RangeCalendarContext {
             }
             None => {
                 self.anchor_date.set(date);
-                self.set_anchor_date.call(date);
 
                 let range = date.map(|d| DateRange::new(d, d));
                 self.highlighted_range.set(range);
@@ -598,7 +595,6 @@ impl RangeCalendarContext {
     /// Set previous selected range
     pub fn reset_selection(&mut self, range: Option<DateRange>) {
         self.anchor_date.set(None);
-        self.set_anchor_date.call(None);
         self.highlighted_range.set(range);
     }
 }
@@ -614,10 +610,6 @@ pub struct RangeCalendarProps {
     #[props(default)]
     pub on_range_change: Callback<Option<DateRange>>,
 
-    /// Callback when anchor date changes
-    #[props(default)]
-    pub(crate) on_anchor_change: Callback<Option<Date>>,
-
     /// Callback when display weekday
     #[props(default = Callback::new(|weekday: Weekday| weekday_abbreviation(weekday).to_string()))]
     pub on_format_weekday: Callback<Weekday, String>,
@@ -739,7 +731,6 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
     // Create RangeCalendar context provider for child components
     let mut ctx = use_context_provider(|| RangeCalendarContext {
         anchor_date,
-        set_anchor_date: props.on_anchor_change,
         highlighted_range,
         set_selected_range: props.on_range_change,
     });

primitives/src/date_picker.rs

@@ -157,30 +157,17 @@ pub fn DatePicker(props: DatePickerProps) -> Element {
 /// The context provided by the [`RangeCalendar`] component to its children.
 #[derive(Copy, Clone)]
 pub struct DateRangePickerContext {
-    anchor_date: Signal<Option<Date>>,
-    // Currently highlighted date range
-    highlighted_range: Signal<Option<DateRange>>,
+    // Currently selected date range
+    date_range: Signal<Option<DateRange>>,
     set_selected_range: Callback<Option<DateRange>>,
 }
 
 impl DateRangePickerContext {
     /// Set the selected date
-    pub fn set_selected_date(&mut self, date: Option<Date>) {
-        match (self.anchor_date)() {
-            Some(anchor) => {
-                if let Some(date) = date {
-                    self.anchor_date.set(None);
-
-                    let range = DateRange::new(date, anchor);
-                    tracing::info!("new range {range}");
-                    self.set_selected_range.call(Some(range));
-                    self.highlighted_range.set(Some(range));
-                }
-            }
-            None => {
-                self.anchor_date.set(date);
-                tracing::info!("anchor {date:?}");
-            }
+    pub fn set_range(&mut self, range: Option<DateRange>) {
+        if (self.date_range)() != range {
+            self.date_range.set(range);
+            self.set_selected_range.call(range);
         }
     }
 }
@@ -280,11 +267,9 @@ pub fn DateRangePicker(props: DateRangePickerProps) -> Element {
         enabled_date_range: DateRange::new(props.min_date, props.max_date),
     });
 
-    let anchor_date = use_signal(|| None);
-    let highlighted_range = use_signal(|| (props.selected_range)());
+    let date_range = use_signal(|| (props.selected_range)());
     use_context_provider(|| DateRangePickerContext {
-        anchor_date,
-        highlighted_range,
+        date_range,
         set_selected_range: props.on_range_change,
     });
 
@@ -561,7 +546,7 @@ pub fn DateRangePickerCalendar(props: DatePickerCalendarProps<RangeCalendarProps
     let RangeCalendar = props.calendar;
     let mut view_date = use_signal(|| UtcDateTime::now().date());
     use_effect(move || {
-        if let Some(r) = (ctx.highlighted_range)() {
+        if let Some(r) = (ctx.date_range)() {
             view_date.set(r.end);
         }
     });
@@ -570,13 +555,12 @@ pub fn DateRangePickerCalendar(props: DatePickerCalendarProps<RangeCalendarProps
 
     rsx! {
         RangeCalendar {
-            selected_range: ctx.highlighted_range,
+            selected_range: ctx.date_range,
             on_range_change: move |range| {
-                tracing::info!("calendar selected date {range:?}");
-                ctx.highlighted_range.set(range);
+                tracing::info!("calendar selected range {range:?}");
+                ctx.set_range(range);
                 base_ctx.open.set(false);
             },
-            on_anchor_change: move |date| ctx.set_selected_date(date),
             on_format_weekday: props.on_format_weekday,
             on_format_month: props.on_format_month,
             view_date: view_date(),
@@ -850,7 +834,7 @@ struct DateElementProps {
 
 #[component]
 fn DateElement(props: DateElementProps) -> Element {
-    let mut ctx = use_context::<BaseDatePickerContext>();
+    let ctx = use_context::<BaseDatePickerContext>();
 
     let mut day_value = use_signal(|| None);
     let mut month_value = use_signal(|| None);
@@ -875,7 +859,6 @@ fn DateElement(props: DateElementProps) -> Element {
             {
                 tracing::info!("Parsed date: {date:?}");
                 props.on_date_change.call(Some(date));
-                ctx.open.set(false);
             }
         }
     });
@@ -1015,13 +998,17 @@ pub struct DatePickerInputProps {
 /// ```
 #[component]
 pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
+    let mut base_ctx = use_context::<BaseDatePickerContext>();
     let mut ctx = use_context::<DatePickerContext>();
 
     rsx! {
         div { class: "date-picker-group", ..props.attributes,
             DateElement {
                 selected_date: ctx.selected_date,
-                on_date_change: move |date| ctx.set_date(date),
+                on_date_change: move |date| {
+                    ctx.set_date(date);
+                    base_ctx.open.set(false);
+                },
                 on_format_day_placeholder: props.on_format_day_placeholder,
                 on_format_month_placeholder: props.on_format_month_placeholder,
                 on_format_year_placeholder: props.on_format_year_placeholder,
@@ -1071,15 +1058,27 @@ pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
 #[component]
 pub fn DateRangePickerInput(props: DatePickerInputProps) -> Element {
     let mut ctx = use_context::<DateRangePickerContext>();
-    let start_date =
-        use_signal(|| (ctx.anchor_date)().or((ctx.highlighted_range)().map(|r| r.start)));
-    let end_date = use_signal(|| (ctx.highlighted_range)().map(|r| r.end));
+    let mut start_date = use_signal(|| None);
+    let mut end_date = use_signal(|| None);
+
+    use_effect(move || {
+        start_date.set((ctx.date_range)().map(|r| r.start));
+        end_date.set((ctx.date_range)().map(|r| r.end));
+    });
+
+    use_effect(move || {
+        if let (Some(start), Some(end)) = (start_date(), end_date()) {
+            let range = Some(DateRange::new(start, end));
+            tracing::info!("set range {range:?}");
+            ctx.set_range(range);
+        };
+    });
 
     rsx! {
         div { class: "date-picker-group", ..props.attributes,
             DateElement {
                 selected_date: start_date(),
-                on_date_change: move |date| ctx.set_selected_date(date),
+                on_date_change: move |date| start_date.set(date),
                 on_format_day_placeholder: props.on_format_day_placeholder,
                 on_format_month_placeholder: props.on_format_month_placeholder,
                 on_format_year_placeholder: props.on_format_year_placeholder,
@@ -1088,7 +1087,7 @@ pub fn DateRangePickerInput(props: DatePickerInputProps) -> Element {
             DateElement {
                 start_index: 3,
                 selected_date: end_date(),
-                on_date_change: move |date| ctx.set_selected_date(date),
+                on_date_change: move |date| end_date.set(date),
                 on_format_day_placeholder: props.on_format_day_placeholder,
                 on_format_month_placeholder: props.on_format_month_placeholder,
                 on_format_year_placeholder: props.on_format_year_placeholder,