Skip to content

Commit 3164d94

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 0bd8899 commit 3164d94

File tree

6 files changed

+106
-108
lines changed

6 files changed

+106
-108
lines changed

‎src/lib/datepicker/BUILD.bazel

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

‎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: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,12 @@ describe('MatDatepicker', () => {
107107
testComponent.touch = true;
108108
fixture.detectChanges();
109109

110-
expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container')).toBeNull();
110+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
111111

112112
testComponent.datepicker.open();
113113
fixture.detectChanges();
114114

115-
expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container'))
115+
expect(document.querySelector('.mat-datepicker-dialog'))
116116
.not.toBeNull();
117117
});
118118

@@ -157,13 +157,13 @@ describe('MatDatepicker', () => {
157157
fixture.detectChanges();
158158

159159
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
160-
expect(document.querySelector('mat-dialog-container')).toBeNull();
160+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
161161

162162
testComponent.datepicker.open();
163163
fixture.detectChanges();
164164

165165
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
166-
expect(document.querySelector('mat-dialog-container')).toBeNull();
166+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
167167
});
168168

169169
it('disabled datepicker input should open the calendar if datepicker is enabled', () => {
@@ -225,13 +225,13 @@ describe('MatDatepicker', () => {
225225
testComponent.datepicker.open();
226226
fixture.detectChanges();
227227

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

230230
testComponent.datepicker.close();
231231
fixture.detectChanges();
232232
flush();
233233

234-
expect(document.querySelector('mat-dialog-container')).toBeNull();
234+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
235235
}));
236236

237237
it('setting selected via click should update input and close calendar', fakeAsync(() => {
@@ -242,15 +242,15 @@ describe('MatDatepicker', () => {
242242
fixture.detectChanges();
243243
flush();
244244

245-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
245+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
246246
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
247247

248248
let cells = document.querySelectorAll('.mat-calendar-body-cell');
249249
dispatchMouseEvent(cells[1], 'click');
250250
fixture.detectChanges();
251251
flush();
252252

253-
expect(document.querySelector('mat-dialog-container')).toBeNull();
253+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
254254
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
255255
}));
256256

@@ -263,7 +263,7 @@ describe('MatDatepicker', () => {
263263
fixture.detectChanges();
264264
flush();
265265

266-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
266+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
267267
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
268268

269269
let calendarBodyEl = document.querySelector('.mat-calendar-body') as HTMLElement;
@@ -275,7 +275,7 @@ describe('MatDatepicker', () => {
275275
fixture.detectChanges();
276276
flush();
277277

278-
expect(document.querySelector('mat-dialog-container')).toBeNull();
278+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
279279
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
280280
}));
281281

@@ -299,7 +299,7 @@ describe('MatDatepicker', () => {
299299
}
300300

301301
expect(selectedChangedSpy.calls.count()).toEqual(1);
302-
expect(document.querySelector('mat-dialog-container')).toBeNull();
302+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
303303
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
304304
}));
305305

@@ -320,7 +320,7 @@ describe('MatDatepicker', () => {
320320

321321
fixture.whenStable().then(() => {
322322
expect(selectedChangedSpy.calls.count()).toEqual(0);
323-
expect(document.querySelector('mat-dialog-container')).toBeNull();
323+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
324324
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
325325
});
326326
});
@@ -910,13 +910,13 @@ describe('MatDatepicker', () => {
910910
});
911911

912912
it('should open calendar when toggle clicked', () => {
913-
expect(document.querySelector('mat-dialog-container')).toBeNull();
913+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
914914

915915
let toggle = fixture.debugElement.query(By.css('button'));
916916
dispatchMouseEvent(toggle.nativeElement, 'click');
917917
fixture.detectChanges();
918918

919-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
919+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
920920
});
921921

922922
it('should not open calendar when toggle clicked if datepicker is disabled', () => {
@@ -925,12 +925,12 @@ describe('MatDatepicker', () => {
925925
const toggle = fixture.debugElement.query(By.css('button')).nativeElement;
926926

927927
expect(toggle.hasAttribute('disabled')).toBe(true);
928-
expect(document.querySelector('mat-dialog-container')).toBeNull();
928+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
929929

930930
dispatchMouseEvent(toggle, 'click');
931931
fixture.detectChanges();
932932

933-
expect(document.querySelector('mat-dialog-container')).toBeNull();
933+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
934934
});
935935

936936
it('should not open calendar when toggle clicked if input is disabled', () => {
@@ -941,12 +941,12 @@ describe('MatDatepicker', () => {
941941
const toggle = fixture.debugElement.query(By.css('button')).nativeElement;
942942

943943
expect(toggle.hasAttribute('disabled')).toBe(true);
944-
expect(document.querySelector('mat-dialog-container')).toBeNull();
944+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
945945

946946
dispatchMouseEvent(toggle, 'click');
947947
fixture.detectChanges();
948948

949-
expect(document.querySelector('mat-dialog-container')).toBeNull();
949+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
950950
});
951951

952952
it('should set the `button` type on the trigger to prevent form submissions', () => {
@@ -1225,7 +1225,7 @@ describe('MatDatepicker', () => {
12251225
testComponent.datepicker.open();
12261226
fixture.detectChanges();
12271227

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

12301230
let cells = document.querySelectorAll('.mat-calendar-body-cell');
12311231
expect(cells[0].classList).toContain('mat-calendar-body-disabled');
@@ -1297,7 +1297,7 @@ describe('MatDatepicker', () => {
12971297
testComponent.datepicker.open();
12981298
fixture.detectChanges();
12991299

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

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

0 commit comments

Comments
 (0)