javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): use custom typing, remove interfaces

Browse Source 
add protected, rename nav `remove` to `removeIndex`

resolves #12823
This commit is contained in:
Brandy Carney
2017-10-17 13:17:54 -04:00
parent 7fc0310896
commit a932e673ff
53 changed files with 661 additions and 6948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
View File

@ -18,7 +18,7 @@ export class ActionSheetController {
const id = this.ids++;
// give this action sheet a unique id
actionSheet.id = `action-sheet-${id}`;
actionSheet.actionSheetId = `action-sheet-${id}`;
actionSheet.style.zIndex = (20000 + id).toString();
// convert the passed in action sheet options into props
@ -31,17 +31,17 @@ export class ActionSheetController {
// store the resolve function to be called later up when the action sheet loads
return new Promise<ActionSheet>(resolve => {
this.actionSheetResolves[actionSheet.id] = resolve;
this.actionSheetResolves[actionSheet.actionSheetId] = resolve;
});
}
@Listen('body:ionActionSheetDidLoad')
protected viewDidLoad(ev: ActionSheetEvent) {
const actionSheet = ev.detail.actionSheet;
const actionSheetResolve = this.actionSheetResolves[actionSheet.id];
const actionSheetResolve = this.actionSheetResolves[actionSheet.actionSheetId];
if (actionSheetResolve) {
actionSheetResolve(actionSheet);
delete this.actionSheetResolves[actionSheet.id];
delete this.actionSheetResolves[actionSheet.actionSheetId];
}
}

8
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -38,7 +38,7 @@ export class ActionSheet {
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() id: string;
@Prop() actionSheetId: string;
present() {
@ -138,7 +138,7 @@ export class ActionSheet {
}
}
protected click(button: ActionSheetButton) {
protected buttonClick(button: ActionSheetButton) {
let shouldDismiss = true;
if (button.handler) {
if (button.handler() === false) {
@ -188,7 +188,7 @@ export class ActionSheet {
? <div class='action-sheet-sub-title'>{this.subTitle}</div>
: null}
{buttons.map(b =>
<button class={this.buttonClass(b)} onClick={() => this.click(b)}>
<button class={this.buttonClass(b)} onClick={() => this.buttonClick(b)}>
<span class='button-inner'>
{b.icon
? <ion-icon name={b.icon} class='action-sheet-icon' />
@ -202,7 +202,7 @@ export class ActionSheet {
? <div class='action-sheet-group action-sheet-group-cancel'>
<button
class={this.buttonClass(cancelButton)}
onClick={() => this.click(cancelButton)}
onClick={() => this.buttonClick(cancelButton)}
>
{cancelButton.icon
? <ion-icon

8
packages/core/src/components/alert-controller/alert-controller.tsx
View File

@ -18,7 +18,7 @@ export class AlertController {
const id = this.ids++;
// give this action sheet a unique id
alert.id = `alert-${id}`;
alert.alertId = `alert-${id}`;
alert.style.zIndex = (20000 + id).toString();
// convert the passed in action sheet options into props
@ -31,17 +31,17 @@ export class AlertController {
// store the resolve function to be called later up when the action sheet loads
return new Promise<Alert>(resolve => {
this.alertResolves[alert.id] = resolve;
this.alertResolves[alert.alertId] = resolve;
});
}
@Listen('body:ionAlertDidLoad')
protected viewDidLoad(ev: AlertEvent) {
const alert = ev.detail.alert;
const alertResolve = this.alertResolves[alert.id];
const alertResolve = this.alertResolves[alert.alertId];
if (alertResolve) {
alertResolve(alert);
delete this.alertResolves[alert.id];
delete this.alertResolves[alert.alertId];
}
}

4
packages/core/src/components/alert/alert.tsx
View File

@ -43,7 +43,7 @@ export class Alert {
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() id: string;
@Prop() alertId: string;
present() {
return new Promise<void>(resolve => {
@ -323,7 +323,7 @@ export class Alert {
label: i.label,
checked: !!i.checked,
disabled: !!i.disabled,
id: i.id ? i.id : `alert-input-${this.id}-${index}`,
id: i.id ? i.id : `alert-input-${this.alertId}-${index}`,
handler: i.handler ? i.handler : null,
min: i.min ? i.min : null,
max: i.max ? i.max : null

2
packages/core/src/components/buttons/buttons.tsx
View File

@ -10,7 +10,7 @@ import { Component, Element } from '@stencil/core';
export class Buttons {
@Element() private el: HTMLElement;
ionViewDidLoad() {
protected ionViewDidLoad() {
const buttons = this.el.querySelectorAll('ion-button') as any;
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('button-type', 'bar-button');

10
packages/core/src/components/checkbox/checkbox.tsx
View File

@ -78,9 +78,9 @@ import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChang
}
})
export class Checkbox {
id: string;
labelId: string;
styleTmr: any;
private checkboxId: string;
private labelId: string;
private styleTmr: any;
@Event() ionChange: EventEmitter;
@Event() ionStyle: EventEmitter;
@ -101,7 +101,7 @@ export class Checkbox {
@Prop({ mutable: true }) value: string;
ionViewWillLoad() {
protected ionViewWillLoad() {
this.emitStyle();
}
@ -161,7 +161,7 @@ export class Checkbox {
<button
class='checkbox-cover'
onClick={() => this.toggle()}
id={this.id}
id={this.checkboxId}
aria-checked={this.checked ? 'true' : false}
aria-disabled={this.disabled ? 'true' : false}
aria-labelledby={this.labelId}

4
packages/core/src/components/content/content.tsx
View File

@ -42,7 +42,7 @@ export class Content {
headerHeight: string;
ionViewDidUnload() {
protected ionViewDidUnload() {
this.$fixed = this.$scroll = this.$siblingFooter = this.$siblingHeader = this.$scrollDetail = null;
}
@ -114,7 +114,7 @@ export class Content {
};
return (
<ion-scroll style={scrollStyle} props={props} class={scrollClasses}>
<ion-scroll {...props} style={scrollStyle} class={scrollClasses}>
<slot></slot>
</ion-scroll>
);

6
packages/core/src/components/fab/fab-list.tsx
View File

@ -31,16 +31,16 @@ import { Component, Element, PropDidChange, State } from '@stencil/core';
export class FabList {
@Element() private el: HTMLElement;
@State() private activated: boolean = false;
@State() activated: boolean = false;
@PropDidChange('activated')
activatedChange(activated: boolean) {
const fabs = this.el.querySelectorAll('ion-fab-button') as NodeListOf<any>;
const fabs = this.el.querySelectorAll('ion-fab-button');
// if showing the fabs add a timeout, else show immediately
var timeout = activated ? 30 : 0;
for (var i = 0; i < fabs.length; i++) {
const fab = fabs[i].$instance;
const fab = fabs[i];
setTimeout(() => fab.show = activated, i * timeout);
}
}

9
packages/core/src/components/fab/fab.tsx
View File

@ -62,8 +62,9 @@ export class FabButton {
@Prop() href: string;
@State() show: boolean = false;
@State() private activated: boolean = false;
@State() private show: boolean = false;
@State() private inContainer: boolean = false;
@State() private inList: boolean = false;
@ -72,7 +73,7 @@ export class FabButton {
*/
@Prop() disabled: boolean = false;
ionViewDidLoad() {
protected ionViewDidLoad() {
const parentNode = this.el.parentNode.nodeName;
this.inList = (parentNode === 'ION-FAB-LIST');
@ -90,14 +91,14 @@ export class FabButton {
* @hidden
*/
setActiveLists(activated: boolean) {
const lists = this.el.parentElement.querySelectorAll('ion-fab-list') as NodeListOf<any>;
const lists = this.el.parentElement.querySelectorAll('ion-fab-list');
if (lists.length > 0) {
this.activated = activated;
}
for (var i = 0; i < lists.length; i++) {
const list = lists[i].$instance;
const list = lists[i];
list.activated = activated;
}
}

38
packages/core/src/components/gesture-controller/gesture-controller.ts
View File

@ -5,11 +5,11 @@ import { Component } from '@stencil/core';
tag: 'ion-gesture-controller'
})
export class GestureController {
private id: number = 0;
private gestureId: number = 0;
private requestedStart: { [eventId: number]: number } = {};
private disabledGestures: { [eventName: string]: Set<number> } = {};
private disabledScroll: Set<number> = new Set<number>();
private capturedID: number = null;
private capturedId: number = null;
createGesture(gestureName: string, gesturePriority: number, disableScroll: boolean): GestureDelegate {
@ -24,7 +24,7 @@ export class GestureController {
}
newID(): number {
return this.id++;
return this.gestureId++;
}
start(gestureName: string, id: number, priority: number): boolean {
@ -48,7 +48,7 @@ export class GestureController {
}
if (maxPriority === priority) {
this.capturedID = id;
this.capturedId = id;
this.requestedStart = {};
return true;
}
@ -60,8 +60,8 @@ export class GestureController {
release(id: number) {
delete this.requestedStart[id];
if (this.capturedID && id === this.capturedID) {
this.capturedID = null;
if (this.capturedId && id === this.capturedId) {
this.capturedId = null;
}
}
@ -100,7 +100,7 @@ export class GestureController {
}
canStart(gestureName: string): boolean {
if (this.capturedID) {
if (this.capturedId) {
// a gesture already captured
return false;
}
@ -113,7 +113,7 @@ export class GestureController {
}
isCaptured(): boolean {
return !!this.capturedID;
return !!this.capturedId;
}
isScrollDisabled(): boolean {
@ -135,7 +135,7 @@ export class GestureDelegate {
constructor(
private ctrl: GestureController,
private id: number,
private gestureDelegateId: number,
private name: string,
private priority: number,
private disableScroll: boolean
@ -154,7 +154,7 @@ export class GestureDelegate {
return false;
}
return this.ctrl.start(this.name, this.id, this.priority);
return this.ctrl.start(this.name, this.gestureDelegateId, this.priority);
}
capture(): boolean {
@ -162,9 +162,9 @@ export class GestureDelegate {
return false;
}
let captured = this.ctrl.capture(this.name, this.id, this.priority);
let captured = this.ctrl.capture(this.name, this.gestureDelegateId, this.priority);
if (captured && this.disableScroll) {
this.ctrl.disableScroll(this.id);
this.ctrl.disableScroll(this.gestureDelegateId);
}
return captured;
@ -172,10 +172,10 @@ export class GestureDelegate {
release() {
if (this.ctrl) {
this.ctrl.release(this.id);
this.ctrl.release(this.gestureDelegateId);
if (this.disableScroll) {
this.ctrl.enableScroll(this.id);
this.ctrl.enableScroll(this.gestureDelegateId);
}
}
}
@ -193,7 +193,7 @@ export class BlockerDelegate {
blocked: boolean = false;
constructor(
private id: number,
private blockerDelegateId: number,
private controller: GestureController,
private disable: string[],
private disableScroll: boolean
@ -205,12 +205,12 @@ export class BlockerDelegate {
}
if (this.disable) {
this.disable.forEach(gesture => {
this.controller.disableGesture(gesture, this.id);
this.controller.disableGesture(gesture, this.blockerDelegateId);
});
}
if (this.disableScroll) {
this.controller.disableScroll(this.id);
this.controller.disableScroll(this.blockerDelegateId);
}
this.blocked = true;
}
@ -221,11 +221,11 @@ export class BlockerDelegate {
}
if (this.disable) {
this.disable.forEach(gesture => {
this.controller.enableGesture(gesture, this.id);
this.controller.enableGesture(gesture, this.blockerDelegateId);
});
}
if (this.disableScroll) {
this.controller.enableScroll(this.id);
this.controller.enableScroll(this.blockerDelegateId);
}
this.blocked = false;
}

4
packages/core/src/components/gesture/gesture.tsx
View File

@ -53,7 +53,7 @@ export class Gesture {
this.fireOnMoveFunc = this.fireOnMove.bind(this);
}
ionViewDidLoad() {
protected ionViewDidLoad() {
// 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
@ -426,7 +426,7 @@ export class Gesture {
}
ionViewDidUnload() {
protected ionViewDidUnload() {
if (this.blocker) {
this.blocker.destroy();
this.blocker = null;

2
packages/core/src/components/input/input.tsx
View File

@ -200,7 +200,7 @@ export class Input implements InputComponent {
}
ionViewDidLoad() {
protected ionViewDidLoad() {
this.emitStyle();
// By default, password inputs clear after focus when they have content

2
packages/core/src/components/input/textarea.tsx
View File

@ -182,7 +182,7 @@ export class Textarea implements TextareaComponent {
}
}
ionViewDidLoad() {
protected ionViewDidLoad() {
this.emitStyle();
}

28
packages/core/src/components/item-sliding/item-sliding.tsx
View File

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, HostElement, Method, State } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Method, State } from '@stencil/core';
import { GestureDetail } from '../../index';
import { GestureDetail, HTMLIonItemElement, HTMLIonListElement } from '../../index';
import { swipeShouldReset } from '../../utils/helpers';
// import { ItemOptions } from './item-options';
@ -137,8 +137,8 @@ const enum SlidingState {
export class ItemSliding {
@Element() private el: HTMLElement;
private item: HostElement;
private list: HostElement;
private item: HTMLIonItemElement;
private list: HTMLIonListElement;
private openAmount: number = 0;
private startX: number = 0;
@ -186,8 +186,8 @@ export class ItemSliding {
*/
@Event() ionDrag: EventEmitter;
ionViewDidLoad() {
const options = this.el.querySelectorAll('ion-item-options') as NodeListOf<HostElement>;
protected ionViewDidLoad() {
const options = this.el.querySelectorAll('ion-item-options');
let sides = 0;
@ -195,7 +195,7 @@ export class ItemSliding {
this.leftOptions = this.rightOptions = null;
for (var i = 0; i < options.length; i++) {
let option = options[i].$instance;
let option = options[i];
if (option.isRightSide()) {
this.rightOptions = option;
@ -208,10 +208,10 @@ export class ItemSliding {
this.optsDirty = true;
this.sides = sides;
this.item = this.el.querySelector('ion-item') as HostElement;
this.item = this.el.querySelector('ion-item');
// Get the parent list to close open containers
this.list = this.el.closest('ion-list') as HostElement;
this.list = this.el.closest('ion-list') as HTMLIonListElement;
}
canStart(gesture: GestureDetail): boolean {
@ -222,7 +222,7 @@ export class ItemSliding {
let container = this;
// Close open container if it is not the selected one.
if (this.list && container !== this.list.$instance.openContainer) {
if (this.list && container !== this.list.openContainer) {
this.closeOpened();
}
@ -234,7 +234,7 @@ export class ItemSliding {
}
onDragStart(gesture: GestureDetail) {
this.selectedContainer = this.list.$instance.openContainer = this.preSelectedContainer;
this.selectedContainer = this.list.openContainer = this.preSelectedContainer;
this.selectedContainer.startSliding(gesture.currentX);
}
@ -254,8 +254,8 @@ export class ItemSliding {
closeOpened(): boolean {
this.selectedContainer = null;
if (this.list.$instance.openContainer) {
this.list.$instance.closeSlidingItems();
if (this.list.openContainer) {
this.list.closeSlidingItems();
return true;
}
return false;
@ -487,7 +487,7 @@ export class ItemSliding {
render() {
return (
<ion-gesture props={{
<ion-gesture {...{
'canStart': this.canStart.bind(this),
'onStart': this.onDragStart.bind(this),
'onMove': this.onDragMove.bind(this),

22
packages/core/src/components/item/item.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, HostElement, Listen, Method, Prop, State } from '@stencil/core';
import { Component, Element, Listen, Method, Prop } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme';
@ -14,7 +14,7 @@ import { CssClassMap } from '../../index';
})
export class Item {
private ids: number = -1;
private id: string;
private itemId: string;
private inputs: any = [];
private itemStyles: { [key: string]: CssClassMap } = Object.create(null);
@ -56,7 +56,7 @@ export class Item {
// // register the input inside of the item
// // reset to the item's id instead of the radiogroup id
// radio.id = 'rb-' + this.registerInput('radio');
// radio.labelId = 'lbl-' + this.id;
// radio.labelId = 'lbl-' + this.itemId;
// }
@Method()
@ -64,22 +64,22 @@ export class Item {
return this.label ? this.label.getText() : '';
}
ionViewWillLoad() {
this.id = (++itemId).toString();
protected ionViewWillLoad() {
this.itemId = (++itemId).toString();
}
ionViewDidLoad() {
protected ionViewDidLoad() {
// 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++) {
buttons[i].itemButton = true;
}
this.label = this.el.querySelector('ion-label') as HostElement;
this.label = this.el.querySelector('ion-label');
// if (label) {
// this.label = label;
// this.labelId = label.id = ('lbl-' + this.id);
// this.labelId = label.id = ('lbl-' + this.itemId);
// if (label.type) {
// this.setElementClass('item-label-' + label.type, true);
// }
@ -101,7 +101,7 @@ export class Item {
*/
registerInput(type: string) {
this.inputs.push(type);
return this.id + '-' + (++this.ids);
return this.itemId + '-' + (++this.ids);
}
render() {
@ -138,7 +138,7 @@ export class Item {
// constructor() {
// this._setName(elementRef);
// this._hasReorder = !!reorder;
// this.id = form.nextId().toString();
// this.itemId = form.nextId().toString();
// // auto add "tappable" attribute to ion-item components that have a click listener
// if (!(<any>renderer).orgListen) {
@ -159,7 +159,7 @@ export class Item {
// set contentLabel(label: Label) {
// if (label) {
// this._label = label;
// this.labelId = label.id = ('lbl-' + this.id);
// this.labelId = label.id = ('lbl-' + this.itemId);
// if (label.type) {
// this.setElementClass('item-label-' + label.type, true);
// }

2
packages/core/src/components/label/label.tsx
View File

@ -45,7 +45,7 @@ export class Label {
return this.el.textContent || '';
}
ionViewDidLoad() {
protected ionViewDidLoad() {
this.emitStyle();
}

8
packages/core/src/components/loading-controller/loading-controller.tsx
View File

@ -18,7 +18,7 @@ export class LoadingController {
const id = this.ids++;
// give this loading a unique id
loading.id = `loading-${id}`;
loading.loadingId = `loading-${id}`;
loading.style.zIndex = (20000 + id).toString();
// convert the passed in loading options into props
@ -31,7 +31,7 @@ export class LoadingController {
// store the resolve function to be called later up when the loading loads
return new Promise<Loading>(resolve => {
this.loadingResolves[loading.id] = resolve;
this.loadingResolves[loading.loadingId] = resolve;
});
}
@ -39,10 +39,10 @@ export class LoadingController {
@Listen('body:ionLoadingDidLoad')
protected viewDidLoad(ev: LoadingEvent) {
const loading = ev.detail.loading;
const loadingResolve = this.loadingResolves[loading.id];
const loadingResolve = this.loadingResolves[loading.loadingId];
if (loadingResolve) {
loadingResolve(loading);
delete this.loadingResolves[loading.id];
delete this.loadingResolves[loading.loadingId];
}
}

2
packages/core/src/components/loading/loading.tsx
View File

@ -41,7 +41,7 @@ export class Loading {
@Prop() duration: number;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() id: string;
@Prop() loadingId: string;
@Prop() showBackdrop: boolean = true;
present() {

2
packages/core/src/components/menu/menu-controller.ts
View File

@ -166,7 +166,7 @@ export class MenuController {
} else if (menuId) {
// the menuId was not left or right
// so try to get the menu by its "id"
return this.menus.find(m => m.id === menuId) || null;
return this.menus.find(m => m.menuId === menuId) || null;
}
// return the first enabled menu

10
packages/core/src/components/menu/menu.tsx
View File

@ -61,7 +61,7 @@ export class Menu {
/**
* @input {string} An id for the menu.
*/
@Prop() id: string;
@Prop() menuId: string;
/**
* @input {string} The display type of the menu. Default varies based on the mode,
@ -118,7 +118,7 @@ export class Menu {
this._updateState();
}
ionViewWillLoad() {
protected ionViewWillLoad() {
return this.lazyMenuCtrl.componentOnReady()
.then(menu => this.menuCtrl = menu);
}
@ -126,7 +126,7 @@ export class Menu {
/**
* @hidden
*/
ionViewDidLoad() {
protected ionViewDidLoad() {
assert(!!this.menuCtrl, 'menucontroller was not initialized');
this._menuInnerEle = this.el.querySelector('.menu-inner') as HTMLElement;
@ -186,7 +186,7 @@ export class Menu {
<slot></slot>
</div>,
<ion-backdrop class='menu-backdrop'></ion-backdrop> ,
<ion-gesture props={{
<ion-gesture {...{
'canStart': this.canStart.bind(this),
'onWillStart': this._swipeWillStart.bind(this),
'onStart': this._swipeStart.bind(this),
@ -570,7 +570,7 @@ export class Menu {
/**
* @hidden
*/
ionViewDidUnload() {
protected ionViewDidUnload() {
this._backdropClick(false);
this.menuCtrl._unregister(this);

8
packages/core/src/components/modal-controller/modal-controller.tsx
View File

@ -19,7 +19,7 @@ export class ModalController {
const id = this.ids++;
// give this modal a unique id
modal.id = `modal-${id}`;
modal.modalId = `modal-${id}`;
modal.style.zIndex = (10000 + id).toString();
// convert the passed in modal options into props
@ -32,7 +32,7 @@ export class ModalController {
// store the resolve function to be called later up when the modal loads
return new Promise<Modal>(resolve => {
this.modalResolves[modal.id] = resolve;
this.modalResolves[modal.modalId] = resolve;
});
}
@ -40,10 +40,10 @@ export class ModalController {
@Listen('body:ionModalDidLoad')
protected modalDidLoad(ev: ModalEvent) {
const modal = ev.detail.modal;
const modalResolve = this.modalResolves[modal.id];
const modalResolve = this.modalResolves[modal.modalId];
if (modalResolve) {
modalResolve(modal);
delete this.modalResolves[modal.id];
delete this.modalResolves[modal.modalId];
}
}

4
packages/core/src/components/modal/modal.tsx
View File

@ -36,7 +36,7 @@ export class Modal {
@Prop() enableBackdropDismiss: boolean = true;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() id: string;
@Prop() modalId: string;
@Prop() showBackdrop: boolean = true;
private animation: Animation;
@ -163,7 +163,7 @@ export class Modal {
class={dialogClasses}
>
<ThisComponent
props={this.componentProps}
{...this.componentProps}
class={thisComponentClasses}
>
</ThisComponent>

2
packages/core/src/components/nav-controller/nav-controller.tsx
View File

@ -82,7 +82,7 @@ export class NavControllerImpl implements NavController {
}
@Method()
remove(nav: Nav, startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> {
removeIndex(nav: Nav, startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> {
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return removeImpl(nav, delegate, animation, startIndex, removeCount, opts);
});

6
packages/core/src/components/nav/nav.tsx
View File

@ -9,11 +9,11 @@ import { isReady } from '../../utils/helpers';
tag: 'ion-nav',
})
export class IonNav implements Nav {
// private navId: number;
@Element() element: HTMLElement;
@Event() navInit: EventEmitter;
id: number;
parent: Nav;
views: ViewController[];
transitioning?: boolean;
@ -79,7 +79,7 @@ export class IonNav implements Nav {
}
@Method()
remove(startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> {
removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> {
return removeImpl(this, startIndex, removeCount, opts);
}
@ -181,7 +181,7 @@ export function popToImpl(nav: Nav, indexOrViewCtrl: any, opts: NavOptions) {
export function removeImpl(nav: Nav, startIndex: number, removeCount: number, opts: NavOptions) {
return getNavController(nav).then(() => {
return nav.navController.remove(nav, startIndex, removeCount, opts);
return nav.navController.removeIndex(nav, startIndex, removeCount, opts);
});
}

8
packages/core/src/components/picker-controller/picker-controller.tsx
View File

@ -18,7 +18,7 @@ export class PickerController {
const id = this.ids++;
// give this picker a unique id
picker.id = `picker-${id}`;
picker.pickerId = `picker-${id}`;
picker.style.zIndex = (20000 + id).toString();
// convert the passed in picker options into props
@ -31,7 +31,7 @@ export class PickerController {
// store the resolve function to be called later up when the picker loads
return new Promise<Picker>(resolve => {
this.pickerResolves[picker.id] = resolve;
this.pickerResolves[picker.pickerId] = resolve;
});
}
@ -39,10 +39,10 @@ export class PickerController {
@Listen('body:ionPickerDidLoad')
protected viewDidLoad(ev: PickerEvent) {
const picker = ev.detail.picker;
const pickerResolve = this.pickerResolves[picker.id];
const pickerResolve = this.pickerResolves[picker.pickerId];
if (pickerResolve) {
pickerResolve(picker);
delete this.pickerResolves[picker.id];
delete this.pickerResolves[picker.pickerId];
}
}

3
packages/core/src/components/picker/picker.tsx
View File

@ -41,7 +41,7 @@ export class Picker {
@Prop() duration: number;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() id: string;
@Prop() pickerId: string;
@Prop() showBackdrop: boolean = true;
@Prop() enableBackdropDismiss: boolean = true;
@ -273,7 +273,6 @@ export class Picker {
}
buttonWrapperClass(button: PickerButton): CssClassMap {
console.log('buttonWrapperClass', button);
let buttonClass: string[] = !button.role
? ['picker-toolbar-button']
: [`picker-toolbar-button`, `picker-toolbar-${button.role}`];

8
packages/core/src/components/popover-controller/popover-controller.tsx
View File

@ -17,7 +17,7 @@ export class PopoverController {
const id = this.ids++;
// give this popover a unique id
popover.id = `popover-${id}`;
popover.popoverId = `popover-${id}`;
popover.style.zIndex = (10000 + id).toString();
// convert the passed in popover options into props
@ -30,7 +30,7 @@ export class PopoverController {
// store the resolve function to be called later up when the popover loads
return new Promise<Popover>(resolve => {
this.popoverResolves[popover.id] = resolve;
this.popoverResolves[popover.popoverId] = resolve;
});
}
@ -38,10 +38,10 @@ export class PopoverController {
@Listen('body:ionPopoverDidLoad')
protected viewDidLoad(ev: PopoverEvent) {
const popover = ev.detail.popover;
const popoverResolve = this.popoverResolves[popover.id];
const popoverResolve = this.popoverResolves[popover.popoverId];
if (popoverResolve) {
popoverResolve(popover);
delete this.popoverResolves[popover.id];
delete this.popoverResolves[popover.popoverId];
}
}

4
packages/core/src/components/popover/popover.tsx
View File

@ -43,7 +43,7 @@ export class Popover {
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() ev: Event;
@Prop() id: string;
@Prop() popoverId: string;
@Prop() showBackdrop: boolean = true;
@ -283,7 +283,7 @@ export class Popover {
<div class='popover-content'>
<div class='popover-viewport'>
<ThisComponent
props={this.componentProps}
{...this.componentProps}
class={this.cssClass}
/>
</div>

18
packages/core/src/components/radio/radio-group.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, HostElement, Listen, Prop, PropDidChange, State} from '@stencil/core';
import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange, State} from '@stencil/core';
import { isCheckedProperty } from '../../utils/helpers';
@ -61,7 +61,7 @@ import { Radio, RadioEvent } from './radio';
})
export class RadioGroup {
radios: Radio[] = [];
id: number;
radioGroupId: number;
ids = 0;
@Element() el: HTMLElement;
@ -100,10 +100,10 @@ export class RadioGroup {
protected radioDidLoad(ev: RadioEvent) {
const radio = ev.detail.radio;
this.radios.push(radio);
radio.id = 'rb-' + this.id + '-' + (++this.ids);
radio.radioId = 'rb-' + this.radioGroupId + '-' + (++this.ids);
// if the value is not defined then use its unique id
radio.value = !radio.value ? radio.id : radio.value;
radio.value = !radio.value ? radio.radioId : radio.value;
if (radio.checked && !this.value) {
this.value = radio.value;
@ -131,15 +131,15 @@ export class RadioGroup {
this.value = radio.checked ? radio.value : '';
}
ionViewWillLoad() {
this.id = ++radioGroupIds;
protected ionViewWillLoad() {
this.radioGroupId = ++radioGroupIds;
// Get the list header if it exists and set the id
const header = this.el.querySelector('ion-list-header') as HostElement;
const header = this.el.querySelector('ion-list-header');
if (header) {
if (!header.id) {
header.id = 'rg-hdr-' + this.id;
header.id = 'rg-hdr-' + this.radioGroupId;
}
this.headerId = header.id;
}
@ -161,7 +161,7 @@ export class RadioGroup {
if (radio.checked) {
// if this button is checked, then set it as
// the radiogroup's active descendant
this.activeId = radio.id;
this.activeId = radio.radioId;
hasChecked = true;
}
});

8
packages/core/src/components/radio/radio.tsx
View File

@ -57,7 +57,7 @@ export class Radio {
@Element() el: HTMLElement;
@State() id: string;
@State() radioId: string;
@State() activated: boolean;
@ -106,11 +106,11 @@ export class Radio {
*/
@Prop({ mutable: true }) value: string;
ionViewWillLoad() {
protected ionViewWillLoad() {
this.emitStyle();
}
ionViewDidLoad() {
protected ionViewDidLoad() {
this.ionRadioDidLoad.emit({ radio: this });
}
@ -177,7 +177,7 @@ export class Radio {
<button
class='radio-cover'
onClick={() => this.toggle()}
id={this.id}
id={this.radioId}
aria-checked={this.checked ? 'true' : false}
aria-disabled={this.disabled ? 'true' : false}
aria-labelledby={this.labelId}

12
packages/core/src/components/range/range.tsx
View File

@ -14,12 +14,14 @@ import { clamp } from '../../utils/helpers';
}
})
export class Range implements BaseInputComponent {
// private rangeId: string;
// private labelId: string;
private styleTmr: any;
activated: boolean = false;
hasFocus: boolean = false;
id: string;
labelId: string;
startX: number;
styleTmr: any;
@Element() rangeEl: HTMLElement;
@ -75,7 +77,7 @@ export class Range implements BaseInputComponent {
this.emitStyle();
}
ionViewWillLoad() {
protected ionViewWillLoad() {
this.inputUpdated();
this.createTicks();
this.emitStyle();
@ -332,7 +334,7 @@ export class Range implements BaseInputComponent {
<slot name='range-start' />,
<ion-gesture
props={{
{...{
disableScroll: true,
onStart: this.onDragStart.bind(this),
onMove: this.onDragMove.bind(this),

83
packages/core/src/components/reorder/reorder-group.tsx
View File

@ -143,17 +143,16 @@ export class ReorderIndexes {
styleUrl: 'reorder.scss'
})
export class ReorderGroup {
private selectedItemEle: HTMLElement = null;
private selectedItemEl: HTMLElement = null;
private selectedItemHeight: number;
private lastToIndex: number;
private cachedHeights: number[] = [];
private containerEle: HTMLElement;
private scrollEle: HTMLElement;
private containerEl: HTMLElement;
private scrollEl: HTMLElement;
private scrollTop: number;
private scrollBottom: number;
private scrollInitial: number;
private scrollElTop: number;
private scrollElBottom: number;
private scrollElInitial: number;
private containerTop: number;
private containerBottom: number;
@ -182,25 +181,25 @@ export class ReorderGroup {
}
}
ionViewDidLoad() {
this.containerEle = this.ele.querySelector('ion-gesture') as HTMLElement;
this.scrollEle = this.ele.closest('ion-scroll') as HTMLElement;
protected ionViewDidLoad() {
this.containerEl = this.ele.querySelector('ion-gesture') as HTMLElement;
this.scrollEl = this.ele.closest('ion-scroll') as HTMLElement;
}
ionViewDidUnload() {
protected ionViewDidUnload() {
this.onDragEnd();
}
private canStart(ev: GestureDetail): boolean {
if (this.selectedItemEle) {
if (this.selectedItemEl) {
return false;
}
const target = ev.event.target as HTMLElement;
const reorderEle = target.closest('ion-reorder') as HTMLElement;
if (!reorderEle) {
const reorderEl = target.closest('ion-reorder') as HTMLElement;
if (!reorderEl) {
return false;
}
const item = findReorderItem(reorderEle, this.containerEle);
const item = findReorderItem(reorderEl, this.containerEl);
if (!item) {
console.error('reorder node not found');
return false;
@ -210,10 +209,10 @@ export class ReorderGroup {
}
private onDragStart(ev: GestureDetail) {
const item = this.selectedItemEle = ev.data;
const item = this.selectedItemEl = ev.data;
const heights = this.cachedHeights;
heights.length = 0;
const ele = this.containerEle;
const ele = this.containerEl;
const children: any = ele.children;
if (!children || children.length === 0) {
return;
@ -227,19 +226,19 @@ export class ReorderGroup {
child.$ionIndex = i;
}
const box = this.containerEle.getBoundingClientRect();
const box = this.containerEl.getBoundingClientRect();
this.containerTop = box.top;
this.containerBottom = box.bottom;
if (this.scrollEle) {
var scrollBox = this.scrollEle.getBoundingClientRect();
this.scrollInitial = this.scrollEle.scrollTop;
this.scrollTop = scrollBox.top + AUTO_SCROLL_MARGIN;
this.scrollBottom = scrollBox.bottom - AUTO_SCROLL_MARGIN;
if (this.scrollEl) {
var scrollBox = this.scrollEl.getBoundingClientRect();
this.scrollElInitial = this.scrollEl.scrollTop;
this.scrollElTop = scrollBox.top + AUTO_SCROLL_MARGIN;
this.scrollElBottom = scrollBox.bottom - AUTO_SCROLL_MARGIN;
} else {
this.scrollInitial = 0;
this.scrollTop = 0;
this.scrollBottom = 0;
this.scrollElInitial = 0;
this.scrollElTop = 0;
this.scrollElBottom = 0;
}
this.lastToIndex = indexForItem(item);
@ -250,7 +249,7 @@ export class ReorderGroup {
}
private onDragMove(ev: GestureDetail) {
const selectedItem = this.selectedItemEle;
const selectedItem = this.selectedItemEl;
if (!selectedItem) {
return;
}
@ -276,7 +275,7 @@ export class ReorderGroup {
private onDragEnd() {
this._actived = false;
const selectedItem = this.selectedItemEle;
const selectedItem = this.selectedItemEl;
if (!selectedItem) {
return;
}
@ -289,12 +288,12 @@ export class ReorderGroup {
const fromIndex = indexForItem(selectedItem);
const ref = (fromIndex < toIndex)
? this.containerEle.children[toIndex + 1]
: this.containerEle.children[toIndex];
? this.containerEl.children[toIndex + 1]
: this.containerEl.children[toIndex];
this.containerEle.insertBefore(this.selectedItemEle, ref);
this.containerEl.insertBefore(this.selectedItemEl, ref);
const children = this.containerEle.children;
const children = this.containerEl.children;
const len = children.length;
const transform = CSS_PROP.transformProp;
for (let i = 0; i < len; i++) {
@ -302,9 +301,9 @@ export class ReorderGroup {
}
const reorderInactive = () => {
this.selectedItemEle.style.transition = '';
this.selectedItemEle.classList.remove(ITEM_REORDER_SELECTED);
this.selectedItemEle = null;
this.selectedItemEl.style.transition = '';
this.selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
this.selectedItemEl = null;
};
if (toIndex === fromIndex) {
selectedItem.style.transition = 'transform 200ms ease-in-out';
@ -332,7 +331,7 @@ export class ReorderGroup {
/********* DOM WRITE ********* */
private _reorderMove(fromIndex: number, toIndex: number) {
const itemHeight = this.selectedItemHeight;
const children = this.containerEle.children;
const children = this.containerEl.children;
const transform = CSS_PROP.transformProp;
for (var i = 0; i < children.length; i++) {
var style = (children[i] as any).style;
@ -347,20 +346,20 @@ export class ReorderGroup {
}
private autoscroll(posY: number): number {
if (!this.scrollEle) {
if (!this.scrollEl) {
return 0;
}
let amount = 0;
if (posY < this.scrollTop) {
if (posY < this.scrollElTop) {
amount = -SCROLL_JUMP;
} else if (posY > this.scrollBottom) {
} else if (posY > this.scrollElBottom) {
amount = SCROLL_JUMP;
}
if (amount !== 0) {
this.scrollEle.scrollBy(0, amount);
this.scrollEl.scrollBy(0, amount);
}
return this.scrollEle.scrollTop - this.scrollInitial;
return this.scrollEl.scrollTop - this.scrollElInitial;
}
hostData() {
@ -375,7 +374,7 @@ export class ReorderGroup {
render() {
return (
<ion-gesture props={{
<ion-gesture {...{
disableScroll: true,
canStart: this.canStart.bind(this),
onStart: this.onDragStart.bind(this),

2
packages/core/src/components/reorder/reorder.tsx
View File

@ -8,7 +8,7 @@ export class ItemReorder {
@State() hasContent: boolean = null;
@Element() ele: HTMLElement;
ionViewDidLoad() {
protected ionViewDidLoad() {
this.hasContent = this.ele.childElementCount > 0;
}

4
packages/core/src/components/router/route.tsx
View File

@ -21,7 +21,7 @@ export class Route {
// @Prop() match: any;
@State() match: any = {};
ionViewWillLoad() {
protected ionViewWillLoad() {
/*
this.routerInstance = document.querySelector(this.router)
@ -34,7 +34,7 @@ export class Route {
render() {
/*
this.match.url = this.routerInstance.$instance.routeMatch.url;
this.match.url = this.routerInstance.routeMatch.url;
const match = this.match
const ChildComponent = this.component

2
packages/core/src/components/router/router.tsx
View File

@ -33,7 +33,7 @@ export class Router {
Ionic.emit(this.$instance, 'ionRouterNavigation', { detail: this.routeMatch });
}
ionViewWillLoad() {
protected ionViewWillLoad() {
console.log('<ion-router> loaded');
window.addEventListener('popstate', this.handlePopState.bind(this));
window.addEventListener('hashchange', this.handleHashChange.bind(this));

10
packages/core/src/components/scroll/scroll.tsx
View File

@ -26,7 +26,7 @@ export class Scroll {
@Prop() ionScroll: ScrollCallback;
@Prop() ionScrollEnd: ScrollCallback;
ionViewDidLoad() {
protected ionViewDidLoad() {
if (Context.isServer) return;
const gestureCtrl = Context.gesture = Context.gesture || new GestureController;
@ -234,7 +234,7 @@ export class Scroll {
}
}
scrollTo(x: number, y: number, duration: number, done?: Function): Promise<any> {
scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
// scroll animation loop w/ easing
// credit https://gist.github.com/dezinezync/5487119
@ -324,7 +324,7 @@ export class Scroll {
}
scrollToTop(duration: number): Promise<void> {
return this.scrollTo(0, 0, duration);
return this.scrollToPoint(0, 0, duration);
}
scrollToBottom(duration: number): Promise<void> {
@ -332,11 +332,11 @@ export class Scroll {
if (this.el) {
y = this.el.scrollHeight - this.el.clientHeight;
}
return this.scrollTo(0, y, duration);
return this.scrollToPoint(0, y, duration);
}
ionViewDidUnload() {
protected ionViewDidUnload() {
this.gesture && this.gesture.destroy();
this.gesture = this.detail = this.detail.event = null;
}

11
packages/core/src/components/searchbar/searchbar.tsx
View File

@ -139,7 +139,7 @@ export class Searchbar {
@Prop({ mutable: true }) value: string;
ionViewDidLoad() {
protected ionViewDidLoad() {
this.positionElements();
}
@ -347,13 +347,14 @@ export class Searchbar {
};
}
// TODO remove the ion-buttons and replace with native buttons to remove
// the button dependency
render() {
return [
<div class='searchbar-input-container'>
<ion-button
mode='md'
onClick={this.cancelSearchbar.bind(this)}
onMousedown={this.cancelSearchbar.bind(this)}
onMouseDown={this.cancelSearchbar.bind(this)}
clear
color='dark'
class='searchbar-md-cancel'>
@ -375,14 +376,14 @@ export class Searchbar {
clear
class='searchbar-clear-icon'
onClick={this.clearInput.bind(this)}
onMousedown={this.clearInput.bind(this)}>
onMouseDown={this.clearInput.bind(this)}>
</ion-button>
</div>,
<ion-button
tabindex={this.activated ? 1 : -1}
clear
onClick={this.cancelSearchbar.bind(this)}
onMousedown={this.cancelSearchbar.bind(this)}
onMouseDown={this.cancelSearchbar.bind(this)}
class='searchbar-ios-cancel'>
{this.cancelButtonText}
</ion-button>

14
packages/core/src/components/segment/segment.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, HostElement, Listen, Prop, PropDidChange } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
import { SegmentButtonEvent } from '../../index';
@ -71,7 +71,9 @@ import { SegmentButtonEvent } from '../../index';
}
})
export class Segment {
buttons: NodeListOf<HostElement>;
// TODO typing
buttons: any;
@Element() el: HTMLElement;
@Event() ionChange: EventEmitter;
@ -85,11 +87,11 @@ export class Segment {
this.selectButton(val);
}
ionViewDidLoad() {
this.buttons = this.el.querySelectorAll('ion-segment-button') as NodeListOf<HostElement>;
protected ionViewDidLoad() {
this.buttons = this.el.querySelectorAll('ion-segment-button');
for (var i = 0; i < this.buttons.length; i++) {
const button = this.buttons[i].$instance;
const button = this.buttons[i];
button.activated = (button.value === this.value);
@ -116,7 +118,7 @@ export class Segment {
selectButton(val: string) {
for (var i = 0; i < this.buttons.length; i++) {
const button = this.buttons[i].$instance;
const button = this.buttons[i];
button.activated = (button.value === val);
}

21
packages/core/src/components/select/select.tsx
View File

@ -1,4 +1,4 @@
import { Component, CssClassMap, Element, Event, EventEmitter, HostElement, Prop, PropDidChange, State } from '@stencil/core';
import { Component, CssClassMap, Element, Event, EventEmitter, Prop, PropDidChange, State } from '@stencil/core';
import { deepCopy, isCheckedProperty } from '../../utils/helpers';
@ -25,10 +25,15 @@ import { PopoverController } from '../popover-controller/popover-controller';
}
})
export class Select {
private selectId: string;
private labelId: string;
// TODO rename this
texts: any = [];
id: string;
labelId: string;
// TODO typing
item: any;
options: SelectOption[] = [];
overlay: ActionSheet | Alert | Popover;
@ -100,9 +105,9 @@ export class Select {
@Event() ionCancel: EventEmitter;
ionViewDidLoad() {
protected ionViewDidLoad() {
// Get the parent item
this.item = this.el.closest('ion-item') as HostElement;
this.item = this.el.closest('ion-item');
this.setOptions();
}
@ -110,13 +115,13 @@ export class Select {
setOptions() {
// Get the options
const options = this.el.querySelectorAll('ion-select-option') as NodeListOf<any>;
const options = this.el.querySelectorAll('ion-select-option');
Array.from(options).forEach(option => {
if (!option.value) {
option.value = option.getText();
}
this.options.push(option.$instance);
this.options.push(option);
});
const values = this.getValues();
@ -386,7 +391,7 @@ export class Select {
</div>,
<button
aria-haspopup='true'
id={this.id}
id={this.selectId}
aria-labelledby={this.labelId}
aria-disabled={this.disabled ? 'true' : false}
onClick={this.open.bind(this)}

45
packages/core/src/components/slides/slides.tsx
View File

@ -151,13 +151,13 @@ export class Slides {
* @hidden
* Height of container.
*/
height: number;
private height: number;
/**
* @hidden
* Width of container.
*/
width: number;
private width: number;
/**
* @hidden
@ -165,21 +165,21 @@ export class Slides {
* not move, real translate values on wrapper will not be set. Useful when
* you may need to create custom slide transition.
*/
virtualTranslate = false;
private virtualTranslate = false;
/**
* @hidden
* Set to true to round values of slides width and height to prevent blurry
* texts on usual resolution screens (if you have such)
*/
roundLengths = false;
private roundLengths = false;
// Slides grid
/**
* @hidden
*/
originalEvent: any;
private originalEvent: any;
/**
* Private properties only useful to this class.
@ -189,40 +189,21 @@ export class Slides {
private _tmr: number;
/**
* Properties that are exposed publically but no docs.
* Properties that are exposed publicly but no docs.
* ------------------------------------
*/
/** @hidden */
container: HTMLElement;
private container: HTMLElement;
/** @hidden */
id: number;
private slidesId: number;
/** @hidden */
renderedHeight: number;
/** @hidden */
renderedWidth: number;
/** @hidden */
slideId: string;
/** @hidden */
swipeDirection: string;
/** @hidden */
velocity: number;
private slideId: string;
/**
* Properties which are for internal use only
* and not exposed to the public
* ------------------------------------
*/
/** @hidden */
nextButton: HTMLElement;
/** @hidden */
prevButton: HTMLElement;
constructor(
) {
this.id = ++slidesId;
this.slideId = 'slides-' + this.id;
this.slidesId = ++slidesId;
this.slideId = 'slides-' + this.slidesId;
}
private _initSlides() {
@ -353,7 +334,7 @@ export class Slides {
/**
* @hidden
*/
ionViewDidLoad() {
protected ionViewDidLoad() {
/**
* TODO: This should change because currently ionViewDidLoad fires independent of whether the
* child components are ready.
@ -514,7 +495,7 @@ export class Slides {
/**
* @hidden
*/
ionViewDidUnload() {
protected ionViewDidUnload() {
this._init = false;
this.swiper.destroy(true, true);

4
packages/core/src/components/split-pane/split-pane.tsx
View File

@ -163,12 +163,12 @@ export class SplitPane {
@Event() ionSplitPaneDidChange: EventEmitter;
@Event() ionChange: EventEmitter;
ionViewDidLoad() {
protected ionViewDidLoad() {
this._styleChildren();
this._updateQuery();
}
ionViewDidUnload() {
protected ionViewDidUnload() {
this.rmL && this.rmL();
this.rmL = null;
}

4
packages/core/src/components/tabs/tab.tsx
View File

@ -84,13 +84,13 @@ export class Tab {
};
}
ionViewDidLoad() {
protected ionViewDidLoad() {
setTimeout(() => {
this.ionTabDidLoad.emit({ tab: this });
}, 0);
}
ionViewDidUnload() {
protected ionViewDidUnload() {
this.ionTabDidLoad.emit({ tab: this });
}

8
packages/core/src/components/toast-controller/toast-controller.tsx
View File

@ -16,7 +16,7 @@ export class ToastController {
const id = this.ids++;
// give this toast a unique id
toast.id = `toast-${id}`;
toast.toastId = `toast-${id}`;
toast.style.zIndex = (10000 + id).toString();
// convert the passed in toast options into props
@ -29,17 +29,17 @@ export class ToastController {
// store the resolve function to be called later up when the toast loads
return new Promise<Toast>(resolve => {
this.toastResolves[toast.id] = resolve;
this.toastResolves[toast.toastId] = resolve;
});
}
@Listen('body:ionToastDidLoad')
protected viewDidLoad(ev: ToastEvent) {
const toast = ev.detail.toast;
const toastResolve = this.toastResolves[toast.id];
const toastResolve = this.toastResolves[toast.toastId];
if (toastResolve) {
toastResolve(toast);
delete this.toastResolves[toast.id];
delete this.toastResolves[toast.toastId];
}
}

2
packages/core/src/components/toast/toast.tsx
View File

@ -39,7 +39,7 @@ export class Toast {
@Prop() position: string;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() id: string;
@Prop() toastId: string;
present() {
return new Promise<void>(resolve => {

13
packages/core/src/components/toggle/toggle.tsx
View File

@ -14,12 +14,13 @@ import { BooleanInputComponent, GestureDetail } from '../../index';
}
})
export class Toggle implements BooleanInputComponent {
private toggleId: string;
private labelId: string;
private styleTmr: any;
activated: boolean = false;
hasFocus: boolean = false;
id: string;
labelId: string;
startX: number;
styleTmr: any;
@Event() ionChange: EventEmitter;
@Event() ionStyle: EventEmitter;
@ -34,7 +35,7 @@ export class Toggle implements BooleanInputComponent {
@Prop({ mutable: true }) value: string;
ionViewWillLoad() {
protected ionViewWillLoad() {
this.emitStyle();
}
@ -150,7 +151,7 @@ export class Toggle implements BooleanInputComponent {
render() {
return (
<ion-gesture props={{
<ion-gesture {...{
'canStart': this.canStart.bind(this),
'onStart': this.onDragStart.bind(this),
'onMove': this.onDragMove.bind(this),
@ -168,7 +169,7 @@ export class Toggle implements BooleanInputComponent {
</div>
<div
class='toggle-cover'
id={this.id}
id={this.toggleId}
aria-checked={this.checked ? 'true' : false}
aria-disabled={this.disabled ? 'true' : false}
aria-labelledby={this.labelId}

10
packages/core/src/components/toolbar/navbar.tsx
View File

@ -63,8 +63,8 @@ export class Navbar {
console.log('back button click');
}
ionViewDidLoad() {
const buttons = this.el.querySelectorAll('ion-button') as any;
protected ionViewDidLoad() {
const buttons = this.el.querySelectorAll('ion-button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('button-type', 'bar-button');
}
@ -91,8 +91,9 @@ export class Navbar {
return [
<div class={backgroundCss}></div>,
<button onClick={this.backButtonClick.bind(this)} class={backButtonCss} hidden={this.hideBackButton}>
if (backButtonIcon) {
<ion-icon class={backButtonIconCss} name={backButtonIcon}></ion-icon>
{ backButtonIcon
? <ion-icon class={backButtonIconCss} name={backButtonIcon}></ion-icon>
: null
}
<span class={backButtonTextCss}>{backButtonText}</span>
</button>,
@ -105,5 +106,4 @@ export class Navbar {
</div>
];
}
}

2
packages/core/src/components/toolbar/toolbar.tsx
View File

@ -107,7 +107,7 @@ export class Toolbar {
mode: string;
color: string;
ionViewDidLoad() {
protected ionViewDidLoad() {
const buttons = this.el.querySelectorAll('ion-button') as any;
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('button-type', 'bar-button');