diff --git a/src/components/angular2-modal/angular2-modal.module.ts b/src/components/angular2-modal/angular2-modal.module.ts index 76594b19..2a6e807a 100644 --- a/src/components/angular2-modal/angular2-modal.module.ts +++ b/src/components/angular2-modal/angular2-modal.module.ts @@ -25,6 +25,7 @@ import { exports: [ CSSBackdrop, CSSDialogContainer, + SwapComponentDirective, OverlayDialogBoundary, OverlayTarget, DefaultOverlayTarget diff --git a/src/components/angular2-modal/index.ts b/src/components/angular2-modal/index.ts index 29e80b9a..adba7962 100644 --- a/src/components/angular2-modal/index.ts +++ b/src/components/angular2-modal/index.ts @@ -20,6 +20,7 @@ export { export { Modal, DOMOverlayRenderer } from './providers/index'; export { + overlayConfigFactory, OverlayContext, OverlayContextBuilder, ModalControllingContextBuilder diff --git a/src/components/angular2-modal/models/overlay-context.ts b/src/components/angular2-modal/models/overlay-context.ts index 654678ca..eb36a5f2 100644 --- a/src/components/angular2-modal/models/overlay-context.ts +++ b/src/components/angular2-modal/models/overlay-context.ts @@ -92,7 +92,7 @@ export class OverlayContextBuilder extends FluentAssig super( extend(DEFAULT_VALUES, defaultValues || {}), arrayUnion(DEFAULT_SETTERS, initialSetters || []), - baseType + baseType || OverlayContext // https://github.com/Microsoft/TypeScript/issues/7234 ); } @@ -111,3 +111,20 @@ export class OverlayContextBuilder extends FluentAssig export interface ModalControllingContextBuilder { open(viewContainer?: WideVCRef): Promise>; } + +/** + * A helper to create an `OverlayConfig` on the fly. + * Since `OverlayConfig` requires context it means a builder is needed, this process had some boilerplate. + * When a quick, on the fly overlay config is needed use this helper to avoid that boilerplate. + * + * A builder is used as an API to allow setting the context and providing some operations around the modal. + * When a developers knows the context before hand we can skip this step, this is what this factory is for. + * + * @param context The context for the modal + * @param baseContextType Optional. The type/class of the context. This is the class used to init a new instance of the context + * @param baseConfig A base configuration that the result will extend + * @returns {OverlayConfig} + */ +export function overlayConfigFactory(context: T, baseContextType?: any, baseConfig?: OverlayConfig): OverlayConfig { + return new OverlayContextBuilder(context, undefined, baseContextType).toOverlayConfig(baseConfig); +} \ No newline at end of file diff --git a/src/components/angular2-modal/overlay/index.ts b/src/components/angular2-modal/overlay/index.ts index 3db5a83f..852a949b 100644 --- a/src/components/angular2-modal/overlay/index.ts +++ b/src/components/angular2-modal/overlay/index.ts @@ -1,3 +1,4 @@ export { OverlayTarget, OverlayDialogBoundary, DefaultOverlayTarget } from './overlay.directives' export { ModalOverlay } from './overlay.component'; export { Overlay } from './overlay.service'; + diff --git a/src/components/angular2-modal/plugins/bootstrap/modal.ts b/src/components/angular2-modal/plugins/bootstrap/modal.ts index 8546f134..4199d1ff 100644 --- a/src/components/angular2-modal/plugins/bootstrap/modal.ts +++ b/src/components/angular2-modal/plugins/bootstrap/modal.ts @@ -3,7 +3,6 @@ import 'rxjs/add/operator/combineLatest'; import { Injectable, ResolvedReflectiveProvider as RRP, - ReflectiveInjector, Renderer } from '@angular/core'; diff --git a/src/components/angular2-modal/plugins/vex/dialog-form-modal.ts b/src/components/angular2-modal/plugins/vex/dialog-form-modal.ts index 58c080bb..38289650 100644 --- a/src/components/angular2-modal/plugins/vex/dialog-form-modal.ts +++ b/src/components/angular2-modal/plugins/vex/dialog-form-modal.ts @@ -1,17 +1,12 @@ import { Component, - ComponentFactoryResolver, - ViewContainerRef, - ViewChild, ViewEncapsulation, - AfterViewInit, Input, Output, EventEmitter } from '@angular/core'; import { - createComponent, DialogRef, ModalComponent } from '../../../../components/angular2-modal'; @@ -77,37 +72,18 @@ export class VEXDialogButtons { selector: 'modal-dialog', encapsulation: ViewEncapsulation.None, template: `
-
+
` }) -export class DialogFormModal implements AfterViewInit, ModalComponent { +export class DialogFormModal implements ModalComponent { private context: DialogPreset; - @ViewChild('modalDialog', {read: ViewContainerRef}) private _viewContainer: ViewContainerRef; - constructor(public dialog: DialogRef, - private _cr: ComponentFactoryResolver) { + constructor(public dialog: DialogRef) { this.context = dialog.context; } - ngAfterViewInit() { - /* TODO: - In RC5 dynamic component creation is no longer async. - Somewhere down the pipe of the created component a value change happens that fires - a CD exception. setTimeout is a workaround that mimics the async behavior. - Find out the error and remove setTimeout. - */ - setTimeout( () => { - createComponent( - this._cr, - this.context.content, - this._viewContainer, - [] - ); - }); - } - onButtonClick($event: VEXButtonClickEvent) { $event.btn.onClick(this, $event.$event); } diff --git a/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts b/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts index 31808250..b6f6ac9a 100644 --- a/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts +++ b/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts @@ -1,9 +1,10 @@ import { Component, TemplateRef, ViewChild } from '@angular/core'; -import { Modal, BSModalContextBuilder } from '../../../../components/angular2-modal/plugins/bootstrap'; +import { overlayConfigFactory } from "../../../../components/angular2-modal"; +import { Modal, BSModalContext } from '../../../../components/angular2-modal/plugins/bootstrap'; import { ModalCommandDescriptor } from '../../demo-head/index'; -import { CustomModalContext, CustomModal } from './custom-modal-sample'; +import { CustomModal } from './custom-modal-sample'; import * as presets from '../presets'; @@ -41,24 +42,18 @@ export class BootstrapDemoPage { { text: 'String content', factory: () => this.modal - .open('Hello modal!', new BSModalContextBuilder().isBlocking(false).toOverlayConfig()) + .open('Hello modal!', overlayConfigFactory({ isBlocking: false }, BSModalContext)) }, { text: 'TemplateRef content', factory: () => this.modal - .open(this.templateRef, new BSModalContextBuilder({ abd: 123 } as any).isBlocking(false).toOverlayConfig()) + .open(this.templateRef, overlayConfigFactory({ isBlocking: false }, BSModalContext)) }, { text: 'Custom Modal content', factory: () => { - const builder = new BSModalContextBuilder( - { num1: 2, num2: 3 } as any, - undefined, - CustomModalContext - ); - - - return this.modal.open(CustomModal, builder.toOverlayConfig()); + return this.modal.open(CustomModal, overlayConfigFactory({ num1: 2, num2: 3 }, BSModalContext)); + // we set the baseContextType to BSModalContext so the defaults for bootstrap will apply } } diff --git a/src/demo/app/vex-demo/vex-demo.ts b/src/demo/app/vex-demo/vex-demo.ts index ad7a2422..108e7921 100644 --- a/src/demo/app/vex-demo/vex-demo.ts +++ b/src/demo/app/vex-demo/vex-demo.ts @@ -1,12 +1,13 @@ import { Component, ViewEncapsulation, ViewChild, TemplateRef } from '@angular/core'; +import { overlayConfigFactory } from "../../../components/angular2-modal"; import { VEXBuiltInThemes, Modal, DialogPreset, DialogFormModal, DialogPresetBuilder, - VEXModalContextBuilder, + VEXModalContext, VexModalModule } from '../../../components/angular2-modal/plugins/vex'; @@ -65,12 +66,12 @@ export class VexDemo { { text: 'String content', factory: () => this.modal - .open('Hello modal!', new VEXModalContextBuilder().isBlocking(false).toOverlayConfig()) + .open('Hello modal!', overlayConfigFactory({ isBlocking: false }, VEXModalContext)) }, { text: 'TemplateRef content', factory: () => this.modal - .open(this.templateRef, new VEXModalContextBuilder().isBlocking(false).toOverlayConfig()) + .open(this.templateRef, overlayConfigFactory({ isBlocking: false }, VEXModalContext)) }, { text: 'Custom Modal example',