Skip to content

Commit

Permalink
fix(legacy): reset cached active period
Browse files Browse the repository at this point in the history
  • Loading branch information
splincode committed Dec 9, 2024
1 parent 026d13c commit 316e3e0
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -325,4 +325,43 @@ test.describe('InputDateRange', () => {
});
});
});

test('check valid active period', async ({page}) => {
await tuiGoto(page, DemoRoute.InputDateRange);

const example = documentationPage.getExample('#custom-period');
const inputDateRange = new TuiInputDateRangePO(
example.locator('tui-input-date-range'),
);

await inputDateRange.textfield.focus();
await inputDateRange.textfieldIcon.click();
await inputDateRange.selectItem(1);

await expect(inputDateRange.textfield).toHaveValue('Yesterday');
await expect(inputDateRange.host).toHaveScreenshot(
'13-data-range-custom-period-yesterday-focused.png',
);

await inputDateRange.textfield.blur();

await expect(inputDateRange.host).toHaveScreenshot(
'14-data-range-custom-period-yesterday-unfocused.png',
);

await inputDateRange.textfield.focus();
await inputDateRange.textfieldIcon.click();
await inputDateRange.selectItem(0);

await expect(inputDateRange.textfield).toHaveValue('Today');
await expect(inputDateRange.host).toHaveScreenshot(
'15-data-range-custom-period-today-focused.png',
);

await inputDateRange.textfield.blur();

await expect(inputDateRange.host).toHaveScreenshot(
'16-data-range-custom-period-today-unfocused.png',
);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,13 @@
>
Choose dates
</tui-input-date-range>

<button
size="s"
tuiButton
type="button"
class="tui-space_top-4"
(click)="selectToday()"
>
Select today
</button>
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiDayRangePeriod} from '@taiga-ui/kit';
import {TuiInputDateRangeModule} from '@taiga-ui/legacy';

Expand All @@ -11,7 +12,7 @@ const yesterday = today.append({day: -1});

@Component({
standalone: true,
imports: [ReactiveFormsModule, TuiInputDateRangeModule],
imports: [ReactiveFormsModule, TuiButton, TuiInputDateRangeModule],
templateUrl: './index.html',
encapsulation,
changeDetection,
Expand All @@ -36,4 +37,8 @@ export default class Example {
({$implicit}) => `Yet another yesterday (${$implicit.from})`,
),
];

protected selectToday(): void {
this.control.setValue(new TuiDayRange(today, today));
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
signal,
ViewChild,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import type {MaskitoOptions} from '@maskito/core';
import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';
Expand All @@ -22,7 +21,6 @@ import {
TuiDayRange,
TuiMonth,
} from '@taiga-ui/cdk/date-time';
import {tuiWatch} from '@taiga-ui/cdk/observables';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
import type {TuiBooleanHandler} from '@taiga-ui/cdk/types';
import {
Expand All @@ -33,7 +31,7 @@ import {
} from '@taiga-ui/cdk/utils/miscellaneous';
import type {TuiMarkerHandler} from '@taiga-ui/core/components/calendar';
import {tuiAsDataListHost} from '@taiga-ui/core/components/data-list';
import {TUI_DATE_FORMAT, TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/tokens';
import {TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/tokens';
import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
import type {TuiDayRangePeriod} from '@taiga-ui/kit/components/calendar-range';
import type {TuiInputDateOptions} from '@taiga-ui/kit/tokens';
Expand Down Expand Up @@ -105,11 +103,6 @@ export class TuiInputDateRangeComponent
);

protected dateFormat = TUI_DEFAULT_DATE_FORMAT;
protected readonly dateFormat$ = inject(TUI_DATE_FORMAT)
.pipe(tuiWatch(this.cdr), takeUntilDestroyed())
.subscribe((format) => {
this.dateFormat = format;
});

protected selectedActivePeriod: TuiDayRangePeriod | null = null;

Expand Down Expand Up @@ -177,10 +170,7 @@ export class TuiInputDateRangeComponent

public onValueChange(value: string): void {
this.nativeValue.set(value);

if (this.control) {
this.control.updateValueAndValidity({emitEvent: false});
}
this.control?.updateValueAndValidity({emitEvent: false});

if (!value && !this.mobileCalendar) {
this.onOpenChange(true);
Expand Down Expand Up @@ -214,10 +204,7 @@ export class TuiInputDateRangeComponent
public override writeValue(value: TuiDayRange | null): void {
super.writeValue(value);
this.nativeValue.set(value ? this.computedValue : '');
}

protected get computedMobile(): boolean {
return this.isMobile && !!this.mobileCalendar;
this.selectedActivePeriod = this.findActivePeriodBy(value);
}

protected get calendarIcon(): TuiInputDateOptions['icon'] {
Expand All @@ -238,19 +225,7 @@ export class TuiInputDateRangeComponent
}

protected get activePeriod(): TuiDayRangePeriod | null {
return (
this.selectedActivePeriod ??
(this.items.find((item) =>
tuiNullableSame(
this.value,
item.range,
(a, b) =>
a.from.daySame(b.from.dayLimit(this.min, this.max)) &&
a.to.daySame(b.to.dayLimit(this.min, this.max)),
),
) ||
null)
);
return this.selectedActivePeriod ?? this.findActivePeriodBy(this.value);
}

protected get showValueTemplate(): boolean {
Expand Down Expand Up @@ -347,4 +322,18 @@ export class TuiInputDateRangeComponent
private getDateRangeFiller(dateFiller: string): string {
return `${dateFiller}${RANGE_SEPARATOR_CHAR}${dateFiller}`;
}

private findActivePeriodBy(value: TuiDayRange | null): TuiDayRangePeriod | null {
return (
this.items.find((item) =>
tuiNullableSame(
value,
item.range,
(a, b) =>
a.from.daySame(b.from.dayLimit(this.min, this.max)) &&
a.to.daySame(b.to.dayLimit(this.min, this.max)),
),
) ?? null
);
}
}

0 comments on commit 316e3e0

Please sign in to comment.