Skip to content

Commit 79fdefe

Browse files
crisbetocrisbeto
committed
feat(datepicker): remove dependency on mat-dialog
Reworks the datepicker to remove its dependency to `material/dialog`, avoiding bringing in all of the overhead of the dialog from which the datepicker is using a small fraction.
1 parent d22f48c commit 79fdefe

File tree

6 files changed

+107
-108
lines changed

6 files changed

+107
-108
lines changed

‎src/lib/datepicker/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ ng_module(
2929
"//src/cdk/portal",
3030
"//src/lib/button",
3131
"//src/lib/core",
32-
"//src/lib/dialog",
3332
"//src/lib/form-field",
3433
"//src/lib/input",
3534
],

‎src/lib/datepicker/_datepicker-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
9898
}
9999

100100
.mat-datepicker-content-touch {
101-
@include _mat-theme-elevation(0, $theme);
101+
@include _mat-theme-elevation(24, $theme);
102102
}
103103

104104
.mat-datepicker-toggle-active {

‎src/lib/datepicker/datepicker-animations.ts

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
transition,
1313
trigger,
1414
AnimationTriggerMetadata,
15+
keyframes,
1516
} from '@angular/animations';
1617

1718
/**
@@ -24,14 +25,14 @@ export const matDatepickerAnimations: {
2425
} = {
2526
/** Transforms the height of the datepicker's calendar. */
2627
transformPanel: trigger('transformPanel', [
27-
state('void', style({
28-
opacity: 0,
29-
transform: 'scale(1, 0.8)'
30-
})),
31-
transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
32-
opacity: 1,
33-
transform: 'scale(1, 1)'
34-
}))),
28+
transition('void => enter-popup', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
29+
style({opacity: 0, transform: 'scale(1, 0.8)'}),
30+
style({opacity: 1, transform: 'none'})
31+
]))),
32+
transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
33+
style({opacity: 0, transform: 'scale(0.7)'}),
34+
style({opacity: 1, transform: 'none'})
35+
]))),
3536
transition('* => void', animate('100ms linear', style({opacity: 0})))
3637
]),
3738

