fix(addon-mobile): emit TuiDay on first click in mobile-calendar[sing…

…le=false]
taiga-family · Aug 5, 2024 · 86f8c7a · 86f8c7a
1 parent fa765d2
commit 86f8c7a
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 29 deletions.
diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -47,7 +47,7 @@ import {
     TUI_CANCEL_WORD,
     TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
     TUI_DONE_WORD,
-} from '@taiga-ui/kit';
+} from '@taiga-ui/kit/tokens';
 import {tuiToggleDay} from '@taiga-ui/kit/utils';
 import type {MonoTypeOperatorFunction} from 'rxjs';
 import {
@@ -137,6 +137,7 @@ export class TuiMobileCalendar implements AfterViewInit {
     protected readonly chooseDayOrRangeTexts$ = inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS, {
         optional: true,
     });
+
     protected readonly years = Array.from({length: RANGE}, (_, i) => i + STARTING_YEAR);
     protected readonly months = Array.from(
         {length: RANGE * 12},
@@ -166,7 +167,9 @@ export class TuiMobileCalendar implements AfterViewInit {
     public readonly cancel = new EventEmitter<void>();
 
     @Output()
-    public readonly confirm = new EventEmitter<TuiDay | TuiDayRange | readonly TuiDay[]>();
+    public readonly confirm = new EventEmitter<
+        TuiDay | TuiDayRange | readonly TuiDay[]
+    >();
 
     @Output()
     public readonly valueChange = this.value$.pipe(
@@ -178,20 +181,11 @@ export class TuiMobileCalendar implements AfterViewInit {
     constructor() {
         inject(TUI_VALUE_STREAM)
             .pipe(takeUntilDestroyed())
-            .subscribe(value => {
+            .subscribe((value) => {
                 this.value = value;
             });
     }
 
-    protected get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null {
-        return this.value$.value;
-    }
-
-    @Input()
-    protected set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
-        this.value$.next(value);
-    }
-
     public ngAfterViewInit(): void {
         this.activeYear = this.initialYear;
         this.activeMonth = this.initialMonth;
@@ -214,6 +208,15 @@ export class TuiMobileCalendar implements AfterViewInit {
             .subscribe(() => this.scrollToActiveMonth());
     }
 
+    @Input()
+    protected set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
+        this.value$.next(value);
+    }
+
+    protected get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null {
+        return this.value$.value;
+    }
+
     protected get yearWidth(): number {
         return this.doc.documentElement.clientWidth / YEARS_IN_ROW;
     }
@@ -235,12 +238,14 @@ export class TuiMobileCalendar implements AfterViewInit {
             this.value = day;
         } else if (this.isMultiValue(this.value)) {
             this.value = tuiToggleDay(this.value, day);
-        } else if (this.isSingleValue(this.value)) {
-            this.value = new TuiDayRange(day, day);
+        } else if (this.value instanceof TuiDay) {
+            this.value = TuiDayRange.sort(this.value, day);
+        } else if (this.value instanceof TuiDayRange && !this.value.isSingleDay) {
+            this.value = day;
         } else if (this.value instanceof TuiDayRange) {
             this.value = TuiDayRange.sort(this.value.from, day);
         } else if (!this.value) {
-            this.value = new TuiDayRange(day, day);
+            this.value = day;
         }
     }
 
@@ -277,7 +282,7 @@ export class TuiMobileCalendar implements AfterViewInit {
     protected readonly disabledItemHandlerMapper: TuiMapper<
         [TuiBooleanHandler<TuiDay>, TuiDay, TuiDay],
         TuiBooleanHandler<TuiDay>
-    > = (disabledItemHandler, min, max) => item =>
+    > = (disabledItemHandler, min, max) => (item) =>
         item.dayBefore(min) ||
         (max !== null && item.dayAfter(max)) ||
         disabledItemHandler(item);
@@ -324,10 +329,6 @@ export class TuiMobileCalendar implements AfterViewInit {
         return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi;
     }
 
-    private isSingleValue(day: any): day is TuiDay {
-        return day instanceof TuiDay || (day instanceof TuiDayRange && !day.isSingleDay);
-    }
-
     private getYearsViewportSize(): number {
         return this.yearsScrollRef?.getViewportSize() || 0;
     }
@@ -389,7 +390,7 @@ export class TuiMobileCalendar implements AfterViewInit {
             .pipe(
                 // Ignore smooth scroll resulting from click on the exact year
                 windowToggle(touchstart$, () => click$),
-                mergeMap(x => x),
+                mergeMap((x) => x),
                 // Delay is required to run months scroll in the next frame to prevent flicker
                 delay(0),
                 map(
@@ -400,10 +401,10 @@ export class TuiMobileCalendar implements AfterViewInit {
                         Math.floor(YEARS_IN_ROW / 2) +
                         STARTING_YEAR,
                 ),
-                filter(activeYear => activeYear !== this.activeYear),
+                filter((activeYear) => activeYear !== this.activeYear),
                 takeUntilDestroyed(this.destroyRef),
             )
-            .subscribe(activeYear => {
+            .subscribe((activeYear) => {
                 this.activeMonth += this.getMonthOffset(activeYear);
                 this.activeYear = activeYear;
                 this.scrollToActiveMonth();

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.style.less b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.style.less
@@ -174,10 +174,6 @@
     :host._ios & {
         height: ~'calc(100% - 8.75rem)';
     }
-
-    &._without_header {
-        height: ~'calc(100% - 6rem)';
-    }
 }
 
 .t-month-wrapper {

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html
@@ -70,7 +70,6 @@
 <cdk-virtual-scroll-viewport
     #monthsScrollRef
     class="t-months"
-    [class._without_header]="!chooseDayOrRangeTexts$"
     (scrolledIndexChange)="onMonthChange($event)"
 >
     <section

diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/6/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/6/index.ts
@@ -4,7 +4,6 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiMobileCalendar} from '@taiga-ui/addon-mobile';
 import {TuiDay} from '@taiga-ui/cdk';
 import {TUI_CHOOSE_DAY_OR_RANGE_TEXTS} from '@taiga-ui/kit';
-import {of} from 'rxjs';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/mobile-calendar/index.html b/projects/demo/src/modules/components/mobile-calendar/index.html
@@ -77,6 +77,7 @@
                 [disabledItemHandler]="disabledItemHandler"
                 [max]="max"
                 [min]="min"
+                [multi]="multi"
                 [single]="single"
                 (cancel)="documentationPropertyCancel.emitEvent($event)"
                 (confirm)="documentationPropertyConfirm.emitEvent($event)"
@@ -128,6 +129,14 @@
             >
                 Single date or a range
             </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="multi"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="multi"
+            >
+                Array of single dates
+            </ng-template>
             <ng-template
                 #documentationPropertyCancel="documentationProperty"
                 documentationPropertyMode="output"

diff --git a/projects/demo/src/modules/components/mobile-calendar/index.ts b/projects/demo/src/modules/components/mobile-calendar/index.ts
@@ -47,6 +47,7 @@ export default class Page {
     protected max = this.maxVariants[0];
 
     protected single = true;
+    protected multi = false;
 
     protected readonly disabledItemHandlerVariants: ReadonlyArray<
         TuiBooleanHandler<TuiDay>