Skip to content

Commit b54be61

Browse files
jackofdiamond5jackofdiamond5
committed
refactor(igxMask): cleanup/streamline parsing and input handling
- input parsing go through one method - add drag and drop functionality - set default value on mask prop
1 parent d4c72f9 commit b54be61

File tree

7 files changed

+431
-589
lines changed

7 files changed

+431
-589
lines changed

‎projects/igniteui-angular/src/lib/core/utils.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,14 @@ export const enum KEYCODES {
139139
RIGHT_ARROW = 39,
140140
DOWN_ARROW = 40,
141141
F2 = 113,
142-
TAB = 9
142+
TAB = 9,
143+
CTRL = 17,
144+
Z = 90,
145+
Y = 89,
146+
X = 88,
147+
BACKSPACE = 8,
148+
DELETE = 46,
149+
INPUT_METHOD = 229
143150
}
144151

145152
/**

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

+59-58
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ViewChild, ElementRef } from '@angular/core';
22
import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
3-
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
3+
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
66
import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
@@ -206,7 +206,7 @@ describe('IgxDatePicker', () => {
206206
expect(input).toEqual(document.activeElement);
207207
}));
208208

209-
it('When a modal datepicker is closed via outside click, the focus should remain on the input',
209+
it('When a modal datepicker is closed via outside click, the focus should remain on the input',
210210
fakeAsync(() => {
211211
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
212212
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
@@ -230,7 +230,7 @@ describe('IgxDatePicker', () => {
230230
expect(input).toEqual(document.activeElement);
231231
}));
232232

233-
it('When datepicker is closed upon selecting a date, the focus should remain on the input',
233+
it('When datepicker is closed upon selecting a date, the focus should remain on the input',
234234
fakeAsync(() => {
235235
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
236236
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
@@ -332,66 +332,66 @@ describe('IgxDatePicker', () => {
332332
}));
333333

334334
it('When datepicker in "dropdown" mode, should focus input on user interaction with Today btn, Cancel btn, Enter Key, Escape key',
335-
fakeAsync(() => {
336-
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
337-
fixture.detectChanges();
338-
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
339-
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
340-
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
341-
expect(overlayToggle.length).toEqual(0);
335+
fakeAsync(() => {
336+
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
337+
fixture.detectChanges();
338+
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
339+
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
340+
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
341+
expect(overlayToggle.length).toEqual(0);
342342

343-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
344-
flush();
345-
fixture.detectChanges();
346-
const buttons = document.getElementsByClassName('igx-button--flat');
347-
expect(buttons.length).toEqual(2);
343+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
344+
flush();
345+
fixture.detectChanges();
346+
const buttons = document.getElementsByClassName('igx-button--flat');
347+
expect(buttons.length).toEqual(2);
348348

349-
// Today btn
350-
const todayBtn = buttons[1] as HTMLElement;
351-
expect(todayBtn.innerText).toBe('Today');
352-
todayBtn.click();
353-
tick();
354-
fixture.detectChanges();
355-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
356-
expect(overlayToggle[0]).toEqual(undefined);
357-
expect(input).toEqual(document.activeElement);
349+
// Today btn
350+
const todayBtn = buttons[1] as HTMLElement;
351+
expect(todayBtn.innerText).toBe('Today');
352+
todayBtn.click();
353+
tick();
354+
fixture.detectChanges();
355+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
356+
expect(overlayToggle[0]).toEqual(undefined);
357+
expect(input).toEqual(document.activeElement);
358358

359-
// Cancel btn
360-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
361-
flush();
362-
fixture.detectChanges();
363-
const cancelBtn = buttons[0] as HTMLElement;
364-
expect(cancelBtn.innerText).toBe('Cancel');
365-
cancelBtn.click();
366-
tick();
367-
fixture.detectChanges();
368-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
369-
expect(overlayToggle[0]).toEqual(undefined);
370-
expect(input).toEqual(document.activeElement);
359+
// Cancel btn
360+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
361+
flush();
362+
fixture.detectChanges();
363+
const cancelBtn = buttons[0] as HTMLElement;
364+
expect(cancelBtn.innerText).toBe('Cancel');
365+
cancelBtn.click();
366+
tick();
367+
fixture.detectChanges();
368+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
369+
expect(overlayToggle[0]).toEqual(undefined);
370+
expect(input).toEqual(document.activeElement);
371371

372-
// Enter key
373-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
374-
flush();
375-
fixture.detectChanges();
376-
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
377-
tick();
378-
fixture.detectChanges();
379-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
380-
expect(overlayToggle[0]).toEqual(undefined);
381-
expect(input).toEqual(document.activeElement);
372+
// Enter key
373+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
374+
flush();
375+
fixture.detectChanges();
376+
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
377+
tick();
378+
fixture.detectChanges();
379+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
380+
expect(overlayToggle[0]).toEqual(undefined);
381+
expect(input).toEqual(document.activeElement);
382382

383-
// Esc key
384-
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
385-
flush();
386-
fixture.detectChanges();
387-
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
388-
tick();
389-
fixture.detectChanges();
383+
// Esc key
384+
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
385+
flush();
386+
fixture.detectChanges();
387+
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
388+
tick();
389+
fixture.detectChanges();
390390

391-
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
392-
expect(overlayToggle[0]).toEqual(undefined);
393-
expect(input).toEqual(document.activeElement);
394-
}));
391+
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
392+
expect(overlayToggle[0]).toEqual(undefined);
393+
expect(input).toEqual(document.activeElement);
394+
}));
395395

396396
it('Datepicker week start day (Monday)', () => {
397397
const fixture = TestBed.createComponent(IgxDatePickerWithWeekStartComponent);
@@ -1149,7 +1149,8 @@ describe('IgxDatePicker', () => {
11491149
expect(input).toBeDefined();
11501150
datePicker.isSpinLoop = false;
11511151

1152-
input.nativeElement.focus();
1152+
input.triggerEventHandler('focus', {});
1153+
fixture.detectChanges(); // bound transformedDate assign
11531154
UIInteractions.sendInput(input, '31-03-19');
11541155
expect(input.nativeElement.value).toBe('31-03-19');
11551156

0 commit comments

Comments
 (0)