fix(addon-mobile): fix mobile-calendar size without header (#8296)

taiga-family · Aug 5, 2024 · 75bb445 · 75bb445
1 parent 68f28f6
commit 75bb445
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 10 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
@@ -43,13 +43,22 @@ import {
     TUI_DONE_WORD,
     tuiImmutableUpdateInputDateMulti,
 } from '@taiga-ui/kit';
-import {identity, MonoTypeOperatorFunction, Observable, race, timer} from 'rxjs';
+import {
+    BehaviorSubject,
+    identity,
+    MonoTypeOperatorFunction,
+    Observable,
+    race,
+    timer,
+} from 'rxjs';
 import {
     debounceTime,
     delay,
+    distinctUntilChanged,
     filter,
     map,
     mergeMap,
+    skip,
     switchMap,
     take,
     takeUntil,
@@ -73,7 +82,10 @@ import {
     styleUrls: ['./mobile-calendar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: TUI_MOBILE_CALENDAR_PROVIDERS,
-    host: {'[class._ios]': 'isIOS', '[class._initialized]': 'initialized'},
+    host: {
+        '[class._ios]': 'isIOS',
+        '[class._initialized]': 'initialized',
+    },
 })
 export class TuiMobileCalendarComponent implements AfterViewInit {
     @ViewChild('yearsScrollRef')
@@ -82,6 +94,10 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     @ViewChild('monthsScrollRef')
     private readonly monthsScrollRef?: CdkVirtualScrollViewport;
 
+    private readonly value$ = new BehaviorSubject<
+        TuiDay | TuiDayRange | readonly TuiDay[] | null
+    >(null);
+
     private readonly today = TuiDay.currentLocal();
     private activeYear = 0;
     private activeMonth = 0;
@@ -107,7 +123,12 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     @Output()
     readonly confirm = new EventEmitter<TuiDay | TuiDayRange | readonly TuiDay[]>();
 
-    value: TuiDay | TuiDayRange | readonly TuiDay[] | null = null;
+    @Output()
+    readonly valueChange = this.value$.pipe(
+        skip(1),
+        distinctUntilChanged((a, b) => a?.toString() === b?.toString()),
+        takeUntil(this.destroy$),
+    );
 
     readonly years = Array.from({length: RANGE}, (_, i) => i + STARTING_YEAR);
 
@@ -147,6 +168,15 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         });
     }
 
+    get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null {
+        return this.value$.value;
+    }
+
+    @Input()
+    set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
+        this.value$.next(value);
+    }
+
     get yearWidth(): number {
         return this.doc.documentElement.clientWidth / YEARS_IN_ROW;
     }
@@ -176,12 +206,14 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
             this.value = day;
         } else if (this.isMultiValue(this.value)) {
             this.value = tuiImmutableUpdateInputDateMulti(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;
         }
     }
 
@@ -242,10 +274,6 @@ export class TuiMobileCalendarComponent 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 get initialYear(): number {
         if (!this.value) {
             return this.today.year;

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.style.less b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.style.less
@@ -171,6 +171,10 @@
     :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
@@ -69,6 +69,7 @@
 <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/mobile-calendar.component.ts b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.component.ts
@@ -80,6 +80,8 @@ export class ExampleTuiMobileCalendarComponent {
 
     single = true;
 
+    multi = false;
+
     readonly disabledItemHandlerVariants: ReadonlyArray<TuiBooleanHandler<TuiDay>> = [
         ALWAYS_FALSE_HANDLER,
         ({day}) => day % 3 === 0,

diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html
@@ -100,13 +100,21 @@
                 [disabledItemHandler]="disabledItemHandler"
                 [max]="max"
                 [min]="min"
+                [multi]="multi"
                 [single]="single"
                 (cancel)="documentationPropertyCancel.emitEvent($event)"
                 (confirm)="documentationPropertyConfirm.emitEvent($event)"
             ></tui-mobile-calendar>
         </tui-doc-demo>
 
         <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input-output"
+                documentationPropertyName="value"
+                documentationPropertyType="TuiDay | TuiDayRange | readonly TuiDay[] | null"
+            >
+                Value
+            </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="disabledItemHandler"
@@ -144,6 +152,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"