feat(bootstrap): Added proper prompt support in bootstrap. closes ##119

shlomiassaf · Aug 31, 2016 · 329f987 · 329f987
1 parent 64b1eb8
commit 329f987
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 54 deletions.
diff --git a/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 import { ModalModule, Modal as BaseModal } from '../../../../components/angular2-modal';
 
@@ -20,7 +21,7 @@ function getProviders(): any[] {
 }
 
 @NgModule({
-  imports: [ ModalModule, CommonModule ],
+  imports: [ ModalModule, CommonModule, FormsModule ],
   declarations: [
     BSModalFooter,
     BSMessageModalTitle,

diff --git a/src/components/angular2-modal/plugins/bootstrap/index.ts b/src/components/angular2-modal/plugins/bootstrap/index.ts
@@ -16,7 +16,12 @@ export {
 
 export { ModalOpenContext, ModalOpenContextBuilder } from '../../../../components/angular2-modal';
 export { OneButtonPreset, OneButtonPresetBuilder } from './presets/one-button-preset';
-export { TwoButtonPreset, TwoButtonPresetBuilder } from './presets/two-button-preset';
+export { 
+  TwoButtonPreset, 
+  TwoButtonPresetBuilder, 
+  PromptPreset, 
+  PromptPresetBuilder 
+} from './presets/two-button-preset';
 export { Modal } from './modal';
 
 export { BootstrapModalModule } from './bootstrap.module';
diff --git a/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts b/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts
@@ -44,10 +44,26 @@ export class BSMessageModalTitle {
 @Component({
   selector: 'modal-body',
   encapsulation: ViewEncapsulation.None,
-  template: `<div [ngClass]="dialog.context.bodyClass" [innerHtml]="dialog.context.message"></div>`
+  styles: [`.form-group {
+    margin-top: 10px;
+  }`],
+  template: `<div [ngClass]="context.bodyClass"> 
+    <div [innerHtml]="context.message"></div>
+      <div *ngIf="context.showInput" class="form-group">
+        <input autofocus 
+            name="bootstrap" 
+            type="text" 
+            class="form-control"
+            [(ngModel)]="context.defaultValue" 
+            placeholder="{{context.placeholder}}">
+      </div>
+    </div>
+`
 })
 export class BSMessageModalBody {
+  private context: MessageModalPreset;
   constructor(public dialog: DialogRef<MessageModalPreset>) {
+    this.context = dialog.context;
   }
 }
 

diff --git a/src/components/angular2-modal/plugins/bootstrap/modal.ts b/src/components/angular2-modal/plugins/bootstrap/modal.ts
@@ -19,7 +19,7 @@ import {
 import { BSModalContainer } from './modal-container.component';
 
 import { OneButtonPresetBuilder } from './../bootstrap/presets/one-button-preset';
-import { TwoButtonPresetBuilder } from './../bootstrap/presets/two-button-preset';
+import { TwoButtonPresetBuilder, PromptPresetBuilder } from './../bootstrap/presets/two-button-preset';
 
 
 @Injectable()
@@ -32,8 +32,8 @@ export class Modal extends Modal_ {
     return new OneButtonPresetBuilder(this, <any>{isBlocking: false});
   }
 
-  prompt(): OneButtonPresetBuilder {
-    return new OneButtonPresetBuilder(this, <any>{isBlocking: true, keyboard: null});
+  prompt(): PromptPresetBuilder {
+    return new PromptPresetBuilder(this, <any>{isBlocking: true, keyboard: null});
   }
 
   confirm(): TwoButtonPresetBuilder {

diff --git a/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts b/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts
@@ -1,5 +1,5 @@
 import { ResolvedReflectiveProvider } from '@angular/core';
-import { Modal, FluentAssignMethod, extend } from '../../../../../components/angular2-modal';
+import { Modal, FluentAssignMethod, extend, arrayUnion } from '../../../../../components/angular2-modal';
 import { BSMessageModal } from '../message-modal.component';
 import { MessageModalPresetBuilder } from './message-modal-preset';
 import { OneButtonPreset } from './one-button-preset';
@@ -19,43 +19,87 @@ export interface TwoButtonPreset extends OneButtonPreset {
   cancelBtnClass: string;
 }
 
+/** Common two button preset */
+export abstract class AbstractTwoButtonPresetBuilder extends MessageModalPresetBuilder<TwoButtonPreset> {
+    okBtn: FluentAssignMethod<string, this>;
+    okBtnClass: FluentAssignMethod<string, this>;
+    cancelBtn: FluentAssignMethod<string, this>;
+    cancelBtnClass: FluentAssignMethod<string, this>;
+
+    constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined,
+        initialSetters: string[] = []) {
+        super(extend<any>({
+            modal: modal,
+            okBtn: 'OK',
+            okBtnClass: 'btn btn-primary',
+            cancelBtn: 'Cancel',
+            cancelBtnClass: 'btn btn-default'
+        }, defaultValues || {}), arrayUnion<string>([
+            'okBtn',
+            'okBtnClass',
+            'cancelBtn',
+            'cancelBtnClass',
+        ], initialSetters));
+    }
+
+    $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
+        this.addButton(
+            config.cancelBtnClass,
+            config.cancelBtn,
+            (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.dismiss()
+        );
+
+        return super.$$beforeOpen(config);
+    }
+}
+
 /**
  * A Preset for a classic 2 button modal window.
  */
-export class TwoButtonPresetBuilder extends MessageModalPresetBuilder<TwoButtonPreset> {
-  okBtn: FluentAssignMethod<string, this>;
-  okBtnClass: FluentAssignMethod<string, this>;
-  cancelBtn: FluentAssignMethod<string, this>;
-  cancelBtnClass: FluentAssignMethod<string, this>;
-
-  constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined) {
-    super(extend<any>({
-      modal: modal,
-      okBtn: 'OK',
-      okBtnClass: 'btn btn-primary',
-      cancelBtn: 'Cancel',
-      cancelBtnClass: 'btn btn-default'
-    }, defaultValues || {}), [
-      'okBtn',
-      'okBtnClass',
-      'cancelBtn',
-      'cancelBtnClass'
-    ]);
-  }
-
-  $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
-    this.addButton(
-      config.okBtnClass,
-      config.okBtn,
-      (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.close(true)
-    )
-      .addButton(
-        config.cancelBtnClass,
-        config.cancelBtn,
-        (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.dismiss()
-      );
-
-    return super.$$beforeOpen(config);
-  }
+export class TwoButtonPresetBuilder extends AbstractTwoButtonPresetBuilder {
+
+    constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined) {
+        super(modal, defaultValues);
+    }
+
+    $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
+        this.addButton(
+                config.okBtnClass,
+                config.okBtn,
+                (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.close(true)
+            );
+
+        return super.$$beforeOpen(config);
+    }
+}
+
+export interface PromptPreset extends TwoButtonPreset {
+    showInput: boolean;
+    /** Default value shown in the prompt. */
+    defaultValue: string;
+    /** A placeholder for the input element. */
+    placeholder: string;
+
+}
+
+export class PromptPresetBuilder extends AbstractTwoButtonPresetBuilder {
+    placeholder: FluentAssignMethod<string, this>;
+    defaultValue: FluentAssignMethod<string, this>;
+
+    constructor(modal: Modal, defaultValues: PromptPreset = undefined) {
+        super(modal, extend<any>({ showInput: true }, defaultValues || {}),
+            ['placeholder', 'defaultValue']);
+    }
+
+    $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
+        this.addButton(
+            config.okBtnClass,
+            config.okBtn,
+            (cmp: BSMessageModal, $event: MouseEvent) =>
+                cmp.dialog.close((cmp.dialog.context as PromptPreset).defaultValue)
+        );
+
+        return super.$$beforeOpen(config);
+    }
 }
 
diff --git a/src/demo/app/bootstrap-demo/presets.ts b/src/demo/app/bootstrap-demo/presets.ts
@@ -1,7 +1,8 @@
 import {
   Modal,
   OneButtonPresetBuilder,
-  TwoButtonPresetBuilder
+  TwoButtonPresetBuilder,
+  PromptPresetBuilder
 } from '../../../components/angular2-modal/plugins/bootstrap/index';
 
 export function alert(modal: Modal): OneButtonPresetBuilder {
@@ -22,20 +23,12 @@ export function alert(modal: Modal): OneButtonPresetBuilder {
         </ul>`);
 }
 
-export function prompt(modal: Modal): OneButtonPresetBuilder {
+export function prompt(modal: Modal): PromptPresetBuilder {
   return modal.prompt()
     .size('lg')
     .title('A simple Prompt style modal window')
-    .body(`
-            <h4>Prompt is a classic (title/body/footer) 1 button modal window that 
-            blocks.</h4>
-            <b>Configuration:</b>
-            <ul>
-                <li>Blocks (only button click can dismiss)</li>
-                <li>Size large</li>
-                <li>Keyboard can not dismiss</li>
-                <li>HTML content</li>
-            </ul>`);
+    .placeholder('This is a placeholder')
+    .body('Please type a value!');
 }
 
 export function confirm(modal: Modal): TwoButtonPresetBuilder {