diff --git a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx index e5fce477db..35de3ef187 100644 --- a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -36,7 +36,7 @@ export class ActionSheetController { } @Listen('body:ionActionSheetDidLoad') - protected viewDidLoad(ev: ActionSheetEvent) { + protected didLoad(ev: ActionSheetEvent) { const actionSheet = ev.detail.actionSheet; const actionSheetResolve = this.actionSheetResolves[actionSheet.actionSheetId]; if (actionSheetResolve) { diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 19cd17f8fc..edf17736de 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -91,7 +91,7 @@ export class ActionSheet { animation.onFinish((a: any) => { a.destroy(); - this.ionViewDidEnter(); + this.componentDidEnter(); resolve(); }).play(); }); @@ -131,7 +131,15 @@ export class ActionSheet { }); } - protected ionViewDidUnload() { + componentDidLoad() { + this.ionActionSheetDidLoad.emit({ actionSheet: this }); + } + + componentDidEnter() { + this.ionActionSheetDidPresent.emit({ actionSheet: this }); + } + + componentDidUnload() { this.ionActionSheetDidUnload.emit({ actionSheet: this }); } @@ -143,14 +151,6 @@ export class ActionSheet { this.dismiss(); } - protected ionViewDidLoad() { - this.ionActionSheetDidLoad.emit({ actionSheet: this }); - } - - protected ionViewDidEnter() { - this.ionActionSheetDidPresent.emit({ actionSheet: this }); - } - protected backdropClick() { if (this.enableBackdropDismiss) { // const opts: NavOptions = { @@ -172,7 +172,7 @@ export class ActionSheet { } } - protected render() { + render() { let userCssClass = 'action-sheet-content'; if (this.cssClass) { userCssClass += ' ' + this.cssClass; diff --git a/packages/core/src/components/alert-controller/alert-controller.tsx b/packages/core/src/components/alert-controller/alert-controller.tsx index fd85a12267..26b01b40d4 100644 --- a/packages/core/src/components/alert-controller/alert-controller.tsx +++ b/packages/core/src/components/alert-controller/alert-controller.tsx @@ -36,7 +36,7 @@ export class AlertController { } @Listen('body:ionAlertDidLoad') - protected viewDidLoad(ev: AlertEvent) { + protected didLoad(ev: AlertEvent) { const alert = ev.detail.alert; const alertResolve = this.alertResolves[alert.alertId]; if (alertResolve) { diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index 8e5570ef50..2f811c40e9 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -102,7 +102,7 @@ export class Alert { firstInput.focus(); } - this.ionViewDidEnter(); + this.componentDidEnter(); resolve(); }).play(); }); @@ -142,8 +142,15 @@ export class Alert { }); } + componentDidLoad() { + this.ionAlertDidLoad.emit({ alert: this }); + } - protected ionViewDidUnload() { + componentDidEnter() { + this.ionAlertDidPresent.emit({ alert: this }); + } + + componentDidUnload() { this.ionAlertDidUnload.emit({ alert: this }); } @@ -155,14 +162,6 @@ export class Alert { this.dismiss(); } - protected ionViewDidLoad() { - this.ionAlertDidLoad.emit({ alert: this }); - } - - protected ionViewDidEnter() { - this.ionAlertDidPresent.emit({ alert: this }); - } - protected backdropClick() { if (this.enableBackdropDismiss) { // const opts: NavOptions = { @@ -326,7 +325,7 @@ export class Alert { ); } - protected render() { + render() { const hdrId = `${this.alertId}-hdr`; const subHdrId = `${this.alertId}-sub-hdr`; const msgId = `${this.alertId}-msg`; diff --git a/packages/core/src/components/app/app.tsx b/packages/core/src/components/app/app.tsx index b4fcc607f2..b54172f675 100644 --- a/packages/core/src/components/app/app.tsx +++ b/packages/core/src/components/app/app.tsx @@ -71,7 +71,7 @@ export class App { return null; } - protected hostData() { + hostData() { return { class: { [this.modeCode]: true, @@ -80,7 +80,7 @@ export class App { }; } - protected render() { + render() { const dom = []; if (this.useRouter) { dom.push(); diff --git a/packages/core/src/components/avatar/avatar.tsx b/packages/core/src/components/avatar/avatar.tsx index dbecc8abbe..1af8f3be86 100644 --- a/packages/core/src/components/avatar/avatar.tsx +++ b/packages/core/src/components/avatar/avatar.tsx @@ -20,7 +20,7 @@ import { Component } from '@stencil/core'; } }) export class Avatar { - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/badge/badge.tsx b/packages/core/src/components/badge/badge.tsx index 417f222f09..fa3b249025 100644 --- a/packages/core/src/components/badge/badge.tsx +++ b/packages/core/src/components/badge/badge.tsx @@ -53,7 +53,7 @@ export class Badge { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 39a2c1c4a3..f586d6d37b 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -166,7 +166,7 @@ export class Button { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { const buttonType = this.buttonType; const mode = this.mode; diff --git a/packages/core/src/components/buttons/buttons.tsx b/packages/core/src/components/buttons/buttons.tsx index cef0875566..fdeb3359d8 100644 --- a/packages/core/src/components/buttons/buttons.tsx +++ b/packages/core/src/components/buttons/buttons.tsx @@ -10,14 +10,14 @@ import { Component, Element } from '@stencil/core'; export class Buttons { @Element() private el: HTMLElement; - protected ionViewDidLoad() { + componentDidLoad() { const buttons = this.el.querySelectorAll('ion-button') as any; for (var i = 0; i < buttons.length; i++) { buttons[i].setAttribute('button-type', 'bar-button'); } } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/card-content/card-content.tsx b/packages/core/src/components/card-content/card-content.tsx index 3af1253f13..832a74dea8 100644 --- a/packages/core/src/components/card-content/card-content.tsx +++ b/packages/core/src/components/card-content/card-content.tsx @@ -25,7 +25,7 @@ export class CardContent { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/card-header/card-header.tsx b/packages/core/src/components/card-header/card-header.tsx index c295c0d1fa..0a51c789b5 100644 --- a/packages/core/src/components/card-header/card-header.tsx +++ b/packages/core/src/components/card-header/card-header.tsx @@ -26,7 +26,7 @@ export class CardHeader { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/card-subtitle/card-subtitle.tsx b/packages/core/src/components/card-subtitle/card-subtitle.tsx index fef47acddd..9882ca9a14 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.tsx +++ b/packages/core/src/components/card-subtitle/card-subtitle.tsx @@ -33,7 +33,7 @@ export class CardSubtitle { }; } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx index 2e1283d057..58da107447 100644 --- a/packages/core/src/components/card-title/card-title.tsx +++ b/packages/core/src/components/card-title/card-title.tsx @@ -33,7 +33,7 @@ export class CardTitle { }; } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx index 7d2b360665..3ce509bc78 100644 --- a/packages/core/src/components/card/card.tsx +++ b/packages/core/src/components/card/card.tsx @@ -25,7 +25,7 @@ export class Card { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx index f621bcb078..35d8666bf5 100644 --- a/packages/core/src/components/checkbox/checkbox.tsx +++ b/packages/core/src/components/checkbox/checkbox.tsx @@ -131,7 +131,7 @@ export class Checkbox implements BooleanInput { @Prop({ mutable: true }) value: string; - protected ionViewWillLoad() { + componentWillLoad() { this.emitStyle(); } @@ -178,7 +178,7 @@ export class Checkbox implements BooleanInput { }; } - protected render() { + render() { const checkboxClasses: CssClassMap = { 'checkbox-icon': true, 'checkbox-checked': this.checked diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx index f2744591eb..0c2aeef769 100644 --- a/packages/core/src/components/chip-button/chip-button.tsx +++ b/packages/core/src/components/chip-button/chip-button.tsx @@ -87,7 +87,7 @@ export class ChipButton { return classList; } - protected render() { + render() { const buttonType = 'chip-button'; const hostClasses = getElementClassObject(this.el.classList); diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx index ccfb0d1e51..e1916969bc 100644 --- a/packages/core/src/components/chip/chip.tsx +++ b/packages/core/src/components/chip/chip.tsx @@ -112,7 +112,7 @@ export class Chip { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index 7598312cfd..c6b17ec903 100644 --- a/packages/core/src/components/content/content.tsx +++ b/packages/core/src/components/content/content.tsx @@ -46,12 +46,12 @@ export class Content { */ @Prop() fullscreen: boolean = false; - protected ionViewDidLoad() { + componentDidLoad() { this.scrollEl = this.el.querySelector('ion-scroll') as HTMLIonScrollElement; this.resize(); } - protected ionViewDidUnload() { + componentDidUnload() { this.scrollEl = null; } @@ -115,7 +115,7 @@ export class Content { } } - protected render() { + render() { const themedClasses = createThemedClasses(this.mode, this.color, 'content'); const hostClasses = getElementClassObject(this.el.classList); diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx index e8d5dd1f58..872885d5bc 100644 --- a/packages/core/src/components/datetime/datetime.tsx +++ b/packages/core/src/components/datetime/datetime.tsx @@ -443,7 +443,7 @@ export class Datetime { */ @Event() ionCancel: EventEmitter; - protected ionViewWillLoad() { + componentWillLoad() { // first see if locale names were provided in the inputs // then check to see if they're in the config // if neither were provided then it will use default English names @@ -819,7 +819,7 @@ export class Datetime { }; } - protected render() { + render() { let addPlaceholderClass = false; // If selected text has been passed in, use that first diff --git a/packages/core/src/components/fab/fab-container.tsx b/packages/core/src/components/fab/fab-container.tsx index 04d5dbafc8..5c5906ea65 100644 --- a/packages/core/src/components/fab/fab-container.tsx +++ b/packages/core/src/components/fab/fab-container.tsx @@ -103,7 +103,7 @@ export class FabContainer { this.activated = !this.activated; } - protected render() { + render() { const fab: any = this.el.querySelector('ion-fab-button'); fab.toggleActive = this.toggleActive; fab.activated = this.activated; diff --git a/packages/core/src/components/fab/fab-list.tsx b/packages/core/src/components/fab/fab-list.tsx index d68732e9e8..dd262ec10e 100644 --- a/packages/core/src/components/fab/fab-list.tsx +++ b/packages/core/src/components/fab/fab-list.tsx @@ -52,7 +52,7 @@ export class FabList { }; } - protected render() { + render() { return ( ); diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx index cb887eaaf8..4bd8850c1b 100755 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -90,7 +90,7 @@ export class FabButton { */ @Prop() disabled: boolean = false; - protected ionViewDidLoad() { + componentDidLoad() { const parentNode = this.el.parentNode.nodeName; this.inList = (parentNode === 'ION-FAB-LIST'); @@ -144,7 +144,7 @@ export class FabButton { ]; } - protected render() { + render() { const themedClasses = createThemedClasses(this.mode, this.color, 'fab'); const hostClasses = getElementClassObject(this.el.classList); diff --git a/packages/core/src/components/footer/footer.tsx b/packages/core/src/components/footer/footer.tsx index f07a130140..4496d0666a 100644 --- a/packages/core/src/components/footer/footer.tsx +++ b/packages/core/src/components/footer/footer.tsx @@ -8,7 +8,7 @@ import { Component } from '@stencil/core'; } }) export class Footer { - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/gesture/gesture.tsx b/packages/core/src/components/gesture/gesture.tsx index 82e0977ab8..8d0ec18135 100644 --- a/packages/core/src/components/gesture/gesture.tsx +++ b/packages/core/src/components/gesture/gesture.tsx @@ -69,7 +69,7 @@ export class Gesture { @Event() ionPress: EventEmitter; - protected ionViewDidLoad() { + componentDidLoad() { // in this case, we already know the GestureController and Gesture are already // apart of the same bundle, so it's safe to load it this way // only create one instance of GestureController, and reuse the same one later @@ -445,7 +445,7 @@ export class Gesture { } - protected ionViewDidUnload() { + componentDidUnload() { if (this.blocker) { this.blocker.destroy(); this.blocker = null; diff --git a/packages/core/src/components/header/header.tsx b/packages/core/src/components/header/header.tsx index c720c97667..2bddb5c997 100644 --- a/packages/core/src/components/header/header.tsx +++ b/packages/core/src/components/header/header.tsx @@ -8,7 +8,7 @@ import { Component } from '@stencil/core'; } }) export class Header { - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx index cc67fe5261..a77d938dc2 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx +++ b/packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx @@ -22,13 +22,13 @@ export class InfiniteScrollContent { @Prop() loadingText: string; - protected ionViewDidLoad() { + componentDidLoad() { if (!this.loadingSpinner) { this.loadingSpinner = this.config.get('infiniteLoadingSpinner', this.config.get('spinner', 'lines')); } } - protected render() { + render() { return (
{this.loadingSpinner && diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx index 741837e551..6ca72785af 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -214,14 +214,14 @@ export class InfiniteScroll { */ @Event() ionInfinite: EventEmitter; - ionViewWillLoad() { + componentWillLoad() { const scrollEl = this.el.closest('ion-scroll') as StencilElement; return scrollEl.componentOnReady().then((el) => { this.scrollEl = el as HTMLIonScrollElement; }); } - ionViewDidLoad() { + componentDidLoad() { if (this.init) { console.warn('instance was already initialized'); return; @@ -234,7 +234,7 @@ export class InfiniteScroll { } } - ionViewDidUnload() { + componentDidUnload() { this.enableScrollEvents(false); this.scrollEl = null; } @@ -371,7 +371,7 @@ export class InfiniteScroll { } - protected render() { + render() { return ; } diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index 1aa6f5304b..931c8fcbf0 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -199,7 +199,7 @@ export class Input implements InputComponent { } - protected ionViewDidLoad() { + componentDidLoad() { this.emitStyle(); // By default, password inputs clear after focus when they have content @@ -318,7 +318,7 @@ export class Input implements InputComponent { } - protected render() { + render() { const themedClasses = createThemedClasses(this.mode, this.color, 'text-input'); // TODO aria-labelledby={this.item.labelId} diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx index dbb41836f8..01d56a6991 100644 --- a/packages/core/src/components/input/textarea.tsx +++ b/packages/core/src/components/input/textarea.tsx @@ -181,7 +181,7 @@ export class Textarea implements TextareaComponent { } } - protected ionViewDidLoad() { + componentDidLoad() { this.emitStyle(); } @@ -297,7 +297,7 @@ export class Textarea implements TextareaComponent { } - protected render() { + render() { const themedClasses = createThemedClasses(this.mode, this.color, 'text-input'); // TODO aria-labelledby={this.item.labelId} diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx index ab06eae92f..eba1caf13c 100644 --- a/packages/core/src/components/item-divider/item-divider.tsx +++ b/packages/core/src/components/item-divider/item-divider.tsx @@ -27,7 +27,7 @@ export class ItemDivider { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return [ ,
diff --git a/packages/core/src/components/item-sliding/item-option.tsx b/packages/core/src/components/item-sliding/item-option.tsx index c7e5b62f48..5218c8d321 100644 --- a/packages/core/src/components/item-sliding/item-option.tsx +++ b/packages/core/src/components/item-sliding/item-option.tsx @@ -50,7 +50,7 @@ export class ItemOption { return !!el; } - protected render() { + render() { const TagType = this.href ? 'a' : 'button'; return [ diff --git a/packages/core/src/components/item-sliding/item-options.tsx b/packages/core/src/components/item-sliding/item-options.tsx index e5e74ec0d3..caf9e2b431 100644 --- a/packages/core/src/components/item-sliding/item-options.tsx +++ b/packages/core/src/components/item-sliding/item-options.tsx @@ -55,7 +55,7 @@ export class ItemOptions { this.ionSwipe.emit(value); } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx index 5eb8727630..9ca6c42f4c 100644 --- a/packages/core/src/components/item-sliding/item-sliding.tsx +++ b/packages/core/src/components/item-sliding/item-sliding.tsx @@ -192,14 +192,14 @@ export class ItemSliding { }; } - protected ionViewDidLoad() { + componentDidLoad() { this.item = this.el.querySelector('ion-item'); this.list = this.el.closest('ion-list') as HTMLIonListElement; this.updateOptions(); } - protected ionViewDidUnLoad() { + componentDidUnload() { this.item = this.list = this.leftOptions = this.rightOptions = null; } @@ -413,7 +413,7 @@ export class ItemSliding { this.ionDrag.emit(this); } - protected hostData() { + hostData() { return { class: { 'item-wrapper': true, @@ -426,7 +426,7 @@ export class ItemSliding { }; } - protected render() { + render() { return ( diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx index ccedb18920..1ce7506c5d 100644 --- a/packages/core/src/components/item/item.tsx +++ b/packages/core/src/components/item/item.tsx @@ -79,11 +79,11 @@ export class Item { return this.label ? this.label.getText() : ''; } - protected ionViewWillLoad() { + componentWillLoad() { this.itemId = (++itemId).toString(); } - protected ionViewDidLoad() { + componentDidLoad() { // Add item-button classes to each ion-button in the item const buttons = this.el.querySelectorAll('ion-button') as any; for (var i = 0; i < buttons.length; i++) { @@ -119,7 +119,7 @@ export class Item { return this.itemId + '-' + (++this.ids); } - protected render() { + render() { let childStyles = {}; for (var key in this.itemStyles) { diff --git a/packages/core/src/components/label/label.tsx b/packages/core/src/components/label/label.tsx index 0e96e31e30..4a25229d02 100644 --- a/packages/core/src/components/label/label.tsx +++ b/packages/core/src/components/label/label.tsx @@ -58,7 +58,7 @@ export class Label { return this.el.textContent || ''; } - protected ionViewDidLoad() { + componentDidLoad() { this.emitStyle(); } @@ -76,7 +76,7 @@ export class Label { }); } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/list-header/list-header.tsx b/packages/core/src/components/list-header/list-header.tsx index 3e80f41a30..bda145cdbb 100644 --- a/packages/core/src/components/list-header/list-header.tsx +++ b/packages/core/src/components/list-header/list-header.tsx @@ -27,7 +27,7 @@ export class ListHeader { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/list/list.tsx b/packages/core/src/components/list/list.tsx index 16744cb898..4481ffac0b 100644 --- a/packages/core/src/components/list/list.tsx +++ b/packages/core/src/components/list/list.tsx @@ -36,7 +36,7 @@ export class List { return false; } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/loading-controller/loading-controller.tsx b/packages/core/src/components/loading-controller/loading-controller.tsx index 541c1cb78a..fa6b45f149 100644 --- a/packages/core/src/components/loading-controller/loading-controller.tsx +++ b/packages/core/src/components/loading-controller/loading-controller.tsx @@ -37,7 +37,7 @@ export class LoadingController { @Listen('body:ionLoadingDidLoad') - protected viewDidLoad(ev: LoadingEvent) { + protected didLoad(ev: LoadingEvent) { const loading = ev.detail.loading; const loadingResolve = this.loadingResolves[loading.loadingId]; if (loadingResolve) { diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index 5343b68e6f..e918271f09 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -94,7 +94,7 @@ export class Loading { animation.onFinish((a: any) => { a.destroy(); - this.ionViewDidEnter(); + this.componentDidEnter(); resolve(); }).play(); @@ -140,19 +140,7 @@ export class Loading { }); } - protected ionViewDidUnload() { - this.ionLoadingDidUnload.emit({ loading: this }); - } - - @Listen('ionDismiss') - protected onDismiss(ev: UIEvent) { - ev.stopPropagation(); - ev.preventDefault(); - - this.dismiss(); - } - - protected ionViewDidLoad() { + componentDidLoad() { if (!this.spinner) { let defaultSpinner = 'lines'; @@ -169,7 +157,7 @@ export class Loading { this.ionLoadingDidLoad.emit({ loading: this }); } - protected ionViewDidEnter() { + componentDidEnter() { // blur the currently active element const activeElement: any = document.activeElement; activeElement && activeElement.blur && activeElement.blur(); @@ -182,7 +170,19 @@ export class Loading { this.ionLoadingDidPresent.emit({ loading: this }); } - protected render() { + componentDidUnload() { + this.ionLoadingDidUnload.emit({ loading: this }); + } + + @Listen('ionDismiss') + protected onDismiss(ev: UIEvent) { + ev.stopPropagation(); + ev.preventDefault(); + + this.dismiss(); + } + + render() { // TODO: cssClass const loadingInner: any[] = []; diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 00a80d9432..2a864c3dee 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -120,13 +120,13 @@ export class Menu { */ @Event() ionClose: EventEmitter; - protected ionViewWillLoad() { + componentWillLoad() { return this.lazyMenuCtrl.componentOnReady().then(menu => { this.menuCtrl = menu as HTMLIonMenuControllerElement; }); } - protected ionViewDidLoad() { + componentDidLoad() { assert(!!this.menuCtrl, 'menucontroller was not initialized'); const el = this.el; @@ -162,7 +162,7 @@ export class Menu { this.enabled = isEnabled; } - protected ionViewDidUnload() { + componentDidUnload() { this.menuCtrl._unregister(this); this.animation && this.animation.destroy(); @@ -424,7 +424,7 @@ export class Menu { this.afterAnimation(false); } - protected hostData() { + hostData() { const typeClass = 'menu-type-' + this.type; return { role: 'complementary', @@ -437,7 +437,7 @@ export class Menu { }; } - protected render() { + render() { return ([
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index c7f61e6e3f..0971cfa9c0 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -143,11 +143,11 @@ export class Modal { this.dismiss(); } - protected ionViewDidLoad() { + componentDidLoad() { this.ionModalDidLoad.emit({ modal: this }); } - protected ionViewDidUnload() { + componentDidUnload() { this.ionModalDidUnload.emit({ modal: this }); } @@ -160,7 +160,7 @@ export class Modal { } } - protected render() { + render() { const ThisComponent = this.component; let userCssClasses = 'ion-page'; diff --git a/packages/core/src/components/nav-controller/nav-controller.tsx b/packages/core/src/components/nav-controller/nav-controller.tsx index 09aa4ca5e0..3e3bdb8e8a 100644 --- a/packages/core/src/components/nav-controller/nav-controller.tsx +++ b/packages/core/src/components/nav-controller/nav-controller.tsx @@ -102,7 +102,7 @@ export class NavController { }); } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx index 49660eead4..af4e74908a 100644 --- a/packages/core/src/components/nav/nav.tsx +++ b/packages/core/src/components/nav/nav.tsx @@ -182,7 +182,7 @@ export class Nav { return this.routes; } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/nav/page-one.tsx b/packages/core/src/components/nav/page-one.tsx index 7ce789ec9d..5a6b36df6f 100644 --- a/packages/core/src/components/nav/page-one.tsx +++ b/packages/core/src/components/nav/page-one.tsx @@ -7,7 +7,7 @@ export class PageOne { @Element() element: HTMLElement; - ionViewDidEnter() { + componentDidEnter() { console.log('page one did enter'); } @@ -16,7 +16,7 @@ export class PageOne { nav.push('page-two'); } - protected render() { + render() { return [ diff --git a/packages/core/src/components/nav/page-three.tsx b/packages/core/src/components/nav/page-three.tsx index b9196e85cf..1df8473623 100644 --- a/packages/core/src/components/nav/page-three.tsx +++ b/packages/core/src/components/nav/page-three.tsx @@ -7,7 +7,7 @@ export class PageThree { @Element() element: HTMLElement; - ionViewDidEnter() { + componentDidEnter() { console.log('page three did enter'); } @@ -16,7 +16,7 @@ export class PageThree { nav.pop(); } - protected render() { + render() { return [ Page Three diff --git a/packages/core/src/components/nav/page-two.tsx b/packages/core/src/components/nav/page-two.tsx index a3ef35d5f3..f498c23b36 100644 --- a/packages/core/src/components/nav/page-two.tsx +++ b/packages/core/src/components/nav/page-two.tsx @@ -7,7 +7,7 @@ export class PageTwo { @Element() element: HTMLElement; - ionViewDidEnter() { + componentDidEnter() { console.log('page two did enter'); } @@ -21,7 +21,7 @@ export class PageTwo { nav.pop(); } - protected render() { + render() { return [ Page Two diff --git a/packages/core/src/components/note/note.tsx b/packages/core/src/components/note/note.tsx index a73beb336c..da9f611892 100644 --- a/packages/core/src/components/note/note.tsx +++ b/packages/core/src/components/note/note.tsx @@ -54,7 +54,7 @@ export class Note { */ @Prop() mode: 'ios' | 'md'; - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/page/page.tsx b/packages/core/src/components/page/page.tsx index 4dcc573513..6335d6cb23 100644 --- a/packages/core/src/components/page/page.tsx +++ b/packages/core/src/components/page/page.tsx @@ -5,7 +5,7 @@ import { Component } from '@stencil/core'; tag: 'ion-page', }) export class Page { - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/picker-controller/picker-controller.tsx b/packages/core/src/components/picker-controller/picker-controller.tsx index ab3f02eb88..6fe96e705d 100644 --- a/packages/core/src/components/picker-controller/picker-controller.tsx +++ b/packages/core/src/components/picker-controller/picker-controller.tsx @@ -37,7 +37,7 @@ export class PickerController { @Listen('body:ionPickerDidLoad') - protected viewDidLoad(ev: PickerEvent) { + protected didLoad(ev: PickerEvent) { const picker = ev.detail.picker; const pickerResolve = this.pickerResolves[picker.pickerId]; if (pickerResolve) { diff --git a/packages/core/src/components/picker/picker-column.tsx b/packages/core/src/components/picker/picker-column.tsx index 69bfe5287a..325f4b157c 100644 --- a/packages/core/src/components/picker/picker-column.tsx +++ b/packages/core/src/components/picker/picker-column.tsx @@ -33,7 +33,7 @@ export class PickerColumnCmp { @Prop() col: PickerColumn; - protected ionViewWillLoad() { + componentWillLoad() { let pickerRotateFactor = 0; let pickerScaleFactor = 0.81; @@ -46,7 +46,7 @@ export class PickerColumnCmp { this.scaleFactor = pickerScaleFactor; } - protected ionViewDidLoad() { + componentDidLoad() { // get the scrollable element within the column let colEle = this.el.querySelector('.picker-opts'); this.colHeight = colEle.clientHeight; @@ -60,7 +60,7 @@ export class PickerColumnCmp { this.refresh(); } - protected ionViewDidUnload() { + componentDidUnload() { // TODO block goback-swipe and menu-swipe // this.activeBlock = 'goback-swipe menu-swipe'; } @@ -396,7 +396,7 @@ export class PickerColumnCmp { } } - protected hostData() { + hostData() { return { class: { 'picker-opts-left': this.col.align === 'left', @@ -408,7 +408,7 @@ export class PickerColumnCmp { }; } - protected render() { + render() { let col = this.col; let options = this.col.options diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index c5c19c3b68..ddf678e47b 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -98,7 +98,7 @@ export class Picker { animation.onFinish((a: any) => { a.destroy(); - this.ionViewDidEnter(); + this.componentDidEnter(); resolve(); }).play(); @@ -144,19 +144,7 @@ export class Picker { }); } - protected ionViewDidUnload() { - this.ionPickerDidUnload.emit({ picker: this }); - } - - @Listen('ionDismiss') - protected onDismiss(ev: UIEvent) { - ev.stopPropagation(); - ev.preventDefault(); - - this.dismiss(); - } - - protected ionViewDidLoad() { + componentDidLoad() { if (!this.spinner) { let defaultSpinner = 'lines'; @@ -173,7 +161,7 @@ export class Picker { this.ionPickerDidLoad.emit({ picker: this }); } - protected ionViewDidEnter() { + componentDidEnter() { // blur the currently active element const activeElement: any = document.activeElement; activeElement && activeElement.blur && activeElement.blur(); @@ -186,6 +174,19 @@ export class Picker { this.ionPickerDidPresent.emit({ picker: this }); } + componentDidUnload() { + this.ionPickerDidUnload.emit({ picker: this }); + } + + + @Listen('ionDismiss') + protected onDismiss(ev: UIEvent) { + ev.stopPropagation(); + ev.preventDefault(); + + this.dismiss(); + } + buttonClick(button: PickerButton) { // if (!this.enabled) { // return; @@ -259,7 +260,7 @@ export class Picker { } } - protected render() { + render() { // TODO: cssClass let buttons = this.buttons diff --git a/packages/core/src/components/popover-controller/popover-controller.tsx b/packages/core/src/components/popover-controller/popover-controller.tsx index 1d74661d26..b31ee9f7c7 100644 --- a/packages/core/src/components/popover-controller/popover-controller.tsx +++ b/packages/core/src/components/popover-controller/popover-controller.tsx @@ -36,7 +36,7 @@ export class PopoverController { @Listen('body:ionPopoverDidLoad') - protected viewDidLoad(ev: PopoverEvent) { + protected didLoad(ev: PopoverEvent) { const popover = ev.detail.popover; const popoverResolve = this.popoverResolves[popover.popoverId]; if (popoverResolve) { diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 7a0821df7b..6379cb0a7a 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -218,7 +218,7 @@ export class Popover { animation.onFinish((a: any) => { a.destroy(); - this.ionViewDidEnter(); + this.componentDidEnter(); this.positionPopover(); resolve(); }).play(); @@ -259,7 +259,15 @@ export class Popover { }); } - protected ionViewDidUnload() { + componentDidLoad() { + this.ionPopoverDidLoad.emit({ popover: this }); + } + + componentDidEnter() { + this.ionPopoverDidPresent.emit({ popover: this }); + } + + componentDidUnload() { this.ionPopoverDidUnload.emit({ popover: this }); } @@ -271,14 +279,6 @@ export class Popover { this.dismiss(); } - protected ionViewDidLoad() { - this.ionPopoverDidLoad.emit({ popover: this }); - } - - protected ionViewDidEnter() { - this.ionPopoverDidPresent.emit({ popover: this }); - } - protected backdropClick() { if (this.enableBackdropDismiss) { // const opts: NavOptions = { @@ -288,7 +288,7 @@ export class Popover { } } - protected render() { + render() { const ThisComponent = this.component; const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper'); diff --git a/packages/core/src/components/radio/radio-group.tsx b/packages/core/src/components/radio/radio-group.tsx index 055f006f88..92d628aa6a 100644 --- a/packages/core/src/components/radio/radio-group.tsx +++ b/packages/core/src/components/radio/radio-group.tsx @@ -131,7 +131,7 @@ export class RadioGroup { this.value = radio.checked ? radio.value : ''; } - protected ionViewWillLoad() { + componentWillLoad() { this.radioGroupId = ++radioGroupIds; // Get the list header if it exists and set the id @@ -175,7 +175,7 @@ export class RadioGroup { }; } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx index a7fb69cfcd..53f5a9bf49 100644 --- a/packages/core/src/components/radio/radio.tsx +++ b/packages/core/src/components/radio/radio.tsx @@ -115,15 +115,15 @@ export class Radio { */ @Prop({ mutable: true }) value: string; - protected ionViewWillLoad() { + componentWillLoad() { this.emitStyle(); } - protected ionViewDidLoad() { + componentDidLoad() { this.ionRadioDidLoad.emit({ radio: this }); } - protected ionViewDidUnload() { + componentDidUnload() { this.ionRadioDidUnload.emit({ radio: this }); } @@ -177,7 +177,7 @@ export class Radio { }; } - protected render() { + render() { const radioClasses: CssClassMap = { 'radio-icon': true, 'radio-checked': this.checked diff --git a/packages/core/src/components/range/range-knob.tsx b/packages/core/src/components/range/range-knob.tsx index 93891659df..0cccfa0a7e 100644 --- a/packages/core/src/components/range/range-knob.tsx +++ b/packages/core/src/components/range/range-knob.tsx @@ -55,7 +55,7 @@ export class RangeKnob { }; } - protected render() { + render() { if (this.pin) { return [ , diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx index 844666df48..cd00464790 100644 --- a/packages/core/src/components/range/range.tsx +++ b/packages/core/src/components/range/range.tsx @@ -132,7 +132,7 @@ export class Range implements BaseInputComponent { this.emitStyle(); } - protected ionViewWillLoad() { + componentWillLoad() { this.inputUpdated(); this.createTicks(); this.emitStyle(); @@ -401,7 +401,7 @@ export class Range implements BaseInputComponent { }; } - protected render() { + render() { return [ , 0; } - protected render() { + render() { // TODO: https://github.com/ionic-team/stencil/issues/171 if (this.hasContent === true) { return ; diff --git a/packages/core/src/components/router/route-link.tsx b/packages/core/src/components/router/route-link.tsx index 5dcdc359fe..6b979690fd 100644 --- a/packages/core/src/components/router/route-link.tsx +++ b/packages/core/src/components/router/route-link.tsx @@ -21,7 +21,7 @@ export class RouteLink { */ } - protected render() { + render() { /* const router = document.querySelector(this.router); const match = router.match diff --git a/packages/core/src/components/router/route.tsx b/packages/core/src/components/router/route.tsx index b91ccf353a..5d31705633 100644 --- a/packages/core/src/components/router/route.tsx +++ b/packages/core/src/components/router/route.tsx @@ -18,7 +18,7 @@ export class Route { @Event() ionRouteAdded: EventEmitter; @Event() ionRouteRemoved: EventEmitter; - protected ionViewDidLoad() { + componentDidLoad() { this.ionRouteAdded.emit({ path: this.path, segments: parseURL(this.path), @@ -27,7 +27,7 @@ export class Route { }); } - protected ionViewDidUnload() { + componentDidUnload() { this.ionRouteRemoved.emit(this.path); } } diff --git a/packages/core/src/components/router/router-controller.tsx b/packages/core/src/components/router/router-controller.tsx index 4e784d065d..a1bf878ca8 100644 --- a/packages/core/src/components/router/router-controller.tsx +++ b/packages/core/src/components/router/router-controller.tsx @@ -13,7 +13,7 @@ export class RouterController { @Prop({ context: 'config' }) config: Config; - protected ionViewDidLoad() { + componentDidLoad() { const enabled = this.enabled = this.config.getBoolean('useRouter', false); if (enabled) { const base = document.querySelector('head > base'); diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx index 2657552536..0959ee4c4e 100644 --- a/packages/core/src/components/scroll/scroll.tsx +++ b/packages/core/src/components/scroll/scroll.tsx @@ -49,7 +49,7 @@ export class Scroll { */ @Event() ionScrollEnd: EventEmitter; - protected ionViewDidLoad() { + componentDidLoad() { if (Context.isServer) { return; } @@ -58,7 +58,7 @@ export class Scroll { this.gesture = gestureCtrl.createGesture('scroll', 100, false); } - protected ionViewDidUnload() { + componentDidUnload() { this.gesture && this.gesture.destroy(); this.gesture = this.detail = this.detail.event = null; } @@ -318,7 +318,7 @@ export class Scroll { } } - protected render() { + render() { return ( // scroll-inner is used to keep custom user padding
diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx index ac84fdfb01..bfc05b6fb3 100644 --- a/packages/core/src/components/searchbar/searchbar.tsx +++ b/packages/core/src/components/searchbar/searchbar.tsx @@ -147,7 +147,7 @@ export class Searchbar { @Prop({ mutable: true }) value: string; - protected ionViewDidLoad() { + componentDidLoad() { this.positionElements(); } @@ -357,7 +357,7 @@ export class Searchbar { // TODO remove the ion-buttons and replace with native buttons to remove // the button dependency - protected render() { + render() { return [
; } } diff --git a/packages/core/src/components/select-option/select-option.tsx b/packages/core/src/components/select-option/select-option.tsx index f4b231f912..44a02a3813 100644 --- a/packages/core/src/components/select-option/select-option.tsx +++ b/packages/core/src/components/select-option/select-option.tsx @@ -35,7 +35,7 @@ export class SelectOption { return this.el.textContent || ''; } - protected render() { + render() { return ; } diff --git a/packages/core/src/components/select/select-popover.tsx b/packages/core/src/components/select/select-popover.tsx index 06c0643e23..655b4a4b54 100644 --- a/packages/core/src/components/select/select-popover.tsx +++ b/packages/core/src/components/select/select-popover.tsx @@ -56,7 +56,7 @@ export class SelectPopover { this.dismiss(value); } - protected render() { + render() { return ( diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index b33e27931d..0911448c9d 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -104,7 +104,7 @@ export class Select { @Event() ionCancel: EventEmitter; - protected ionViewDidLoad() { + componentDidLoad() { // Get the parent item this.item = this.el.closest('ion-item'); @@ -368,7 +368,7 @@ export class Select { }; } - protected render() { + render() { let addPlaceholderClass = false; // If selected text has been passed in, use that first diff --git a/packages/core/src/components/skeleton-text/skeleton-text.tsx b/packages/core/src/components/skeleton-text/skeleton-text.tsx index cf4a45330d..b86d9ffb21 100644 --- a/packages/core/src/components/skeleton-text/skeleton-text.tsx +++ b/packages/core/src/components/skeleton-text/skeleton-text.tsx @@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core'; export class SkeletonText { @Prop() width: string = '100%'; - protected render() { + render() { return  ; } } diff --git a/packages/core/src/components/slides/slide.tsx b/packages/core/src/components/slides/slide.tsx index 1e8bc10de0..5448a2f378 100644 --- a/packages/core/src/components/slides/slide.tsx +++ b/packages/core/src/components/slides/slide.tsx @@ -28,7 +28,7 @@ export class Slide { }; } - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx index 69227f8c7a..3c7799c835 100644 --- a/packages/core/src/components/slides/slides.tsx +++ b/packages/core/src/components/slides/slides.tsx @@ -185,7 +185,7 @@ export class Slides { @Prop() keyboardControl: boolean; - protected render() { + render() { return (
@@ -386,9 +386,9 @@ export class Slides { /** * @hidden */ - protected ionViewDidLoad() { + componentDidLoad() { /** - * TODO: This should change because currently ionViewDidLoad fires independent of whether the + * TODO: This should change because currently componentDidLoad fires independent of whether the * child components are ready. */ setTimeout(() => { @@ -547,7 +547,7 @@ export class Slides { /** * @hidden */ - protected ionViewDidUnload() { + componentDidUnload() { this._init = false; this.swiper.destroy(true, true); diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx index a7f1eccd90..260574551c 100644 --- a/packages/core/src/components/spinner/spinner.tsx +++ b/packages/core/src/components/spinner/spinner.tsx @@ -175,7 +175,7 @@ export class Spinner { }; } - protected render() { + render() { const name = this.getName(); const spinner = SPINNERS[name] || SPINNERS['lines']; diff --git a/packages/core/src/components/split-pane/split-pane.tsx b/packages/core/src/components/split-pane/split-pane.tsx index 5654899954..3c94bc4612 100644 --- a/packages/core/src/components/split-pane/split-pane.tsx +++ b/packages/core/src/components/split-pane/split-pane.tsx @@ -167,12 +167,12 @@ export class SplitPane { */ @Event() ionChange: EventEmitter; - protected ionViewDidLoad() { + componentDidLoad() { this._styleChildren(); this.whenChanged(); } - protected ionViewDidUnload() { + componentDidUnload() { this.rmL && this.rmL(); this.rmL = null; } @@ -269,7 +269,7 @@ export class SplitPane { }; } - protected render() { + render() { return ; } diff --git a/packages/core/src/components/tabs/page-tab.tsx b/packages/core/src/components/tabs/page-tab.tsx index 6ea5c13597..ab5983309b 100644 --- a/packages/core/src/components/tabs/page-tab.tsx +++ b/packages/core/src/components/tabs/page-tab.tsx @@ -32,7 +32,7 @@ export class PageTab { this.getTabs().tabbarHighlight = value; } - protected render() { + render() { return [ diff --git a/packages/core/src/components/tabs/tab-bar.tsx b/packages/core/src/components/tabs/tab-bar.tsx index 417bb6b83f..24071fb099 100644 --- a/packages/core/src/components/tabs/tab-bar.tsx +++ b/packages/core/src/components/tabs/tab-bar.tsx @@ -28,7 +28,7 @@ export class TabBar { } } - protected hostData() { + hostData() { const layoutClass = `layout-${this.layout}`; const placementClass = `placement-${this.placement}`; return { @@ -41,7 +41,7 @@ export class TabBar { }; } - protected render() { + render() { const selectedTab = this.selectedTab; const dom = this.tabs.map(tab => ( btn.selected); } - protected hostData() { + hostData() { return { style: { 'transform': this.transform diff --git a/packages/core/src/components/tabs/tab.tsx b/packages/core/src/components/tabs/tab.tsx index 8c7e5e6ac8..dfb27e20d7 100644 --- a/packages/core/src/components/tabs/tab.tsx +++ b/packages/core/src/components/tabs/tab.tsx @@ -223,7 +223,7 @@ export class Tab { return this.nav; } - protected hostData() { + hostData() { const visible = this.active && this.selected; return { 'aria-hidden': !visible ? 'true' : null, diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 39cc3e63c7..9d05a6e070 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -112,7 +112,7 @@ export interface NavOptions { } * * @ViewChild('myTabs') tabRef: Tabs; * - * ionViewDidEnter() { + * componentDidEnter() { * this.tabRef.select(2); * } * @@ -186,7 +186,7 @@ export class Tabs { @Event() ionChange: EventEmitter; @Event() ionNavChanged: EventEmitter; - protected ionViewDidLoad() { + componentDidLoad() { this.loadConfig('tabsPlacement', 'bottom'); this.loadConfig('tabsLayout', 'icon-top'); this.loadConfig('tabsHighlight', true); @@ -198,7 +198,7 @@ export class Tabs { } } - protected ionViewDidUnload() { + componentDidUnload() { this.tabs = this.selectedTab = null; } @@ -338,7 +338,7 @@ export class Tabs { } } - protected render() { + render() { const dom = [
diff --git a/packages/core/src/components/thumbnail/thumbnail.tsx b/packages/core/src/components/thumbnail/thumbnail.tsx index 80f20e134f..cfa44a9f94 100644 --- a/packages/core/src/components/thumbnail/thumbnail.tsx +++ b/packages/core/src/components/thumbnail/thumbnail.tsx @@ -12,7 +12,7 @@ import { Component } from '@stencil/core'; } }) export class Thumbnail { - protected render() { + render() { return ; } } diff --git a/packages/core/src/components/title/title.tsx b/packages/core/src/components/title/title.tsx index dc37a9a98a..b32cfb0ae2 100644 --- a/packages/core/src/components/title/title.tsx +++ b/packages/core/src/components/title/title.tsx @@ -51,7 +51,7 @@ export class ToolbarTitle { mode: string; color: string; - protected render() { + render() { const themedClasses = createThemedClasses(this.mode, this.color, 'toolbar-title'); return [ diff --git a/packages/core/src/components/toast-controller/toast-controller.tsx b/packages/core/src/components/toast-controller/toast-controller.tsx index 41ae64be30..aaa94be9f1 100644 --- a/packages/core/src/components/toast-controller/toast-controller.tsx +++ b/packages/core/src/components/toast-controller/toast-controller.tsx @@ -34,7 +34,7 @@ export class ToastController { } @Listen('body:ionToastDidLoad') - protected viewDidLoad(ev: ToastEvent) { + protected didLoad(ev: ToastEvent) { const toast = ev.detail.toast; const toastResolve = this.toastResolves[toast.toastId]; if (toastResolve) { diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index 8ddf3eefe3..df8b8ffc3b 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -91,7 +91,7 @@ export class Toast { animation.onFinish((a: any) => { a.destroy(); - this.ionViewDidEnter(); + this.componentDidEnter(); resolve(); }).play(); }); @@ -131,7 +131,20 @@ export class Toast { }); } - protected ionViewDidUnload() { + componentDidLoad() { + this.ionToastDidLoad.emit({ toast: this }); + } + + componentDidEnter() { + this.ionToastDidPresent.emit({ toast: this }); + if (this.duration) { + setTimeout(() => { + this.dismiss(); + }, this.duration); + } + } + + componentDidUnload() { this.ionToastDidUnload.emit({ toast: this }); } @@ -143,20 +156,7 @@ export class Toast { this.dismiss(); } - protected ionViewDidLoad() { - this.ionToastDidLoad.emit({ toast: this }); - } - - protected ionViewDidEnter() { - this.ionToastDidPresent.emit({ toast: this }); - if (this.duration) { - setTimeout(() => { - this.dismiss(); - }, this.duration); - } - } - - protected render() { + render() { let userCssClass = 'toast-content'; if (this.cssClass) { userCssClass += ' ' + this.cssClass; diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx index 3b558839e2..7339903c74 100644 --- a/packages/core/src/components/toggle/toggle.tsx +++ b/packages/core/src/components/toggle/toggle.tsx @@ -98,7 +98,7 @@ export class Toggle implements BooleanInput { }; } - protected ionViewWillLoad() { + componentWillLoad() { this.emitStyle(); } @@ -175,7 +175,7 @@ export class Toggle implements BooleanInput { } } - protected hostData() { + hostData() { return { class: { 'toggle-activated': this.activated, @@ -185,7 +185,7 @@ export class Toggle implements BooleanInput { }; } - protected render() { + render() { return ( diff --git a/packages/core/src/components/toolbar/navbar.tsx b/packages/core/src/components/toolbar/navbar.tsx index 11f990187f..1c6491c48a 100644 --- a/packages/core/src/components/toolbar/navbar.tsx +++ b/packages/core/src/components/toolbar/navbar.tsx @@ -63,7 +63,7 @@ export class Navbar { console.log('back button click'); } - protected ionViewDidLoad() { + componentDidLoad() { const buttons = this.el.querySelectorAll('ion-button'); for (var i = 0; i < buttons.length; i++) { buttons[i].setAttribute('button-type', 'bar-button'); @@ -78,7 +78,7 @@ export class Navbar { }; } - protected render() { + render() { const backButtonIcon = this.backButtonIcon || this.config.get('backButtonText', 'Back'); const backButtonText = this.backButtonText || this.config.get('backButtonIcon', 'Back'); diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx index 6d4d829052..905c0e80ad 100644 --- a/packages/core/src/components/toolbar/toolbar.tsx +++ b/packages/core/src/components/toolbar/toolbar.tsx @@ -119,7 +119,7 @@ export class Toolbar { */ @Prop() mode: 'ios' | 'md'; - protected ionViewDidLoad() { + componentDidLoad() { const buttons = this.el.querySelectorAll('ion-button') as any; for (var i = 0; i < buttons.length; i++) { buttons[i].setAttribute('button-type', 'bar-button'); @@ -134,7 +134,7 @@ export class Toolbar { }; } - protected render() { + render() { const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background'); const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');