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

…d range on esc
taiga-family · Sep 8, 2022 · a0bc906 · a0bc906
1 parent 68b0acb
commit a0bc906
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 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,
@@ -80,6 +81,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     @tuiDefaultProp()
     value: TuiDayRange | null = null;
 
+    previousValue: TuiDayRange | null = null;
+
     @Output()
     readonly valueChange = new EventEmitter<TuiDayRange | null>();
 
@@ -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/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});
     }
 }