From f43bc2b7a185f20f309a0cfbcbdfa8d9184c2634 Mon Sep 17 00:00:00 2001 From: German Panov Date: Tue, 5 Nov 2024 11:23:49 +0300 Subject: [PATCH] fix(kit): `CalendarRange` switch months if any input updated, when date range selected (#9665) --- .../calendar-range.component.ts | 37 ++++++++----- .../test/calendar-range.component.spec.ts | 55 +++++++++++++++++++ 2 files changed, 79 insertions(+), 13 deletions(-) diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index b8666101b575..10c3e811fb09 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -49,14 +49,14 @@ export class TuiCalendarRange implements OnInit, OnChanges { * @deprecated use `item` */ private selectedPeriod: TuiDayRangePeriod | null = null; - protected readonly otherDateText$ = inject(TUI_OTHER_DATE_TEXT); - protected readonly icons = inject(TUI_COMMON_ICONS); + protected previousValue: TuiDayRange | null = null; protected hoveredItem: TuiDay | null = null; - protected readonly capsMapper = TUI_DAY_CAPS_MAPPER; + protected month: TuiMonth = TuiMonth.currentLocal(); - @Input() - public defaultViewedMonth: TuiMonth = TuiMonth.currentLocal(); + protected readonly otherDateText$ = inject(TUI_OTHER_DATE_TEXT); + protected readonly icons = inject(TUI_COMMON_ICONS); + protected readonly capsMapper = TUI_DAY_CAPS_MAPPER; @Input() public disabledItemHandler: TuiBooleanHandler = TUI_FALSE_HANDLER; @@ -100,6 +100,17 @@ export class TuiCalendarRange implements OnInit, OnChanges { }); } + @Input() + public set defaultViewedMonth(month: TuiMonth) { + if (!this.value) { + this.month = month; + } + } + + public get defaultViewedMonth(): TuiMonth { + return this.month; + } + /** * @deprecated use `item` */ @@ -115,7 +126,9 @@ export class TuiCalendarRange implements OnInit, OnChanges { } public ngOnChanges(): void { - this.initDefaultViewedMonth(); + if (!this.value) { + this.initDefaultViewedMonth(); + } } public ngOnInit(): void { @@ -240,13 +253,11 @@ export class TuiCalendarRange implements OnInit, OnChanges { private initDefaultViewedMonth(): void { if (this.value) { - this.defaultViewedMonth = this.items.length ? this.value.to : this.value.from; - } else if (this.max && this.defaultViewedMonth.monthSameOrAfter(this.max)) { - this.defaultViewedMonth = this.items.length - ? this.max - : this.max.append({month: -1}); - } else if (this.min && this.defaultViewedMonth.monthSameOrBefore(this.min)) { - this.defaultViewedMonth = this.min; + this.month = this.items.length ? this.value.to : this.value.from; + } else if (this.max && this.month.monthSameOrAfter(this.max)) { + this.month = this.items.length ? this.max : this.max.append({month: -1}); + } else if (this.min && this.month.monthSameOrBefore(this.min)) { + this.month = this.min; } } diff --git a/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts index 5e683b3b14c5..537626fc5234 100644 --- a/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts +++ b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts @@ -18,6 +18,7 @@ import { TuiMonth, TuiYear, } from '@taiga-ui/cdk'; +import type {TuiMarkerHandler} from '@taiga-ui/core'; import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins'; import { TUI_CALENDAR_DATE_STREAM, @@ -35,7 +36,9 @@ describe('rangeCalendarComponent', () => { imports: [TuiCalendarRange], template: ` { public value: TuiDayRange | null = null; + public defaultViewedMonth = TuiMonth.currentLocal(); + + public markerHandler: TuiMarkerHandler | null = null; + public onRangeChange(range: TuiDayRange | null): void { this.control.setValue(range); } @@ -86,12 +93,17 @@ describe('rangeCalendarComponent', () => { imports: [Test], providers: [NG_EVENT_PLUGINS], }); + await TestBed.compileComponents(); + fixture = TestBed.createComponent(Test); pageObject = new TuiPageObject(fixture); + testComponent = fixture.componentInstance; fixture.detectChanges(); + component = testComponent.component; + await fixture.whenStable(); fixture.detectChanges(); }); @@ -309,6 +321,49 @@ describe('rangeCalendarComponent', () => { }); }); + describe('defaultViewedMonth updating', () => { + beforeEach(() => { + testComponent.items = []; + fixture.detectChanges(); + }); + + const defaultMonth = TuiMonth.currentLocal(); + const updatedMonth = defaultMonth.append({ + year: 1, + }); + + it('if other input updates after defaultViewedMonth was updated, new viewed months do not change', () => { + testComponent.defaultViewedMonth = updatedMonth; + fixture.detectChanges(); + + testComponent.markerHandler = (day: TuiDay) => + day.day % 2 === 0 ? ['first'] : ['second']; + fixture.detectChanges(); + + expect(component.defaultViewedMonth.toString()).toBe(updatedMonth.toString()); + }); + + it('if value not selected, updating defaultViewedMonth change viewed months', () => { + testComponent.defaultViewedMonth = updatedMonth; + fixture.detectChanges(); + + expect(component.defaultViewedMonth.toString()).toBe(updatedMonth.toString()); + }); + + it('if value selected, updating defaultViewedMonth do not change viewed month', () => { + testComponent.value = new TuiDayRange( + TuiDay.currentLocal().append({month: 1}), + TuiDay.currentLocal().append({month: 1}), + ); + fixture.detectChanges(); + + testComponent.defaultViewedMonth = updatedMonth; + fixture.detectChanges(); + + expect(component.defaultViewedMonth.toString()).toBe(defaultMonth.toString()); + }); + }); + function getCalendar(): DebugElement | null { return pageObject.getByAutomationId('tui-calendar-range__calendar'); }