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

refactor(all): componentOnReady is part of the types

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-10 01:52:51 +01:00
parent b68e79ab3c
commit 255c3dd1ae
20 changed files with 56 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@ export class ActionSheetController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(actionSheetElement);
return (actionSheetElement as any).componentOnReady();
return actionSheetElement.componentOnReady();
}
@Method()

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

@ -25,7 +25,7 @@ export class AlertController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(alertElement);
return (alertElement as any).componentOnReady();
return alertElement.componentOnReady();
}
@Method()

4
packages/core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { DomController, ScrollDetail, StencilElement } from '../../index';
import { DomController, ScrollDetail } from '../../index';
const enum Position {
Top = 'top',
@ -83,7 +83,7 @@ export class InfiniteScroll {
@Event() ionInfinite: EventEmitter;
componentWillLoad() {
const scrollEl = this.el.closest('ion-scroll') as any as StencilElement;
const scrollEl = this.el.closest('ion-scroll');
return scrollEl.componentOnReady().then((el) => {
this.scrollEl = el as HTMLIonScrollElement;
});

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

@ -25,7 +25,7 @@ export class LoadingController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(loadingElement);
return (loadingElement as any).componentOnReady();
return loadingElement.componentOnReady();
}
@Method()

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

@ -1,6 +1,4 @@
import { Component, Listen, Prop } from '@stencil/core';
import { getOrAppendElement } from '../../utils/helpers';
import { StencilElement } from '../..';
@Component({
tag: 'ion-menu-toggle',
@ -17,12 +15,15 @@ export class MenuToggle {
/**
* Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
*/
@Prop() menu: string = null;
@Prop() menu: string;
@Listen('child:click')
toggle() {
const menuControllerElement = getOrAppendElement('ion-menu-controller') as HTMLIonMenuControllerElement;
return (menuControllerElement as any as StencilElement).componentOnReady().then(() => {
onClick() {
const menuControllerElement = document.querySelector('ion-menu-controller');
if (!menuControllerElement) {
return;
}
menuControllerElement.componentOnReady().then(() => {
const menu = menuControllerElement.get(this.menu);
if (menu) {
menu.toggle();

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

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { Animation, Config, GestureDetail, SplitPaneAlert, StencilElement } from '../../index';
import { Animation, Config, GestureDetail, SplitPaneAlert } from '../../index';
import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers';
@Component({
@ -35,7 +35,7 @@ export class Menu {
@State() isRightSide = false;
@Prop({ context: 'config' }) config: Config;
@Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: StencilElement;
@Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: HTMLIonMenuControllerElement;
@Prop({ context: 'enableListener' }) enableListener: any;
/**

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

@ -25,7 +25,7 @@ export class ModalController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(modalElement);
return (modalElement as any).componentOnReady();
return modalElement.componentOnReady();
}
@Method()

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

@ -1,5 +1,5 @@
import { Component, Listen, Method } from '@stencil/core';
import { PickerEvent, PickerOptions, OverlayController } from '../../index';
import { OverlayController, PickerEvent, PickerOptions } from '../../index';
let ids = 0;
const pickers = new Map<number, HTMLIonPickerElement>();
@ -25,7 +25,7 @@ export class PickerController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(pickerElement);
return (pickerElement as any).componentOnReady();
return pickerElement.componentOnReady();
}
@Method()

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

@ -25,7 +25,7 @@ export class PopoverController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(popoverElement);
return (popoverElement as any).componentOnReady();
return popoverElement.componentOnReady();
}
@Method()

4
packages/core/src/components/router/router-utils.ts
View File

@ -1,12 +1,10 @@
import { StencilElement } from '../../index';
export interface NavOutlet {
setRouteId(id: any, data?: any): Promise<void>;
getRouteId(): string;
getContentElement(): HTMLElement | null;
}
export type NavOutletElement = NavOutlet & StencilElement;
export type NavOutletElement = NavOutlet & HTMLStencilElement;
export interface RouterEntry {
id: any;

6
packages/core/src/components/split-pane/test/basic/index.html
View File

@ -49,9 +49,13 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button onclick="openLeft()"><ion-icon slot="icon-only" name="menu"></ion-icon></ion-button>
<ion-menu-toggle>
<ion-button><ion-icon slot="icon-only" name="menu"></ion-icon></ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Navigation</ion-title>
</ion-toolbar>
</ion-header>

2
packages/core/src/components/status-tap/status-tap.tsx
View File

@ -31,7 +31,7 @@ export class StatusTap {
}
return el.closest('ion-scroll');
}).then(([scroll]: HTMLIonScrollElement[]) => {
return (scroll as any).componentOnReady();
return scroll.componentOnReady();
}).then((scroll: HTMLIonScrollElement) => {
return domControllerAsync(this.dom.write, () => {
return scroll.scrollToTop(this.duration);

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

@ -25,7 +25,7 @@ export class ToastController implements OverlayController {
const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(toastElement);
return (toastElement as any).componentOnReady();
return toastElement.componentOnReady();
}
@Method()

24
packages/core/src/components/virtual-scroll/virtual-scroll.tsx
View File

@ -257,17 +257,19 @@ export class VirtualScroll {
});
}
private updateCellHeight(cell: Cell, node: HTMLElement) {
(node as any).componentOnReady(() => {
// let's give some additional time to read the height size
setTimeout(() => this.dom.read(() => {
if ((node as any)['$ionCell'] === cell) {
const style = window.getComputedStyle(node);
const height = node.offsetHeight + parseFloat(style.getPropertyValue('margin-bottom'));
this.setCellHeight(cell, height);
}
}));
});
private updateCellHeight(cell: Cell, node: HTMLStencilElement | HTMLElement) {
const update = () => {
if ((node as any)['$ionCell'] === cell) {
const style = window.getComputedStyle(node);
const height = node.offsetHeight + parseFloat(style.getPropertyValue('margin-bottom'));
this.setCellHeight(cell, height);
}
};
if ('componentOnReady' in node) {
node.componentOnReady(update);
} else {
update();
}
}
private setCellHeight(cell: Cell, height: number) {

5
packages/core/src/index.d.ts vendored
View File

@ -132,11 +132,6 @@ export interface BaseInputComponent {
fireBlur: () => void;
}
export interface StencilElement extends HTMLElement {
componentOnReady(): Promise<HTMLElement>;
componentOnReady(done: (cmp?: HTMLElement) => void): void;
}
export interface OverlayDismissEvent extends CustomEvent {
detail: OverlayDismissEventDetail;
}

6
packages/core/src/utils/helpers.ts
View File

@ -1,4 +1,4 @@
import { Animation, StencilElement } from '../index';
import { Animation } from '../index';
export function clamp(min: number, n: number, max: number) {
return Math.max(min, Math.min(n, max));
@ -212,10 +212,6 @@ export function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolea
return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
}
export function isReady(element: Element): Promise<any> {
return (element as StencilElement).componentOnReady();
}
export function getOrAppendElement(tagName: string): Element {
const element = document.querySelector(tagName);
if (element) {