fix(kit): CalendarRange show actual defaultViewedMonth

taiga-family · Oct 8, 2024 · ccc28bc · ccc28bc
1 parent 20b1c61
commit ccc28bc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts b/projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts
@@ -5,10 +5,12 @@ import {
     EventEmitter,
     Inject,
     Input,
+    OnChanges,
     OnInit,
     Optional,
     Output,
     Self,
+    SimpleChanges,
 } from '@angular/core';
 import {
     ALWAYS_FALSE_HANDLER,
@@ -37,7 +39,7 @@ import {takeUntil} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiDestroyService],
 })
-export class TuiPrimitiveCalendarRangeComponent implements OnInit {
+export class TuiPrimitiveCalendarRangeComponent implements OnInit, OnChanges {
     @Input()
     disabledItemHandler: TuiBooleanHandler<TuiDay> = ALWAYS_FALSE_HANDLER;
 
@@ -99,6 +101,16 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
     monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, offset) =>
         value.append({month: offset});
 
+    ngOnChanges({
+        defaultViewedMonthFirst,
+        defaultViewedMonthSecond,
+    }: SimpleChanges): void {
+        this.updateViewedMonths(
+            defaultViewedMonthFirst?.currentValue,
+            defaultViewedMonthSecond?.currentValue,
+        );
+    }
+
     ngOnInit(): void {
         this.setInitialMonths();
     }
@@ -157,10 +169,18 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
         return month;
     }
 
-    private updateViewedMonths(): void {
-        this.userViewedMonthFirst =
-            this.value === null ? this.defaultViewedMonthFirst : this.value.from;
+    private updateViewedMonths(firstMonth?: TuiMonth, secondMonth?: TuiMonth): void {
+        if (this.value) {
+            this.userViewedMonthFirst = this.value.from;
+            this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1});
+        } else {
+            this.userViewedMonthSecond = this.updatedViewedMonthSecond(
+                firstMonth ?? this.userViewedMonthSecond,
+            );
 
-        this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1});
+            this.userViewedMonthFirst = this.updatedViewedMonthFirst(
+                secondMonth ?? this.userViewedMonthFirst,
+            );
+        }
     }
 }
diff --git a/...cts/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts b/...cts/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts
@@ -7,6 +7,9 @@ import {
     TuiPrimitiveCalendarRangeModule,
 } from '@taiga-ui/kit';
 
+const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)'];
+const ONE_DOT: [string] = ['var(--tui-success-fill)'];
+
 describe('PrimitiveRangeCalendar component', () => {
     @Component({
         template: `
@@ -141,4 +144,16 @@ describe('PrimitiveRangeCalendar component', () => {
             expect(component.cappedUserViewedMonthSecond).toBe(day);
         });
     });
+
+    it('When handle any changes, current viewed month do not updates', () => {
+        const date = TuiMonth.currentLocal().append({month: 3});
+
+        component.userViewedMonthSecond = date;
+
+        component.markerHandler = (day: TuiDay) =>
+            day.day % 2 === 0 ? TWO_DOTS : ONE_DOT;
+        component.ngOnChanges({});
+
+        expect(component.userViewedMonthSecond).toBe(date);
+    });
 });