feat(core): support readonly TuiDay[] in calendar

taiga-family · Oct 11, 2023 · 6927bce · 6927bce
1 parent fab417e
commit 6927bce
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 18 deletions.
diff --git a/projects/core/components/calendar/calendar.component.ts b/projects/core/components/calendar/calendar.component.ts
@@ -28,7 +28,7 @@ import {TuiMarkerHandler} from '@taiga-ui/core/types';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiCalendarComponent implements TuiWithOptionalMinMax<TuiDay> {
-    private _value: TuiDay | TuiDayRange | null = null;
+    private _value: TuiDay | TuiDayRange | readonly TuiDay[] | null = null;
 
     @Input()
     month: TuiMonth = TuiMonth.currentLocal();
@@ -58,15 +58,15 @@ export class TuiCalendarComponent implements TuiWithOptionalMinMax<TuiDay> {
     markerHandler: TuiMarkerHandler = TUI_DEFAULT_MARKER_HANDLER;
 
     @Input()
-    set value(value: TuiDay | TuiDayRange | null) {
+    set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
         this._value = value;
 
         if (this.showAdjacent && value instanceof TuiDay) {
             this.month = value;
         }
     }
 
-    get value(): TuiDay | TuiDayRange | null {
+    get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null {
         return this._value;
     }
 

diff --git a/projects/core/components/primitive-calendar/primitive-calendar.component.ts b/projects/core/components/primitive-calendar/primitive-calendar.component.ts
@@ -42,7 +42,7 @@ export class TuiPrimitiveCalendarComponent {
     markerHandler: TuiMarkerHandler = TUI_DEFAULT_MARKER_HANDLER;
 
     @Input()
-    value: TuiDay | TuiDayRange | null = null;
+    value: TuiDay | TuiDayRange | readonly TuiDay[] | null = null;
 
     @Input()
     hoveredItem: TuiDay | null = null;
@@ -65,10 +65,7 @@ export class TuiPrimitiveCalendarComponent {
 
     @HostBinding('class._single')
     get isSingle(): boolean {
-        return (
-            this.value !== null &&
-            (this.value instanceof TuiDay || this.value.isSingleDay)
-        );
+        return this.value instanceof TuiDayRange && this.value.isSingleDay;
     }
 
     readonly toMarkers = (
@@ -110,8 +107,12 @@ export class TuiPrimitiveCalendarComponent {
             return null;
         }
 
-        if (value instanceof TuiDay) {
-            return value.daySame(item) ? TuiRangeState.Single : null;
+        if (!(value instanceof TuiDayRange)) {
+            if (value instanceof TuiDay) {
+                return value.daySame(item) ? TuiRangeState.Single : null;
+            }
+
+            return value.find(day => day.daySame(item)) ? TuiRangeState.Single : null;
         }
 
         if (
@@ -154,7 +155,7 @@ export class TuiPrimitiveCalendarComponent {
     itemIsInterval(day: TuiDay): boolean {
         const {value, hoveredItem} = this;
 
-        if (value === null || value instanceof TuiDay) {
+        if (!(value instanceof TuiDayRange)) {
             return false;
         }
 

diff --git a/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts b/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts
@@ -11,6 +11,7 @@ import {
     TUI_FIRST_DAY,
     TUI_LAST_DAY,
     TuiBooleanHandler,
+    TuiDay,
     TuiDayRange,
     tuiInRange,
     TuiMonth,
@@ -34,7 +35,7 @@ export class TuiPrimitiveYearPickerComponent {
     private readonly currentYear = TuiMonth.currentLocal().year;
 
     @Input()
-    value: TuiDayRange | TuiMonthRange | TuiYear | null = null;
+    value: TuiDayRange | TuiMonthRange | TuiYear | readonly TuiDay[] | null = null;
 
     @Input()
     initialItem: TuiYear = TuiMonth.currentLocal();
@@ -61,9 +62,7 @@ export class TuiPrimitiveYearPickerComponent {
 
     @HostBinding('class._single')
     get isSingle(): boolean {
-        const {value} = this;
-
-        return !!value && this.isRange(value) && value.from.yearSame(value.to);
+        return this.isRange(this.value) && this.value.from.yearSame(this.value.to);
     }
 
     get rows(): number {
@@ -84,7 +83,9 @@ export class TuiPrimitiveYearPickerComponent {
         return max.year < initial ? max.year + 1 : initial;
     }
 
-    isRange(item: TuiMonthRange | TuiYear): item is TuiMonthRange {
+    isRange(
+        item: TuiMonthRange | TuiYear | readonly TuiDay[] | null,
+    ): item is TuiMonthRange {
         return item instanceof TuiMonthRange;
     }
 
@@ -125,8 +126,12 @@ export class TuiPrimitiveYearPickerComponent {
             return null;
         }
 
-        if (value instanceof TuiYear) {
-            return value.year === item ? TuiRangeState.Single : null;
+        if (!(value instanceof TuiDayRange) && !(value instanceof TuiMonthRange)) {
+            if (value instanceof TuiYear) {
+                return value.year === item ? TuiRangeState.Single : null;
+            }
+
+            return value.find(day => day.year === item) ? TuiRangeState.Single : null;
         }
 
         if (

diff --git a/projects/demo/src/modules/components/calendar/calendar.component.ts b/projects/demo/src/modules/components/calendar/calendar.component.ts
@@ -54,6 +54,11 @@ export class ExampleTuiCalendarComponent {
         LESS: import('./examples/5/index.less?raw'),
     };
 
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+    };
+
     showAdjacent = true;
 
     readonly minVariants = [

diff --git a/projects/demo/src/modules/components/calendar/calendar.module.ts b/projects/demo/src/modules/components/calendar/calendar.module.ts
@@ -10,6 +10,7 @@ import {TuiCalendarExample2} from './examples/2';
 import {TuiCalendarExample3} from './examples/3';
 import {TuiCalendarExample4} from './examples/4';
 import {TuiCalendarExample5} from './examples/5';
+import {TuiCalendarExample6} from './examples/6';
 
 @NgModule({
     imports: [
@@ -27,6 +28,7 @@ import {TuiCalendarExample5} from './examples/5';
         TuiCalendarExample3,
         TuiCalendarExample4,
         TuiCalendarExample5,
+        TuiCalendarExample6,
     ],
     exports: [ExampleTuiCalendarComponent],
 })

diff --git a/projects/demo/src/modules/components/calendar/calendar.template.html b/projects/demo/src/modules/components/calendar/calendar.template.html
@@ -79,6 +79,14 @@
             </ng-template>
             <tui-calendar-example-5></tui-calendar-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="select-multi-dates"
+            heading="Select multiple dates"
+            [content]="example6"
+        >
+            <tui-calendar-example-6></tui-calendar-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

diff --git a/projects/demo/src/modules/components/calendar/examples/6/index.html b/projects/demo/src/modules/components/calendar/examples/6/index.html
@@ -0,0 +1,5 @@
+<tui-calendar
+    [value]="value"
+    (dayClick)="onDayClick($event)"
+></tui-calendar>
+<div>Chosen dates: {{ value }}</div>
diff --git a/projects/demo/src/modules/components/calendar/examples/6/index.ts b/projects/demo/src/modules/components/calendar/examples/6/index.ts
@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-calendar-example-6',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiCalendarExample6 {
+    value: readonly TuiDay[] = [];
+
+    onDayClick(day: TuiDay): void {
+        this.value = this.value.find(item => item.daySame(day))
+            ? this.value.filter(item => !item.daySame(day))
+            : this.value.concat(day);
+    }
+}