Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(kit): CalendarRange delete code for availableRange property #8688

Merged
merged 1 commit into from
Aug 26, 2024
Merged

fix(kit): CalendarRange delete code for availableRange property #8688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 0 additions & 33 deletions projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,39 +168,6 @@ test.describe('InputDateRange', () => {
'07-item-and-calendar-interactions.png',
);
});

test('Prevent selection of range with disabled days', async ({page}) => {
const calendar = new TuiCalendarPO(
inputDateRange.calendarRange.locator('tui-calendar'),
);

const getCellSelectors = async (cell: Locator): Promise<string | null> =>
cell.getAttribute('class');

const daysSelectors = async (): Promise<Array<string | null>> =>
Promise.all((await calendar.getDays()).map(getCellSelectors));

await tuiGoto(page, 'components/input-date-range/API?disabledItemHandler$=1');

await inputDateRange.textfield.click();

// check disabled items length before day selection
expect(
(await daysSelectors()).filter((selectors) =>
selectors?.includes('t-cell_disabled'),
),
).toHaveLength(20);

await calendar.clickOnCalendarDay(7);

// check range which includes disabled days
// range should have only 2 enabled items
expect(
(await daysSelectors()).filter(
(selectors) => !selectors?.includes('t-cell_disabled'),
),
).toHaveLength(2);
});
});

test.describe('Examples', () => {
Expand Down
60 changes: 2 additions & 58 deletions projects/kit/components/calendar-range/calendar-range.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export class TuiCalendarRange implements OnInit, OnChanges {
protected previousValue: TuiDayRange | null = null;
protected hoveredItem: TuiDay | null = null;
protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
protected availableRange: TuiDayRange | null = null;

@Input()
public defaultViewedMonth: TuiMonth = TuiMonth.currentLocal();
Expand Down Expand Up @@ -206,8 +205,6 @@ export class TuiCalendarRange implements OnInit, OnChanges {
this.updateValue(sortedDayRange);
this.itemChange.emit(this.findItemByDayRange(sortedDayRange));
}

this.availableRange = this.findAvailableRange();
}

protected updateValue(value: TuiDayRange | null): void {
Expand Down Expand Up @@ -240,7 +237,7 @@ export class TuiCalendarRange implements OnInit, OnChanges {
): TuiBooleanHandler<TuiDay> {
return (item) => {
if (!value?.isSingleDay || !minLength) {
return this.isDisabledItem(disabledItemHandler, value, item);
return disabledItemHandler(item);
}

const negativeMinLength = Object.fromEntries(
Expand All @@ -251,63 +248,10 @@ export class TuiCalendarRange implements OnInit, OnChanges {
const inDisabledRange =
disabledBefore.dayBefore(item) && disabledAfter.dayAfter(item);

return (
inDisabledRange || this.isDisabledItem(disabledItemHandler, value, item)
);
return inDisabledRange || disabledItemHandler(item);
};
}

private isDisabledItem(
disabledItemHandler: TuiBooleanHandler<TuiDay>,
value: TuiDayRange | null,
item: TuiDay,
): boolean {
return (
disabledItemHandler(item) ||
(!!value?.isSingleDay && !this.availableRangeContainsItem(item))
);
}

private availableRangeContainsItem(item: TuiDay): boolean {
if (this.availableRange === null) {
return true;
}

const {from, to} = this.availableRange;

return from.daySameOrBefore(item) && to.daySameOrAfter(item);
}

private findAvailableRange(): TuiDayRange | null {
const {disabledItemHandler, value} = this;

if (!value?.isSingleDay || disabledItemHandler === TUI_FALSE_HANDLER) {
return null;
}

let from = value.from;
let to = value.from;

let leftShift = true;
let rightShift = true;

while (leftShift || rightShift) {
leftShift = !disabledItemHandler(from.append({day: -1}));

if (leftShift) {
from = from.append({day: -1});
}

rightShift = !disabledItemHandler(to.append({day: 1}));

if (rightShift) {
to = to.append({day: 1});
}
}

return new TuiDayRange(from, to);
}

private updateDefaultViewedMonth(): void {
if (this.max && this.defaultViewedMonth.monthSameOrAfter(this.max)) {
this.defaultViewedMonth = this.max.append({month: -1});
Expand Down
Loading