Skip to content

Commit b53813c

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 e124418 commit b53813c

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
@@ -16,7 +16,6 @@ ng_module(
1616
deps = [
1717
"//src/lib/core",
1818
"//src/lib/button",
19-
"//src/lib/dialog",
2019
"//src/lib/input",
2120
"//src/cdk/a11y",
2221
"//src/cdk/bidi",

‎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
/** Animations used by the Material datepicker. */
@@ -21,14 +22,14 @@ export const matDatepickerAnimations: {
2122
} = {
2223
/** Transforms the height of the datepicker's calendar. */
2324
transformPanel: trigger('transformPanel', [
24-
state('void', style({
25-
opacity: 0,
26-
transform: 'scale(1, 0.8)'
27-
})),
28-
transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
29-
opacity: 1,
30-
transform: 'scale(1, 1)'
31-
}))),
25+
transition('void => enter-popup', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
26+
style({opacity: 0, transform: 'scale(1, 0.8)'}),
27+
style({opacity: 1, transform: 'none'})
28+
]))),
29+
transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
30+
style({opacity: 0, transform: 'scale(0.7)'}),
31+
style({opacity: 1, transform: 'none'})
32+
]))),
3233
transition('* => void', animate('100ms linear', style({opacity: 0})))
3334
]),
3435

‎src/lib/datepicker/datepicker-content.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ $mat-datepicker-touch-max-height: 788px;
3737
}
3838

3939
.mat-datepicker-content-touch {
40-
@include mat-elevation(0);
40+
@include mat-elevation(24);
4141

4242
display: block;
4343
// make sure the dialog scrolls rather than being cropped on ludicrously small screens

‎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
@@ -106,12 +106,12 @@ describe('MatDatepicker', () => {
106106
testComponent.touch = true;
107107
fixture.detectChanges();
108108

109-
expect(document.querySelector('.mat-datepicker-dialog mat-dialog-container')).toBeNull();
109+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
110110

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

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

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

158158
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
159-
expect(document.querySelector('mat-dialog-container')).toBeNull();
159+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
160160

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

164164
expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
165-
expect(document.querySelector('mat-dialog-container')).toBeNull();
165+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
166166
});
167167

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

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

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

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

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

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

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

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

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

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

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

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

@@ -298,7 +298,7 @@ describe('MatDatepicker', () => {
298298
}
299299

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

@@ -319,7 +319,7 @@ describe('MatDatepicker', () => {
319319

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

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

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

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

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

926926
expect(toggle.hasAttribute('disabled')).toBe(true);
927-
expect(document.querySelector('mat-dialog-container')).toBeNull();
927+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
928928

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

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

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

942942
expect(toggle.hasAttribute('disabled')).toBe(true);
943-
expect(document.querySelector('mat-dialog-container')).toBeNull();
943+
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
944944

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)