diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts index 364ea2b00970..ef6c26f2f996 100644 --- 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(); - 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 index 7565b4a51dd5..6eceb512e429 100644 --- 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 index 7d03e2f553c6..d25faed4c2c7 100644 --- 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 @@
> = [ 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 index bb084b5af989..6c70023a485e 100644 --- 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,6 +100,7 @@ [disabledItemHandler]="disabledItemHandler" [max]="max" [min]="min" + [multi]="multi" [single]="single" (cancel)="documentationPropertyCancel.emitEvent($event)" (confirm)="documentationPropertyConfirm.emitEvent($event)" @@ -107,6 +108,13 @@ + + Value + Single date or a range + + Array of single dates +