feat(kit): InputDateRange navigate months in sync, cancel unfinishe…

…d range on esc (#2647) * feat(kit): `InputDateRange` navigate months in sync, cancel unfinished range on esc * chore: apply changes after linting [tinkoff-bot] * chore: try to fix * chore: apply changes after linting [tinkoff-bot] * chore: fix tests Co-authored-by: tinkoff-bot <[email protected]>
taiga-family · Sep 12, 2022 · 14f2907 · 14f2907
1 parent 1542064
commit 14f2907
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -3,6 +3,7 @@ import {
     ChangeDetectorRef,
     Component,
     EventEmitter,
+    HostListener,
     Inject,
     Input,
     Optional,
@@ -83,6 +84,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     @Output()
     readonly valueChange = new EventEmitter<TuiDayRange | null>();
 
+    previousValue: TuiDayRange | null = null;
+
     readonly maxLengthMapper: TuiMapper<TuiDay, TuiDay> = MAX_DAY_RANGE_LENGTH_MAPPER;
 
     constructor(
@@ -104,8 +107,15 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
             });
     }
 
-    readonly monthShiftMapper: TuiMapper<TuiMonth, TuiMonth> = item =>
-        item.append({month: 1});
+    @HostListener(`document:keydown.capture`, [`$event`])
+    onEsc(event: KeyboardEvent): void {
+        if (event.key !== `Escape` || !this.value?.isSingleDay) {
+            return;
+        }
+
+        event.stopPropagation();
+        this.value = this.previousValue;
+    }
 
     readonly mapper: TuiMapper<
         readonly TuiDayRangePeriod[],
@@ -152,6 +162,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     onDayClick(day: TuiDay): void {
         const {value} = this;
 
+        this.previousValue = value;
+
         if (value === null || !value.isSingleDay) {
             this.value = new TuiDayRange(day, day);
 

diff --git a/projects/kit/components/calendar-range/calendar-range.template.html b/projects/kit/components/calendar-range/calendar-range.template.html
@@ -6,7 +6,6 @@
     [min]="min | tuiMapper: maxLengthMapper:value:maxLength:true"
     [max]="max | tuiMapper: maxLengthMapper:value:maxLength:false"
     [defaultViewedMonthFirst]="defaultViewedMonth"
-    [defaultViewedMonthSecond]="defaultViewedMonth | tuiMapper: monthShiftMapper"
     [disabledItemHandler]="calculatedDisabledItemHandler"
     [value]="value"
     (dayClick)="onDayClick($event)"

diff --git a/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts b/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts
@@ -229,7 +229,7 @@ describe(`InputDateRangeComponent + TUI_DATE_FORMAT="MDY" + TUI_DATE_SEPARATOR="
         fixture.detectChanges();
         await fixture.whenStable();
 
-        expect(inputPO.value).toBe(`12/16/2021 – 02/27/2022`);
+        expect(inputPO.value).toBe(`12/16/2021 – 01/27/2022`);
     });
 });
 
@@ -276,7 +276,7 @@ describe(`InputDateRangeComponent + TUI_DATE_FORMAT="YMD" + TUI_DATE_SEPARATOR="
         fixture.detectChanges();
         await fixture.whenStable();
 
-        expect(inputPO.value).toBe(`2021-12-12 – 2022-02-18`);
+        expect(inputPO.value).toBe(`2021-12-12 – 2022-01-18`);
     });
 });
 
@@ -407,7 +407,7 @@ describe(`InputDateRangeComponent + TUI_DATE_RANGE_VALUE_TRANSFORMER`, () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        expect(inputPO.value).toBe(`12.09.2021 – 18.11.2022`);
+        expect(inputPO.value).toBe(`12.09.2021 – 18.10.2021`);
     });
 
     it(`transforms value which was programmatically patched`, () => {

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
@@ -115,21 +115,15 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
     onSectionFirstViewedMonth(month: TuiMonth): void {
         this.userViewedMonthFirst = month;
 
-        if (this.userViewedMonthSecond.year < this.userViewedMonthFirst.year) {
-            this.userViewedMonthSecond = this.userViewedMonthSecond.append({
-                year: month.year - this.userViewedMonthSecond.year,
-            });
-        }
+        this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1});
     }
 
     onSectionSecondViewedMonth(month: TuiMonth): void {
         this.userViewedMonthSecond = month;
 
-        if (this.userViewedMonthFirst.year > this.userViewedMonthSecond.year) {
-            this.userViewedMonthFirst = this.userViewedMonthFirst.append({
-                year: month.year - this.userViewedMonthFirst.year,
-            });
-        }
+        this.userViewedMonthFirst = this.userViewedMonthSecond.append({
+            month: -1,
+        });
     }
 
     onDayClick(day: TuiDay): void {
@@ -175,11 +169,7 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
     private updateViewedMonths(): void {
         this.userViewedMonthFirst =
             this.value === null ? this.defaultViewedMonthFirst : this.value.from;
-        this.userViewedMonthSecond =
-            this.value === null ? this.defaultViewedMonthSecond : this.value.to;
 
-        if (this.userViewedMonthFirst.monthSame(this.userViewedMonthSecond)) {
-            this.userViewedMonthSecond = this.userViewedMonthSecond.append({month: 1});
-        }
+        this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1});
     }
 }