refactor(overlays): inject overlay providers

BREAKING CHANGES:

- Overlay components, such as Alert or Modals, should now be created
using its injected provider.
- Overlays now have the `present()` method on the overlay’s instance,
rather than using `nav.present(overlayInstance)`.
- All overlays now present on top of all app content, to include menus.
- Below is an example of the change to `Alert`, but the pattern is the
same for all overlays: ActionSheet, Loading, Modal, Picker, Popover,
Toast

WAS:

```
import { NavController, Alert } from ‘ionic-angular’;

constructor(private nav: NavController) {
}

doAlert() {
  let alert = Alert.create({
    title: 'Alert',
  });
  this.nav.present(alert);
}
```

NOW:

```
import { AlertController } from ‘ionic-angular’;

constructor(private alertCtrl: AlertController) {
}

doAlert() {
  let alert = this.alertCtrl.create({
    title: 'Alert'
  });
  alert.present();
}
```
This commit is contained in:
Adam Bradley
2016-06-28 15:18:09 -05:00
parent 2fe42ed63e
commit 215c6d846c
39 changed files with 3578 additions and 3303 deletions

View File

@ -1,13 +1,14 @@
import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ViewEncapsulation} from '@angular/core';
import {NG_VALUE_ACCESSOR} from '@angular/common';
import { Component, EventEmitter, forwardRef, HostListener, Input, Optional, Output, Provider, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/common';
import {Config} from '../../config/config';
import {Picker, PickerColumn, PickerColumnOption} from '../picker/picker';
import {Form} from '../../util/form';
import {Item} from '../item/item';
import {merge, isBlank, isPresent, isTrueProperty, isArray, isString} from '../../util/util';
import {dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData} from '../../util/datetime-util';
import {NavController} from '../nav/nav-controller';
import { Config } from '../../config/config';
import { Picker, PickerController } from '../picker/picker';
import { PickerColumn, PickerColumnOption } from '../picker/picker-options';
import { Form } from '../../util/form';
import { Item } from '../item/item';
import { merge, isBlank, isPresent, isTrueProperty, isArray, isString } from '../../util/util';
import { dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util';
import { NavController } from '../nav/nav-controller';
const DATETIME_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateTime), multi: true});
@ -193,7 +194,7 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
* ### App Config Level
*
* ```ts
* import {ionicBootstrap} from 'ionic-angular';
* import { ionicBootstrap } from 'ionic-angular';
*
* ionicBootstrap(MyApp, customProviders, {
* monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
@ -418,7 +419,7 @@ export class DateTime {
private _form: Form,
private _config: Config,
@Optional() private _item: Item,
@Optional() private _nav: NavController
@Optional() private _pickerCtrl: PickerController
) {
this._form.register(this);
if (_item) {
@ -426,10 +427,6 @@ export class DateTime {
this._labelId = 'lbl-' + _item.id;
this._item.setCssClass('item-datetime', true);
}
if (!_nav) {
console.error('parent <ion-nav> required for <ion-datetime>');
}
}
@HostListener('click', ['$event'])
@ -463,7 +460,7 @@ export class DateTime {
// the user may have assigned some options specifically for the alert
let pickerOptions = merge({}, this.pickerOptions);
let picker = Picker.create(pickerOptions);
let picker = this._pickerCtrl.create(pickerOptions);
pickerOptions.buttons = [
{
text: this.cancelText,
@ -489,7 +486,7 @@ export class DateTime {
this.validate(picker);
});
this._nav.present(picker, pickerOptions);
picker.present(pickerOptions);
this._isOpen = true;
picker.onDismiss(() => {