feat(overlay): method chaining pattern to configure overlays

src/components/action-sheet/action-sheet.ts

@@ -25,30 +25,33 @@ export class ActionSheet extends ViewController {
   /**
    * @private
    */
-  getTransitionName(direction: string) {
+  getTransitionName(direction: string): string {
     let key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter');
     return this._nav && this._nav.config.get(key);
   }
 
   /**
    * @param {string} title Action sheet title
    */
-  setTitle(title: string) {
+  setTitle(title: string): ActionSheet {
     this.data.title = title;
+    return this;
   }
 
   /**
    * @param {string} subTitle Action sheet subtitle
    */
-  setSubTitle(subTitle: string) {
+  setSubTitle(subTitle: string): ActionSheet {
     this.data.subTitle = subTitle;
+    return this;
   }
 
   /**
    * @param {object} button Action sheet button
    */
-  addButton(button: any) {
+  addButton(button: any): ActionSheet {
     this.data.buttons.push(button);
+    return this;
   }
 
   /**
@@ -57,7 +60,7 @@ export class ActionSheet extends ViewController {
    * @param {NavOptions} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  present(navOptions: NavOptions = {}) {
+  present(navOptions: NavOptions = {}): Promise<any> {
     navOptions.minClickBlockDuration = navOptions.minClickBlockDuration || 400;
     return this._app.present(this, navOptions);
   }

src/components/action-sheet/test/basic/app.module.ts

@@ -12,59 +12,55 @@ export class E2EPage {
   presentActionSheet1() {
     this.result = '';
 
-    let actionSheet = this.actionSheetCtrl.create({
-      title: 'Albums',
-      buttons: [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          icon: 'trash',
-          handler: () => {
-            console.log('Delete clicked');
-            this.result = 'Deleted';
-          }
-        },
-        {
-          text: 'Share',
-          icon: 'share',
-          handler: () => {
-            console.log('Share clicked');
-            this.result = 'Shared';
-          }
-        },
-        {
-          text: 'Play (open modal)',
-          icon: 'arrow-dropright-circle',
-          handler: () => {
-            this.result = 'Play (open modal)';
-            let modal = this.modalCtrl.create(ModalPage);
-            modal.present();
-
-            // returning false does not allow the actionsheet to be closed
-            return false;
-          }
-        },
-        {
-          text: 'Favorite',
-          icon: !this.plt.is('ios') ? 'heart' : null,
-          handler: () => {
-            console.log('Favorite clicked');
-            this.result = 'Favorited';
-          }
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel', // will always sort to be on the bottom
-          icon: !this.plt.is('ios') ? 'close' : null,
-          handler: () => {
-            console.log('Cancel clicked');
-            this.result = 'Canceled';
-          }
+    this.actionSheetCtrl.create()
+      .setTitle('Albums')
+      .addButton({
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        handler: () => {
+          console.log('Delete clicked');
+          this.result = 'Deleted';
         }
-      ]
-    });
-
-    actionSheet.present();
+      })
+      .addButton({
+        text: 'Share',
+        icon: 'share',
+        handler: () => {
+          console.log('Share clicked');
+          this.result = 'Shared';
+        }
+      })
+      .addButton({
+        text: 'Play (open modal)',
+        icon: 'arrow-dropright-circle',
+        handler: () => {
+          this.result = 'Play (open modal)';
+          let modal = this.modalCtrl.create(ModalPage);
+          modal.present();
+
+          // returning false does not allow the actionsheet to be closed
+          return false;
+        }
+      })
+      .addButton({
+        text: 'Favorite',
+        icon: !this.plt.is('ios') ? 'heart' : null,
+        handler: () => {
+          console.log('Favorite clicked');
+          this.result = 'Favorited';
+        }
+      })
+      .addButton({
+        text: 'Cancel',
+        role: 'cancel', // will always sort to be on the bottom
+        icon: !this.plt.is('ios') ? 'close' : null,
+        handler: () => {
+          console.log('Cancel clicked');
+          this.result = 'Canceled';
+        }
+      })
+      .present();
   }
 
   presentActionSheet2() {

src/components/alert/alert.ts

@@ -27,51 +27,57 @@ export class Alert extends ViewController {
   /**
   * @private
   */
-  getTransitionName(direction: string) {
+  getTransitionName(direction: string): string {
     let key = (direction === 'back' ? 'alertLeave' : 'alertEnter');
     return this._nav && this._nav.config.get(key);
   }
 
   /**
    * @param {string} title Alert title
    */
-  setTitle(title: string) {
+  setTitle(title: string): Alert {
     this.data.title = title;
+    return this;
   }
 
   /**
    * @param {string} subTitle Alert subtitle
    */
-  setSubTitle(subTitle: string) {
+  setSubTitle(subTitle: string): Alert {
     this.data.subTitle = subTitle;
+    return this;
   }
 
   /**
    * @param {string} message  Alert message content
    */
-  setMessage(message: string) {
+  setMessage(message: string): Alert {
     this.data.message = message;
+    return this;
   }
 
   /**
    * @param {object} input Alert input
    */
-  addInput(input: AlertInputOptions) {
+  addInput(input: AlertInputOptions): Alert {
     this.data.inputs.push(input);
+    return this;
   }
 
   /**
    * @param {any} button Alert button
    */
-  addButton(button: any) {
+  addButton(button: any): Alert {
     this.data.buttons.push(button);
+    return this;
   }
 
   /**
    * @param {string} cssClass Set the CSS class names on the alert's outer wrapper.
    */
-  setCssClass(cssClass: string) {
+  setCssClass(cssClass: string): Alert {
     this.data.cssClass = cssClass;
+    return this;
   }
 
   /**
@@ -87,7 +93,7 @@ export class Alert extends ViewController {
    * @param {NavOptions} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  present(navOptions: NavOptions = {}) {
+  present(navOptions: NavOptions = {}): Promise<any> {
     navOptions.minClickBlockDuration = navOptions.minClickBlockDuration || 400;
     return this._app.present(this, navOptions);
   }

src/components/alert/test/basic/app.module.ts

@@ -18,14 +18,12 @@ export class E2EPage {
   constructor(private alertCtrl: AlertController, private modalCtrl: ModalController) { }
 
   doAlert() {
-    let alert = this.alertCtrl.create({
-      title: 'Alert',
-      subTitle: 'Subtitle',
-      message: 'This is an alert message.',
-      buttons: ['OK']
-    });
-
-    alert.present();
+    this.alertCtrl.create()
+      .setTitle('Alert')
+      .setSubTitle('Subtitle')
+      .setMessage('This is an alert message.')
+      .addButton('OK')
+      .present();
   }
 
   doConfirm() {

src/components/loading/loading.ts

@@ -26,16 +26,49 @@ export class Loading extends ViewController {
   /**
    * @private
    */
-  getTransitionName(direction: string) {
+  getTransitionName(direction: string): string {
     let key = (direction === 'back' ? 'loadingLeave' : 'loadingEnter');
     return this._nav && this._nav.config.get(key);
   }
 
   /**
-   * @param {string} content  loading message content
+   * @param {string} sets the html content for the loading indicator.
    */
-  setContent(content: string) {
+  setContent(content: string): Loading {
     this.data.content = content;
+    return this;
+  }
+
+  /**
+   * @param {string} sets the name of the SVG spinner for the loading indicator.
+   */
+  setSpinner(spinner: string): Loading {
+    this.data.spinner = spinner;
+    return this;
+  }
+
+  /**
+   * @param {string} sets additional classes for custom styles, separated by spaces.
+   */
+  setCssClass(cssClass: string): Loading {
+    this.data.cssClass = cssClass;
+    return this;
+  }
+
+  /**
+   * @param {string} sets whether to show the backdrop.
+   */
+  setShowBackdrop(showBackdrop: boolean): Loading {
+    this.data.showBackdrop = showBackdrop;
+    return this;
+  }
+
+  /**
+   * @param {string} how many milliseconds to wait before hiding the indicator.
+   */
+  setDuration(dur: number): Loading {
+    this.data.duration = dur;
+    return this;
   }
 
   /**
@@ -44,7 +77,7 @@ export class Loading extends ViewController {
    * @param {NavOptions} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  present(navOptions: NavOptions = {}) {
+  present(navOptions: NavOptions = {}): Promise<any> {
     return this._app.present(this, navOptions, AppPortal.LOADING);
   }
 
@@ -175,7 +208,7 @@ export class LoadingController {
    * @param {LoadingOptions} opts Loading options
    * @returns {Loading} Returns a Loading Instance
    */
-  create(opts: LoadingOptions = {}) {
+  create(opts: LoadingOptions = {}): Loading {
     return new Loading(this._app, opts);
   }
 

src/components/loading/test/basic/app.module.ts

@@ -127,13 +127,11 @@ export class E2EPage {
   }
 
   presentLoadingCrescent() {
-    let loading = this.loadingCtrl.create({
-      spinner: 'crescent',
-      content: 'Please wait...',
-      duration: 1000
-    });
-
-    loading.present();
+    this.loadingCtrl.create()
+      .setSpinner('crescent')
+      .setContent('Please wait...')
+      .setDuration(1000)
+      .present();
   }
 
   // Pass the fixed-spinner class so we can turn off
@@ -207,10 +205,9 @@ export class E2EPage {
       loading2.present();
     }, 1000);
 
-    let loading3 = this.loadingCtrl.create({
-      spinner: 'hide',
-      content: 'Loading 3 Please Wait...'
-    });
+    let loading3 = this.loadingCtrl.create()
+      .setSpinner('hide')
+      .setContent('Loading 3 Please Wait...');
 
     setTimeout(() => {
       loading3.present();

src/components/modal/test/basic/app.module.ts

@@ -229,11 +229,11 @@ export class ModalPassData {
     this.called.ionViewCanLeave++;
 
     return new Promise((resolve: any, reject: any) => {
-      let alert = this.alertCtrl.create();
-      alert.setTitle('Do you want to submit?');
-      alert.addButton({ text: 'Submit', handler: resolve });
-      alert.addButton({ text: 'Cancel', role: 'cancel', handler: reject });
-      alert.present();
+      this.alertCtrl.create()
+        .setTitle('Do you want to submit?')
+        .addButton({ text: 'Submit', handler: resolve })
+        .addButton({ text: 'Cancel', role: 'cancel', handler: reject })
+        .present();
     });
   }
 

src/components/toast/test/basic/app.module.ts

@@ -45,11 +45,10 @@ export class E2EPage {
   }
 
   showLongToast() {
-    const toast = this.toastCtrl.create({
-      message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
-      duration: 5000,
-      cssClass: 'custom-class my-toast'
-    });
+    const toast = this.toastCtrl.create()
+      .setMessage('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.')
+      .setDuration(5000)
+      .setCssClass('custom-class my-toast');
 
     toast.onDidDismiss(this.dismissHandler);
     toast.present();