Skip to content

Commit 4c65aa0

Browse files
simeonoffsimeonoff
authored
Merge branch '10.1.x' into didimmova/fix-vertical-datepicker-10.1.x
2 parents bb4b5ae + a01732e commit 4c65aa0

File tree

5 files changed

+129
-17
lines changed

5 files changed

+129
-17
lines changed

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts‎

Lines changed: 81 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentFixture, async, TestBed, fakeAsync, tick } from '@angular/core/testing';
1+
import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
22
import { Component, OnInit, ViewChild, DebugElement } from '@angular/core';
33
import { IgxInputGroupModule } from '../input-group/public_api';
44
import { InteractionMode } from '../core/enums';
@@ -206,7 +206,7 @@ describe('IgxDateRangePicker', () => {
206206
describe('Single Input', () => {
207207
let singleInputElement: DebugElement;
208208
configureTestSuite();
209-
beforeAll(async(() => {
209+
beforeAll(waitForAsync(() => {
210210
TestBed.configureTestingModule({
211211
declarations: [
212212
DateRangeTestComponent,
@@ -599,14 +599,48 @@ describe('IgxDateRangePicker', () => {
599599
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
600600
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
601601
}));
602+
603+
it('should not open calendar with ALT + DOWN ARROW key if disabled is set to true', fakeAsync(() => {
604+
fixture.componentInstance.mode = InteractionMode.DropDown;
605+
fixture.componentInstance.disabled = true;
606+
fixture.detectChanges();
607+
608+
spyOn(dateRange.onOpening, 'emit').and.callThrough();
609+
spyOn(dateRange.onOpened, 'emit').and.callThrough();
610+
611+
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', calendar, true);
612+
tick(DEBOUNCE_TIME * 2);
613+
fixture.detectChanges();
614+
expect(dateRange.collapsed).toBeTruthy();
615+
expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(0);
616+
expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(0);
617+
}));
602618
});
619+
620+
it('should expand the calendar if the default icon is clicked', fakeAsync(() => {
621+
const input = fixture.debugElement.query(By.css('igx-input-group'));
622+
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
623+
tick();
624+
fixture.detectChanges();
625+
expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy();
626+
}));
627+
628+
it('should not expand the calendar if the default icon is clicked when disabled is set to true', fakeAsync(() => {
629+
fixture.componentInstance.disabled = true;
630+
fixture.detectChanges();
631+
const input = fixture.debugElement.query(By.css('igx-input-group'));
632+
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
633+
tick();
634+
fixture.detectChanges();
635+
expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
636+
}));
603637
});
604638

605639
describe('Two Inputs', () => {
606640
let startInput: DebugElement;
607641
let endInput: DebugElement;
608642
configureTestSuite();
609-
beforeAll(async(() => {
643+
beforeAll(waitForAsync(() => {
610644
TestBed.configureTestingModule({
611645
declarations: [
612646
DateRangeTestComponent,
@@ -876,6 +910,21 @@ describe('IgxDateRangePicker', () => {
876910
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
877911
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
878912
}));
913+
914+
it('should not open calendar with ALT + DOWN ARROW key if disabled is set to true', fakeAsync(() => {
915+
fixture.componentInstance.disabled = true;
916+
fixture.detectChanges();
917+
918+
spyOn(dateRange.onOpening, 'emit').and.callThrough();
919+
spyOn(dateRange.onOpened, 'emit').and.callThrough();
920+
921+
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', calendar, true);
922+
tick(DEBOUNCE_TIME * 2);
923+
fixture.detectChanges();
924+
expect(dateRange.collapsed).toBeTruthy();
925+
expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(0);
926+
expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(0);
927+
}));
879928
});
880929

881930
it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {
@@ -915,6 +964,24 @@ describe('IgxDateRangePicker', () => {
915964
.toBeTruthy();
916965
}));
917966

967+
it('should expand the calendar if the default icon is clicked', fakeAsync(() => {
968+
const icon = fixture.debugElement.query(By.css('igx-picker-toggle'));
969+
icon.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
970+
tick();
971+
fixture.detectChanges();
972+
expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy();
973+
}));
974+
975+
it('should not expand the calendar if the default icon is clicked when disabled is set to true', fakeAsync(() => {
976+
fixture.componentInstance.disabled = true;
977+
fixture.detectChanges();
978+
const icon = fixture.debugElement.query(By.css('igx-picker-toggle'));
979+
icon.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
980+
tick();
981+
fixture.detectChanges();
982+
expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
983+
}));
984+
918985
describe('Data binding', () => {
919986
it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
920987
fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);
@@ -931,7 +998,7 @@ describe('IgxDateRangePicker', () => {
931998

932999
describe('Rendering', () => {
9331000
configureTestSuite();
934-
beforeAll(async(() => {
1001+
beforeAll(waitForAsync(() => {
9351002
TestBed.configureTestingModule({
9361003
declarations: [
9371004
DateRangeTestComponent,
@@ -1065,6 +1132,7 @@ export class DateRangeTestComponent implements OnInit {
10651132
[x: string]: any;
10661133
public doneButtonText: string;
10671134
public mode: InteractionMode;
1135+
public disabled = false;
10681136
public minValue: Date | String;
10691137
public maxValue: Date | String;
10701138

@@ -1078,16 +1146,18 @@ export class DateRangeTestComponent implements OnInit {
10781146
@Component({
10791147
selector: 'igx-date-range-single-input-test',
10801148
template: `
1081-
<igx-date-range-picker [mode]="mode" [minValue]="minValue" [maxValue]="maxValue">
1149+
<igx-date-range-picker [mode]="mode" [disabled]="disabled" [minValue]="minValue" [maxValue]="maxValue">
10821150
</igx-date-range-picker>
10831151
`
10841152
})
1085-
export class DateRangeDefaultComponent extends DateRangeTestComponent { }
1153+
export class DateRangeDefaultComponent extends DateRangeTestComponent {
1154+
public disabled = false;
1155+
}
10861156

10871157
@Component({
10881158
selector: 'igx-date-range-two-inputs-test',
10891159
template: `
1090-
<igx-date-range-picker [mode]="mode" [(ngModel)]="range" [inputFormat]="inputFormat" [displayFormat]="displayFormat" required>
1160+
<igx-date-range-picker [mode]="mode" [disabled]="disabled" [(ngModel)]="range" [inputFormat]="inputFormat" [displayFormat]="displayFormat" required>
10911161
<igx-date-range-start>
10921162
<igx-picker-toggle igxPrefix>
10931163
<igx-icon>calendar_view_day</igx-icon>
@@ -1101,9 +1171,10 @@ export class DateRangeDefaultComponent extends DateRangeTestComponent { }
11011171
`
11021172
})
11031173
export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent {
1104-
range;
1105-
inputFormat: string;
1106-
displayFormat: string;
1174+
public range;
1175+
public inputFormat: string;
1176+
public displayFormat: string;
1177+
public disabled = false;
11071178
}
11081179
@Component({
11091180
selector: 'igx-date-range-two-inputs-ng-model',

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
247247
* ```
248248
*/
249249
@Input()
250-
public disabled: boolean;
250+
public disabled = false;
251251

252252
/**
253253
* Sets the `placeholder` for single-input `IgxDateRangePickerComponent`.
@@ -431,7 +431,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
431431
* ```
432432
*/
433433
public open(overlaySettings?: OverlaySettings): void {
434-
if (!this.collapsed) { return; }
434+
if (!this.collapsed || this.disabled) { return; }
435435

436436
this.updateCalendar();
437437
const settings = this.mode === InteractionMode.Dialog ? this.dialogOverlaySettings : this.dropdownOverlaySettings;
@@ -623,9 +623,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
623623
this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
624624
}
625625

626-
// delay the invocation of initialSetValue
627-
// until the current change detection cycle has completed
626+
// delay invocations until the current change detection cycle has completed
628627
Promise.resolve().then(() => {
628+
this.updateDisabledState();
629629
this.initialSetValue();
630630
this.updateInputs();
631631
});
@@ -644,6 +644,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
644644
if (changes['inputFormat'] && this.hasProjectedInputs) {
645645
this.updateInputFormat();
646646
}
647+
if (changes['disabled']) {
648+
this.updateDisabledState();
649+
}
647650
}
648651

649652
/** @hidden @internal */
@@ -759,6 +762,19 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
759762
this.setRequiredToInputs();
760763
}
761764

765+
private updateDisabledState() {
766+
if (this.hasProjectedInputs) {
767+
const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
768+
const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
769+
start.inputDirective.disabled = this.disabled;
770+
end.inputDirective.disabled = this.disabled;
771+
return;
772+
}
773+
if (this.inputDirective) {
774+
this.inputDirective.disabled = this.disabled;
775+
}
776+
}
777+
762778
private getInputState(focused: boolean): IgxInputState {
763779
if (focused) {
764780
return this._ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3647,7 +3647,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
36473647
}
36483648

36493649
public getColumnByVisibleIndex(index: number): IgxColumnComponent {
3650-
return this.visibleColumns.find((col) => !col.columnGroup && !col.columnLayout && col.visibleIndex === index);
3650+
return this.visibleColumns.find((col) =>
3651+
!col.columnGroup && !col.columnLayout &&
3652+
col.visibleIndex === index
3653+
);
36513654
}
36523655

36533656
/**

‎projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
7676

7777
public shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean {
7878
if (!super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex)) { return false; }
79-
if (!this.isDataRow(targetRowIndex)) { return super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex); }
79+
if (!this.isDataRow(targetRowIndex) || visibleColIndex < 0) {
80+
return super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex);
81+
}
8082

8183
const targetRow = super.getRowElementByIndex(targetRowIndex);
8284
const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
@@ -144,7 +146,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
144146

145147
public performVerticalScrollToCell(rowIndex: number, visibleColIndex: number, cb?: () => void) {
146148
const children = this.parentByChildIndex(visibleColIndex || 0)?.children;
147-
if (!super.isDataRow(rowIndex) || (children && children.length < 2)) {
149+
if (!super.isDataRow(rowIndex) || (children && children.length < 2) || visibleColIndex < 0) {
148150
return super.performVerticalScrollToCell(rowIndex, visibleColIndex, cb);
149151
}
150152

‎projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const GRID_COL_THEAD_CLASS = '.igx-grid__th';
1717
const GRID_MRL_BLOCK = '.igx-grid__mrl-block';
1818

1919
describe('IgxGrid - multi-row-layout #grid', () => {
20+
const DEBOUNCETIME = 60;
2021
configureTestSuite();
2122
beforeAll(async(() => {
2223
TestBed.configureTestingModule({
@@ -1144,6 +1145,25 @@ describe('IgxGrid - multi-row-layout #grid', () => {
11441145
expect(pos.rowIndex).toEqual(0);
11451146
expect(pos.visibleColumnIndex).toEqual(2);
11461147
}));
1148+
1149+
it('should navigate to the proper row in MRL scenario', (async () => {
1150+
const fix = TestBed.createComponent(ColumnLayoutTestComponent);
1151+
const grid = fix.componentInstance.grid;
1152+
const NAVIGATE = 20;
1153+
1154+
fix.detectChanges();
1155+
await wait(DEBOUNCETIME);
1156+
1157+
grid.navigateTo(NAVIGATE);
1158+
1159+
await wait(DEBOUNCETIME);
1160+
fix.detectChanges();
1161+
1162+
expect(grid.verticalScrollContainer.getScroll().scrollTop).toBeGreaterThan(0);
1163+
1164+
const row = grid.getRowByIndex(NAVIGATE);
1165+
expect(GridFunctions.elementInGridView(grid, row.nativeElement)).toBeTruthy();
1166+
}));
11471167
});
11481168

11491169
@Component({

0 commit comments

Comments
 (0)