From 255c3dd1aefe5ffbfa38eb8b4b20b8aa122e6310 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sat, 10 Feb 2018 01:52:51 +0100 Subject: [PATCH] refactor(all): componentOnReady is part of the types --- .../angular/src/providers/menu-controller.ts | 22 ++++++++--------- .../angular/src/providers/modal-controller.ts | 2 +- .../src/providers/popover-controller.ts | 2 +- packages/angular/src/router/outlet.ts | 6 ++--- .../action-sheet-controller.tsx | 2 +- .../alert-controller/alert-controller.tsx | 2 +- .../infinite-scroll/infinite-scroll.tsx | 4 ++-- .../loading-controller/loading-controller.tsx | 2 +- .../components/menu-toggle/menu-toggle.tsx | 13 +++++----- packages/core/src/components/menu/menu.tsx | 4 ++-- .../modal-controller/modal-controller.tsx | 2 +- .../picker-controller/picker-controller.tsx | 4 ++-- .../popover-controller/popover-controller.tsx | 2 +- .../src/components/router/router-utils.ts | 4 +--- .../split-pane/test/basic/index.html | 6 ++++- .../src/components/status-tap/status-tap.tsx | 2 +- .../toast-controller/toast-controller.tsx | 2 +- .../virtual-scroll/virtual-scroll.tsx | 24 ++++++++++--------- packages/core/src/index.d.ts | 5 ---- packages/core/src/utils/helpers.ts | 6 +---- 20 files changed, 56 insertions(+), 60 deletions(-) diff --git a/packages/angular/src/providers/menu-controller.ts b/packages/angular/src/providers/menu-controller.ts index 68e62cfd7a..dc74f3a675 100644 --- a/packages/angular/src/providers/menu-controller.ts +++ b/packages/angular/src/providers/menu-controller.ts @@ -9,7 +9,7 @@ export class MenuController { } close(menuId?: string) { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.close(menuId); }); } @@ -24,7 +24,7 @@ export class MenuController { } enableAsync(menuId?: string): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.enable(true, menuId); }); } @@ -38,7 +38,7 @@ export class MenuController { } getAsync(menuId?: string): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.get(menuId); }); } @@ -52,7 +52,7 @@ export class MenuController { } getMenusAsync(): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.getMenus(); }); } @@ -65,8 +65,8 @@ export class MenuController { return null; } - getOpenAsync(): Promise { - return (element as any).componentOnReady().then(() => { + getOpenAsync(): Promise { + return element.componentOnReady().then(() => { return element.getOpen(); }); } @@ -80,7 +80,7 @@ export class MenuController { } isEnabledAsync(menuId?: string): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.isEnabled(menuId); }); } @@ -94,13 +94,13 @@ export class MenuController { } isOpenAsync(menuId?: string): Promise{ - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.isOpen(menuId); }); } open(menuId?: string): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.open(menuId); }); } @@ -114,13 +114,13 @@ export class MenuController { } swipeEnableAsync(shouldEnable: boolean, menuId?: string): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.swipeEnable(shouldEnable, menuId); }); } toggle(menuId?: string): Promise { - return (element as any).componentOnReady().then(() => { + return element.componentOnReady().then(() => { return element.toggle(menuId); }); } diff --git a/packages/angular/src/providers/modal-controller.ts b/packages/angular/src/providers/modal-controller.ts index 7b6952b86d..64809a644e 100644 --- a/packages/angular/src/providers/modal-controller.ts +++ b/packages/angular/src/providers/modal-controller.ts @@ -31,7 +31,7 @@ export class ModalController implements FrameworkDelegate { dismiss(data?: any, role?: string, id?: number) { const modalController = document.querySelector('ion-modal-controller'); - return (modalController as any).componentOnReady().then(() => { + return modalController.componentOnReady().then(() => { return modalController.dismiss(data, role, id); }); } diff --git a/packages/angular/src/providers/popover-controller.ts b/packages/angular/src/providers/popover-controller.ts index 8cde0a64bb..51b99463ca 100644 --- a/packages/angular/src/providers/popover-controller.ts +++ b/packages/angular/src/providers/popover-controller.ts @@ -31,7 +31,7 @@ export class PopoverController implements FrameworkDelegate { dismiss(data?: any, role?: string, id?: number) { const popoverController = document.querySelector('ion-popover-controller'); - return (popoverController as any).componentOnReady().then(() => { + return popoverController.componentOnReady().then(() => { return popoverController.dismiss(data, role, id); }); } diff --git a/packages/angular/src/router/outlet.ts b/packages/angular/src/router/outlet.ts index 004622a273..8da2596b1d 100644 --- a/packages/angular/src/router/outlet.ts +++ b/packages/angular/src/router/outlet.ts @@ -116,7 +116,7 @@ export class RouterOutlet implements OnDestroy, OnInit { export function activateRoute(navElement: HTMLIonNavElement, component: Type, cfr: ComponentFactoryResolver, injector: Injector): Promise { - return (navElement as any).componentOnReady().then(() => { + return navElement.componentOnReady().then(() => { // check if the nav has an `` as a parent if (isParentTab(navElement)) { @@ -136,8 +136,8 @@ function isParentTab(navElement: HTMLIonNavElement) { function isTabSelected(tabsElement: HTMLIonTabsElement, tabElement: HTMLIonTabElement ): Promise { const promises: Promise[] = []; - promises.push((tabsElement as any).componentOnReady()); - promises.push((tabElement as any).componentOnReady()); + promises.push(tabsElement.componentOnReady()); + promises.push(tabElement.componentOnReady()); return Promise.all(promises).then(() => { return tabsElement.getSelected() === tabElement; }); 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 5562055009..57ce36caae 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 @@ -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() diff --git a/packages/core/src/components/alert-controller/alert-controller.tsx b/packages/core/src/components/alert-controller/alert-controller.tsx index 78ebd812b5..8646081d32 100644 --- a/packages/core/src/components/alert-controller/alert-controller.tsx +++ b/packages/core/src/components/alert-controller/alert-controller.tsx @@ -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() diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx index af4dfa9f22..5f3eeeb897 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -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; }); diff --git a/packages/core/src/components/loading-controller/loading-controller.tsx b/packages/core/src/components/loading-controller/loading-controller.tsx index 563519e3e1..a8ba47ec7a 100644 --- a/packages/core/src/components/loading-controller/loading-controller.tsx +++ b/packages/core/src/components/loading-controller/loading-controller.tsx @@ -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() diff --git a/packages/core/src/components/menu-toggle/menu-toggle.tsx b/packages/core/src/components/menu-toggle/menu-toggle.tsx index 76082a8812..a642c62f66 100644 --- a/packages/core/src/components/menu-toggle/menu-toggle.tsx +++ b/packages/core/src/components/menu-toggle/menu-toggle.tsx @@ -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(); diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index aad5572dc9..ed8f2bb00e 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -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; /** diff --git a/packages/core/src/components/modal-controller/modal-controller.tsx b/packages/core/src/components/modal-controller/modal-controller.tsx index 28ec71d395..698e8192cb 100644 --- a/packages/core/src/components/modal-controller/modal-controller.tsx +++ b/packages/core/src/components/modal-controller/modal-controller.tsx @@ -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() diff --git a/packages/core/src/components/picker-controller/picker-controller.tsx b/packages/core/src/components/picker-controller/picker-controller.tsx index d7a6581da3..9c8413bde7 100644 --- a/packages/core/src/components/picker-controller/picker-controller.tsx +++ b/packages/core/src/components/picker-controller/picker-controller.tsx @@ -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(); @@ -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() diff --git a/packages/core/src/components/popover-controller/popover-controller.tsx b/packages/core/src/components/popover-controller/popover-controller.tsx index b16e01cd18..580aed4924 100644 --- a/packages/core/src/components/popover-controller/popover-controller.tsx +++ b/packages/core/src/components/popover-controller/popover-controller.tsx @@ -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() diff --git a/packages/core/src/components/router/router-utils.ts b/packages/core/src/components/router/router-utils.ts index 6c36ad11e6..95cba589e6 100644 --- a/packages/core/src/components/router/router-utils.ts +++ b/packages/core/src/components/router/router-utils.ts @@ -1,12 +1,10 @@ -import { StencilElement } from '../../index'; - export interface NavOutlet { setRouteId(id: any, data?: any): Promise; getRouteId(): string; getContentElement(): HTMLElement | null; } -export type NavOutletElement = NavOutlet & StencilElement; +export type NavOutletElement = NavOutlet & HTMLStencilElement; export interface RouterEntry { id: any; diff --git a/packages/core/src/components/split-pane/test/basic/index.html b/packages/core/src/components/split-pane/test/basic/index.html index 4ac83cbc4f..fd9d027633 100644 --- a/packages/core/src/components/split-pane/test/basic/index.html +++ b/packages/core/src/components/split-pane/test/basic/index.html @@ -49,9 +49,13 @@ + - + + + + Navigation diff --git a/packages/core/src/components/status-tap/status-tap.tsx b/packages/core/src/components/status-tap/status-tap.tsx index 3db04fc962..c2864070e3 100644 --- a/packages/core/src/components/status-tap/status-tap.tsx +++ b/packages/core/src/components/status-tap/status-tap.tsx @@ -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); diff --git a/packages/core/src/components/toast-controller/toast-controller.tsx b/packages/core/src/components/toast-controller/toast-controller.tsx index ade37093af..022dc3a8df 100644 --- a/packages/core/src/components/toast-controller/toast-controller.tsx +++ b/packages/core/src/components/toast-controller/toast-controller.tsx @@ -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() diff --git a/packages/core/src/components/virtual-scroll/virtual-scroll.tsx b/packages/core/src/components/virtual-scroll/virtual-scroll.tsx index 15962e445f..d7adccd69f 100644 --- a/packages/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/packages/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -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) { diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 7aad822e4c..0de39303d5 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -132,11 +132,6 @@ export interface BaseInputComponent { fireBlur: () => void; } -export interface StencilElement extends HTMLElement { - componentOnReady(): Promise; - componentOnReady(done: (cmp?: HTMLElement) => void): void; -} - export interface OverlayDismissEvent extends CustomEvent { detail: OverlayDismissEventDetail; } diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts index 69c1ad7ea7..5599001df8 100644 --- a/packages/core/src/utils/helpers.ts +++ b/packages/core/src/utils/helpers.ts @@ -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 { - return (element as StencilElement).componentOnReady(); -} - export function getOrAppendElement(tagName: string): Element { const element = document.querySelector(tagName); if (element) {