From 1d46973785aa204e13a44a740c9df75751d9f88d Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 28 Aug 2018 18:16:10 +0200 Subject: [PATCH] refactor(all): make all method return a promise --- core/src/components.d.ts | 148 +++++++----------- .../action-sheet-controller.tsx | 2 +- .../components/action-sheet/action-sheet.tsx | 8 +- .../alert-controller/alert-controller.tsx | 2 +- core/src/components/alert/alert.tsx | 8 +- .../components/back-button/back-button.tsx | 7 +- core/src/components/content/content.tsx | 6 +- core/src/components/datetime/datetime.tsx | 18 +-- .../infinite-scroll/infinite-scroll.tsx | 2 +- .../components/item-options/item-options.tsx | 12 +- core/src/components/item-options/readme.md | 2 - .../components/item-sliding/item-sliding.tsx | 42 ++--- core/src/components/label/label.tsx | 7 +- core/src/components/label/readme.md | 7 - core/src/components/list/list.tsx | 34 +--- core/src/components/list/readme.md | 9 -- .../loading-controller/loading-controller.tsx | 2 +- core/src/components/loading/loading.tsx | 8 +- .../menu-controller/menu-controller.ts | 50 +++--- .../components/menu-toggle/menu-toggle.tsx | 8 +- core/src/components/menu/menu-interface.ts | 5 +- core/src/components/menu/menu.tsx | 35 ++--- core/src/components/menu/readme.md | 1 - .../modal-controller/modal-controller.tsx | 2 +- core/src/components/modal/modal.tsx | 8 +- core/src/components/nav-pop/nav-pop.tsx | 7 +- core/src/components/nav-push/nav-push.tsx | 7 +- .../components/nav-set-root/nav-set-root.tsx | 5 +- core/src/components/nav/nav-interface.ts | 1 + core/src/components/nav/nav.tsx | 71 +++++---- core/src/components/nav/readme.md | 2 - .../picker-controller/picker-controller.tsx | 2 +- core/src/components/picker/picker.tsx | 31 +--- .../popover-controller/popover-controller.tsx | 2 +- core/src/components/popover/popover.tsx | 8 +- core/src/components/refresher/refresher.tsx | 4 +- .../reorder-group/reorder-group.tsx | 2 +- .../components/router-outlet/route-outlet.tsx | 2 +- core/src/components/router/router.tsx | 2 +- core/src/components/router/utils/dom.ts | 4 +- core/src/components/router/utils/interface.ts | 2 +- core/src/components/slides/slides.tsx | 41 ++--- core/src/components/split-pane/readme.md | 8 - core/src/components/split-pane/split-pane.tsx | 23 +-- core/src/components/tab/readme.md | 1 - core/src/components/tab/tab.tsx | 17 +- core/src/components/tabs/tabs.tsx | 20 +-- .../toast-controller/toast-controller.tsx | 2 +- core/src/components/toast/readme.md | 28 ++-- core/src/components/toast/toast.tsx | 8 +- .../virtual-scroll/virtual-scroll.tsx | 6 +- core/src/utils/overlays-interface.ts | 2 +- core/src/utils/overlays.ts | 8 +- 53 files changed, 307 insertions(+), 442 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 59f11b47d5..380edbe505 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -79,7 +79,7 @@ export namespace Components { /** * Get the most recently opened action sheet overlay. */ - 'getTop': () => HTMLIonActionSheetElement; + 'getTop': () => Promise; } interface IonActionSheetControllerAttributes extends StencilHTMLAttributes {} @@ -123,11 +123,11 @@ export namespace Components { /** * Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; /** * Unique ID to be used with the overlay. Internal only */ @@ -228,7 +228,7 @@ export namespace Components { /** * Get the most recently opened alert overlay. */ - 'getTop': () => HTMLIonAlertElement; + 'getTop': () => Promise; } interface IonAlertControllerAttributes extends StencilHTMLAttributes {} @@ -281,11 +281,11 @@ export namespace Components { /** * Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; 'overlayId': number; /** * Present the alert overlay after it has been created. @@ -1123,11 +1123,11 @@ export namespace Components { * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. */ 'fullscreen': boolean; - 'getScrollElement': () => HTMLElement; + 'getScrollElement': () => Promise; /** * Scroll by a specified X/Y distance in the component */ - 'scrollByPoint': (x: number, y: number, duration: number) => Promise; + 'scrollByPoint': (x: number, y: number, duration: number) => Promise; /** * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. */ @@ -1996,12 +1996,10 @@ export namespace Components { interface IonItemOptions { 'fireSwipeEvent': () => void; - 'isEndSide': () => boolean; /** * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. */ 'side': Side; - 'width': () => number; } interface IonItemOptionsAttributes extends StencilHTMLAttributes { /** @@ -2018,11 +2016,11 @@ export namespace Components { /** * Close the sliding item. Items can also be closed from the [List](../../list/List). */ - 'close': () => void; + 'close': () => Promise; /** * Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). */ - 'closeOpened': () => boolean; + 'closeOpened': () => Promise; /** * If true, the user cannot interact with the sliding-item. Defaults to `false`. */ @@ -2030,11 +2028,11 @@ export namespace Components { /** * Get the amount the item is open in pixels. */ - 'getOpenAmount': () => number; + 'getOpenAmount': () => Promise; /** * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options. */ - 'getSlidingRatio': () => number; + 'getSlidingRatio': () => Promise; } interface IonItemSlidingAttributes extends StencilHTMLAttributes { /** @@ -2139,7 +2137,6 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ 'color': Color; - 'getText': () => string; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ @@ -2190,14 +2187,6 @@ export namespace Components { } interface IonList { - /** - * Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). Returns a boolean value of whether it closed an item or not. - */ - 'closeSlidingItems': () => boolean; - /** - * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. - */ - 'getOpenItem': () => HTMLIonItemSlidingElement | undefined; /** * If true, the list will have margin around it and rounded corners. Defaults to `false`. */ @@ -2206,10 +2195,6 @@ export namespace Components { * How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. */ 'lines': 'full' | 'inset' | 'none'; - /** - * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. - */ - 'setOpenItem': (itemSliding: HTMLIonItemSlidingElement | undefined) => void; } interface IonListAttributes extends StencilHTMLAttributes { /** @@ -2234,7 +2219,7 @@ export namespace Components { /** * Get the most recently opened loading overlay. */ - 'getTop': () => HTMLIonLoadingElement; + 'getTop': () => Promise; } interface IonLoadingControllerAttributes extends StencilHTMLAttributes {} @@ -2278,11 +2263,11 @@ export namespace Components { /** * Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; 'overlayId': number; /** * Present the loading overlay after it has been created. @@ -2423,31 +2408,31 @@ export namespace Components { /** * Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side. */ - 'enable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null; + 'enable': (shouldEnable: boolean, menuId?: string | undefined) => Promise; /** * Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `left` or `right`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. */ - 'get': (menuId?: string | undefined) => HTMLIonMenuElement | null; + 'get': (menuId?: string | undefined) => Promise; /** * Returns an array of all menu instances. */ - 'getMenus': () => HTMLIonMenuElement[]; + 'getMenus': () => Promise; /** * Returns the instance of the menu already opened, otherwise `null`. */ - 'getOpen': () => HTMLIonMenuElement | null; + 'getOpen': () => Promise; /** * Returns true if any menu is currently animating. */ - 'isAnimating': () => boolean; + 'isAnimating': () => Promise; /** * Returns true if the specified menu is enabled. */ - 'isEnabled': (menuId?: string | undefined) => boolean; + 'isEnabled': (menuId?: string | undefined) => Promise; /** * Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. */ - 'isOpen': (menuId?: string | undefined) => boolean; + 'isOpen': (menuId?: string | undefined) => Promise; /** * Open the menu. */ @@ -2456,7 +2441,7 @@ export namespace Components { /** * Used to enable or disable the ability to swipe open the menu. */ - 'swipeGesture': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null; + 'swipeGesture': (shouldEnable: boolean, menuId?: string | undefined) => Promise; /** * Toggle the menu. If it's closed, it will open, and if opened, it will close. */ @@ -2495,9 +2480,8 @@ export namespace Components { * If true, the menu is disabled. Default `false`. */ 'disabled': boolean; - 'getWidth': () => number; - 'isActive': () => boolean; - 'isOpen': () => boolean; + 'isActive': () => Promise; + 'isOpen': () => Promise; /** * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. */ @@ -2577,7 +2561,7 @@ export namespace Components { /** * Get the most recently opened modal overlay. */ - 'getTop': () => HTMLIonModalElement; + 'getTop': () => Promise; } interface IonModalControllerAttributes extends StencilHTMLAttributes {} @@ -2619,11 +2603,11 @@ export namespace Components { /** * Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; 'overlayId': number; /** * Present the modal overlay after it has been created. @@ -2749,22 +2733,21 @@ export namespace Components { /** * Returns true or false if the current view can go back */ - 'canGoBack': (view?: ViewController | undefined) => boolean; + 'canGoBack': (view?: ViewController | undefined) => Promise; 'delegate': FrameworkDelegate; /** * Gets the active view */ - 'getActive': () => ViewController | undefined; + 'getActive': () => Promise; /** * Returns the view at the index */ - 'getByIndex': (index: number) => ViewController | undefined; - 'getLength': () => number; + 'getByIndex': (index: number) => Promise; /** * Gets the previous view */ - 'getPrevious': (view?: ViewController | undefined) => ViewController | undefined; - 'getRouteId': () => RouteID | undefined; + 'getPrevious': (view?: ViewController | undefined) => Promise; + 'getRouteId': () => Promise; /** * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. */ @@ -2774,10 +2757,6 @@ export namespace Components { */ 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Returns the length of navigation stack - */ - 'isAnimating': () => boolean; - /** * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. */ 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; @@ -2882,7 +2861,7 @@ export namespace Components { interface IonPickerController { 'create': (opts: PickerOptions) => Promise; 'dismiss': (data?: any, role?: string | undefined, pickerId?: number | undefined) => Promise; - 'getTop': () => HTMLIonPickerElement; + 'getTop': () => Promise; } interface IonPickerControllerAttributes extends StencilHTMLAttributes {} @@ -2922,7 +2901,7 @@ export namespace Components { /** * Returns the column the matches the specified name */ - 'getColumn': (name: string) => PickerColumn | undefined; + 'getColumn': (name: string) => Promise; /** * If the keyboard should be able to close the picker. Defaults to true. */ @@ -2934,11 +2913,11 @@ export namespace Components { /** * Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; 'overlayId': number; /** * Present the picker overlay after it has been created. @@ -3029,7 +3008,7 @@ export namespace Components { /** * Get the most recently opened popover overlay. */ - 'getTop': () => HTMLIonPopoverElement; + 'getTop': () => Promise; } interface IonPopoverControllerAttributes extends StencilHTMLAttributes {} @@ -3083,11 +3062,11 @@ export namespace Components { /** * Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; 'overlayId': number; /** * Present the popover overlay after it has been created. @@ -3448,7 +3427,7 @@ export namespace Components { /** * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position. */ - 'getProgress': () => number; + 'getProgress': () => Promise; /** * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. */ @@ -3587,7 +3566,7 @@ export namespace Components { /** * Returns the ID for the current route */ - 'getRouteId': () => RouteID | undefined; + 'getRouteId': () => Promise; /** * Set the root component for the given navigation stack */ @@ -4130,35 +4109,35 @@ export namespace Components { /** * Get the index of the active slide. */ - 'getActiveIndex': () => number; + 'getActiveIndex': () => Promise; /** * Get the index of the previous slide. */ - 'getPreviousIndex': () => number; + 'getPreviousIndex': () => Promise; /** * Get whether or not the current slide is the first slide. */ - 'isBeginning': () => boolean; + 'isBeginning': () => Promise; /** * Get whether or not the current slide is the last slide. */ - 'isEnd': () => boolean; + 'isEnd': () => Promise; /** * Get the total number of slides. */ - 'length': () => number; + 'length': () => Promise; /** * Lock or unlock the ability to slide to the next slides. */ - 'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => any; + 'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => void; /** * Lock or unlock the ability to slide to the previous slides. */ - 'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => any; + 'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => void; /** * Lock or unlock the ability to slide to change slides. */ - 'lockSwipes': (shouldLockSwipes: boolean) => any; + 'lockSwipes': (shouldLockSwipes: boolean) => void; /** * Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options */ @@ -4317,11 +4296,6 @@ export namespace Components { * If true, the split pane will be hidden. Defaults to `false`. */ 'disabled': boolean; - 'isPane': (element: HTMLElement) => boolean; - /** - * Returns if the split pane is toggled or not - */ - 'isVisible': () => boolean; /** * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. */ @@ -4376,10 +4350,6 @@ export namespace Components { */ 'disabled': boolean; /** - * Get the Id for the tab - */ - 'getTabId': () => string | null; - /** * The URL which will be used as the `href` within this tab's button anchor. */ 'href': string; @@ -4545,15 +4515,15 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ 'color': Color; - 'getRouteId': () => RouteID | undefined; + 'getRouteId': () => Promise; /** * Get the currently selected tab */ - 'getSelected': () => HTMLIonTabElement | undefined; + 'getSelected': () => Promise; /** * Get the tab at the given index */ - 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined; + 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => Promise; /** * A unique name for the tabs. */ @@ -4858,7 +4828,7 @@ export namespace Components { /** * Get the most recently opened toast overlay. */ - 'getTop': () => HTMLIonToastElement; + 'getTop': () => Promise; } interface IonToastControllerAttributes extends StencilHTMLAttributes {} @@ -4899,16 +4869,16 @@ export namespace Components { /** * Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onDidDismiss': () => Promise>; /** * Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; + 'onWillDismiss': () => Promise>; 'overlayId': number; /** * The position of the toast on the screen. Possible values: "top", "middle", "bottom". */ - 'position': 'top' | 'bottom'; + 'position': 'top' | 'bottom' | 'middle'; /** * Present the toast overlay after it has been created. */ @@ -4980,7 +4950,7 @@ export namespace Components { /** * The position of the toast on the screen. Possible values: "top", "middle", "bottom". */ - 'position'?: 'top' | 'bottom'; + 'position'?: 'top' | 'bottom' | 'middle'; /** * If true, the close button will be displayed. Defaults to `false`. */ @@ -5105,7 +5075,7 @@ export namespace Components { 'markDirty': (offset: number, len?: number) => void; 'markDirtyTail': () => void; 'nodeRender': ItemRenderFn; - 'positionForItem': (index: number) => number; + 'positionForItem': (index: number) => Promise; 'renderFooter': (item: any, index: number) => any; 'renderHeader': (item: any, index: number) => any; 'renderItem': (item: any, index: number) => any; diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index 1142b94df4..84432fd798 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -30,7 +30,7 @@ export class ActionSheetController implements OverlayController { * Get the most recently opened action sheet overlay. */ @Method() - getTop(): HTMLIonActionSheetElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-action-sheet') as HTMLIonActionSheetElement; } } diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index b37d978fd8..26ead6b221 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -159,8 +159,8 @@ export class ActionSheet implements OverlayInterface { * */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionActionSheetDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionActionSheetDidDismiss'); } /** @@ -169,8 +169,8 @@ export class ActionSheet implements OverlayInterface { * */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionActionSheetWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionActionSheetWillDismiss'); } private buttonClick(button: ActionSheetButton) { diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index a89f2a80dd..8a7bce8d5c 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/core/src/components/alert-controller/alert-controller.tsx @@ -30,7 +30,7 @@ export class AlertController implements OverlayController { * Get the most recently opened alert overlay. */ @Method() - getTop(): HTMLIonAlertElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-alert') as HTMLIonAlertElement; } } diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index a9a43e9c8c..e9dd9c79c6 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -211,8 +211,8 @@ export class Alert implements OverlayInterface { * */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionAlertDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionAlertDidDismiss'); } /** @@ -221,8 +221,8 @@ export class Alert implements OverlayInterface { * */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionAlertWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionAlertWillDismiss'); } private rbClick(selectedInput: AlertInput) { diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index b600601605..ec52016036 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -48,11 +48,10 @@ export class BackButton { private async onClick(ev: Event) { const nav = this.el.closest('ion-nav'); + ev.preventDefault(); + if (nav && nav.canGoBack()) { - ev.preventDefault(); - if (!nav.isAnimating()) { - nav.pop(); - } + nav.pop({ skipIfBusy: true }); } else if (this.defaultHref) { openURL(this.win, this.defaultHref, ev, 'back'); } diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 5ecbb7f499..197857d0b1 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -157,8 +157,8 @@ export class Content { } @Method() - getScrollElement(): HTMLElement { - return this.scrollEl; + getScrollElement(): Promise { + return Promise.resolve(this.scrollEl); } /** @@ -182,7 +182,7 @@ export class Content { * Scroll by a specified X/Y distance in the component */ @Method() - scrollByPoint(x: number, y: number, duration: number): Promise { + scrollByPoint(x: number, y: number, duration: number): Promise { return this.scrollToPoint(x + this.scrollEl.scrollLeft, y + this.scrollEl.scrollTop, duration); } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 6d440c3b85..7e74d4b113 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -231,7 +231,7 @@ export class Datetime { const pickerOptions = this.generatePickerOptions(); this.picker = await this.pickerCtrl.create(pickerOptions); - this.validate(); + await this.validate(); if (this.picker) { await this.picker.present(); } @@ -344,11 +344,11 @@ export class Datetime { return divyColumns(columns); } - private validate() { + private async validate() { const today = new Date(); const minCompareVal = dateDataSortValue(this.datetimeMin); const maxCompareVal = dateDataSortValue(this.datetimeMax); - const yearCol = this.picker!.getColumn('year'); + const yearCol = await this.picker!.getColumn('year'); let selectedYear: number = today.getFullYear(); if (yearCol) { @@ -367,7 +367,7 @@ export class Datetime { } } - const selectedMonth = this.validateColumn( + const selectedMonth = await this.validateColumn( 'month', 1, minCompareVal, maxCompareVal, [selectedYear, 0, 0, 0, 0], @@ -375,21 +375,21 @@ export class Datetime { ); const numDaysInMonth = daysInMonth(selectedMonth, selectedYear); - const selectedDay = this.validateColumn( + const selectedDay = await this.validateColumn( 'day', 2, minCompareVal, maxCompareVal, [selectedYear, selectedMonth, 0, 0, 0], [selectedYear, selectedMonth, numDaysInMonth, 23, 59] ); - const selectedHour = this.validateColumn( + const selectedHour = await this.validateColumn( 'hour', 3, minCompareVal, maxCompareVal, [selectedYear, selectedMonth, selectedDay, 0, 0], [selectedYear, selectedMonth, selectedDay, 23, 59] ); - this.validateColumn( + await this.validateColumn( 'minute', 4, minCompareVal, maxCompareVal, [selectedYear, selectedMonth, selectedDay, selectedHour, 0], @@ -449,8 +449,8 @@ export class Datetime { } } - private validateColumn(name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): number { - const column = this.picker!.getColumn(name); + private async validateColumn(name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): Promise { + const column = await this.picker!.getColumn(name); if (!column) { return 0; } diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index beb245d61e..28731dc48f 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -77,7 +77,7 @@ export class InfiniteScroll { const contentEl = this.el.closest('ion-content'); if (contentEl) { await contentEl.componentOnReady(); - this.scrollEl = contentEl.getScrollElement(); + this.scrollEl = await contentEl.getScrollElement(); } this.thresholdChanged(this.threshold); this.enableScrollEvents(!this.disabled); diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index e0eb273a6e..f65e274e34 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -26,23 +26,13 @@ export class ItemOptions { */ @Event() ionSwipe!: EventEmitter; - @Method() - isEndSide() { - return isEndSide(this.win, this.side); - } - - @Method() - width(): number { - return this.el.offsetWidth; - } - @Method() fireSwipeEvent() { this.ionSwipe.emit(); } hostData() { - const isEnd = this.isEndSide(); + const isEnd = isEndSide(this.win, this.side); return { class: { 'item-options-start': !isEnd, diff --git a/core/src/components/item-options/readme.md b/core/src/components/item-options/readme.md index 47ba862e25..38dd1007bb 100644 --- a/core/src/components/item-options/readme.md +++ b/core/src/components/item-options/readme.md @@ -34,8 +34,6 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a | Method | Description | | ---------------- | ----------- | | `fireSwipeEvent` | | -| `isEndSide` | | -| `width` | | ---------------------------------------------- diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 0d8f5b7a08..2c92cb1633 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -22,6 +22,8 @@ const enum SlidingState { SwipeStart = 1 << 6, } +let openSlidingItem: HTMLIonItemSlidingElement | undefined; + @Component({ tag: 'ion-item-sliding', styleUrl: 'item-sliding.scss' @@ -29,7 +31,6 @@ const enum SlidingState { export class ItemSliding { private item: HTMLIonItemElement | null = null; - private list: HTMLIonListElement | null = null; private openAmount = 0; private initialOpenAmount = 0; private optsWidthRightSide = 0; @@ -43,7 +44,7 @@ export class ItemSliding { @Element() el!: HTMLIonItemSlidingElement; - @State() private state: SlidingState = SlidingState.Disabled; + @State() state: SlidingState = SlidingState.Disabled; @Prop({ context: 'queue' }) queue!: QueueApi; @@ -65,7 +66,6 @@ export class ItemSliding { async componentDidLoad() { this.item = this.el.querySelector('ion-item'); - this.list = this.el.closest('ion-list'); this.updateOptions(); @@ -88,7 +88,7 @@ export class ItemSliding { this.gesture.destroy(); } - this.item = this.list = null; + this.item = null; this.leftOptions = this.rightOptions = undefined; } @@ -96,8 +96,8 @@ export class ItemSliding { * Get the amount the item is open in pixels. */ @Method() - getOpenAmount(): number { - return this.openAmount; + getOpenAmount(): Promise { + return Promise.resolve(this.openAmount); } /** @@ -108,7 +108,7 @@ export class ItemSliding { * the width of the options. */ @Method() - getSlidingRatio(): number { + async getSlidingRatio(): Promise { if (this.openAmount > 0) { return this.openAmount / this.optsWidthRightSide; } else if (this.openAmount < 0) { @@ -122,7 +122,7 @@ export class ItemSliding { * Close the sliding item. Items can also be closed from the [List](../../list/List). */ @Method() - close() { + async close() { this.setOpenAmount(0, true); } @@ -130,8 +130,12 @@ export class ItemSliding { * Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). */ @Method() - closeOpened(): boolean { - return !!(this.list && this.list.closeSlidingItems()); + async closeOpened(): Promise { + if (openSlidingItem) { + openSlidingItem.close(); + return true; + } + return false; } private updateOptions() { @@ -145,7 +149,7 @@ export class ItemSliding { for (let i = 0; i < options.length; i++) { const option = options.item(i); - if (option.isEndSide()) { + if (option.side === 'end') { this.rightOptions = option; sides |= ItemSide.End; } else { @@ -158,8 +162,9 @@ export class ItemSliding { } private canStart(): boolean { - const selected = this.list && this.list.getOpenItem(); + const selected = openSlidingItem; if (selected && selected !== this.el) { + this.closeOpened(); return false; } @@ -167,9 +172,7 @@ export class ItemSliding { } private onStart() { - if (this.list) { - this.list.setOpenItem(this.el); - } + openSlidingItem = this.el; if (this.tmr) { clearTimeout(this.tmr); @@ -240,12 +243,12 @@ export class ItemSliding { private calculateOptsWidth() { this.optsWidthRightSide = 0; if (this.rightOptions) { - this.optsWidthRightSide = this.rightOptions.width(); + this.optsWidthRightSide = this.rightOptions.offsetWidth; } this.optsWidthLeftSide = 0; if (this.leftOptions) { - this.optsWidthLeftSide = this.leftOptions.width(); + this.optsWidthLeftSide = this.leftOptions.offsetWidth; } this.optsDirty = false; } @@ -278,9 +281,8 @@ export class ItemSliding { this.state = SlidingState.Disabled; this.tmr = undefined; }, 600); - if (this.list) { - this.list.setOpenItem(undefined); - } + + openSlidingItem = undefined; style.transform = ''; return; } diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 770f03a95f..084fc3e545 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core'; import { Color, Mode, StyleEvent } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -38,11 +38,6 @@ export class Label { */ @Event() ionStyle!: EventEmitter; - @Method() - getText(): string { - return this.el.textContent || ''; - } - componentDidLoad() { this.positionChanged(); } diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md index e754cc5935..0cf45f759e 100644 --- a/core/src/components/label/readme.md +++ b/core/src/components/label/readme.md @@ -22,13 +22,6 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion | `ionStyle` | Emitted when the styles change. | -## Methods - -| Method | Description | -| --------- | ----------- | -| `getText` | | - - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index 56232d20cc..cb31f3dbcb 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, Prop } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -11,8 +11,6 @@ import { createThemedClasses } from '../../utils/theme'; } }) export class List { - private openItem?: HTMLIonItemSlidingElement; - mode!: Mode; /** @@ -26,36 +24,6 @@ export class List { */ @Prop() inset = false; - /** - * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. - */ - @Method() - getOpenItem() { - return this.openItem; - } - - /** - * Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. - */ - @Method() - setOpenItem(itemSliding: HTMLIonItemSlidingElement | undefined) { - this.openItem = itemSliding; - } - - /** - * Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). - * Returns a boolean value of whether it closed an item or not. - */ - @Method() - closeSlidingItems(): boolean { - if (this.openItem) { - this.openItem.close(); - this.openItem = undefined; - return true; - } - return false; - } - hostData() { return { class: { diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md index cdab577ad5..e70d192145 100644 --- a/core/src/components/list/readme.md +++ b/core/src/components/list/readme.md @@ -17,15 +17,6 @@ Lists support several interactions including swiping items to reveal options, dr | `lines` | `lines` | How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. | `"full"`, `"inset"`, `"none"` | -## Methods - -| Method | Description | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `closeSlidingItems` | Close the sliding items. Items can also be closed from the [Item Sliding](../../item-sliding/ItemSliding). Returns a boolean value of whether it closed an item or not. | -| `getOpenItem` | Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently open. | -| `setOpenItem` | Set an [Item Sliding](../../item-sliding/ItemSliding) as the open item. | - - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx index ccb15f7502..0316c6b4df 100644 --- a/core/src/components/loading-controller/loading-controller.tsx +++ b/core/src/components/loading-controller/loading-controller.tsx @@ -30,7 +30,7 @@ export class LoadingController implements OverlayController { * Get the most recently opened loading overlay. */ @Method() - getTop(): HTMLIonLoadingElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-loading') as HTMLIonLoadingElement; } } diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index eceb958dc5..f03891560c 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -165,8 +165,8 @@ export class Loading implements OverlayInterface { * that is called in the same circumstances. */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionLoadingDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionLoadingDidDismiss'); } /** @@ -174,8 +174,8 @@ export class Loading implements OverlayInterface { * that is called in the same circumstances. */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionLoadingWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionLoadingWillDismiss'); } hostData() { diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts index 5542d6f4ae..17cbdc80f5 100644 --- a/core/src/components/menu-controller/menu-controller.ts +++ b/core/src/components/menu-controller/menu-controller.ts @@ -26,12 +26,12 @@ export class MenuController { * Open the menu. */ @Method() - open(menuId?: string): Promise { - const menu = this.get(menuId); + async open(menuId?: string): Promise { + const menu = await this.get(menuId); if (menu) { return menu.open(); } - return Promise.resolve(false); + return false; } /** @@ -39,12 +39,12 @@ export class MenuController { * that is open. If a menu is specified, it will close that menu. */ @Method() - close(menuId?: string): Promise { - const menu = menuId ? this.get(menuId) : this.getOpen(); + async close(menuId?: string): Promise { + const menu = await (menuId ? this.get(menuId) : this.getOpen()); if (menu) { return menu.close(); } - return Promise.resolve(false); + return false; } /** @@ -52,12 +52,12 @@ export class MenuController { * will close. */ @Method() - toggle(menuId?: string): Promise { - const menu = this.get(menuId); + async toggle(menuId?: string): Promise { + const menu = await this.get(menuId); if (menu) { return menu.toggle(); } - return Promise.resolve(false); + return false; } /** @@ -67,8 +67,8 @@ export class MenuController { * will also automatically disable all the others that are on the same side. */ @Method() - enable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null { - const menu = this.get(menuId); + async enable(shouldEnable: boolean, menuId?: string): Promise { + const menu = await this.get(menuId); if (menu) { menu.disabled = !shouldEnable; } @@ -79,8 +79,8 @@ export class MenuController { * Used to enable or disable the ability to swipe open the menu. */ @Method() - swipeGesture(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null { - const menu = this.get(menuId); + async swipeGesture(shouldEnable: boolean, menuId?: string): Promise { + const menu = await this.get(menuId); if (menu) { menu.swipeGesture = shouldEnable; } @@ -92,9 +92,9 @@ export class MenuController { * will return true if any menu is currently open. */ @Method() - isOpen(menuId?: string): boolean { + async isOpen(menuId?: string): Promise { if (menuId) { - const menu = this.get(menuId); + const menu = await this.get(menuId); return (menu && menu.isOpen()) || false; } return !!this.getOpen(); @@ -104,8 +104,8 @@ export class MenuController { * Returns true if the specified menu is enabled. */ @Method() - isEnabled(menuId?: string): boolean { - const menu = this.get(menuId); + async isEnabled(menuId?: string): Promise { + const menu = await this.get(menuId); if (menu) { return !menu.disabled; } @@ -120,7 +120,7 @@ export class MenuController { * return `null`. */ @Method() - get(menuId?: string): HTMLIonMenuElement | null { + async get(menuId?: string): Promise { if (Build.isDev) { if (menuId === 'left') { console.error('menu.side=left is deprecated, use "start" instead'); @@ -162,15 +162,15 @@ export class MenuController { * Returns the instance of the menu already opened, otherwise `null`. */ @Method() - getOpen(): HTMLIonMenuElement | null { - return this.find(m => m.isOpen()); + async getOpen(): Promise { + return this.find(m => m._isOpen); } /** * Returns an array of all menu instances. */ @Method() - getMenus(): HTMLIonMenuElement[] { + async getMenus(): Promise { return this.menus.map(menu => menu.el); } @@ -178,7 +178,7 @@ export class MenuController { * Returns true if any menu is currently animating. */ @Method() - isAnimating(): boolean { + async isAnimating(): Promise { return this.menus.some(menu => menu.isAnimating); } @@ -209,12 +209,12 @@ export class MenuController { } @Method() - _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise { + async _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise { if (this.isAnimating()) { - return Promise.resolve(false); + return false; } if (shouldOpen) { - const openedMenu = this.getOpen(); + const openedMenu = await this.getOpen(); if (openedMenu && menu.el !== openedMenu) { openedMenu.setOpen(false, false); } diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index fc317e5c85..7b5b798600 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -37,8 +37,8 @@ export class MenuToggle { async onClick() { const menuCtrl = await getMenuController(this.doc); if (menuCtrl) { - const menu = menuCtrl.get(this.menu); - if (menu && menu.isActive()) { + const menu = await menuCtrl.get(this.menu); + if (menu) { return menuCtrl.toggle(this.menu); } } @@ -50,8 +50,8 @@ export class MenuToggle { async updateVisibility() { const menuCtrl = await getMenuController(this.doc); if (menuCtrl) { - const menu = menuCtrl.get(this.menu); - if (menu && menu.isActive()) { + const menu = await menuCtrl.get(this.menu); + if (menu && await menu.isActive()) { this.visible = true; return; } diff --git a/core/src/components/menu/menu-interface.ts b/core/src/components/menu/menu-interface.ts index 4fe4a9f9c6..9f711c9ac2 100644 --- a/core/src/components/menu/menu-interface.ts +++ b/core/src/components/menu/menu-interface.ts @@ -9,20 +9,19 @@ export interface MenuI { isAnimating: boolean; width: number; isEndSide: boolean; + _isOpen: boolean; backdropEl?: HTMLElement; menuInnerEl?: HTMLElement; contentEl?: HTMLElement; menuCtrl?: HTMLIonMenuControllerElement; - isOpen(): boolean; + isActive(): Promise; open(animated?: boolean): Promise; close(animated?: boolean): Promise; toggle(animated?: boolean): Promise; setOpen(shouldOpen: boolean, animated?: boolean): Promise; _setOpen(shouldOpen: boolean, animated?: boolean): Promise; - isActive(): boolean; - getWidth(): number; } export interface MenuChangeEvent { diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index fba529b791..37d23a95ba 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -14,7 +14,6 @@ import { assert, isEndSide as isEnd } from '../../utils/helpers'; export class Menu implements MenuI { private animation?: Animation; - private _isOpen = false; private lastOnEnd = 0; private gesture?: Gesture; @@ -22,6 +21,7 @@ export class Menu implements MenuI { isAnimating = false; width!: number; // TODO + _isOpen = false; backdropEl?: HTMLElement; menuInnerEl?: HTMLElement; @@ -165,7 +165,7 @@ export class Menu implements MenuI { let isEnabled = !this.disabled; if (isEnabled === true || typeof isEnabled === 'undefined') { - const menus = this.menuCtrl!.getMenus(); + const menus = await this.menuCtrl!.getMenus(); isEnabled = !menus.some((m: any) => { return m.side === this.side && !m.disabled; }); @@ -208,7 +208,7 @@ export class Menu implements MenuI { @Listen('body:ionSplitPaneVisible') onSplitPaneChanged(ev: CustomEvent) { - this.isPaneVisible = (ev.target as HTMLIonSplitPaneElement).isPane(this.el); + this.isPaneVisible = ev.detail.isPane(this.el); this.updateState(); } @@ -228,8 +228,13 @@ export class Menu implements MenuI { } @Method() - isOpen(): boolean { - return this._isOpen; + isOpen(): Promise { + return Promise.resolve(this._isOpen); + } + + @Method() + isActive(): Promise { + return Promise.resolve(this._isActive()); } @Method() @@ -254,7 +259,7 @@ export class Menu implements MenuI { async _setOpen(shouldOpen: boolean, animated = true): Promise { // If the menu is disabled or it is currently being animated, let's do nothing - if (!this.isActive() || this.isAnimating || shouldOpen === this._isOpen) { + if (!this._isActive() || this.isAnimating || shouldOpen === this._isOpen) { return this._isOpen; } @@ -266,16 +271,6 @@ export class Menu implements MenuI { return shouldOpen; } - @Method() - isActive(): boolean { - return !this.disabled && !this.isPaneVisible; - } - - @Method() - getWidth(): number { - return this.width; - } - private async loadAnimation(): Promise { // Menu swipe animation takes the menu's inner width as parameter, // If `offsetWidth` changes, we need to create a new animation. @@ -303,8 +298,12 @@ export class Menu implements MenuI { } } + private _isActive() { + return !this.disabled && !this.isPaneVisible; + } + private canSwipe(): boolean { - return this.swipeGesture && !this.isAnimating && this.isActive(); + return this.swipeGesture && !this.isAnimating && this._isActive(); } private canStart(detail: GestureDetail): boolean { @@ -442,7 +441,7 @@ export class Menu implements MenuI { } private updateState() { - const isActive = this.isActive(); + const isActive = this._isActive(); if (this.gesture) { this.gesture.setDisabled(!isActive || !this.swipeGesture); } diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 3d3f97f617..4c89bcc679 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -38,7 +38,6 @@ These can be controlled from the templates, or programmatically using the MenuCo | Method | Description | | ---------- | ----------- | | `close` | | -| `getWidth` | | | `isActive` | | | `isOpen` | | | `open` | | diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index 77936477e2..955d304308 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/core/src/components/modal-controller/modal-controller.tsx @@ -30,7 +30,7 @@ export class ModalController implements OverlayController { * Get the most recently opened modal overlay. */ @Method() - getTop(): HTMLIonModalElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-modal') as HTMLIonModalElement; } } diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 5b6f755e56..1d1dec7b38 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -180,8 +180,8 @@ export class Modal implements OverlayInterface { * */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionModalDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionModalDidDismiss'); } /** @@ -190,8 +190,8 @@ export class Modal implements OverlayInterface { * */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionModalWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionModalWillDismiss'); } hostData() { diff --git a/core/src/components/nav-pop/nav-pop.tsx b/core/src/components/nav-pop/nav-pop.tsx index 56b24d5d58..70abf79d38 100644 --- a/core/src/components/nav-pop/nav-pop.tsx +++ b/core/src/components/nav-pop/nav-pop.tsx @@ -8,12 +8,11 @@ export class NavPop { @Element() el!: HTMLElement; @Listen('child:click') - pop(): Promise { + pop() { const nav = this.el.closest('ion-nav'); - if (nav && !nav.isAnimating()) { - return nav.pop(); + if (nav) { + nav.pop({ skipIfBusy: true }); } - return Promise.resolve(null); } } diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx index 989253a563..66be023b22 100644 --- a/core/src/components/nav-push/nav-push.tsx +++ b/core/src/components/nav-push/nav-push.tsx @@ -19,12 +19,11 @@ export class NavPush { @Prop() componentProps?: ComponentProps; @Listen('child:click') - push(): Promise { + push() { const nav = this.el.closest('ion-nav'); const toPush = this.component; - if (nav && toPush && !nav.isAnimating()) { - return nav.push(toPush, this.componentProps); + if (nav && toPush) { + nav.push(toPush, this.componentProps, { skipIfBusy: true }); } - return Promise.resolve(null); } } diff --git a/core/src/components/nav-set-root/nav-set-root.tsx b/core/src/components/nav-set-root/nav-set-root.tsx index ca50c43df4..96413276f9 100644 --- a/core/src/components/nav-set-root/nav-set-root.tsx +++ b/core/src/components/nav-set-root/nav-set-root.tsx @@ -20,12 +20,11 @@ export class NavSetRoot { @Prop() componentProps?: ComponentProps; @Listen('child:click') - push(): Promise { + push() { const nav = this.el.closest('ion-nav'); const toPush = this.component; if (nav && toPush) { - return nav.setRoot(toPush, this.componentProps); + nav.setRoot(toPush, this.componentProps, { skipIfBusy: true }); } - return Promise.resolve(null); } } diff --git a/core/src/components/nav/nav-interface.ts b/core/src/components/nav/nav-interface.ts index cf8bd8a256..deabcf48ac 100644 --- a/core/src/components/nav/nav-interface.ts +++ b/core/src/components/nav/nav-interface.ts @@ -22,6 +22,7 @@ export interface RouterOutletOptions { deepWait?: boolean; mode?: Mode; keyboardClose?: boolean; + skipIfBusy?: boolean; } export interface NavOptions extends RouterOutletOptions { diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 9b5c2bc2eb..6896e1b4f7 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -330,7 +330,7 @@ export class Nav implements NavOutlet { params: any, direction: number ): Promise { - const active = this.getActive(); + const active = this.getActiveSync(); if (matches(active, id, params)) { return Promise.resolve({ changed: false, @@ -383,8 +383,8 @@ export class Nav implements NavOutlet { /** @hidden */ @Method() - getRouteId(): RouteID | undefined { - const active = this.getActive(); + async getRouteId(): Promise { + const active = this.getActiveSync(); return active ? { id: active.element!.tagName, @@ -394,35 +394,51 @@ export class Nav implements NavOutlet { : undefined; } - /** - * Returns true or false if the current view can go back - */ - @Method() - canGoBack(view = this.getActive()): boolean { - return !!(view && this.getPrevious(view)); - } - /** * Gets the active view */ @Method() - getActive(): ViewController | undefined { - return this.views[this.views.length - 1]; + getActive(): Promise { + return Promise.resolve(this.getActiveSync()); } /** * Returns the view at the index */ @Method() - getByIndex(index: number): ViewController | undefined { - return this.views[index]; + getByIndex(index: number): Promise { + return Promise.resolve(this.views[index]); + } + + /** + * Returns true or false if the current view can go back + */ + @Method() + canGoBack(view?: ViewController): Promise { + return Promise.resolve(this.canGoBackSync(view)); } /** * Gets the previous view */ @Method() - getPrevious(view = this.getActive()): ViewController | undefined { + getPrevious(view?: ViewController): Promise { + return Promise.resolve(this.getPreviousSync(view)); + } + + getLength() { + return this.views.length; + } + + private getActiveSync(): ViewController | undefined { + return this.views[this.views.length - 1]; + } + + private canGoBackSync(view = this.getActiveSync()): boolean { + return !!(view && this.getPrevious(view)); + } + + private getPreviousSync(view = this.getActiveSync()): ViewController | undefined { if (!view) { return undefined; } @@ -431,19 +447,6 @@ export class Nav implements NavOutlet { return index > 0 ? views[index - 1] : undefined; } - /** - * Returns the length of navigation stack - */ - @Method() - isAnimating() { - return this.isTransitioning; - } - - @Method() - getLength() { - return this.views.length; - } - // _queueTrns() adds a navigation stack change to the queue and schedules it to run: // 1. _nextTrns(): consumes the next transition in the queue // 2. _viewInit(): initializes enteringView if required @@ -458,6 +461,10 @@ export class Nav implements NavOutlet { ti: TransitionInstruction, done: TransitionDoneFn | undefined ): Promise { + if (this.isTransitioning && ti.opts && ti.opts.skipIfBusy === true) { + return Promise.resolve(false); + } + const promise = new Promise((resolve, reject) => { ti.resolve = resolve; ti.reject = reject; @@ -551,7 +558,7 @@ export class Nav implements NavOutlet { this.isTransitioning = true; this.prepareTI(ti); - const leavingView = this.getActive(); + const leavingView = this.getActiveSync(); const enteringView = this.getEnteringView(ti, leavingView); if (!leavingView && !enteringView) { @@ -784,7 +791,7 @@ export class Nav implements NavOutlet { const animated = this.animated && this.config.getBoolean('animated', true); const animationOpts: TransitionOptions = { mode: this.mode, - showGoBack: this.canGoBack(enteringView), + showGoBack: this.canGoBackSync(enteringView), animationCtrl: this.animationCtrl, queue: this.queue, window: this.win, @@ -891,7 +898,7 @@ export class Nav implements NavOutlet { private canStart(): boolean { return !!this.swipeGesture && !this.isTransitioning && - this.canGoBack(); + this.canGoBackSync(); } private onStart() { diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index 570d5a0fed..fe5c06f59e 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -34,12 +34,10 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we | `canGoBack` | Returns true or false if the current view can go back | | `getActive` | Gets the active view | | `getByIndex` | Returns the view at the index | -| `getLength` | | | `getPrevious` | Gets the previous view | | `getRouteId` | | | `insert` | Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. | | `insertPages` | Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. | -| `isAnimating` | Returns the length of navigation stack | | `pop` | Call to navigate back from a current component. Similar to push(), you can also pass navigation options. | | `popTo` | Pop to a specific index in the navigation stack | | `popToRoot` | Navigate back to the root of the stack, no matter how far back that is. | diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx index 93ce633e74..c5a3b4569b 100644 --- a/core/src/components/picker-controller/picker-controller.tsx +++ b/core/src/components/picker-controller/picker-controller.tsx @@ -31,7 +31,7 @@ export class PickerController implements OverlayController { * Get the most recently opened picker overlay. */ @Method() - getTop(): HTMLIonPickerElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-picker') as HTMLIonPickerElement; } } diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index bdd5a18d1d..db84ed7c34 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface'; import { dismiss, eventMethod, present } from '../../utils/overlays'; @@ -23,9 +23,6 @@ export class Picker implements OverlayInterface { @Element() el!: HTMLElement; - @State() private showSpinner!: boolean; - @State() private spinner!: string; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; @@ -113,16 +110,6 @@ export class Picker implements OverlayInterface { */ @Event() ionPickerDidUnload!: EventEmitter; - componentWillLoad() { - if (!this.spinner) { - const defaultSpinner = this.mode === 'ios' ? 'lines' : 'crescent'; - this.spinner = this.config.get('pickerSpinner', defaultSpinner); - } - if (this.showSpinner === undefined) { - this.showSpinner = !!(this.spinner && this.spinner !== 'hide'); - } - } - componentDidLoad() { this.ionPickerDidLoad.emit(); } @@ -183,10 +170,8 @@ export class Picker implements OverlayInterface { * */ @Method() - onDidDismiss( - callback?: (detail: OverlayEventDetail) => void - ): Promise { - return eventMethod(this.el, 'ionPickerDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionPickerDidDismiss'); } /** @@ -195,18 +180,16 @@ export class Picker implements OverlayInterface { * */ @Method() - onWillDismiss( - callback?: (detail: OverlayEventDetail) => void - ): Promise { - return eventMethod(this.el, 'ionPickerWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionPickerWillDismiss'); } /** * Returns the column the matches the specified name */ @Method() - getColumn(name: string): PickerColumn | undefined { - return this.columns.find(column => column.name === name); + getColumn(name: string): Promise { + return Promise.resolve(this.columns.find(column => column.name === name)); } private buttonClick(button: PickerButton) { diff --git a/core/src/components/popover-controller/popover-controller.tsx b/core/src/components/popover-controller/popover-controller.tsx index 0256fe0aad..1aec85aec4 100644 --- a/core/src/components/popover-controller/popover-controller.tsx +++ b/core/src/components/popover-controller/popover-controller.tsx @@ -30,7 +30,7 @@ export class PopoverController implements OverlayController { * Get the most recently opened popover overlay. */ @Method() - getTop(): HTMLIonPopoverElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-popover') as HTMLIonPopoverElement; } } diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index fc65cbef5c..bc4baad0d8 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -201,8 +201,8 @@ export class Popover implements OverlayInterface { * */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionPopoverDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionPopoverDidDismiss'); } /** @@ -211,8 +211,8 @@ export class Popover implements OverlayInterface { * */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionPopoverWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionPopoverWillDismiss'); } hostData() { diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 494b49306a..af7611473c 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -97,7 +97,7 @@ export class Refresher { const contentEl = this.el.closest('ion-content'); if (contentEl) { await contentEl.componentOnReady(); - this.scrollEl = contentEl.getScrollElement(); + this.scrollEl = await contentEl.getScrollElement(); } else { console.error('ion-refresher did not attach, make sure the parent is an ion-content.'); } @@ -156,7 +156,7 @@ export class Refresher { */ @Method() getProgress() { - return this.progress; + return Promise.resolve(this.progress); } private canStart(): boolean { diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index 3400309c27..f48989fe53 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -45,7 +45,7 @@ export class ReorderGroup { const contentEl = this.el.closest('ion-content'); if (contentEl) { await contentEl.componentOnReady(); - this.scrollEl = contentEl.getScrollElement(); + this.scrollEl = await contentEl.getScrollElement(); } this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index 89e0fbc7cd..d9a1e0c701 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -92,7 +92,7 @@ export class RouterOutlet implements NavOutlet { /** Returns the ID for the current route */ @Method() - getRouteId(): RouteID | undefined { + async getRouteId(): Promise { const active = this.activeEl; return active ? { id: active.tagName, diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index 35c18738b1..3c7fa7794b 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -107,7 +107,7 @@ export class Router { console.warn('[ion-router] router is busy, navChanged was cancelled'); return false; } - const { ids, outlet } = readNavState(this.win.document.body); + const { ids, outlet } = await readNavState(this.win.document.body); const routes = readRoutes(this.el); const chain = routerIDsToChain(ids, routes); if (!chain) { diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts index 6028f6b946..88621bebc0 100644 --- a/core/src/components/router/utils/dom.ts +++ b/core/src/components/router/utils/dom.ts @@ -44,7 +44,7 @@ export async function writeNavState( } } -export function readNavState(root: HTMLElement | undefined) { +export async function readNavState(root: HTMLElement | undefined) { const ids: RouteID[] = []; let outlet: NavOutletElement | undefined; let node: HTMLElement | undefined = root; @@ -52,7 +52,7 @@ export function readNavState(root: HTMLElement | undefined) { while (true) { outlet = searchNavNode(node); if (outlet) { - const id = outlet.getRouteId(); + const id = await outlet.getRouteId(); if (id) { node = id.element; id.element = undefined; diff --git a/core/src/components/router/utils/interface.ts b/core/src/components/router/utils/interface.ts index dd520aacf3..1885ba233c 100644 --- a/core/src/components/router/utils/interface.ts +++ b/core/src/components/router/utils/interface.ts @@ -1,7 +1,7 @@ export interface NavOutlet { setRouteId(id: string, data: any, direction: number): Promise; - getRouteId(): RouteID | undefined; + getRouteId(): Promise; } export interface RouterEventDetail { diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index d5c2f75043..f56b30ab76 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -177,24 +177,24 @@ export class Slides { * Get the index of the active slide. */ @Method() - getActiveIndex(): number { - return this.swiper.activeIndex; + getActiveIndex(): Promise { + return Promise.resolve(this.swiper.activeIndex); } /** * Get the index of the previous slide. */ @Method() - getPreviousIndex(): number { - return this.swiper.previousIndex; + getPreviousIndex(): Promise { + return Promise.resolve(this.swiper.previousIndex); } /** * Get the total number of slides. */ @Method() - length(): number { - return this.swiper.slides.length; + length(): Promise { + return Promise.resolve(this.swiper.slides.length); } /** @@ -202,23 +202,25 @@ export class Slides { * */ @Method() - isEnd(): boolean { - return this.swiper.isEnd; + isEnd(): Promise { + return Promise.resolve(this.swiper.isEnd); } /** * Get whether or not the current slide is the first slide. */ @Method() - isBeginning(): boolean { - return this.swiper.isBeginning; + isBeginning(): Promise { + return Promise.resolve(this.swiper.isBeginning); } /** * Start auto play. */ @Method() - startAutoplay(): void { + startAutoplay() + + { this.swiper.autoplay.start(); } @@ -226,7 +228,7 @@ export class Slides { * Stop auto play. */ @Method() - stopAutoplay(): void { + stopAutoplay() { this.swiper.autoplay.stop(); } @@ -236,9 +238,10 @@ export class Slides { @Method() lockSwipeToNext(shouldLockSwipeToNext: boolean) { if (shouldLockSwipeToNext) { - return this.swiper.lockSwipeToNext(); + this.swiper.lockSwipeToNext(); + } else { + this.swiper.unlockSwipeToNext(); } - this.swiper.unlockSwipeToNext(); } /** @@ -247,9 +250,10 @@ export class Slides { @Method() lockSwipeToPrev(shouldLockSwipeToPrev: boolean) { if (shouldLockSwipeToPrev) { - return this.swiper.lockSwipeToPrev(); + this.swiper.lockSwipeToPrev(); + } else { + this.swiper.unlockSwipeToPrev(); } - this.swiper.unlockSwipeToPrev(); } /** @@ -258,9 +262,10 @@ export class Slides { @Method() lockSwipes(shouldLockSwipes: boolean) { if (shouldLockSwipes) { - return this.swiper.lockSwipes(); + this.swiper.lockSwipes(); + } else { + this.swiper.unlockSwipes(); } - this.swiper.unlockSwipes(); } private normalizeOptions() { diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md index 7480d58007..1278c3cc01 100644 --- a/core/src/components/split-pane/readme.md +++ b/core/src/components/split-pane/readme.md @@ -56,14 +56,6 @@ SplitPane also provides some predefined media queries that can be used. | `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | -## Methods - -| Method | Description | -| ----------- | ------------------------------------------- | -| `isPane` | | -| `isVisible` | Returns if the split pane is toggled or not | - - ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index 6e77c65222..047200a3a9 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -48,22 +48,22 @@ export class SplitPane { /** * Emitted when the split pane is visible. */ - @Event() ionChange!: EventEmitter<{visible: boolean}>; + @Event({ bubbles: false }) ionChange!: EventEmitter<{visible: boolean}>; /** * Expression to be called when the split-pane visibility has changed */ - @Event() protected ionSplitPaneVisible!: EventEmitter; + @Event() ionSplitPaneVisible!: EventEmitter; @Watch('visible') visibleChanged(visible: boolean) { - const detail = { visible }; + const detail = { visible, isPane: this.isPane.bind(this) }; this.ionChange.emit(detail); this.ionSplitPaneVisible.emit(detail); } componentDidLoad() { - this._styleChildren(); + this.styleChildren(); this.updateState(); } @@ -118,15 +118,7 @@ export class SplitPane { this.visible = mediaList.matches; } - /** Returns if the split pane is toggled or not */ - @Method() - isVisible(): boolean { - return this.visible; - } - - /** @hidden */ - @Method() - isPane(element: HTMLElement): boolean { + private isPane(element: HTMLElement): boolean { if (!this.visible) { return false; } @@ -134,7 +126,7 @@ export class SplitPane { && element.classList.contains(SPLIT_PANE_SIDE); } - private _styleChildren() { + private styleChildren() { if (this.isServer) { return; } @@ -166,7 +158,6 @@ export class SplitPane { } }; } - } function setPaneClass(el: HTMLElement, isMain: boolean) { diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md index d0ba20fe3e..8f9bcbccfc 100644 --- a/core/src/components/tab/readme.md +++ b/core/src/components/tab/readme.md @@ -42,7 +42,6 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs. | Method | Description | | ----------- | ------------------------------------ | -| `getTabId` | Get the Id for the tab | | `setActive` | Set the active component for the tab | diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index c2671be578..6ca602f436 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -97,6 +97,11 @@ export class Tab { @Event() ionTabMutated!: EventEmitter; componentWillLoad() { + // Set default name + if (!this.name && typeof this.component === 'string') { + this.name = this.component; + } + if (Build.isDev) { if (this.component && this.el.childElementCount > 0) { console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' + @@ -118,18 +123,6 @@ export class Tab { this.ionTabMutated.emit(); } - /** Get the Id for the tab */ - @Method() - getTabId(): string | null { - if (this.name) { - return this.name; - } - if (typeof this.component === 'string') { - return this.component; - } - return null; - } - /** Set the active component for the tab */ @Method() async setActive(): Promise { diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index 2284ab059e..e31fe9833b 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -102,8 +102,8 @@ export class Tabs implements NavOutlet { this.ionNavWillLoad.emit(); } - async componentDidLoad() { - await this.initSelect(); + componentDidLoad() { + this.initSelect(); } componentDidUnload() { @@ -134,7 +134,7 @@ export class Tabs implements NavOutlet { */ @Method() async select(tabOrIndex: number | HTMLIonTabElement): Promise { - const selectedTab = this.getTab(tabOrIndex); + const selectedTab = await this.getTab(tabOrIndex); if (!this.shouldSwitch(selectedTab)) { return false; } @@ -148,7 +148,7 @@ export class Tabs implements NavOutlet { /** @hidden */ @Method() async setRouteId(id: string): Promise { - const selectedTab = this.getTab(id); + const selectedTab = await this.getTab(id); if (!this.shouldSwitch(selectedTab)) { return { changed: false, element: this.selectedTab }; } @@ -163,16 +163,16 @@ export class Tabs implements NavOutlet { /** @hidden */ @Method() - getRouteId(): RouteID | undefined { - const id = this.selectedTab && this.selectedTab.getTabId(); + async getRouteId(): Promise { + const id = this.selectedTab && this.selectedTab.name; return id ? { id, element: this.selectedTab } : undefined; } /** Get the tab at the given index */ @Method() - getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement | undefined { + async getTab(tabOrIndex: string | number | HTMLIonTabElement): Promise { if (typeof tabOrIndex === 'string') { - return this.tabs.find(tab => tab.getTabId() === tabOrIndex); + return this.tabs.find(tab => tab.name === tabOrIndex); } if (typeof tabOrIndex === 'number') { return this.tabs[tabOrIndex]; @@ -184,8 +184,8 @@ export class Tabs implements NavOutlet { * Get the currently selected tab */ @Method() - getSelected(): HTMLIonTabElement | undefined { - return this.selectedTab; + getSelected(): Promise { + return Promise.resolve(this.selectedTab); } private initTabs() { diff --git a/core/src/components/toast-controller/toast-controller.tsx b/core/src/components/toast-controller/toast-controller.tsx index b8c8fdd63c..47c94db406 100644 --- a/core/src/components/toast-controller/toast-controller.tsx +++ b/core/src/components/toast-controller/toast-controller.tsx @@ -30,7 +30,7 @@ export class ToastController implements OverlayController { * Get the most recently opened toast overlay. */ @Method() - getTop(): HTMLIonToastElement { + async getTop(): Promise { return getOverlay(this.doc, 'ion-toast') as HTMLIonToastElement; } } diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index c1af725995..e523504a8a 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -20,20 +20,20 @@ The toast can be dismissed automatically after a specific amount of time by pass ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------- | -| `animated` | `animated` | If true, the toast will animate. Defaults to `true`. | `boolean` | -| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | -| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | -| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | | `boolean` | -| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` | -| `message` | `message` | Message to be shown in the toast. | `string` | -| `overlayId` | `overlay-id` | | `number` | -| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"top"`, `"bottom"` | -| `showCloseButton` | `show-close-button` | If true, the close button will be displayed. Defaults to `false`. | `boolean` | -| `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | +| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------- | +| `animated` | `animated` | If true, the toast will animate. Defaults to `true`. | `boolean` | +| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | +| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder` | +| `keyboardClose` | `keyboard-close` | | `boolean` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` | +| `message` | `message` | Message to be shown in the toast. | `string` | +| `overlayId` | `overlay-id` | | `number` | +| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"top"`, `"bottom"`, `"middle"` | +| `showCloseButton` | `show-close-button` | If true, the close button will be displayed. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 8715979dc2..c902416e85 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -163,8 +163,8 @@ export class Toast implements OverlayInterface { * */ @Method() - onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionToastDidDismiss', callback); + onDidDismiss(): Promise { + return eventMethod(this.el, 'ionToastDidDismiss'); } /** @@ -173,8 +173,8 @@ export class Toast implements OverlayInterface { * */ @Method() - onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise { - return eventMethod(this.el, 'ionToastWillDismiss', callback); + onWillDismiss(): Promise { + return eventMethod(this.el, 'ionToastWillDismiss'); } hostData() { diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index 82c60ac3a4..b7559dd151 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -124,7 +124,7 @@ export class VirtualScroll { await contentEl.componentOnReady(); this.contentEl = contentEl; - this.scrollEl = contentEl.getScrollElement(); + this.scrollEl = await contentEl.getScrollElement(); this.calcCells(); this.updateState(); } @@ -148,8 +148,8 @@ export class VirtualScroll { } @Method() - positionForItem(index: number): number { - return positionForIndex(index, this.cells, this.getHeightIndex()); + positionForItem(index: number): Promise { + return Promise.resolve(positionForIndex(index, this.cells, this.getHeightIndex())); } @Method() diff --git a/core/src/utils/overlays-interface.ts b/core/src/utils/overlays-interface.ts index 1d6cca8bb6..5491a50159 100644 --- a/core/src/utils/overlays-interface.ts +++ b/core/src/utils/overlays-interface.ts @@ -33,7 +33,7 @@ export interface OverlayInterface { export interface OverlayController { create(opts?: any): Promise; dismiss(data?: any, role?: string, alertId?: number): Promise; - getTop(): HTMLElement; + getTop(): Promise; } export interface HTMLIonOverlayElement extends HTMLStencilElement { diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 5099af6ce4..e3b610ed1f 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -162,15 +162,11 @@ export function autoFocus(containerEl: HTMLElement): HTMLElement | null { return null; } -export function eventMethod(element: HTMLElement, eventName: string, callback?: (detail: T) => void): Promise { +export function eventMethod(element: HTMLElement, eventName: string): Promise { let resolve: (detail: T) => void; const promise = new Promise(r => resolve = r); onceEvent(element, eventName, (event: any) => { - const detail = event.detail; - if (callback) { - callback(detail); - } - resolve(detail); + resolve(event.detail); }); return promise; }