Skip to content

fix(overlay): rename OverlayState to OverlayConfig #6972

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
}
6 changes: 3 additions & 3 deletions src/cdk/overlay/overlay-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/cdk/overlay/overlay-ref.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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) {
Expand Down Expand Up @@ -154,7 +154,7 @@ export class OverlayRef implements PortalHost {
/**
* Gets the current state config of the overlay.
*/
getState(): OverlayState {
getState(): OverlayConfig {
return this._state;
}

Expand Down
26 changes: 13 additions & 13 deletions src/cdk/overlay/overlay.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
OverlayContainer,
OverlayModule,
OverlayRef,
OverlayState,
OverlayConfig,
PositionStrategy,
ScrollStrategy,
} from './index';
Expand Down Expand Up @@ -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);

Expand All @@ -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(() => {
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -320,10 +320,10 @@ describe('Overlay', () => {
});

describe('backdrop', () => {
let config: OverlayState;
let config: OverlayConfig;

beforeEach(() => {
config = new OverlayState();
config = new OverlayConfig();
config.hasBackdrop = true;
});

Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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);
});

Expand Down
6 changes: 3 additions & 3 deletions src/cdk/overlay/overlay.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();


/**
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/cdk/overlay/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions src/cdk/overlay/scroll/block-scroll-strategy.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions src/cdk/overlay/scroll/close-scroll-strategy.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {
Overlay,
OverlayState,
OverlayConfig,
OverlayRef,
OverlayModule,
OverlayContainer,
Expand Down Expand Up @@ -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);
}));

Expand Down
6 changes: 3 additions & 3 deletions src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
OverlayContainer,
OverlayModule,
OverlayRef,
OverlayState,
OverlayConfig,
ScrollDispatcher,
} from '../index';

Expand All @@ -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);
}));

Expand Down
10 changes: 5 additions & 5 deletions src/cdk/overlay/scroll/scroll-strategy.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
```
12 changes: 6 additions & 6 deletions src/demo-app/overlay/overlay-demo.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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()
Expand All @@ -51,7 +51,7 @@ export class OverlayDemo {
}

openFusilliPanel() {
let config = new OverlayState();
let config = new OverlayConfig();

config.positionStrategy = this.overlay.position()
.global()
Expand All @@ -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));
Expand All @@ -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()
Expand Down
6 changes: 3 additions & 3 deletions src/lib/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
ConnectedPositionStrategy,
Overlay,
OverlayRef,
OverlayState,
OverlayConfig,
PositionStrategy,
RepositionScrollStrategy,
ScrollStrategy,
Expand Down Expand Up @@ -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(),
Expand Down
4 changes: 2 additions & 2 deletions src/lib/datepicker/datepicker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {ESCAPE} from '@angular/cdk/keycodes';
import {
Overlay,
OverlayRef,
OverlayState,
OverlayConfig,
PositionStrategy,
RepositionScrollStrategy,
ScrollStrategy,
Expand Down Expand Up @@ -329,7 +329,7 @@ export class MdDatepicker<D> 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',
Expand Down
Loading