From 0d9f786b6a0059f6cd1bcf61c8d5cb93e2851b90 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 27 Sep 2017 21:31:39 +0200 Subject: [PATCH] refactor: rename all OverlayState references to match the new naming Renames all of the "state" references in the overlays to refer to a "config" instead. This makes everything consistent with the recent rename of OverlayState to OverlayConfig. BREAKING CHANGE: The `OverlayRef.getState` method has been renamed to `OverlayRef.getConfig`. --- src/cdk/overlay/overlay-config.ts | 6 +- src/cdk/overlay/overlay-directives.spec.ts | 2 +- src/cdk/overlay/overlay-directives.ts | 2 +- src/cdk/overlay/overlay-ref.ts | 82 ++++++++++---------- src/cdk/overlay/overlay.spec.ts | 58 +++++++------- src/cdk/overlay/overlay.ts | 10 +-- src/lib/autocomplete/autocomplete-trigger.ts | 2 +- src/lib/datepicker/datepicker.ts | 4 +- src/lib/dialog/dialog-ref.ts | 2 +- src/lib/dialog/dialog.ts | 8 +- src/lib/snack-bar/snack-bar.ts | 8 +- 11 files changed, 92 insertions(+), 92 deletions(-) diff --git a/src/cdk/overlay/overlay-config.ts b/src/cdk/overlay/overlay-config.ts index b314847d65cb..cde1d5050da3 100644 --- a/src/cdk/overlay/overlay-config.ts +++ b/src/cdk/overlay/overlay-config.ts @@ -50,9 +50,9 @@ export class OverlayConfig { /** The direction of the text in the overlay panel. */ direction?: Direction = 'ltr'; - constructor(state?: OverlayConfig) { - if (state) { - Object.keys(state).forEach(key => this[key] = state[key]); + constructor(config?: OverlayConfig) { + if (config) { + Object.keys(config).forEach(key => this[key] = config[key]); } } } diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index e0876038d708..2e0830acb922 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -76,7 +76,7 @@ describe('Overlay directives', () => { let overlayDirective = testComponent.connectedOverlayDirective; let strategy = - overlayDirective.overlayRef.getState().positionStrategy; + overlayDirective.overlayRef.getConfig().positionStrategy; expect(strategy instanceof ConnectedPositionStrategy).toBe(true); let positions = strategy.positions; diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index 1e1c3abcd9f1..7837f981b164 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -337,7 +337,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges { } this._position.withDirection(this.dir); - this._overlayRef.getState().direction = this.dir; + this._overlayRef.getConfig().direction = this.dir; this._initEscapeListener(); if (!this._overlayRef.hasAttached()) { diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index 8d1eae2687f1..915104dfb3f0 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -26,11 +26,11 @@ export class OverlayRef implements PortalHost { constructor( private _portalHost: PortalHost, private _pane: HTMLElement, - private _state: OverlayConfig, + private _config: OverlayConfig, private _ngZone: NgZone) { - if (_state.scrollStrategy) { - _state.scrollStrategy.attach(this); + if (_config.scrollStrategy) { + _config.scrollStrategy.attach(this); } } @@ -47,33 +47,33 @@ export class OverlayRef implements PortalHost { attach(portal: Portal): any { let attachResult = this._portalHost.attach(portal); - if (this._state.positionStrategy) { - this._state.positionStrategy.attach(this); + if (this._config.positionStrategy) { + this._config.positionStrategy.attach(this); } - // Update the pane element with the given state configuration. + // Update the pane element with the given configuration. this._updateStackingOrder(); this.updateSize(); this.updateDirection(); this.updatePosition(); - if (this._state.scrollStrategy) { - this._state.scrollStrategy.enable(); + if (this._config.scrollStrategy) { + this._config.scrollStrategy.enable(); } // Enable pointer events for the overlay pane element. this._togglePointerEvents(true); - if (this._state.hasBackdrop) { + if (this._config.hasBackdrop) { this._attachBackdrop(); } - if (this._state.panelClass) { + if (this._config.panelClass) { // We can't do a spread here, because IE doesn't support setting multiple classes. - if (Array.isArray(this._state.panelClass)) { - this._state.panelClass.forEach(cls => this._pane.classList.add(cls)); + if (Array.isArray(this._config.panelClass)) { + this._config.panelClass.forEach(cls => this._pane.classList.add(cls)); } else { - this._pane.classList.add(this._state.panelClass); + this._pane.classList.add(this._config.panelClass); } } @@ -95,8 +95,8 @@ export class OverlayRef implements PortalHost { // pointer events therefore. Depends on the position strategy and the applied pane boundaries. this._togglePointerEvents(false); - if (this._state.scrollStrategy) { - this._state.scrollStrategy.disable(); + if (this._config.scrollStrategy) { + this._config.scrollStrategy.disable(); } let detachmentResult = this._portalHost.detach(); @@ -111,12 +111,12 @@ export class OverlayRef implements PortalHost { * Cleans up the overlay from the DOM. */ dispose(): void { - if (this._state.positionStrategy) { - this._state.positionStrategy.dispose(); + if (this._config.positionStrategy) { + this._config.positionStrategy.dispose(); } - if (this._state.scrollStrategy) { - this._state.scrollStrategy.disable(); + if (this._config.scrollStrategy) { + this._config.scrollStrategy.disable(); } this.detachBackdrop(); @@ -152,48 +152,48 @@ export class OverlayRef implements PortalHost { } /** - * Gets the current state config of the overlay. + * Gets the current config of the overlay. */ - getState(): OverlayConfig { - return this._state; + getConfig(): OverlayConfig { + return this._config; } /** Updates the position of the overlay based on the position strategy. */ updatePosition() { - if (this._state.positionStrategy) { - this._state.positionStrategy.apply(); + if (this._config.positionStrategy) { + this._config.positionStrategy.apply(); } } /** Updates the text direction of the overlay panel. */ private updateDirection() { - this._pane.setAttribute('dir', this._state.direction!); + this._pane.setAttribute('dir', this._config.direction!); } /** Updates the size of the overlay based on the overlay config. */ updateSize() { - if (this._state.width || this._state.width === 0) { - this._pane.style.width = formatCssUnit(this._state.width); + if (this._config.width || this._config.width === 0) { + this._pane.style.width = formatCssUnit(this._config.width); } - if (this._state.height || this._state.height === 0) { - this._pane.style.height = formatCssUnit(this._state.height); + if (this._config.height || this._config.height === 0) { + this._pane.style.height = formatCssUnit(this._config.height); } - if (this._state.minWidth || this._state.minWidth === 0) { - this._pane.style.minWidth = formatCssUnit(this._state.minWidth); + if (this._config.minWidth || this._config.minWidth === 0) { + this._pane.style.minWidth = formatCssUnit(this._config.minWidth); } - if (this._state.minHeight || this._state.minHeight === 0) { - this._pane.style.minHeight = formatCssUnit(this._state.minHeight); + if (this._config.minHeight || this._config.minHeight === 0) { + this._pane.style.minHeight = formatCssUnit(this._config.minHeight); } - if (this._state.maxWidth || this._state.maxWidth === 0) { - this._pane.style.maxWidth = formatCssUnit(this._state.maxWidth); + if (this._config.maxWidth || this._config.maxWidth === 0) { + this._pane.style.maxWidth = formatCssUnit(this._config.maxWidth); } - if (this._state.maxHeight || this._state.maxHeight === 0) { - this._pane.style.maxHeight = formatCssUnit(this._state.maxHeight); + if (this._config.maxHeight || this._config.maxHeight === 0) { + this._pane.style.maxHeight = formatCssUnit(this._config.maxHeight); } } @@ -207,8 +207,8 @@ export class OverlayRef implements PortalHost { this._backdropElement = document.createElement('div'); this._backdropElement.classList.add('cdk-overlay-backdrop'); - if (this._state.backdropClass) { - this._backdropElement.classList.add(this._state.backdropClass); + if (this._config.backdropClass) { + this._backdropElement.classList.add(this._config.backdropClass); } // Insert the backdrop before the pane in the DOM order, @@ -261,8 +261,8 @@ export class OverlayRef implements PortalHost { backdropToDetach.classList.remove('cdk-overlay-backdrop-showing'); - if (this._state.backdropClass) { - backdropToDetach.classList.remove(this._state.backdropClass); + if (this._config.backdropClass) { + backdropToDetach.classList.remove(this._config.backdropClass); } backdropToDetach.addEventListener('transitionend', finishDetach); diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index 6763e9432262..e8af0f9ff4ab 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -133,9 +133,9 @@ describe('Overlay', () => { }); it('should set the direction', () => { - const state = new OverlayConfig({direction: 'rtl'}); + const config = new OverlayConfig({direction: 'rtl'}); - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.getAttribute('dir')).toEqual('rtl'); @@ -152,8 +152,8 @@ describe('Overlay', () => { }); it('should emit the attachment event after everything is added to the DOM', () => { - let state = new OverlayConfig({hasBackdrop: true}); - let overlayRef = overlay.create(state); + let config = new OverlayConfig({hasBackdrop: true}); + let overlayRef = overlay.create(config); overlayRef.attachments().subscribe(() => { expect(overlayContainerElement.querySelector('pizza')) @@ -220,99 +220,99 @@ describe('Overlay', () => { }); describe('positioning', () => { - let state: OverlayConfig; + let config: OverlayConfig; beforeEach(() => { - state = new OverlayConfig(); + config = new OverlayConfig(); }); it('should apply the positioning strategy', () => { - state.positionStrategy = new FakePositionStrategy(); + config.positionStrategy = new FakePositionStrategy(); - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); expect(overlayContainerElement.querySelectorAll('.fake-positioned').length).toBe(1); }); }); describe('size', () => { - let state: OverlayConfig; + let config: OverlayConfig; beforeEach(() => { - state = new OverlayConfig(); + config = new OverlayConfig(); }); it('should apply the width set in the config', () => { - state.width = 500; + config.width = 500; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.width).toEqual('500px'); }); it('should support using other units if a string width is provided', () => { - state.width = '200%'; + config.width = '200%'; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.width).toEqual('200%'); }); it('should apply the height set in the config', () => { - state.height = 500; + config.height = 500; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.height).toEqual('500px'); }); it('should support using other units if a string height is provided', () => { - state.height = '100vh'; + config.height = '100vh'; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.height).toEqual('100vh'); }); it('should apply the min width set in the config', () => { - state.minWidth = 200; + config.minWidth = 200; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.minWidth).toEqual('200px'); }); it('should apply the min height set in the config', () => { - state.minHeight = 500; + config.minHeight = 500; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.minHeight).toEqual('500px'); }); it('should apply the max width set in the config', () => { - state.maxWidth = 200; + config.maxWidth = 200; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.maxWidth).toEqual('200px'); }); it('should apply the max height set in the config', () => { - state.maxHeight = 500; + config.maxHeight = 500; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.maxHeight).toEqual('500px'); }); it('should support zero widths and heights', () => { - state.width = 0; - state.height = 0; + config.width = 0; + config.height = 0; - overlay.create(state).attach(componentPortal); + overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.width).toEqual('0px'); expect(pane.style.height).toEqual('0px'); diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts index 1de3690e71f0..651f7e6d4f2f 100644 --- a/src/cdk/overlay/overlay.ts +++ b/src/cdk/overlay/overlay.ts @@ -24,8 +24,8 @@ import {ScrollStrategyOptions} from './scroll/index'; /** Next overlay unique ID. */ let nextUniqueId = 0; -/** The default state for newly created overlays. */ -let defaultState = new OverlayConfig(); +/** The default config for newly created overlays. */ +let defaultConfig = new OverlayConfig(); /** @@ -48,13 +48,13 @@ export class Overlay { /** * Creates an overlay. - * @param state State to apply to the overlay. + * @param config Config to apply to the overlay. * @returns Reference to the created overlay. */ - create(state: OverlayConfig = defaultState): OverlayRef { + create(config: OverlayConfig = defaultConfig): OverlayRef { const pane = this._createPaneElement(); const portalHost = this._createPortalHost(pane); - return new OverlayRef(portalHost, pane, state, this._ngZone); + return new OverlayRef(portalHost, pane, config, this._ngZone); } /** diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 89e8d3487b90..d9e43d8d5374 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -451,7 +451,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { this._overlayRef = this._overlay.create(this._getOverlayConfig()); } else { /** Update the panel width, in case the host width has changed */ - this._overlayRef.getState().width = this._getHostWidth(); + this._overlayRef.getConfig().width = this._getHostWidth(); this._overlayRef.updateSize(); } diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index d0873f7f1980..38125de55c4a 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -333,7 +333,7 @@ export class MdDatepicker implements OnDestroy { /** Create the popup. */ private _createPopup(): void { - const overlayState = new OverlayConfig({ + const overlayConfig = new OverlayConfig({ positionStrategy: this._createPopupPositionStrategy(), hasBackdrop: true, backdropClass: 'mat-overlay-transparent-backdrop', @@ -341,7 +341,7 @@ export class MdDatepicker implements OnDestroy { scrollStrategy: this._scrollStrategy() }); - this._popupRef = this._overlay.create(overlayState); + this._popupRef = this._overlay.create(overlayConfig); } /** Create the popup PositionStrategy. */ diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts index d4839bb486d0..4a040def4aa9 100644 --- a/src/lib/dialog/dialog-ref.ts +++ b/src/lib/dialog/dialog-ref.ts @@ -157,6 +157,6 @@ export class MdDialogRef { /** Fetches the position strategy object from the overlay ref. */ private _getPositionStrategy(): GlobalPositionStrategy { - return this._overlayRef.getState().positionStrategy as GlobalPositionStrategy; + return this._overlayRef.getConfig().positionStrategy as GlobalPositionStrategy; } } diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 0fa02226f787..b326173ce413 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -173,16 +173,16 @@ export class MdDialog { * @returns A promise resolving to the OverlayRef for the created overlay. */ private _createOverlay(config: MdDialogConfig): OverlayRef { - const overlayState = this._getOverlayState(config); - return this._overlay.create(overlayState); + const overlayConfig = this._getOverlayConfig(config); + return this._overlay.create(overlayConfig); } /** - * Creates an overlay state from a dialog config. + * Creates an overlay config from a dialog config. * @param dialogConfig The dialog configuration. * @returns The overlay configuration. */ - private _getOverlayState(dialogConfig: MdDialogConfig): OverlayConfig { + private _getOverlayConfig(dialogConfig: MdDialogConfig): OverlayConfig { const state = new OverlayConfig({ positionStrategy: this._overlay.position().global(), scrollStrategy: this._scrollStrategy(), diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 293e2c903e95..5f504bf42a68 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -152,8 +152,8 @@ export class MdSnackBar { * @param config The user-specified snack bar config. */ private _createOverlay(config: MdSnackBarConfig): OverlayRef { - const state = new OverlayConfig(); - state.direction = config.direction; + const overlayConfig = new OverlayConfig(); + overlayConfig.direction = config.direction; let positionStrategy = this._overlay.position().global(); // Set horizontal position. @@ -177,8 +177,8 @@ export class MdSnackBar { positionStrategy.bottom('0'); } - state.positionStrategy = positionStrategy; - return this._overlay.create(state); + overlayConfig.positionStrategy = positionStrategy; + return this._overlay.create(overlayConfig); } /**