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 index e05159e0a046..2bb4073ed342 100644 --- 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 = ALWAYS_FALSE_HANDLER; @@ -99,6 +101,18 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit { monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, offset) => value.append({month: offset}); + ngOnChanges({ + defaultViewedMonthFirst, + defaultViewedMonthSecond, + }: SimpleChanges): void { + if (!this.value) { + this.updateViewedMonths( + defaultViewedMonthFirst?.currentValue, + defaultViewedMonthSecond?.currentValue, + ); + } + } + ngOnInit(): void { this.setInitialMonths(); } @@ -157,10 +171,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( + secondMonth ?? this.userViewedMonthSecond, + ); - this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1}); + this.userViewedMonthFirst = this.updatedViewedMonthFirst( + firstMonth ?? this.userViewedMonthFirst, + ); + } } } diff --git a/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts b/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts index d8c8c3e9f32e..1acfdcadad2f 100644 --- a/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts +++ b/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts @@ -1,7 +1,8 @@ import {Component, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {TuiDay, TuiMonth} from '@taiga-ui/cdk'; +import {TuiDay, TuiDayRange, TuiMonth} from '@taiga-ui/cdk'; +import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core'; import { TuiPrimitiveCalendarRangeComponent, TuiPrimitiveCalendarRangeModule, @@ -10,12 +11,24 @@ import { describe('PrimitiveRangeCalendar component', () => { @Component({ template: ` - + `, }) class TestComponent { @ViewChild(TuiPrimitiveCalendarRangeComponent, {static: true}) component!: TuiPrimitiveCalendarRangeComponent; + + defaultViewedMonthFirst = TuiMonth.currentLocal(); + defaultViewedMonthSecond = TuiMonth.currentLocal().append({month: 1}); + + value: TuiDayRange | null = null; + + markerHandler: TuiMarkerHandler = TUI_DEFAULT_MARKER_HANDLER; } let fixture: ComponentFixture; @@ -141,4 +154,66 @@ describe('PrimitiveRangeCalendar component', () => { expect(component.cappedUserViewedMonthSecond).toBe(day); }); }); + + describe('defaultViewedMonths updating', () => { + const defaultMonth = TuiMonth.currentLocal(); + const updatedMonth = TuiMonth.currentLocal().append({ + year: 1, + }); + + it('If other input updates after defaultViewedMonth was updated, new viewed months do not change', () => { + testComponent.defaultViewedMonthFirst = updatedMonth; + testComponent.defaultViewedMonthSecond = updatedMonth.append({ + month: 1, + }); + fixture.detectChanges(); + + testComponent.markerHandler = (day: TuiDay) => + day.day % 2 === 0 ? ['first'] : ['second']; + fixture.detectChanges(); + + expect(component.userViewedMonthFirst.toString()).toBe( + updatedMonth.toString(), + ); + expect(component.userViewedMonthSecond.toString()).toBe( + updatedMonth.append({month: 1}).toString(), + ); + }); + + it('If value not selected, updating defaultViewedMonth change viewed months', () => { + testComponent.defaultViewedMonthFirst = updatedMonth; + testComponent.defaultViewedMonthSecond = updatedMonth.append({ + month: 1, + }); + fixture.detectChanges(); + + expect(component.userViewedMonthFirst.toString()).toBe( + updatedMonth.toString(), + ); + expect(component.userViewedMonthSecond.toString()).toBe( + updatedMonth.append({month: 1}).toString(), + ); + }); + + it('If value selected, updating defaultViewedMonth do not change viewed month', () => { + testComponent.value = new TuiDayRange( + new TuiDay(2024, 9, 25), + new TuiDay(2024, 9, 25), + ); + fixture.detectChanges(); + + testComponent.defaultViewedMonthFirst = updatedMonth; + testComponent.defaultViewedMonthSecond = updatedMonth.append({ + month: 1, + }); + fixture.detectChanges(); + + expect(component.userViewedMonthFirst.toString()).toBe( + defaultMonth.toString(), + ); + expect(component.userViewedMonthSecond.toString()).toBe( + defaultMonth.append({month: 1}).toString(), + ); + }); + }); });