Skip to content

Commit abd743a

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 d9977bd commit abd743a

File tree

6 files changed

+106
-114
lines changed

6 files changed

+106
-114
lines changed

‎src/material/datepicker/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ ng_module(
3131
"//src/cdk/portal",
3232
"//src/material/button",
3333
"//src/material/core",
34-
"//src/material/dialog",
3534
"//src/material/form-field",
3635
"//src/material/input",
3736
"@npm//@angular/animations",

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

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

120120
.mat-datepicker-content-touch {
121-
@include _mat-theme-elevation(0, $theme);
121+
@include _mat-theme-elevation(24, $theme);
122122
}
123123

124124
.mat-datepicker-toggle-active {

‎src/material/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/material/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/material/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', () => {
@@ -218,13 +218,14 @@ describe('MatDatepicker', () => {
218218
testComponent.datepicker.open();
219219
fixture.detectChanges();
220220

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

223223
testComponent.datepicker.close();
224224
fixture.detectChanges();
225225
flush();
226+
fixture.detectChanges();
226227

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

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

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

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

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

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

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

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

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

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

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

@@ -313,7 +314,7 @@ describe('MatDatepicker', () => {
313314

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

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

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

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

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

920921
expect(toggle.hasAttribute('disabled')).toBe(true);
921-
expect(document.querySelector('mat-dialog-container')).toBeNull();
922+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
922923

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

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

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

936937
expect(toggle.hasAttribute('disabled')).toBe(true);
937-
expect(document.querySelector('mat-dialog-container')).toBeNull();
938+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
938939

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

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

945946
it('should set the `button` type on the trigger to prevent form submissions', () => {
@@ -1263,7 +1264,7 @@ describe('MatDatepicker', () => {
12631264
testComponent.datepicker.open();
12641265
fixture.detectChanges();
12651266

1266-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
1267+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
12671268

12681269
let cells = document.querySelectorAll('.mat-calendar-body-cell');
12691270
expect(cells[0].classList).toContain('mat-calendar-body-disabled');
@@ -1335,7 +1336,7 @@ describe('MatDatepicker', () => {
13351336
testComponent.datepicker.open();
13361337
fixture.detectChanges();
13371338

1338-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
1339+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
13391340

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

0 commit comments

Comments
 (0)