Skip to content

Commit a879013

Browse files
authored
Merge branch 'master' into simeonoff/add-row-styling
2 parents f7766ca + 0ee347a commit a879013

File tree

2 files changed

+101
-14
lines changed

2 files changed

+101
-14
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;

0 commit comments

Comments
 (0)