refactor: switch to better approach

Author: crisbeto

src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.ts

@@ -9,5 +9,5 @@ import {ScrollStrategyOptions, ScrollStrategy} from '@angular/material';
 })
 export class BlockScrollStrategyE2E {
   constructor(private _scrollStrategyOptions: ScrollStrategyOptions) { }
-  scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.get('block');
+  scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
 }

src/lib/autocomplete/autocomplete-trigger.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {DOCUMENT} from '@angular/platform-browser';
-import {Overlay, OverlayRef, OverlayState, TemplatePortal, RepositionScrollStrategy} from '../core';
+import {Overlay, OverlayRef, OverlayState, TemplatePortal, ScrollStrategyOptions} from '../core';
 import {MdAutocomplete} from './autocomplete';
 import {PositionStrategy} from '../core/overlay/position/position-strategy';
 import {ConnectedPositionStrategy} from '../core/overlay/position/connected-position-strategy';
@@ -103,6 +103,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   constructor(private _element: ElementRef, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
               private _changeDetectorRef: ChangeDetectorRef,
+              private _scrollStrategyOptions: ScrollStrategyOptions,
               @Optional() private _dir: Dir, private _zone: NgZone,
               @Optional() @Host() private _inputContainer: MdInputContainer,
               @Optional() @Inject(DOCUMENT) private _document: any) {}
@@ -366,7 +367,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     overlayState.positionStrategy = this._getOverlayPosition();
     overlayState.width = this._getHostWidth();
     overlayState.direction = this._dir ? this._dir.value : 'ltr';
-    overlayState.scrollStrategy = 'reposition';
+    overlayState.scrollStrategy = this._scrollStrategyOptions.reposition;
     return overlayState;
   }
 

src/lib/core/overlay/overlay-directives.ts

@@ -25,7 +25,7 @@ import {PortalModule} from '../portal/portal-directives';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {Dir, LayoutDirection} from '../rtl/dir';
 import {Scrollable} from './scroll/scrollable';
-import {RepositionScrollStrategy} from './scroll/reposition-scroll-strategy';
+import {ScrollStrategyOptions} from './scroll/scroll-strategy-options';
 import {ScrollStrategy} from './scroll/scroll-strategy';
 import {coerceBooleanProperty} from '../coercion/boolean-property';
 import {ESCAPE} from '../keyboard/keycodes';
@@ -124,7 +124,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   @Input() backdropClass: string;
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
-  @Input() scrollStrategy: OverlayStateScrollStrategy = 'reposition';
+  @Input() scrollStrategy: OverlayStateScrollStrategy = this._scrollStrategyOptions.reposition;
 
   /** Whether the overlay is open. */
   @Input() open: boolean = false;
