fix(kit): save current active period to distinguish periods with same…

… date ranges
taiga-family · Jun 18, 2024 · 858fe1e · 858fe1e
1 parent 2d6ab2d
commit 858fe1e
Showing 1 changed file with 9 additions and 15 deletions.
diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -21,7 +21,6 @@ import {
     TuiDestroyService,
     tuiIsString,
     TuiMonth,
-    tuiNullableSame,
     tuiObjectFromEntries,
     tuiPure,
     TuiTypedMapper,
@@ -80,6 +79,10 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
 
     previousValue: TuiDayRange | null = null;
 
+    // TODO: Consider saving TuiDayRangePeriod in control value
+    // to distinguish between same dates ranges with different name
+    activePeriod: TuiDayRangePeriod | null = null;
+
     readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER;
 
     get computedMin(): TuiDay {
@@ -151,6 +154,9 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     }
 
     isItemActive(item: TuiDayRangePeriod | string): boolean {
+        // eslint-disable-next-line
+        console.log('isItemActive', this.activePeriod, item);
+
         const {activePeriod} = this;
 
         return (tuiIsString(item) && activePeriod === null) || activePeriod === item;
@@ -178,12 +184,14 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     onItemSelect(item: TuiDayRangePeriod | string): void {
         if (typeof item !== 'string') {
             this.updateValue(item.range.dayLimit(this.min, this.max));
+            this.activePeriod = item;
 
             return;
         }
 
         if (this.activePeriod !== null) {
             this.updateValue(null);
+            this.activePeriod = null;
         }
     }
 
@@ -192,20 +200,6 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         this.valueChange.emit(value);
     }
 
-    private get activePeriod(): TuiDayRangePeriod | null {
-        return (
-            this.items.find(item =>
-                tuiNullableSame<TuiDayRange>(
-                    this.value,
-                    item.range,
-                    (a, b) =>
-                        a.from.daySame(b.from.dayLimit(this.min, this.max)) &&
-                        a.to.daySame(b.to.dayLimit(this.min, this.max)),
-                ),
-            ) || null
-        );
-    }
-
     @tuiPure
     private calculateDisabledItemHandler(
         disabledItemHandler: TuiBooleanHandler<TuiDay>,