From b2c71cf02243544b4cb7c40166c2b6a1dd3834dd Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 15 Sep 2017 13:03:14 -0700 Subject: [PATCH] fix(overlay): rename OverlayState to OverlayConfig BREAKING CHANGE: OverlayState has been renamed to OverlayConfig --- .../{overlay-state.ts => overlay-config.ts} | 14 +++------- src/cdk/overlay/overlay-directives.ts | 6 ++--- src/cdk/overlay/overlay-ref.ts | 6 ++--- src/cdk/overlay/overlay.spec.ts | 26 +++++++++---------- src/cdk/overlay/overlay.ts | 6 ++--- src/cdk/overlay/public_api.ts | 2 +- .../scroll/block-scroll-strategy.spec.ts | 6 ++--- .../scroll/close-scroll-strategy.spec.ts | 6 ++--- .../scroll/reposition-scroll-strategy.spec.ts | 6 ++--- src/cdk/overlay/scroll/scroll-strategy.md | 10 +++---- src/demo-app/overlay/overlay-demo.ts | 12 ++++----- src/lib/autocomplete/autocomplete-trigger.ts | 6 ++--- src/lib/datepicker/datepicker.ts | 4 +-- src/lib/dialog/dialog.ts | 6 ++--- src/lib/menu/menu-trigger.ts | 8 +++--- src/lib/snack-bar/snack-bar.ts | 4 +-- src/lib/tooltip/tooltip.ts | 4 +-- 17 files changed, 62 insertions(+), 70 deletions(-) rename src/cdk/overlay/{overlay-state.ts => overlay-config.ts} (86%) diff --git a/src/cdk/overlay/overlay-state.ts b/src/cdk/overlay/overlay-config.ts similarity index 86% rename from src/cdk/overlay/overlay-state.ts rename to src/cdk/overlay/overlay-config.ts index 702468b90315..b314847d65cb 100644 --- a/src/cdk/overlay/overlay-state.ts +++ b/src/cdk/overlay/overlay-config.ts @@ -12,11 +12,8 @@ import {ScrollStrategy} from './scroll/scroll-strategy'; import {NoopScrollStrategy} from './scroll/noop-scroll-strategy'; -/** - * OverlayState is a bag of values for either the initial configuration or current state of an - * overlay. - */ -export class OverlayState { +/** OverlayConfig captures the initial configuration used when opening an overlay. */ +export class OverlayConfig { /** Strategy with which to position the overlay. */ positionStrategy?: PositionStrategy; @@ -53,14 +50,9 @@ export class OverlayState { /** The direction of the text in the overlay panel. */ direction?: Direction = 'ltr'; - constructor(state?: OverlayState) { + constructor(state?: OverlayConfig) { if (state) { Object.keys(state).forEach(key => this[key] = state[key]); } } - - // TODO(jelbourn): configuration still to add - // - focus trap - // - disable pointer events - // - z-index } diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index 76bfe87d841c..1e1c3abcd9f1 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -28,7 +28,7 @@ import {ESCAPE} from '@angular/cdk/keycodes'; import {TemplatePortal} from '@angular/cdk/portal'; import {Overlay} from './overlay'; import {OverlayRef} from './overlay-ref'; -import {OverlayState} from './overlay-state'; +import {OverlayConfig} from './overlay-config'; import { // This import is only used to define a generic type. The current TypeScript version incorrectly // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953) @@ -271,9 +271,9 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges { } /** Builds the overlay config based on the directive's inputs */ - private _buildConfig(): OverlayState { + private _buildConfig(): OverlayConfig { const positionStrategy = this._position = this._createPositionStrategy(); - const overlayConfig = new OverlayState({ + const overlayConfig = new OverlayConfig({ positionStrategy, scrollStrategy: this.scrollStrategy, hasBackdrop: this.hasBackdrop diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index 352485df4203..8d1eae2687f1 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -8,7 +8,7 @@ import {NgZone} from '@angular/core'; import {PortalHost, Portal} from '@angular/cdk/portal'; -import {OverlayState} from './overlay-state'; +import {OverlayConfig} from './overlay-config'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; @@ -26,7 +26,7 @@ export class OverlayRef implements PortalHost { constructor( private _portalHost: PortalHost, private _pane: HTMLElement, - private _state: OverlayState, + private _state: OverlayConfig, private _ngZone: NgZone) { if (_state.scrollStrategy) { @@ -154,7 +154,7 @@ export class OverlayRef implements PortalHost { /** * Gets the current state config of the overlay. */ - getState(): OverlayState { + getState(): OverlayConfig { return this._state; } diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index 8b1e3c4e2120..424c14385a39 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -11,7 +11,7 @@ import { OverlayContainer, OverlayModule, OverlayRef, - OverlayState, + OverlayConfig, PositionStrategy, ScrollStrategy, } from './index'; @@ -133,7 +133,7 @@ describe('Overlay', () => { }); it('should set the direction', () => { - const state = new OverlayState({direction: 'rtl'}); + const state = new OverlayConfig({direction: 'rtl'}); overlay.create(state).attach(componentPortal); @@ -152,7 +152,7 @@ describe('Overlay', () => { }); it('should emit the attachment event after everything is added to the DOM', () => { - let state = new OverlayState({hasBackdrop: true}); + let state = new OverlayConfig({hasBackdrop: true}); let overlayRef = overlay.create(state); overlayRef.attachments().subscribe(() => { @@ -220,10 +220,10 @@ describe('Overlay', () => { }); describe('positioning', () => { - let state: OverlayState; + let state: OverlayConfig; beforeEach(() => { - state = new OverlayState(); + state = new OverlayConfig(); }); it('should apply the positioning strategy', () => { @@ -236,10 +236,10 @@ describe('Overlay', () => { }); describe('size', () => { - let state: OverlayState; + let state: OverlayConfig; beforeEach(() => { - state = new OverlayState(); + state = new OverlayConfig(); }); it('should apply the width set in the config', () => { @@ -320,10 +320,10 @@ describe('Overlay', () => { }); describe('backdrop', () => { - let config: OverlayState; + let config: OverlayConfig; beforeEach(() => { - config = new OverlayState(); + config = new OverlayConfig(); config.hasBackdrop = true; }); @@ -411,7 +411,7 @@ describe('Overlay', () => { describe('panelClass', () => { it('should apply a custom overlay pane class', () => { - const config = new OverlayState({panelClass: 'custom-panel-class'}); + const config = new OverlayConfig({panelClass: 'custom-panel-class'}); overlay.create(config).attach(componentPortal); viewContainerFixture.detectChanges(); @@ -421,7 +421,7 @@ describe('Overlay', () => { }); it('should be able to apply multiple classes', () => { - const config = new OverlayState({panelClass: ['custom-class-one', 'custom-class-two']}); + const config = new OverlayConfig({panelClass: ['custom-class-one', 'custom-class-two']}); overlay.create(config).attach(componentPortal); viewContainerFixture.detectChanges(); @@ -435,12 +435,12 @@ describe('Overlay', () => { describe('scroll strategy', () => { let fakeScrollStrategy: FakeScrollStrategy; - let config: OverlayState; + let config: OverlayConfig; let overlayRef: OverlayRef; beforeEach(() => { fakeScrollStrategy = new FakeScrollStrategy(); - config = new OverlayState({scrollStrategy: fakeScrollStrategy}); + config = new OverlayConfig({scrollStrategy: fakeScrollStrategy}); overlayRef = overlay.create(config); }); diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts index 3af90a695d1b..1de3690e71f0 100644 --- a/src/cdk/overlay/overlay.ts +++ b/src/cdk/overlay/overlay.ts @@ -14,7 +14,7 @@ import { NgZone, } from '@angular/core'; import {DomPortalHost} from '@angular/cdk/portal'; -import {OverlayState} from './overlay-state'; +import {OverlayConfig} from './overlay-config'; import {OverlayRef} from './overlay-ref'; import {OverlayPositionBuilder} from './position/overlay-position-builder'; import {OverlayContainer} from './overlay-container'; @@ -25,7 +25,7 @@ import {ScrollStrategyOptions} from './scroll/index'; let nextUniqueId = 0; /** The default state for newly created overlays. */ -let defaultState = new OverlayState(); +let defaultState = new OverlayConfig(); /** @@ -51,7 +51,7 @@ export class Overlay { * @param state State to apply to the overlay. * @returns Reference to the created overlay. */ - create(state: OverlayState = defaultState): OverlayRef { + create(state: OverlayConfig = defaultState): OverlayRef { const pane = this._createPaneElement(); const portalHost = this._createPortalHost(pane); return new OverlayRef(portalHost, pane, state, this._ngZone); diff --git a/src/cdk/overlay/public_api.ts b/src/cdk/overlay/public_api.ts index f376b761e4ab..cd7cea149563 100644 --- a/src/cdk/overlay/public_api.ts +++ b/src/cdk/overlay/public_api.ts @@ -40,7 +40,7 @@ export {Overlay} from './overlay'; export {OverlayContainer} from './overlay-container'; export {FullscreenOverlayContainer} from './fullscreen-overlay-container'; export {OverlayRef} from './overlay-ref'; -export {OverlayState} from './overlay-state'; +export {OverlayConfig} from './overlay-config'; export {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; export {ViewportRuler} from '@angular/cdk/scrolling'; export {ComponentType} from '@angular/cdk/portal'; diff --git a/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts b/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts index b7eefac45c2e..ef2d9e131f8b 100644 --- a/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts +++ b/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts @@ -3,7 +3,7 @@ import {async, inject, TestBed} from '@angular/core/testing'; import {ComponentPortal, PortalModule} from '@angular/cdk/portal'; import {Platform} from '@angular/cdk/platform'; import {ViewportRuler} from '@angular/cdk/scrolling'; -import {Overlay, OverlayContainer, OverlayModule, OverlayRef, OverlayState} from '../index'; +import {Overlay, OverlayContainer, OverlayModule, OverlayRef, OverlayConfig} from '../index'; describe('BlockScrollStrategy', () => { @@ -23,9 +23,9 @@ describe('BlockScrollStrategy', () => { })); beforeEach(inject([Overlay, ViewportRuler], (overlay: Overlay, viewportRuler: ViewportRuler) => { - let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.block()}); + let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.block()}); - overlayRef = overlay.create(overlayState); + overlayRef = overlay.create(overlayConfig); componentPortal = new ComponentPortal(FocacciaMsg); viewport = viewportRuler; diff --git a/src/cdk/overlay/scroll/close-scroll-strategy.spec.ts b/src/cdk/overlay/scroll/close-scroll-strategy.spec.ts index d2b686eb4e95..995a241d665f 100644 --- a/src/cdk/overlay/scroll/close-scroll-strategy.spec.ts +++ b/src/cdk/overlay/scroll/close-scroll-strategy.spec.ts @@ -5,7 +5,7 @@ import {ComponentPortal, PortalModule} from '@angular/cdk/portal'; import {ScrollDispatcher} from '@angular/cdk/scrolling'; import { Overlay, - OverlayState, + OverlayConfig, OverlayRef, OverlayModule, OverlayContainer, @@ -33,8 +33,8 @@ describe('CloseScrollStrategy', () => { })); beforeEach(inject([Overlay], (overlay: Overlay) => { - let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.close()}); - overlayRef = overlay.create(overlayState); + let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.close()}); + overlayRef = overlay.create(overlayConfig); componentPortal = new ComponentPortal(MozarellaMsg); })); diff --git a/src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts b/src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts index 9405f3752855..042089de1db3 100644 --- a/src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts +++ b/src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts @@ -7,7 +7,7 @@ import { OverlayContainer, OverlayModule, OverlayRef, - OverlayState, + OverlayConfig, ScrollDispatcher, } from '../index'; @@ -33,8 +33,8 @@ describe('RepositionScrollStrategy', () => { })); beforeEach(inject([Overlay], (overlay: Overlay) => { - let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.reposition()}); - overlayRef = overlay.create(overlayState); + let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.reposition()}); + overlayRef = overlay.create(overlayConfig); componentPortal = new ComponentPortal(PastaMsg); })); diff --git a/src/cdk/overlay/scroll/scroll-strategy.md b/src/cdk/overlay/scroll/scroll-strategy.md index 72d912d1cec2..35c259832259 100644 --- a/src/cdk/overlay/scroll/scroll-strategy.md +++ b/src/cdk/overlay/scroll/scroll-strategy.md @@ -7,15 +7,15 @@ recalculate the position, close the overlay, block scrolling, etc. ## Usage To associate an overlay with a scroll strategy, you have to pass in a function, that returns a -scroll strategy, to the `OverlayState`. By default, all overlays will use the `noop` strategy which +scroll strategy, to the `OverlayConfig`. By default, all overlays will use the `noop` strategy which doesn't do anything. The other available strategies are `reposition`, `block` and `close`: ```ts -let overlayState = new OverlayState({ +let overlayConfig = new OverlayConfig({ scrollStrategy: overlay.scrollStrategies.block() }); -this._overlay.create(overlayState).attach(yourPortal); +this._overlay.create(overlayConfig).attach(yourPortal); ``` ## Creating a custom scroll strategy @@ -35,6 +35,6 @@ export class CustomScrollStrategy implements ScrollStrategy { // your implementation } -overlayState.scrollStrategy = new CustomScrollStrategy(); -this._overlay.create(overlayState).attach(yourPortal); +overlayConfig.scrollStrategy = new CustomScrollStrategy(); +this._overlay.create(overlayConfig).attach(yourPortal); ``` diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts index 1cf11b4796aa..1247fd6d2c61 100644 --- a/src/demo-app/overlay/overlay-demo.ts +++ b/src/demo-app/overlay/overlay-demo.ts @@ -1,4 +1,4 @@ -import {Overlay, OverlayOrigin, OverlayState} from '@angular/cdk/overlay'; +import {Overlay, OverlayOrigin, OverlayConfig} from '@angular/cdk/overlay'; import { ComponentPortal, // This import is only used to define a generic type. The current TypeScript version incorrectly @@ -37,7 +37,7 @@ export class OverlayDemo { constructor(public overlay: Overlay, public viewContainerRef: ViewContainerRef) { } openRotiniPanel() { - let config = new OverlayState(); + let config = new OverlayConfig(); config.positionStrategy = this.overlay.position() .global() @@ -51,7 +51,7 @@ export class OverlayDemo { } openFusilliPanel() { - let config = new OverlayState(); + let config = new OverlayConfig(); config.positionStrategy = this.overlay.position() .global() @@ -72,7 +72,7 @@ export class OverlayDemo { {originX: 'start', originY: 'bottom'}, {overlayX: 'start', overlayY: 'top'} ); - let config = new OverlayState({positionStrategy: strategy}); + let config = new OverlayConfig({positionStrategy: strategy}); let overlayRef = this.overlay.create(config); overlayRef.attach(new ComponentPortal(SpagettiPanel, this.viewContainerRef)); @@ -85,14 +85,14 @@ export class OverlayDemo { {originX: 'start', originY: 'bottom'}, {overlayX: 'end', overlayY: 'top'} ); - let config = new OverlayState({positionStrategy: strategy}); + let config = new OverlayConfig({positionStrategy: strategy}); let overlayRef = this.overlay.create(config); overlayRef.attach(this.tortelliniTemplate); } openPanelWithBackdrop() { - let config = new OverlayState({ + let config = new OverlayConfig({ hasBackdrop: true, backdropClass: 'cdk-overlay-transparent-backdrop', positionStrategy: this.overlay.position().global().centerHorizontally() diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 972b78fe9823..89e8d3487b90 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -12,7 +12,7 @@ import { ConnectedPositionStrategy, Overlay, OverlayRef, - OverlayState, + OverlayConfig, PositionStrategy, RepositionScrollStrategy, ScrollStrategy, @@ -464,8 +464,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { this._panelOpen = true; } - private _getOverlayConfig(): OverlayState { - return new OverlayState({ + private _getOverlayConfig(): OverlayConfig { + return new OverlayConfig({ positionStrategy: this._getOverlayPosition(), scrollStrategy: this._scrollStrategy(), width: this._getHostWidth(), diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index df5c6190499e..6dc3fa084e9c 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -12,7 +12,7 @@ import {ESCAPE} from '@angular/cdk/keycodes'; import { Overlay, OverlayRef, - OverlayState, + OverlayConfig, PositionStrategy, RepositionScrollStrategy, ScrollStrategy, @@ -329,7 +329,7 @@ export class MdDatepicker implements OnDestroy { /** Create the popup. */ private _createPopup(): void { - const overlayState = new OverlayState({ + const overlayState = new OverlayConfig({ positionStrategy: this._createPopupPositionStrategy(), hasBackdrop: true, backdropClass: 'md-overlay-transparent-backdrop', diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 86865578919c..5ff66f717a0b 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -11,7 +11,7 @@ import { BlockScrollStrategy, Overlay, OverlayRef, - OverlayState, + OverlayConfig, ScrollStrategy, } from '@angular/cdk/overlay'; import {ComponentPortal, ComponentType, TemplatePortal} from '@angular/cdk/portal'; @@ -181,8 +181,8 @@ export class MdDialog { * @param dialogConfig The dialog configuration. * @returns The overlay configuration. */ - private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState { - const state = new OverlayState({ + private _getOverlayState(dialogConfig: MdDialogConfig): OverlayConfig { + const state = new OverlayConfig({ positionStrategy: this._overlay.position().global(), scrollStrategy: this._scrollStrategy(), panelClass: dialogConfig.panelClass, diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 7c3b7385f275..4d6c8e9d475b 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -14,7 +14,7 @@ import { HorizontalConnectionPos, Overlay, OverlayRef, - OverlayState, + OverlayConfig, RepositionScrollStrategy, ScrollStrategy, VerticalConnectionPos, @@ -317,10 +317,10 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { /** * This method builds the configuration object needed to create the overlay, the OverlayState. - * @returns OverlayState + * @returns OverlayConfig */ - private _getOverlayConfig(): OverlayState { - return new OverlayState({ + private _getOverlayConfig(): OverlayConfig { + return new OverlayConfig({ positionStrategy: this._getPosition(), hasBackdrop: !this.triggersSubmenu(), backdropClass: 'cdk-overlay-transparent-backdrop', diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index a4ed737b2add..e4e3a13a3d86 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -7,7 +7,7 @@ */ import {ComponentRef, Injectable, Injector, Optional, SkipSelf } from '@angular/core'; -import {Overlay, OverlayRef, OverlayState} from '@angular/cdk/overlay'; +import {Overlay, OverlayRef, OverlayConfig} from '@angular/cdk/overlay'; import {ComponentPortal, ComponentType} from '@angular/cdk/portal'; import {LiveAnnouncer} from '@angular/cdk/a11y'; import {PortalInjector} from '@angular/material/core'; @@ -153,7 +153,7 @@ export class MdSnackBar { * @param config The user-specified snack bar config. */ private _createOverlay(config: MdSnackBarConfig): OverlayRef { - const state = new OverlayState(); + const state = new OverlayConfig(); state.direction = config.direction; let positionStrategy = this._overlay.position().global(); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 7cca6e1c9fb9..6162f12cf6af 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -16,7 +16,7 @@ import { Overlay, OverlayConnectionPosition, OverlayRef, - OverlayState, + OverlayConfig, RepositionScrollStrategy, ScrollStrategy, } from '@angular/cdk/overlay'; @@ -309,7 +309,7 @@ export class MdTooltip implements OnDestroy { } }); - const config = new OverlayState({ + const config = new OverlayConfig({ direction: this._dir ? this._dir.value : 'ltr', positionStrategy: strategy, panelClass: TOOLTIP_PANEL_CLASS,