@@ -156,6 +156,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   constructor(
       private _overlay: Overlay,
       private _renderer: Renderer2,
+      private _scrollStrategyOptions: ScrollStrategyOptions,
       templateRef: TemplateRef<any>,
       viewContainerRef: ViewContainerRef,
       @Optional() private _dir: Dir) {

src/lib/core/overlay/overlay-ref.ts

@@ -23,9 +23,11 @@ export class OverlayRef implements PortalHost {
       private _scrollStrategy: ScrollStrategy,
       private _ngZone: NgZone) {
 
-    let scrollStrategyConfig = typeof _state.scrollStrategy === 'string' ?
-        null :
-        _state.scrollStrategy.config;
+    let scrollStrategyConfig = null;
+
+    if (_state.scrollStrategy && typeof _state.scrollStrategy !== 'function') {
+      scrollStrategyConfig = _state.scrollStrategy.config;
+    }
 
     _scrollStrategy.attach(this, scrollStrategyConfig);
   }

src/lib/core/overlay/overlay-state.ts

@@ -1,9 +1,9 @@
 import {PositionStrategy} from './position/position-strategy';
 import {LayoutDirection} from '../rtl/dir';
-import {ScrollStrategy} from './scroll/scroll-strategy';
-import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
+import {ScrollStrategyOption} from './scroll/scroll-strategy-options';
 
-export type OverlayStateScrollStrategy = string | {name: string; config: any};
+export type OverlayStateScrollStrategy = {strategy: ScrollStrategyOption; config: any} |
+                                         ScrollStrategyOption;
 
 /**
  * OverlayState is a bag of values for either the initial configuration or current state of an
@@ -14,7 +14,7 @@ export class OverlayState {
   positionStrategy: PositionStrategy;
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
-  scrollStrategy: OverlayStateScrollStrategy = 'noop';
+  scrollStrategy: OverlayStateScrollStrategy;
 
   /** Whether the overlay has a backdrop. */
   hasBackdrop: boolean = false;

src/lib/core/overlay/overlay.spec.ts

@@ -8,8 +8,13 @@ import {OverlayState} from './overlay-state';
 import {OverlayRef} from './overlay-ref';
 import {PositionStrategy} from './position/position-strategy';
 import {OverlayModule} from './overlay-directives';
-import {ScrollStrategy, ScrollStrategyOptions, ScrollDispatcher} from './scroll/index';
 import {ViewportRuler} from './position/viewport-ruler';
+import {
+  ScrollStrategy,
+  ScrollStrategyOptions,
+  ScrollStrategyOption,
+  ScrollDispatcher,
+} from './scroll/index';
 
 
 describe('Overlay', () => {
@@ -355,7 +360,7 @@ describe('Overlay', () => {
 
     beforeEach(inject([ScrollStrategyOptions], (scrollOptions: ScrollStrategyOptionsOverride) => {
       config = new OverlayState();
-      config.scrollStrategy = 'fake';
+      config.scrollStrategy = scrollOptions.fake;
       overlayRef = overlay.create(config);
       fakeScrollStrategy =
           scrollOptions.instances[scrollOptions.instances.length - 1] as FakeScrollStrategy;
@@ -485,8 +490,8 @@ class ScrollStrategyOptionsOverride extends ScrollStrategyOptions {
   // used for accessing the current instance in unit tests.
   public instances: ScrollStrategy[] = [];
 
-  get(strategy: string): ScrollStrategy {
-    let instance = strategy === 'fake' ? new FakeScrollStrategy() : super.get(strategy);
+  fake: ScrollStrategyOption = () => {
+    let instance = new FakeScrollStrategy();
     this.instances.push(instance);
     return instance;
   }

src/lib/core/overlay/overlay.ts

@@ -86,14 +86,24 @@ export class Overlay {
    * @param state
    */
   private _createOverlayRef(pane: HTMLElement, state: OverlayState): OverlayRef {
-    let scrollStrategyName = typeof state.scrollStrategy === 'string' ?
-      state.scrollStrategy :
-      state.scrollStrategy.name;
-
-    let scrollStrategy = this._scrollStrategyOptions.get(scrollStrategyName);
+    let scrollStrategy = this._createScrollStrategy(state);
     let portalHost = this._createPortalHost(pane);
     return new OverlayRef(portalHost, pane, state, scrollStrategy, this._ngZone);
   }
+
+  /**
+   * Creates a scroll strategy for the given overlay state.
+   * @param state
+   */
+  private _createScrollStrategy(state: OverlayState): ScrollStrategy {
+    if (state.scrollStrategy) {
+      return typeof state.scrollStrategy === 'function' ?
+          state.scrollStrategy() :
+          state.scrollStrategy.strategy();
+    }
+
+    return this._scrollStrategyOptions.noop();
+  }
 }
 
 /** Providers for Overlay and its related injectables. */

src/lib/core/overlay/scroll/block-scroll-strategy.spec.ts

@@ -9,6 +9,7 @@ import {
   OverlayState,
   Overlay,
   OverlayRef,
+  ScrollStrategyOptions,
 } from '../../core';
 
 
@@ -25,19 +26,20 @@ describe('BlockScrollStrategy', () => {
     }).compileComponents();
   }));
 
-  beforeEach(inject([Overlay, ViewportRuler], (overlay: Overlay, viewportRuler: ViewportRuler) => {
-    let overlayState = new OverlayState();
+  beforeEach(inject([Overlay, ViewportRuler, ScrollStrategyOptions],
+    (o: Overlay, v: ViewportRuler, sso: ScrollStrategyOptions) => {
+      let overlayState = new OverlayState();
 
-    overlayState.scrollStrategy = 'block';
-    overlayRef = overlay.create(overlayState);
-    componentPortal = new ComponentPortal(FocacciaMsg);
+      overlayState.scrollStrategy = sso.block;
+      overlayRef = o.create(overlayState);
+      componentPortal = new ComponentPortal(FocacciaMsg);
 
-    viewport = viewportRuler;
-    forceScrollElement = document.createElement('div');
-    document.body.appendChild(forceScrollElement);
-    forceScrollElement.style.width = '100px';
-    forceScrollElement.style.height = '3000px';
-  }));
+      viewport = v;
+      forceScrollElement = document.createElement('div');
+      document.body.appendChild(forceScrollElement);
+      forceScrollElement.style.width = '100px';
+      forceScrollElement.style.height = '3000px';
+    }));
 
   afterEach(() => {
     overlayRef.dispose();

src/lib/core/overlay/scroll/close-scroll-strategy.spec.ts

@@ -10,6 +10,7 @@ import {
   OverlayModule,
   ScrollStrategy,
   ScrollDispatcher,
+  ScrollStrategyOptions,
 } from '../../core';
 
 
@@ -33,10 +34,10 @@ describe('CloseScrollStrategy', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([Overlay], (overlay: Overlay) => {
+  beforeEach(inject([Overlay, ScrollStrategyOptions], (o: Overlay, sso: ScrollStrategyOptions) => {
     let overlayState = new OverlayState();
-    overlayState.scrollStrategy = 'close';
-    overlayRef = overlay.create(overlayState);
+    overlayState.scrollStrategy = sso.close;
+    overlayRef = o.create(overlayState);
     componentPortal = new ComponentPortal(MozarellaMsg);
   }));
 

src/lib/core/overlay/scroll/index.ts

@@ -9,7 +9,7 @@ export {ScrollDispatcher} from './scroll-dispatcher';
 
 // Export pre-defined scroll strategies and interface to build custom ones.
 export {ScrollStrategy} from './scroll-strategy';
-export {ScrollStrategyOptions} from './scroll-strategy-options';
+export {ScrollStrategyOptions, ScrollStrategyOption} from './scroll-strategy-options';
 export {RepositionScrollStrategy} from './reposition-scroll-strategy';
 export {CloseScrollStrategy} from './close-scroll-strategy';
 export {NoopScrollStrategy} from './noop-scroll-strategy';

src/lib/core/overlay/scroll/reposition-scroll-strategy.spec.ts

@@ -10,6 +10,7 @@ import {
   OverlayModule,
   ScrollStrategy,
   ScrollDispatcher,
+  ScrollStrategyOptions,
 } from '../../core';
 
 
@@ -33,10 +34,10 @@ describe('RepositionScrollStrategy', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([Overlay], (overlay: Overlay) => {
+  beforeEach(inject([Overlay, ScrollStrategyOptions], (o: Overlay, sso: ScrollStrategyOptions) => {
     let overlayState = new OverlayState();
-    overlayState.scrollStrategy = 'reposition';
-    overlayRef = overlay.create(overlayState);
+    overlayState.scrollStrategy = sso.reposition;
+    overlayRef = o.create(overlayState);
     componentPortal = new ComponentPortal(PastaMsg);
   }));
 

src/lib/core/overlay/scroll/scroll-strategy-options.ts

@@ -7,6 +7,8 @@ import {BlockScrollStrategy} from './block-scroll-strategy';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {ViewportRuler} from '../position/viewport-ruler';
 
+export type ScrollStrategyOption = () => ScrollStrategy;
+
 
 /**
  * Factory that instantiates scroll strategies. Provides the built-in `reposition`, `close`,
@@ -18,14 +20,8 @@ export class ScrollStrategyOptions {
     private _scrollDispatcher: ScrollDispatcher,
     private _viewportRuler: ViewportRuler) { }
 
-  get(strategy: string): ScrollStrategy {
-    switch (strategy) {
-      case 'reposition': return new RepositionScrollStrategy(this._scrollDispatcher);
-      case 'close': return new CloseScrollStrategy(this._scrollDispatcher);
-      case 'noop': return new NoopScrollStrategy();
-      case 'block': return new BlockScrollStrategy(this._viewportRuler);
-    }
-
-    throw new Error(`Unsupported scroll strategy "${strategy}".`);
-  }
+  noop: ScrollStrategyOption = () => new NoopScrollStrategy();
+  close: ScrollStrategyOption = () => new CloseScrollStrategy(this._scrollDispatcher);
+  block: ScrollStrategyOption = () => new BlockScrollStrategy(this._viewportRuler);
+  reposition: ScrollStrategyOption = () => new RepositionScrollStrategy(this._scrollDispatcher);
 }

src/lib/core/overlay/scroll/scroll-strategy.md

@@ -6,14 +6,14 @@ while the overlay is open. The strategy has a reference to the `OverlayRef`, all
 recalculate the position, close the overlay, block scrolling, etc.
 
 ## Usage
-To associate an overlay with a scroll strategy, you have to pass in the name of the scroll strategy
-to the `OverlayState`. By default, all overlays will use the `noop` strategy which doesn't do
-anything. The other available strategies are `reposition`, `block` and `close`:
+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
+doesn't do anything. The other available strategies are `reposition`, `block` and `close`:
 
 ```ts
 let overlayState = new OverlayState();
 
-overlayState.scrollStrategy = 'block';
+overlayState.scrollStrategy = scrollStrategyOptions.block;
 this._overlay.create(overlayState).attach(yourPortal);
 ```
 
@@ -34,6 +34,7 @@ import {NgModule} from '@angular/core';
 import {
   ScrollStrategy,
   ScrollStrategyOptions,
+  ScrollStrategyOption,
   ScrollDispatcher,
   ViewportRuler,
 } from '@angular/material';
@@ -49,13 +50,7 @@ class ScrollStrategyOptionsOverride extends ScrollStrategyOptions {
     super(scrollDispatcher, viewportRuler);
   }
 
-  get(strategy: string): ScrollStrategy {
-    if (strategy === 'custom') {
-      return new CustomScrollStrategy();
-    }
-
-    return super.get(strategy);
-  }
+  custom: ScrollStrategyOption = () => new CustomScrollStrategy();
 }
 
 // Register the provider with your module.

src/lib/datepicker/datepicker.ts

@@ -25,6 +25,7 @@ import {MdDatepickerInput} from './datepicker-input';
 import {Subscription} from 'rxjs/Subscription';
 import {MdDialogConfig} from '../dialog/dialog-config';
 import {DateAdapter} from '../core/datetime/index';
+import {ScrollStrategyOptions} from '../core/overlay/scroll/index';
 import {createMissingDateImplError} from './datepicker-errors';
 import {ESCAPE} from '../core/keyboard/keycodes';
 import {MdCalendar} from './calendar';
@@ -156,6 +157,7 @@ export class MdDatepicker<D> implements OnDestroy {
               private _overlay: Overlay,
               private _ngZone: NgZone,
               private _viewContainerRef: ViewContainerRef,
+              private _scrollStrategyOptions: ScrollStrategyOptions,
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() private _dir: Dir) {
     if (!this._dateAdapter) {
@@ -267,7 +269,7 @@ export class MdDatepicker<D> implements OnDestroy {
     overlayState.hasBackdrop = true;
     overlayState.backdropClass = 'md-overlay-transparent-backdrop';
     overlayState.direction = this._dir ? this._dir.value : 'ltr';
-    overlayState.scrollStrategy = 'reposition';
+    overlayState.scrollStrategy = this._scrollStrategyOptions.reposition;
 
     this._popupRef = this._overlay.create(overlayState);
   }

src/lib/dialog/dialog.ts

@@ -2,7 +2,14 @@ import {Injector, ComponentRef, Injectable, Optional, SkipSelf, TemplateRef} fro
 import {Location} from '@angular/common';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import {Overlay, OverlayRef, ComponentType, OverlayState, ComponentPortal} from '../core';
+import {
+  Overlay,
+  OverlayRef,
+  ComponentType,
+  OverlayState,
+  ComponentPortal,
+  ScrollStrategyOptions,
+} from '../core';
 import {extendObject} from '../core/util/object-extend';
 import {ESCAPE} from '../core/keyboard/keycodes';
 import {DialogInjector} from './dialog-injector';
@@ -48,6 +55,7 @@ export class MdDialog {
   constructor(
       private _overlay: Overlay,
       private _injector: Injector,
+      private _scrollStrategyOptions: ScrollStrategyOptions,
       @Optional() private _location: Location,
       @Optional() @SkipSelf() private _parentDialog: MdDialog) {
 
@@ -119,7 +127,7 @@ export class MdDialog {
   private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
     let overlayState = new OverlayState();
     overlayState.hasBackdrop = dialogConfig.hasBackdrop;
-    overlayState.scrollStrategy = 'block';
+    overlayState.scrollStrategy = this._scrollStrategyOptions.block;
     if (dialogConfig.backdropClass) {
       overlayState.backdropClass = dialogConfig.backdropClass;
     }