feat(kit): support null in tuiImmutableUpdateInputDateMulti (#6176)

taiga-family · Dec 12, 2023 · 3ef4f48 · 3ef4f48
1 parent ddb07f9
commit 3ef4f48
Show file tree

Hide file tree

Showing 11 changed files with 277 additions and 46 deletions.
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/1/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/1/index.ts
@@ -18,61 +18,53 @@ import {map} from 'rxjs/operators';
     changeDetection,
 })
 export class TuiMobileCalendarExample1 {
-    private readonly control = new FormControl(new TuiDay(2024, 6, 3));
+    private readonly control = new FormControl(null);
 
-    private readonly dialog$: Observable<TuiDay>;
+    private readonly dialog$: Observable<TuiDay> = this.dialogs.open(
+        new PolymorpheusComponent(
+            TuiMobileCalendarDialogComponent,
+            Injector.create({
+                providers: [
+                    {
+                        provide: TUI_CALENDAR_DATE_STREAM,
+                        useValue: tuiControlValue(this.control),
+                    },
+                ],
+                parent: this.injector,
+            }),
+        ),
+        {
+            size: 'fullscreen',
+            closeable: false,
+            data: {
+                single: true,
+                min: TuiDay.currentLocal(),
+            },
+        },
+    );
 
     readonly date$ = combineLatest([
         tuiControlValue<TuiDay>(this.control),
         this.months$,
-    ]).pipe(map(([value, months]) => this.getParsed(value, months)));
+    ]).pipe(
+        map(([value, months]) =>
+            !value
+                ? 'Choose a date'
+                : `${months[value.month]} ${value.day}, ${value.year}`,
+        ),
+    );
 
     constructor(
-        @Inject(TuiDialogService) dialogs: TuiDialogService,
-        @Inject(Injector) injector: Injector,
+        @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
+        @Inject(Injector) private readonly injector: Injector,
         @Inject(TUI_MONTHS) private readonly months$: Observable<string[]>,
-    ) {
-        const dataStream = tuiControlValue(this.control);
-        const computedInjector = Injector.create({
-            providers: [
-                {
-                    provide: TUI_CALENDAR_DATE_STREAM,
-                    useValue: dataStream,
-                },
-            ],
-            parent: injector,
-        });
-        const content = new PolymorpheusComponent(
-            TuiMobileCalendarDialogComponent,
-            computedInjector,
-        );
-
-        this.dialog$ = dialogs.open(content, {
-            size: 'fullscreen',
-            closeable: false,
-            data: {
-                min: TuiDay.currentLocal(),
-            },
-        });
-    }
+    ) {}
 
     get empty(): boolean {
         return !this.control.value;
     }
 
