From e2047af8d9ef6fd71f6c0aa8e41eb99052bae1d0 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 13 Dec 2017 14:19:01 -0800 Subject: [PATCH] Revert "feat(datepicker): add animation to calendar popup" (#8976) This reverts commit 3dca420e532ad2affbcbc3610c8e79ab2ff8d1a6. --- src/lib/datepicker/datepicker-content.html | 1 - src/lib/datepicker/datepicker-content.scss | 5 -- src/lib/datepicker/datepicker.spec.ts | 55 ++------------------ src/lib/datepicker/datepicker.ts | 60 ++-------------------- 4 files changed, 6 insertions(+), 115 deletions(-) diff --git a/src/lib/datepicker/datepicker-content.html b/src/lib/datepicker/datepicker-content.html index 9b8f29bcf4d..60c0cc74780 100644 --- a/src/lib/datepicker/datepicker-content.html +++ b/src/lib/datepicker/datepicker-content.html @@ -7,7 +7,6 @@ [maxDate]="datepicker._maxDate" [dateFilter]="datepicker._dateFilter" [selected]="datepicker._selected" - [@fadeInCalendar]="'enter'" (selectedChange)="datepicker._select($event)" (_userSelection)="datepicker.close()"> diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss index a1e2f6769b2..077311434a8 100644 --- a/src/lib/datepicker/datepicker-content.scss +++ b/src/lib/datepicker/datepicker-content.scss @@ -28,7 +28,6 @@ $mat-datepicker-touch-max-height: 788px; @include mat-elevation(8); display: block; - transform-origin: top center; .mat-calendar { width: $mat-datepicker-non-touch-calendar-width; @@ -36,10 +35,6 @@ $mat-datepicker-touch-max-height: 788px; } } -.mat-datepicker-content-above { - transform-origin: bottom center; -} - .mat-datepicker-content-touch { @include mat-elevation(0); diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 22cff664703..81941d04fb5 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -8,7 +8,7 @@ import { dispatchMouseEvent, } from '@angular/cdk/testing'; import {Component, ViewChild} from '@angular/core'; -import {async, ComponentFixture, inject, TestBed, fakeAsync, flush} from '@angular/core/testing'; +import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import { DEC, @@ -167,7 +167,7 @@ describe('MatDatepicker', () => { expect(parseInt(getComputedStyle(popup).height as string)).toBe(0); }); - it('should close the popup when pressing ESCAPE', fakeAsync(() => { + it('should close the popup when pressing ESCAPE', () => { testComponent.datepicker.open(); fixture.detectChanges(); @@ -179,7 +179,6 @@ describe('MatDatepicker', () => { dispatchEvent(content, keyboardEvent); fixture.detectChanges(); - flush(); content = document.querySelector('.cdk-overlay-pane mat-datepicker-content')!; @@ -187,7 +186,7 @@ describe('MatDatepicker', () => { expect(stopPropagationSpy).toHaveBeenCalled(); expect(keyboardEvent.defaultPrevented) .toBe(true, 'Expected default ESCAPE action to be prevented.'); - })); + }); it('close should close dialog', async(() => { testComponent.touch = true; @@ -1237,54 +1236,6 @@ describe('MatDatepicker', () => { }); })); }); - - describe('popup animations', () => { - let fixture: ComponentFixture; - let testComponent: StandardDatepicker; - - beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [MatDatepickerModule, MatNativeDateModule, NoopAnimationsModule], - declarations: [StandardDatepicker], - }).compileComponents(); - - fixture = TestBed.createComponent(StandardDatepicker); - fixture.detectChanges(); - testComponent = fixture.componentInstance; - })); - - it('should not set the `mat-datepicker-content-above` class when opening downwards', - fakeAsync(() => { - fixture.componentInstance.datepicker.open(); - fixture.detectChanges(); - flush(); - fixture.detectChanges(); - - const content = - document.querySelector('.cdk-overlay-pane mat-datepicker-content')! as HTMLElement; - - expect(content.classList).not.toContain('mat-datepicker-content-above'); - })); - - it('should set the `mat-datepicker-content-above` class when opening upwards', fakeAsync(() => { - const input = fixture.debugElement.nativeElement.querySelector('input'); - - // Push the input to the bottom of the page to force the calendar to open upwards - input.style.position = 'fixed'; - input.style.bottom = '0'; - - fixture.componentInstance.datepicker.open(); - fixture.detectChanges(); - flush(); - fixture.detectChanges(); - - const content = - document.querySelector('.cdk-overlay-pane mat-datepicker-content')! as HTMLElement; - - expect(content.classList).toContain('mat-datepicker-content-above'); - })); - - }); }); diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index c0e5abbd1a6..527605aca82 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -16,7 +16,6 @@ import { PositionStrategy, RepositionScrollStrategy, ScrollStrategy, - ConnectedPositionStrategy, } from '@angular/cdk/overlay'; import {ComponentPortal} from '@angular/cdk/portal'; import {take} from 'rxjs/operators/take'; @@ -36,8 +35,6 @@ import { ViewChild, ViewContainerRef, ViewEncapsulation, - ChangeDetectorRef, - OnInit, } from '@angular/core'; import {DateAdapter} from '@angular/material/core'; import {MatDialog, MatDialogRef} from '@angular/material/dialog'; @@ -47,7 +44,6 @@ import {Subscription} from 'rxjs/Subscription'; import {MatCalendar} from './calendar'; import {createMissingDateImplError} from './datepicker-errors'; import {MatDatepickerInput} from './datepicker-input'; -import{trigger, state, style, animate, transition} from '@angular/animations'; /** Used to generate a unique ID for each datepicker instance. */ @@ -85,73 +81,23 @@ export const MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER = { styleUrls: ['datepicker-content.css'], host: { 'class': 'mat-datepicker-content', - '[@tranformPanel]': '"enter"', '[class.mat-datepicker-content-touch]': 'datepicker.touchUi', - '[class.mat-datepicker-content-above]': '_isAbove', '(keydown)': '_handleKeydown($event)', }, - animations: [ - trigger('tranformPanel', [ - state('void', style({opacity: 0, transform: 'scale(1, 0)'})), - state('enter', style({opacity: 1, transform: 'scale(1, 1)'})), - transition('void => enter', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')), - transition('* => void', animate('100ms linear', style({opacity: 0}))) - ]), - trigger('fadeInCalendar', [ - state('void', style({opacity: 0})), - state('enter', style({opacity: 1})), - transition('void => *', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')) - ]) - ], exportAs: 'matDatepickerContent', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MatDatepickerContent implements AfterContentInit, OnInit, OnDestroy { - /** Subscription to changes in the overlay's position. */ - private _positionChange: Subscription|null; - - /** Reference to the internal calendar component. */ - @ViewChild(MatCalendar) _calendar: MatCalendar; - - /** Reference to the datepicker that created the overlay. */ +export class MatDatepickerContent implements AfterContentInit { datepicker: MatDatepicker; - /** Whether the datepicker is above or below the input. */ - _isAbove: boolean; - - constructor(private _changeDetectorRef: ChangeDetectorRef) {} - - ngOnInit() { - if (!this.datepicker._popupRef || this._positionChange) { - return; - } - - const positionStrategy = - this.datepicker._popupRef.getConfig().positionStrategy! as ConnectedPositionStrategy; - - this._positionChange = positionStrategy.onPositionChange.subscribe(change => { - const isAbove = change.connectionPair.overlayY === 'bottom'; - - if (isAbove !== this._isAbove) { - this._isAbove = isAbove; - this._changeDetectorRef.markForCheck(); - } - }); - } + @ViewChild(MatCalendar) _calendar: MatCalendar; ngAfterContentInit() { this._calendar._focusActiveCell(); } - ngOnDestroy() { - if (this._positionChange) { - this._positionChange.unsubscribe(); - this._positionChange = null; - } - } - /** * Handles keydown event on datepicker content. * @param event The event. @@ -268,7 +214,7 @@ export class MatDatepicker implements OnDestroy { } /** A reference to the overlay when the calendar is opened as a popup. */ - _popupRef: OverlayRef; + private _popupRef: OverlayRef; /** A reference to the dialog when the calendar is opened as a dialog. */ private _dialogRef: MatDialogRef | null;