feat(addon-mobile): possibility drop mobile calendar header

taiga-family · Jul 31, 2024 · 0f4928e · 0f4928e
1 parent c512f17
commit 0f4928e
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 9 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
@@ -128,7 +128,9 @@ export class TuiMobileCalendar implements AfterViewInit {
     protected readonly cancelWord$ = inject(TUI_CANCEL_WORD);
     protected readonly doneWord$ = inject(TUI_DONE_WORD);
     protected readonly unorderedWeekDays$ = inject(TUI_SHORT_WEEK_DAYS);
-    protected readonly chooseDayOrRangeTexts$ = inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS);
+    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},
@@ -165,7 +167,7 @@ export class TuiMobileCalendar implements AfterViewInit {
     constructor() {
         inject(TUI_VALUE_STREAM)
             .pipe(takeUntilDestroyed())
-            .subscribe((value) => {
+            .subscribe(value => {
                 this.value = value;
             });
     }
@@ -255,7 +257,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);
@@ -367,7 +369,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(
@@ -378,10 +380,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.template.html b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html
@@ -1,4 +1,7 @@
-<header class="t-header">
+<header
+    *ngIf="chooseDayOrRangeTexts$ | async as texts"
+    class="t-header"
+>
     <button
         appearance=""
         automation-id="tui-mobile-calendar__cancel"
@@ -22,11 +25,10 @@
         {{ cancelWord$ | async }}
     </button>
     <h2
-        *ngIf="chooseDayOrRangeTexts$ | async as texts"
         automation-id="tui-mobile-calendar__label"
         class="t-label"
     >
-        {{ single ? texts?.[0] : multi ? texts?.[2] : texts?.[1] }}
+        {{ single ? texts[0] : multi ? texts[2] : texts[1] }}
     </h2>
     <button
         automation-id="tui-mobile-calendar__confirm"

diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/6/index.html b/projects/demo/src/modules/components/mobile-calendar/examples/6/index.html
@@ -0,0 +1,6 @@
+<div class="example">
+    <tui-mobile-calendar
+        [max]="max"
+        [min]="min"
+    />
+</div>
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/6/index.less b/projects/demo/src/modules/components/mobile-calendar/examples/6/index.less
@@ -0,0 +1,3 @@
+.example {
+    height: 35rem;
+}
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
@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+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,
+    imports: [TuiMobileCalendar],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
+            useValue: null,
+        },
+    ],
+})
+export default class Example {
+    protected min = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 1);
+    protected max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 10);
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/index.html b/projects/demo/src/modules/components/mobile-calendar/index.html
@@ -61,6 +61,13 @@
             [component]="5 | tuiComponent"
             [content]="5 | tuiExample"
         />
+
+        <tui-doc-example
+            id="without-header"
+            heading="Without header"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>