-    getParsed(value: TuiDay | null, months: string[]): string {
-        if (!value) {
-            return 'Choose a date';
-        }
-
-        const {month, day, year} = value;
-
-        return `${months[month]} ${day}, ${year}`;
-    }
-
     onClick(): void {
-        this.dialog$.subscribe(value => {
-            this.control.setValue(value);
-        });
+        this.dialog$.subscribe(value => this.control.setValue(value));
     }
 }
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/4/index.html b/projects/demo/src/modules/components/mobile-calendar/examples/4/index.html
@@ -0,0 +1,16 @@
+<div class="wrapper">
+    <button
+        appearance="secondary"
+        icon="tuiIconCalendarLarge"
+        shape="rounded"
+        tuiIconButton
+        type="button"
+        (click)="onClick()"
+    ></button>
+    <span
+        class="date"
+        [class.date_empty]="empty"
+    >
+        {{ date$ | async }}
+    </span>
+</div>
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/4/index.less b/projects/demo/src/modules/components/mobile-calendar/examples/4/index.less
@@ -0,0 +1,12 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.date {
+    margin-left: 1rem;
+
+    &_empty {
+        color: var(--tui-text-03);
+    }
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/4/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/4/index.ts
@@ -0,0 +1,75 @@
+import {Component, Inject, Injector} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile';
+import {tuiControlValue, TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {TUI_MONTHS, TuiDialogService} from '@taiga-ui/core';
+import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
+import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
+import {combineLatest, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'tui-mobile-calendar-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiMobileCalendarExample4 {
+    private readonly control = new FormControl(null);
+
+    private readonly dialog$: Observable<TuiDayRange> = this.dialogs.open(
+        new PolymorpheusComponent(
+            TuiMobileCalendarDialogComponent,
+            Injector.create({
+                providers: [
+                    {
+                        provide: TUI_CALENDAR_DATE_STREAM,
+                        useValue: tuiControlValue(this.control),
+                    },
+                ],
+                parent: this.injector,
+            }),
+        ),
+        {
+            size: 'fullscreen',
+            closeable: false,
+            data: {
+                min: new TuiDay(2018, 2, 10),
+            },
+        },
+    );
+
+    readonly date$ = combineLatest([
+        tuiControlValue<TuiDayRange>(this.control),
+        this.months$,
+    ]).pipe(
+        map(([value, months]) => {
+            if (!value) {
+                return 'Choose a date range';
+            }
+
+            return value.isSingleDay
+                ? `${months[value.from.month]} ${value.from.day}, ${value.from.year}`
+                : `${months[value.from.month]} ${value.from.day}, ${value.from.year} - ${
+                      months[value.to.month]
+                  } ${value.to.day}, ${value.to.year}`;
+        }),
+    );
+
+    constructor(
+        @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
+        @Inject(Injector) private readonly injector: Injector,
+        @Inject(TUI_MONTHS) private readonly months$: Observable<string[]>,
+    ) {}
+
+    get empty(): boolean {
+        return !this.control.value;
+    }
+
+    onClick(): void {
+        this.dialog$.subscribe(value => this.control.setValue(value));
+    }
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/5/index.html b/projects/demo/src/modules/components/mobile-calendar/examples/5/index.html
@@ -0,0 +1,16 @@
+<div class="wrapper">
+    <button
+        appearance="secondary"
+        icon="tuiIconCalendarLarge"
+        shape="rounded"
+        tuiIconButton
+        type="button"
+        (click)="onClick()"
+    ></button>
+    <span
+        class="date"
+        [class.date_empty]="empty"
+    >
+        {{ date$ | async }}
+    </span>
+</div>
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/5/index.less b/projects/demo/src/modules/components/mobile-calendar/examples/5/index.less
@@ -0,0 +1,12 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.date {
+    margin-left: 1rem;
+
+    &_empty {
+        color: var(--tui-text-03);
+    }
+}
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/5/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/5/index.ts
@@ -0,0 +1,74 @@
+import {Component, Inject, Injector} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile';
+import {tuiControlValue, TuiDay} from '@taiga-ui/cdk';
+import {TUI_MONTHS, TuiDialogService} from '@taiga-ui/core';
+import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
+import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
+import {combineLatest, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'tui-mobile-calendar-example-5',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiMobileCalendarExample5 {
+    private readonly control = new FormControl(null);
+
+    private readonly dialog$: Observable<readonly TuiDay[]> = this.dialogs.open(
+        new PolymorpheusComponent(
+            TuiMobileCalendarDialogComponent,
+            Injector.create({
+                providers: [
+                    {
+                        provide: TUI_CALENDAR_DATE_STREAM,
+                        useValue: tuiControlValue(this.control),
+                    },
+                ],
+                parent: this.injector,
+            }),
+        ),
+        {
+            size: 'fullscreen',
+            closeable: false,
+            data: {
+                multi: true,
+                min: new TuiDay(2018, 2, 10),
+            },
+        },
+    );
+
+    readonly date$ = combineLatest([
+        tuiControlValue<readonly TuiDay[]>(this.control),
+        this.months$,
+    ]).pipe(
+        map(([value, months]) => {
+            if (!value?.length) {
+                return 'Choose dates';
+            }
+
+            return value
+                .map(day => `${months[day.month]} ${day.day}, ${day.year}`)
+                .join('; ');
+        }),
+    );
+
+    constructor(
+        @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
+        @Inject(Injector) private readonly injector: Injector,
+        @Inject(TUI_MONTHS) private readonly months$: Observable<string[]>,
+    ) {}
+
+    get empty(): boolean {
+        return !this.control.value?.length;
+    }
+
+    onClick(): void {
+        this.dialog$.subscribe(value => this.control.setValue(value));
+    }
+}
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
@@ -52,6 +52,18 @@ export class ExampleTuiMobileCalendarComponent {
         LESS: import('./examples/3/index.less?raw'),
     };
 
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
     minVariants = [TUI_FIRST_DAY, new TuiDay(2017, 2, 5), new TuiDay(1900, 0, 1)];
 
     min = this.minVariants[0];

diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts
@@ -12,6 +12,8 @@ import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
 import {TuiMobileCalendarExample1} from './examples/1';
 import {TuiMobileCalendarExample2} from './examples/2';
 import {TuiMobileCalendarExample3} from './examples/3';
+import {TuiMobileCalendarExample4} from './examples/4';
+import {TuiMobileCalendarExample5} from './examples/5';
 import {ExampleTuiMobileCalendarComponent} from './mobile-calendar.component';
 
 @NgModule({
@@ -30,6 +32,8 @@ import {ExampleTuiMobileCalendarComponent} from './mobile-calendar.component';
         TuiMobileCalendarExample1,
         TuiMobileCalendarExample2,
         TuiMobileCalendarExample3,
+        TuiMobileCalendarExample4,
+        TuiMobileCalendarExample5,
     ],
     exports: [ExampleTuiMobileCalendarComponent],
 })

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
@@ -67,6 +67,22 @@
             </ng-template>
             <tui-mobile-calendar-example-3></tui-mobile-calendar-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="dropdown-range"
+            heading="Custom dropdown (range)"
+            [content]="example4"
+        >
+            <tui-mobile-calendar-example-4></tui-mobile-calendar-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="dropdown-multi"
+            heading="Custom dropdown (multi)"
+            [content]="example5"
+        >
+            <tui-mobile-calendar-example-5></tui-mobile-calendar-example-5>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

diff --git a/projects/kit/utils/date/update.ts b/projects/kit/utils/date/update.ts
@@ -1,10 +1,12 @@
 import {TuiDay} from '@taiga-ui/cdk';
 
 export function tuiImmutableUpdateInputDateMulti(
-    days: readonly TuiDay[] = [],
+    days: readonly TuiDay[] | null = [],
     day: TuiDay,
 ): readonly TuiDay[] {
-    return days.find(item => item.daySame(day))
-        ? days.filter(item => !item.daySame(day))
-        : days.concat(day);
+    return (
+        (days?.find(item => item.daySame(day))
+            ? days.filter(item => !item.daySame(day))
+            : days?.concat(day)) || []
+    );
 }