Skip to content

Commit 43a29b5

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 e9466a4 commit 43a29b5

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
@@ -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: 20 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,13 @@ 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();
225225

226-
expect(document.querySelector('mat-dialog-container')).toBeNull();
226+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
227227
}));
228228

229229
it('setting selected via click should update input and close calendar', fakeAsync(() => {
@@ -234,15 +234,15 @@ describe('MatDatepicker', () => {
234234
fixture.detectChanges();
235235
flush();
236236

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

240240
let cells = document.querySelectorAll('.mat-calendar-body-cell');
241241
dispatchMouseEvent(cells[1], 'click');
242242
fixture.detectChanges();
243243
flush();
244244

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

@@ -255,7 +255,7 @@ describe('MatDatepicker', () => {
255255
fixture.detectChanges();
256256
flush();
257257

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

261261
let calendarBodyEl = document.querySelector('.mat-calendar-body') as HTMLElement;
@@ -267,7 +267,7 @@ describe('MatDatepicker', () => {
267267
fixture.detectChanges();
268268
flush();
269269

270-
expect(document.querySelector('mat-dialog-container')).toBeNull();
270+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
271271
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
272272
}));
273273

@@ -291,7 +291,7 @@ describe('MatDatepicker', () => {
291291
}
292292

293293
expect(selectedChangedSpy.calls.count()).toEqual(1);
294-
expect(document.querySelector('mat-dialog-container')).toBeNull();
294+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
295295
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
296296
}));
297297

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

313313
fixture.whenStable().then(() => {
314314
expect(selectedChangedSpy.calls.count()).toEqual(0);
315-
expect(document.querySelector('mat-dialog-container')).toBeNull();
315+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
316316
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
317317
});
318318
});
@@ -902,13 +902,13 @@ describe('MatDatepicker', () => {
902902
});
903903

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

907907
let toggle = fixture.debugElement.query(By.css('button'));
908908
dispatchMouseEvent(toggle.nativeElement, 'click');
909909
fixture.detectChanges();
910910

911-
expect(document.querySelector('mat-dialog-container')).not.toBeNull();
911+
expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
912912
});
913913

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

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

922922
dispatchMouseEvent(toggle, 'click');
923923
fixture.detectChanges();
924924

925-
expect(document.querySelector('mat-dialog-container')).toBeNull();
925+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
926926
});
927927

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

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

938938
dispatchMouseEvent(toggle, 'click');
939939
fixture.detectChanges();
940940

941-
expect(document.querySelector('mat-dialog-container')).toBeNull();
941+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
942942
});
943943

944944
it('should set the `button` type on the trigger to prevent form submissions', () => {
@@ -1232,7 +1232,7 @@ describe('MatDatepicker', () => {
12321232
testComponent.datepicker.open();
12331233
fixture.detectChanges();
12341234

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

12371237
let cells = document.querySelectorAll('.mat-calendar-body-cell');
12381238
expect(cells[0].classList).toContain('mat-calendar-body-disabled');
@@ -1304,7 +1304,7 @@ describe('MatDatepicker', () => {
13041304
testComponent.datepicker.open();
13051305
fixture.detectChanges();
13061306

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

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

0 commit comments

Comments
 (0)