‎src/lib/datepicker/datepicker-module.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {PortalModule} from '@angular/cdk/portal';
1212
import {CommonModule} from '@angular/common';
1313
import {NgModule} from '@angular/core';
1414
import {MatButtonModule} from '@angular/material/button';
15-
import {MatDialogModule} from '@angular/material/dialog';
1615
import {MatCalendar, MatCalendarHeader} from './calendar';
1716
import {MatCalendarBody} from './calendar-body';
1817
import {
@@ -32,7 +31,6 @@ import {MatYearView} from './year-view';
3231
imports: [
3332
CommonModule,
3433
MatButtonModule,
35-
MatDialogModule,
3634
OverlayModule,
3735
A11yModule,
3836
PortalModule,

‎src/lib/datepicker/datepicker.spec.ts

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,12 @@ describe('MatDatepicker', () => {
9999
testComponent.touch = true;
100100
fixture.detectChanges();
101101

102-
expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container')).toBeNull();
102+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
103103

104104
testComponent.datepicker.open();
105105
fixture.detectChanges();
106106

107-
expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container'))
107+
expect(document.querySelector('.mat-datepicker-dialog'))
108108
.not.toBeNull();
109109
});
110110

@@ -149,13 +149,13 @@ describe('MatDatepicker', () => {
149149
fixture.detectChanges();
150150

151151
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
152-
expect(document.querySelector('mat-dialog-container')).toBeNull();
152+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
153153

154154
testComponent.datepicker.open();
155155
fixture.detectChanges();
156156

157157
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
158-
expect(document.querySelector('mat-dialog-container')).toBeNull();
158+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
159159
});
160160

161161
it('disabled datepicker input should open the calendar if datepicker is enabled', () => {
@@ -217,13 +217,14 @@ describe('MatDatepicker', () => {
217217
testComponent.datepicker.open();
218218
fixture.detectChanges();
219219

220-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
220+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
221221

222222
testComponent.datepicker.close();
223223
fixture.detectChanges();
224224
flush();
225+
fixture.detectChanges();
225226

226-
expect(document.querySelector('mat-dialog-container')).toBeNull();
227+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
227228
}));
228229

229230
it('setting selected via click should update input and close calendar', fakeAsync(() => {
@@ -234,15 +235,15 @@ describe('MatDatepicker', () => {
234235
fixture.detectChanges();
235236
flush();
236237

237-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
238+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
238239
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
239240

240241
let cells = document.querySelectorAll('.mat-calendar-body-cell');
241242
dispatchMouseEvent(cells[1], 'click');
242243
fixture.detectChanges();
243244
flush();
244245

245-
expect(document.querySelector('mat-dialog-container')).toBeNull();
246+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
246247
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
247248
}));
248249

@@ -255,7 +256,7 @@ describe('MatDatepicker', () => {
255256
fixture.detectChanges();
256257
flush();
257258

258-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
259+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
259260
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
260261

261262
let calendarBodyEl = document.querySelector('.mat-calendar-body') as HTMLElement;
@@ -267,7 +268,7 @@ describe('MatDatepicker', () => {
267268
fixture.detectChanges();
268269
flush();
269270

270-
expect(document.querySelector('mat-dialog-container')).toBeNull();
271+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
271272
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
272273
}));
273274

@@ -291,7 +292,7 @@ describe('MatDatepicker', () => {
291292
}
292293

293294
expect(selectedChangedSpy.calls.count()).toEqual(1);
294-
expect(document.querySelector('mat-dialog-container')).toBeNull();
295+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
295296
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
296297
}));
297298

@@ -312,7 +313,7 @@ describe('MatDatepicker', () => {
312313

313314
fixture.whenStable().then(() => {
314315
expect(selectedChangedSpy.calls.count()).toEqual(0);
315-
expect(document.querySelector('mat-dialog-container')).toBeNull();
316+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
316317
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
317318
});
318319
});
@@ -902,13 +903,13 @@ describe('MatDatepicker', () => {
902903
});
903904

904905
it('should open calendar when toggle clicked', () => {
905-
expect(document.querySelector('mat-dialog-container')).toBeNull();
906+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
906907

907908
let toggle = fixture.debugElement.query(By.css('button'));
908909
dispatchMouseEvent(toggle.nativeElement, 'click');
909910
fixture.detectChanges();
910911

911-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
912+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
912913
});
913914

914915
it('should not open calendar when toggle clicked if datepicker is disabled', () => {
@@ -917,12 +918,12 @@ describe('MatDatepicker', () => {
917918
const toggle = fixture.debugElement.query(By.css('button')).nativeElement;
918919

919920
expect(toggle.hasAttribute('disabled')).toBe(true);
920-
expect(document.querySelector('mat-dialog-container')).toBeNull();
921+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
921922

922923
dispatchMouseEvent(toggle, 'click');
923924
fixture.detectChanges();
924925

925-
expect(document.querySelector('mat-dialog-container')).toBeNull();
926+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
926927
});
927928

928929
it('should not open calendar when toggle clicked if input is disabled', () => {
@@ -933,12 +934,12 @@ describe('MatDatepicker', () => {
933934
const toggle = fixture.debugElement.query(By.css('button')).nativeElement;
934935

935936
expect(toggle.hasAttribute('disabled')).toBe(true);
936-
expect(document.querySelector('mat-dialog-container')).toBeNull();
937+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
937938

938939
dispatchMouseEvent(toggle, 'click');
939940
fixture.detectChanges();
940941

941-
expect(document.querySelector('mat-dialog-container')).toBeNull();
942+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
942943
});
943944

944945
it('should set the `button` type on the trigger to prevent form submissions', () => {
@@ -1232,7 +1233,7 @@ describe('MatDatepicker', () => {
12321233
testComponent.datepicker.open();
12331234
fixture.detectChanges();
12341235

1235-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
1236+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
12361237

12371238
let cells = document.querySelectorAll('.mat-calendar-body-cell');
12381239
expect(cells[0].classList).toContain('mat-calendar-body-disabled');
@@ -1304,7 +1305,7 @@ describe('MatDatepicker', () => {
13041305
testComponent.datepicker.open();
13051306
fixture.detectChanges();
13061307

1307-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
1308+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
13081309

13091310
const cells = document.querySelectorAll('.mat-calendar-body-cell');
13101311
dispatchMouseEvent(cells[0], 'click');

0 commit comments

Comments
 (0)