Skip to content

Commit

Permalink
feat(datepicker): remove dependency on mat-dialog
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@crisbeto
crisbeto committed Sep 7, 2018
1 parent e124418 commit b53813c
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 108 deletions.
1 change: 0 additions & 1 deletion src/lib/datepicker/BUILD.bazel
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ ng_module(
deps = [
"//src/lib/core",
"//src/lib/button",
"//src/lib/dialog",
"//src/lib/input",
"//src/cdk/a11y",
"//src/cdk/bidi",
Expand Down
17 changes: 9 additions & 8 deletions src/lib/datepicker/datepicker-animations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
transition,
trigger,
AnimationTriggerMetadata,
keyframes,
} from '@angular/animations';

/** Animations used by the Material datepicker. */
Expand All @@ -21,14 +22,14 @@ export const matDatepickerAnimations: {
} = {
/** Transforms the height of the datepicker's calendar. */
transformPanel: trigger('transformPanel', [
state('void', style({
opacity: 0,
transform: 'scale(1, 0.8)'
})),
transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
opacity: 1,
transform: 'scale(1, 1)'
}))),
transition('void => enter-popup', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
style({opacity: 0, transform: 'scale(1, 0.8)'}),
style({opacity: 1, transform: 'none'})
]))),
transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
style({opacity: 0, transform: 'scale(0.7)'}),
style({opacity: 1, transform: 'none'})
]))),
transition('* => void', animate('100ms linear', style({opacity: 0})))
]),

Expand Down
2 changes: 1 addition & 1 deletion src/lib/datepicker/datepicker-content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ $mat-datepicker-touch-max-height: 788px;
}

.mat-datepicker-content-touch {
@include mat-elevation(0);
@include mat-elevation(24);

display: block;
// make sure the dialog scrolls rather than being cropped on ludicrously small screens
Expand Down
2 changes: 0 additions & 2 deletions src/lib/datepicker/datepicker-module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {PortalModule} from '@angular/cdk/portal';
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatCalendar, MatCalendarHeader} from './calendar';
import {MatCalendarBody} from './calendar-body';
import {
Expand All @@ -32,7 +31,6 @@ import {MatYearView} from './year-view';
imports: [
CommonModule,
MatButtonModule,
MatDialogModule,
OverlayModule,
A11yModule,
PortalModule,
Expand Down
40 changes: 20 additions & 20 deletions src/lib/datepicker/datepicker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,12 @@ describe('MatDatepicker', () => {
testComponent.touch = true;
fixture.detectChanges();

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

testComponent.datepicker.open();
fixture.detectChanges();

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

Expand Down Expand Up @@ -156,13 +156,13 @@ describe('MatDatepicker', () => {
fixture.detectChanges();

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

testComponent.datepicker.open();
fixture.detectChanges();

expect(document.querySelector('.cdk-overlay-pane')).toBeNull();
expect(document.querySelector('mat-dialog-container')).toBeNull();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
});

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

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

testComponent.datepicker.close();
fixture.detectChanges();
flush();

expect(document.querySelector('mat-dialog-container')).toBeNull();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
}));

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

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

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

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

Expand All @@ -262,7 +262,7 @@ describe('MatDatepicker', () => {
fixture.detectChanges();
flush();

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

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

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

Expand All @@ -298,7 +298,7 @@ describe('MatDatepicker', () => {
}

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

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

fixture.whenStable().then(() => {
expect(selectedChangedSpy.calls.count()).toEqual(0);
expect(document.querySelector('mat-dialog-container')).toBeNull();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1));
});
});
Expand Down Expand Up @@ -909,13 +909,13 @@ describe('MatDatepicker', () => {
});

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

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

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

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

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

dispatchMouseEvent(toggle, 'click');
fixture.detectChanges();

expect(document.querySelector('mat-dialog-container')).toBeNull();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
});

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

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

dispatchMouseEvent(toggle, 'click');
fixture.detectChanges();

expect(document.querySelector('mat-dialog-container')).toBeNull();
expect(document.querySelector('.mat-datepicker-dialog')).toBeNull();
});

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

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

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

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

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

0 comments on commit b53813c

Please sign in to comment.