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

refactor(all): make all method return a promise

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-28 18:16:10 +02:00
parent 5d32115684
commit 1d46973785
53 changed files with 307 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
core/src/components.d.ts vendored
View File

@ -79,7 +79,7 @@ export namespace Components {
/** /**
* Get the most recently opened action sheet overlay. * Get the most recently opened action sheet overlay.
*/ */
'getTop': () => HTMLIonActionSheetElement; 'getTop': () => Promise<HTMLIonActionSheetElement>;
} }
interface IonActionSheetControllerAttributes extends StencilHTMLAttributes {} 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Unique ID to be used with the overlay. Internal only * Unique ID to be used with the overlay. Internal only
*/ */
@ -228,7 +228,7 @@ export namespace Components {
/** /**
* Get the most recently opened alert overlay. * Get the most recently opened alert overlay.
*/ */
'getTop': () => HTMLIonAlertElement; 'getTop': () => Promise<HTMLIonAlertElement>;
} }
interface IonAlertControllerAttributes extends StencilHTMLAttributes {} 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
'overlayId': number; 'overlayId': number;
/** /**
* Present the alert overlay after it has been created. * 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. * 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; 'fullscreen': boolean;
'getScrollElement': () => HTMLElement; 'getScrollElement': () => Promise<HTMLElement>;
/** /**
* Scroll by a specified X/Y distance in the component * Scroll by a specified X/Y distance in the component
*/ */
'scrollByPoint': (x: number, y: number, duration: number) => Promise<any>; 'scrollByPoint': (x: number, y: number, duration: number) => Promise<void>;
/** /**
* 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`. * 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 { interface IonItemOptions {
'fireSwipeEvent': () => void; '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. * 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; 'side': Side;
'width': () => number;
} }
interface IonItemOptionsAttributes extends StencilHTMLAttributes { 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 the sliding item. Items can also be closed from the [List](../../list/List).
*/ */
'close': () => void; 'close': () => Promise<void>;
/** /**
* Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List). * Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List).
*/ */
'closeOpened': () => boolean; 'closeOpened': () => Promise<boolean>;
/** /**
* If true, the user cannot interact with the sliding-item. Defaults to `false`. * 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. * Get the amount the item is open in pixels.
*/ */
'getOpenAmount': () => number; 'getOpenAmount': () => Promise<number>;
/** /**
* 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. * 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<number>;
} }
interface IonItemSlidingAttributes extends StencilHTMLAttributes { 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). * 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; 'color': Color;
'getText': () => string;
/** /**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/ */
@ -2190,14 +2187,6 @@ export namespace Components {
} }
interface IonList { 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`. * 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"`. * How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`.
*/ */
'lines': '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 { interface IonListAttributes extends StencilHTMLAttributes {
/** /**
@ -2234,7 +2219,7 @@ export namespace Components {
/** /**
* Get the most recently opened loading overlay. * Get the most recently opened loading overlay.
*/ */
'getTop': () => HTMLIonLoadingElement; 'getTop': () => Promise<HTMLIonLoadingElement>;
} }
interface IonLoadingControllerAttributes extends StencilHTMLAttributes {} 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
'overlayId': number; 'overlayId': number;
/** /**
* Present the loading overlay after it has been created. * 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. * 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<HTMLIonMenuElement | null>;
/** /**
* 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`. * 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<HTMLIonMenuElement | null>;
/** /**
* Returns an array of all menu instances. * Returns an array of all menu instances.
*/ */
'getMenus': () => HTMLIonMenuElement[]; 'getMenus': () => Promise<HTMLIonMenuElement[]>;
/** /**
* Returns the instance of the menu already opened, otherwise `null`. * Returns the instance of the menu already opened, otherwise `null`.
*/ */
'getOpen': () => HTMLIonMenuElement | null; 'getOpen': () => Promise<HTMLIonMenuElement | null>;
/** /**
* Returns true if any menu is currently animating. * Returns true if any menu is currently animating.
*/ */
'isAnimating': () => boolean; 'isAnimating': () => Promise<boolean>;
/** /**
* Returns true if the specified menu is enabled. * Returns true if the specified menu is enabled.
*/ */
'isEnabled': (menuId?: string | undefined) => boolean; 'isEnabled': (menuId?: string | undefined) => Promise<boolean>;
/** /**
* Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. * 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<boolean>;
/** /**
* Open the menu. * Open the menu.
*/ */
@ -2456,7 +2441,7 @@ export namespace Components {
/** /**
* Used to enable or disable the ability to swipe open the menu. * 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<HTMLIonMenuElement | null>;
/** /**
* Toggle the menu. If it's closed, it will open, and if opened, it will close. * 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`. * If true, the menu is disabled. Default `false`.
*/ */
'disabled': boolean; 'disabled': boolean;
'getWidth': () => number; 'isActive': () => Promise<boolean>;
'isActive': () => boolean; 'isOpen': () => Promise<boolean>;
'isOpen': () => boolean;
/** /**
* The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. * 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. * Get the most recently opened modal overlay.
*/ */
'getTop': () => HTMLIonModalElement; 'getTop': () => Promise<HTMLIonModalElement>;
} }
interface IonModalControllerAttributes extends StencilHTMLAttributes {} 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
'overlayId': number; 'overlayId': number;
/** /**
* Present the modal overlay after it has been created. * 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 * Returns true or false if the current view can go back
*/ */
'canGoBack': (view?: ViewController | undefined) => boolean; 'canGoBack': (view?: ViewController | undefined) => Promise<boolean>;
'delegate': FrameworkDelegate; 'delegate': FrameworkDelegate;
/** /**
* Gets the active view * Gets the active view
*/ */
'getActive': () => ViewController | undefined; 'getActive': () => Promise<ViewController | undefined>;
/** /**
* Returns the view at the index * Returns the view at the index
*/ */
'getByIndex': (index: number) => ViewController | undefined; 'getByIndex': (index: number) => Promise<ViewController | undefined>;
'getLength': () => number;
/** /**
* Gets the previous view * Gets the previous view
*/ */
'getPrevious': (view?: ViewController | undefined) => ViewController | undefined; 'getPrevious': (view?: ViewController | undefined) => Promise<ViewController | undefined>;
'getRouteId': () => RouteID | undefined; 'getRouteId': () => Promise<RouteID | undefined>;
/** /**
* 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. * 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<boolean>; 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* 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. * 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<boolean>; 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
@ -2882,7 +2861,7 @@ export namespace Components {
interface IonPickerController { interface IonPickerController {
'create': (opts: PickerOptions) => Promise<HTMLIonPickerElement>; 'create': (opts: PickerOptions) => Promise<HTMLIonPickerElement>;
'dismiss': (data?: any, role?: string | undefined, pickerId?: number | undefined) => Promise<void>; 'dismiss': (data?: any, role?: string | undefined, pickerId?: number | undefined) => Promise<void>;
'getTop': () => HTMLIonPickerElement; 'getTop': () => Promise<HTMLIonPickerElement>;
} }
interface IonPickerControllerAttributes extends StencilHTMLAttributes {} interface IonPickerControllerAttributes extends StencilHTMLAttributes {}
@ -2922,7 +2901,7 @@ export namespace Components {
/** /**
* Returns the column the matches the specified name * Returns the column the matches the specified name
*/ */
'getColumn': (name: string) => PickerColumn | undefined; 'getColumn': (name: string) => Promise<PickerColumn | undefined>;
/** /**
* If the keyboard should be able to close the picker. Defaults to true. * 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
'overlayId': number; 'overlayId': number;
/** /**
* Present the picker overlay after it has been created. * Present the picker overlay after it has been created.
@ -3029,7 +3008,7 @@ export namespace Components {
/** /**
* Get the most recently opened popover overlay. * Get the most recently opened popover overlay.
*/ */
'getTop': () => HTMLIonPopoverElement; 'getTop': () => Promise<HTMLIonPopoverElement>;
} }
interface IonPopoverControllerAttributes extends StencilHTMLAttributes {} 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
'overlayId': number; 'overlayId': number;
/** /**
* Present the popover overlay after it has been created. * 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. * 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<number>;
/** /**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. * 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 * Returns the ID for the current route
*/ */
'getRouteId': () => RouteID | undefined; 'getRouteId': () => Promise<RouteID | undefined>;
/** /**
* Set the root component for the given navigation stack * Set the root component for the given navigation stack
*/ */
@ -4130,35 +4109,35 @@ export namespace Components {
/** /**
* Get the index of the active slide. * Get the index of the active slide.
*/ */
'getActiveIndex': () => number; 'getActiveIndex': () => Promise<number>;
/** /**
* Get the index of the previous slide. * Get the index of the previous slide.
*/ */
'getPreviousIndex': () => number; 'getPreviousIndex': () => Promise<number>;
/** /**
* Get whether or not the current slide is the first slide. * Get whether or not the current slide is the first slide.
*/ */
'isBeginning': () => boolean; 'isBeginning': () => Promise<boolean>;
/** /**
* Get whether or not the current slide is the last slide. * Get whether or not the current slide is the last slide.
*/ */
'isEnd': () => boolean; 'isEnd': () => Promise<ConstrainBoolean>;
/** /**
* Get the total number of slides. * Get the total number of slides.
*/ */
'length': () => number; 'length': () => Promise<number>;
/** /**
* Lock or unlock the ability to slide to the next slides. * 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. * 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. * 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 * 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`. * If true, the split pane will be hidden. Defaults to `false`.
*/ */
'disabled': boolean; '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. * 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; '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. * The URL which will be used as the `href` within this tab's button anchor.
*/ */
'href': string; '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). * 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; 'color': Color;
'getRouteId': () => RouteID | undefined; 'getRouteId': () => Promise<RouteID | undefined>;
/** /**
* Get the currently selected tab * Get the currently selected tab
*/ */
'getSelected': () => HTMLIonTabElement | undefined; 'getSelected': () => Promise<HTMLIonTabElement | undefined>;
/** /**
* Get the tab at the given index * Get the tab at the given index
*/ */
'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined; 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
/** /**
* A unique name for the tabs. * A unique name for the tabs.
*/ */
@ -4858,7 +4828,7 @@ export namespace Components {
/** /**
* Get the most recently opened toast overlay. * Get the most recently opened toast overlay.
*/ */
'getTop': () => HTMLIonToastElement; 'getTop': () => Promise<HTMLIonToastElement>;
} }
interface IonToastControllerAttributes extends StencilHTMLAttributes {} 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. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
/** /**
* Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. * 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<any>) => void) | undefined) => Promise<OverlayEventDetail<any>>; 'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
'overlayId': number; 'overlayId': number;
/** /**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom". * 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. * 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". * 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`. * If true, the close button will be displayed. Defaults to `false`.
*/ */
@ -5105,7 +5075,7 @@ export namespace Components {
'markDirty': (offset: number, len?: number) => void; 'markDirty': (offset: number, len?: number) => void;
'markDirtyTail': () => void; 'markDirtyTail': () => void;
'nodeRender': ItemRenderFn; 'nodeRender': ItemRenderFn;
'positionForItem': (index: number) => number; 'positionForItem': (index: number) => Promise<number>;
'renderFooter': (item: any, index: number) => any; 'renderFooter': (item: any, index: number) => any;
'renderHeader': (item: any, index: number) => any; 'renderHeader': (item: any, index: number) => any;
'renderItem': (item: any, index: number) => any; 'renderItem': (item: any, index: number) => any;

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

@ -30,7 +30,7 @@ export class ActionSheetController implements OverlayController {
* Get the most recently opened action sheet overlay. * Get the most recently opened action sheet overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonActionSheetElement { async getTop(): Promise<HTMLIonActionSheetElement> {
return getOverlay(this.doc, 'ion-action-sheet') as HTMLIonActionSheetElement; return getOverlay(this.doc, 'ion-action-sheet') as HTMLIonActionSheetElement;
} }
} }

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

@ -159,8 +159,8 @@ export class ActionSheet implements OverlayInterface {
* *
*/ */
@Method() @Method()
onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onDidDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionActionSheetDidDismiss', callback); return eventMethod(this.el, 'ionActionSheetDidDismiss');
} }
/** /**
@ -169,8 +169,8 @@ export class ActionSheet implements OverlayInterface {
* *
*/ */
@Method() @Method()
onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onWillDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionActionSheetWillDismiss', callback); return eventMethod(this.el, 'ionActionSheetWillDismiss');
} }
private buttonClick(button: ActionSheetButton) { private buttonClick(button: ActionSheetButton) {

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

@ -30,7 +30,7 @@ export class AlertController implements OverlayController {
* Get the most recently opened alert overlay. * Get the most recently opened alert overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonAlertElement { async getTop(): Promise<HTMLIonAlertElement> {
return getOverlay(this.doc, 'ion-alert') as HTMLIonAlertElement; return getOverlay(this.doc, 'ion-alert') as HTMLIonAlertElement;
} }
} }

8
core/src/components/alert/alert.tsx
View File

@ -211,8 +211,8 @@ export class Alert implements OverlayInterface {
* *
*/ */
@Method() @Method()
onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onDidDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionAlertDidDismiss', callback); return eventMethod(this.el, 'ionAlertDidDismiss');
} }
/** /**
@ -221,8 +221,8 @@ export class Alert implements OverlayInterface {
* *
*/ */
@Method() @Method()
onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onWillDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionAlertWillDismiss', callback); return eventMethod(this.el, 'ionAlertWillDismiss');
} }
private rbClick(selectedInput: AlertInput) { private rbClick(selectedInput: AlertInput) {

7
core/src/components/back-button/back-button.tsx
View File

@ -48,11 +48,10 @@ export class BackButton {
private async onClick(ev: Event) { private async onClick(ev: Event) {
const nav = this.el.closest('ion-nav'); const nav = this.el.closest('ion-nav');
ev.preventDefault();
if (nav && nav.canGoBack()) { if (nav && nav.canGoBack()) {
ev.preventDefault(); nav.pop({ skipIfBusy: true });
if (!nav.isAnimating()) {
nav.pop();
}
} else if (this.defaultHref) { } else if (this.defaultHref) {
openURL(this.win, this.defaultHref, ev, 'back'); openURL(this.win, this.defaultHref, ev, 'back');
} }

6
core/src/components/content/content.tsx
View File

@ -157,8 +157,8 @@ export class Content {
} }
@Method() @Method()
getScrollElement(): HTMLElement { getScrollElement(): Promise<HTMLElement> {
return this.scrollEl; return Promise.resolve(this.scrollEl);
} }
/** /**
@ -182,7 +182,7 @@ export class Content {
* Scroll by a specified X/Y distance in the component * Scroll by a specified X/Y distance in the component
*/ */
@Method() @Method()
scrollByPoint(x: number, y: number, duration: number): Promise<any> { scrollByPoint(x: number, y: number, duration: number): Promise<void> {
return this.scrollToPoint(x + this.scrollEl.scrollLeft, y + this.scrollEl.scrollTop, duration); return this.scrollToPoint(x + this.scrollEl.scrollLeft, y + this.scrollEl.scrollTop, duration);
} }

18
core/src/components/datetime/datetime.tsx
View File

@ -231,7 +231,7 @@ export class Datetime {
const pickerOptions = this.generatePickerOptions(); const pickerOptions = this.generatePickerOptions();
this.picker = await this.pickerCtrl.create(pickerOptions); this.picker = await this.pickerCtrl.create(pickerOptions);
this.validate(); await this.validate();
if (this.picker) { if (this.picker) {
await this.picker.present(); await this.picker.present();
} }
@ -344,11 +344,11 @@ export class Datetime {
return divyColumns(columns); return divyColumns(columns);
} }
private validate() { private async validate() {
const today = new Date(); const today = new Date();
const minCompareVal = dateDataSortValue(this.datetimeMin); const minCompareVal = dateDataSortValue(this.datetimeMin);
const maxCompareVal = dateDataSortValue(this.datetimeMax); const maxCompareVal = dateDataSortValue(this.datetimeMax);
const yearCol = this.picker!.getColumn('year'); const yearCol = await this.picker!.getColumn('year');
let selectedYear: number = today.getFullYear(); let selectedYear: number = today.getFullYear();
if (yearCol) { if (yearCol) {
@ -367,7 +367,7 @@ export class Datetime {
} }
} }
const selectedMonth = this.validateColumn( const selectedMonth = await this.validateColumn(
'month', 1, 'month', 1,
minCompareVal, maxCompareVal, minCompareVal, maxCompareVal,
[selectedYear, 0, 0, 0, 0], [selectedYear, 0, 0, 0, 0],
@ -375,21 +375,21 @@ export class Datetime {
); );
const numDaysInMonth = daysInMonth(selectedMonth, selectedYear); const numDaysInMonth = daysInMonth(selectedMonth, selectedYear);
const selectedDay = this.validateColumn( const selectedDay = await this.validateColumn(
'day', 2, 'day', 2,
minCompareVal, maxCompareVal, minCompareVal, maxCompareVal,
[selectedYear, selectedMonth, 0, 0, 0], [selectedYear, selectedMonth, 0, 0, 0],
[selectedYear, selectedMonth, numDaysInMonth, 23, 59] [selectedYear, selectedMonth, numDaysInMonth, 23, 59]
); );
const selectedHour = this.validateColumn( const selectedHour = await this.validateColumn(
'hour', 3, 'hour', 3,
minCompareVal, maxCompareVal, minCompareVal, maxCompareVal,
[selectedYear, selectedMonth, selectedDay, 0, 0], [selectedYear, selectedMonth, selectedDay, 0, 0],
[selectedYear, selectedMonth, selectedDay, 23, 59] [selectedYear, selectedMonth, selectedDay, 23, 59]
); );
this.validateColumn( await this.validateColumn(
'minute', 4, 'minute', 4,
minCompareVal, maxCompareVal, minCompareVal, maxCompareVal,
[selectedYear, selectedMonth, selectedDay, selectedHour, 0], [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 { private async validateColumn(name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): Promise<number> {
const column = this.picker!.getColumn(name); const column = await this.picker!.getColumn(name);
if (!column) { if (!column) {
return 0; return 0;
} }

2
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -77,7 +77,7 @@ export class InfiniteScroll {
const contentEl = this.el.closest('ion-content'); const contentEl = this.el.closest('ion-content');
if (contentEl) { if (contentEl) {
await contentEl.componentOnReady(); await contentEl.componentOnReady();
this.scrollEl = contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
} }
this.thresholdChanged(this.threshold); this.thresholdChanged(this.threshold);
this.enableScrollEvents(!this.disabled); this.enableScrollEvents(!this.disabled);

12
core/src/components/item-options/item-options.tsx
View File

@ -26,23 +26,13 @@ export class ItemOptions {
*/ */
@Event() ionSwipe!: EventEmitter<void>; @Event() ionSwipe!: EventEmitter<void>;
@Method()
isEndSide() {
return isEndSide(this.win, this.side);
}
@Method()
width(): number {
return this.el.offsetWidth;
}
@Method() @Method()
fireSwipeEvent() { fireSwipeEvent() {
this.ionSwipe.emit(); this.ionSwipe.emit();
} }
hostData() { hostData() {
const isEnd = this.isEndSide(); const isEnd = isEndSide(this.win, this.side);
return { return {
class: { class: {
'item-options-start': !isEnd, 'item-options-start': !isEnd,

2
core/src/components/item-options/readme.md
View File

@ -34,8 +34,6 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a
| Method | Description | | Method | Description |
| ---------------- | ----------- | | ---------------- | ----------- |
| `fireSwipeEvent` | | | `fireSwipeEvent` | |
| `isEndSide` | |
| `width` | |
---------------------------------------------- ----------------------------------------------

42
core/src/components/item-sliding/item-sliding.tsx
View File

@ -22,6 +22,8 @@ const enum SlidingState {
SwipeStart = 1 << 6, SwipeStart = 1 << 6,
} }
let openSlidingItem: HTMLIonItemSlidingElement | undefined;
@Component({ @Component({
tag: 'ion-item-sliding', tag: 'ion-item-sliding',
styleUrl: 'item-sliding.scss' styleUrl: 'item-sliding.scss'
@ -29,7 +31,6 @@ const enum SlidingState {
export class ItemSliding { export class ItemSliding {
private item: HTMLIonItemElement | null = null; private item: HTMLIonItemElement | null = null;
private list: HTMLIonListElement | null = null;
private openAmount = 0; private openAmount = 0;
private initialOpenAmount = 0; private initialOpenAmount = 0;
private optsWidthRightSide = 0; private optsWidthRightSide = 0;
@ -43,7 +44,7 @@ export class ItemSliding {
@Element() el!: HTMLIonItemSlidingElement; @Element() el!: HTMLIonItemSlidingElement;
@State() private state: SlidingState = SlidingState.Disabled; @State() state: SlidingState = SlidingState.Disabled;
@Prop({ context: 'queue' }) queue!: QueueApi; @Prop({ context: 'queue' }) queue!: QueueApi;
@ -65,7 +66,6 @@ export class ItemSliding {
async componentDidLoad() { async componentDidLoad() {
this.item = this.el.querySelector('ion-item'); this.item = this.el.querySelector('ion-item');
this.list = this.el.closest('ion-list');
this.updateOptions(); this.updateOptions();
@ -88,7 +88,7 @@ export class ItemSliding {
this.gesture.destroy(); this.gesture.destroy();
} }
this.item = this.list = null; this.item = null;
this.leftOptions = this.rightOptions = undefined; this.leftOptions = this.rightOptions = undefined;
} }
@ -96,8 +96,8 @@ export class ItemSliding {
* Get the amount the item is open in pixels. * Get the amount the item is open in pixels.
*/ */
@Method() @Method()
getOpenAmount(): number { getOpenAmount(): Promise<number> {
return this.openAmount; return Promise.resolve(this.openAmount);
} }
/** /**
@ -108,7 +108,7 @@ export class ItemSliding {
* the width of the options. * the width of the options.
*/ */
@Method() @Method()
getSlidingRatio(): number { async getSlidingRatio(): Promise<number> {
if (this.openAmount > 0) { if (this.openAmount > 0) {
return this.openAmount / this.optsWidthRightSide; return this.openAmount / this.optsWidthRightSide;
} else if (this.openAmount < 0) { } 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). * Close the sliding item. Items can also be closed from the [List](../../list/List).
*/ */
@Method() @Method()
close() { async close() {
this.setOpenAmount(0, true); 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). * Close all of the sliding items in the list. Items can also be closed from the [List](../../list/List).
*/ */
@Method() @Method()
closeOpened(): boolean { async closeOpened(): Promise<boolean> {
return !!(this.list && this.list.closeSlidingItems()); if (openSlidingItem) {
openSlidingItem.close();
return true;
}
return false;
} }
private updateOptions() { private updateOptions() {
@ -145,7 +149,7 @@ export class ItemSliding {
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
const option = options.item(i); const option = options.item(i);
if (option.isEndSide()) { if (option.side === 'end') {
this.rightOptions = option; this.rightOptions = option;
sides |= ItemSide.End; sides |= ItemSide.End;
} else { } else {
@ -158,8 +162,9 @@ export class ItemSliding {
} }
private canStart(): boolean { private canStart(): boolean {
const selected = this.list && this.list.getOpenItem(); const selected = openSlidingItem;
if (selected && selected !== this.el) { if (selected && selected !== this.el) {
this.closeOpened(); this.closeOpened();
return false; return false;
} }
@ -167,9 +172,7 @@ export class ItemSliding {
} }
private onStart() { private onStart() {
if (this.list) { openSlidingItem = this.el;
this.list.setOpenItem(this.el);
}
if (this.tmr) { if (this.tmr) {
clearTimeout(this.tmr); clearTimeout(this.tmr);
@ -240,12 +243,12 @@ export class ItemSliding {
private calculateOptsWidth() { private calculateOptsWidth() {
this.optsWidthRightSide = 0; this.optsWidthRightSide = 0;
if (this.rightOptions) { if (this.rightOptions) {
this.optsWidthRightSide = this.rightOptions.width(); this.optsWidthRightSide = this.rightOptions.offsetWidth;
} }
this.optsWidthLeftSide = 0; this.optsWidthLeftSide = 0;
if (this.leftOptions) { if (this.leftOptions) {
this.optsWidthLeftSide = this.leftOptions.width(); this.optsWidthLeftSide = this.leftOptions.offsetWidth;
} }
this.optsDirty = false; this.optsDirty = false;
} }
@ -278,9 +281,8 @@ export class ItemSliding {
this.state = SlidingState.Disabled; this.state = SlidingState.Disabled;
this.tmr = undefined; this.tmr = undefined;
}, 600); }, 600);
if (this.list) {
this.list.setOpenItem(undefined); openSlidingItem = undefined;
}
style.transform = ''; style.transform = '';
return; return;
} }

7
core/src/components/label/label.tsx
View File

@ -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 { Color, Mode, StyleEvent } from '../../interface';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses } from '../../utils/theme';
@ -38,11 +38,6 @@ export class Label {
*/ */
@Event() ionStyle!: EventEmitter<StyleEvent>; @Event() ionStyle!: EventEmitter<StyleEvent>;
@Method()
getText(): string {
return this.el.textContent || '';
}
componentDidLoad() { componentDidLoad() {
this.positionChanged(); this.positionChanged();
} }

7
core/src/components/label/readme.md
View File

@ -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. | | `ionStyle` | Emitted when the styles change. |
## Methods
| Method | Description |
| --------- | ----------- |
| `getText` | |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

34
core/src/components/list/list.tsx
View File

@ -1,4 +1,4 @@
import { Component, Method, Prop } from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { Mode } from '../../interface'; import { Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme'; import { createThemedClasses } from '../../utils/theme';
@ -11,8 +11,6 @@ import { createThemedClasses } from '../../utils/theme';
} }
}) })
export class List { export class List {
private openItem?: HTMLIonItemSlidingElement;
mode!: Mode; mode!: Mode;
/** /**
@ -26,36 +24,6 @@ export class List {
*/ */
@Prop() inset = false; @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() { hostData() {
return { return {
class: { class: {

9
core/src/components/list/readme.md
View File

@ -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"` | | `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/)* *Built with [StencilJS](https://stenciljs.com/)*

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

@ -30,7 +30,7 @@ export class LoadingController implements OverlayController {
* Get the most recently opened loading overlay. * Get the most recently opened loading overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonLoadingElement { async getTop(): Promise<HTMLIonLoadingElement> {
return getOverlay(this.doc, 'ion-loading') as HTMLIonLoadingElement; return getOverlay(this.doc, 'ion-loading') as HTMLIonLoadingElement;
} }
} }

8
core/src/components/loading/loading.tsx
View File

@ -165,8 +165,8 @@ export class Loading implements OverlayInterface {
* that is called in the same circumstances. * that is called in the same circumstances.
*/ */
@Method() @Method()
onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onDidDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionLoadingDidDismiss', callback); return eventMethod(this.el, 'ionLoadingDidDismiss');
} }
/** /**
@ -174,8 +174,8 @@ export class Loading implements OverlayInterface {
* that is called in the same circumstances. * that is called in the same circumstances.
*/ */
@Method() @Method()
onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onWillDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionLoadingWillDismiss', callback); return eventMethod(this.el, 'ionLoadingWillDismiss');
} }
hostData() { hostData() {

50
core/src/components/menu-controller/menu-controller.ts
View File

@ -26,12 +26,12 @@ export class MenuController {
* Open the menu. * Open the menu.
*/ */
@Method() @Method()
open(menuId?: string): Promise<boolean> { async open(menuId?: string): Promise<boolean> {
const menu = this.get(menuId); const menu = await this.get(menuId);
if (menu) { if (menu) {
return menu.open(); 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. * that is open. If a menu is specified, it will close that menu.
*/ */
@Method() @Method()
close(menuId?: string): Promise<boolean> { async close(menuId?: string): Promise<boolean> {
const menu = menuId ? this.get(menuId) : this.getOpen(); const menu = await (menuId ? this.get(menuId) : this.getOpen());
if (menu) { if (menu) {
return menu.close(); return menu.close();
} }
return Promise.resolve(false); return false;
} }
/** /**
@ -52,12 +52,12 @@ export class MenuController {
* will close. * will close.
*/ */
@Method() @Method()
toggle(menuId?: string): Promise<boolean> { async toggle(menuId?: string): Promise<boolean> {
const menu = this.get(menuId); const menu = await this.get(menuId);
if (menu) { if (menu) {
return menu.toggle(); 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. * will also automatically disable all the others that are on the same side.
*/ */
@Method() @Method()
enable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null { async enable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement | null> {
const menu = this.get(menuId); const menu = await this.get(menuId);
if (menu) { if (menu) {
menu.disabled = !shouldEnable; menu.disabled = !shouldEnable;
} }
@ -79,8 +79,8 @@ export class MenuController {
* Used to enable or disable the ability to swipe open the menu. * Used to enable or disable the ability to swipe open the menu.
*/ */
@Method() @Method()
swipeGesture(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null { async swipeGesture(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement | null> {
const menu = this.get(menuId); const menu = await this.get(menuId);
if (menu) { if (menu) {
menu.swipeGesture = shouldEnable; menu.swipeGesture = shouldEnable;
} }
@ -92,9 +92,9 @@ export class MenuController {
* will return true if any menu is currently open. * will return true if any menu is currently open.
*/ */
@Method() @Method()
isOpen(menuId?: string): boolean { async isOpen(menuId?: string): Promise<boolean> {
if (menuId) { if (menuId) {
const menu = this.get(menuId); const menu = await this.get(menuId);
return (menu && menu.isOpen()) || false; return (menu && menu.isOpen()) || false;
} }
return !!this.getOpen(); return !!this.getOpen();
@ -104,8 +104,8 @@ export class MenuController {
* Returns true if the specified menu is enabled. * Returns true if the specified menu is enabled.
*/ */
@Method() @Method()
isEnabled(menuId?: string): boolean { async isEnabled(menuId?: string): Promise<boolean> {
const menu = this.get(menuId); const menu = await this.get(menuId);
if (menu) { if (menu) {
return !menu.disabled; return !menu.disabled;
} }
@ -120,7 +120,7 @@ export class MenuController {
* return `null`. * return `null`.
*/ */
@Method() @Method()
get(menuId?: string): HTMLIonMenuElement | null { async get(menuId?: string): Promise<HTMLIonMenuElement | null> {
if (Build.isDev) { if (Build.isDev) {
if (menuId === 'left') { if (menuId === 'left') {
console.error('menu.side=left is deprecated, use "start" instead'); 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`. * Returns the instance of the menu already opened, otherwise `null`.
*/ */
@Method() @Method()
getOpen(): HTMLIonMenuElement | null { async getOpen(): Promise<HTMLIonMenuElement | null> {
return this.find(m => m.isOpen()); return this.find(m => m._isOpen);
} }
/** /**
* Returns an array of all menu instances. * Returns an array of all menu instances.
*/ */
@Method() @Method()
getMenus(): HTMLIonMenuElement[] { async getMenus(): Promise<HTMLIonMenuElement[]> {
return this.menus.map(menu => menu.el); return this.menus.map(menu => menu.el);
} }
@ -178,7 +178,7 @@ export class MenuController {
* Returns true if any menu is currently animating. * Returns true if any menu is currently animating.
*/ */
@Method() @Method()
isAnimating(): boolean { async isAnimating(): Promise<boolean> {
return this.menus.some(menu => menu.isAnimating); return this.menus.some(menu => menu.isAnimating);
} }
@ -209,12 +209,12 @@ export class MenuController {
} }
@Method() @Method()
_setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> { async _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> {
if (this.isAnimating()) { if (this.isAnimating()) {
return Promise.resolve(false); return false;
} }
if (shouldOpen) { if (shouldOpen) {
const openedMenu = this.getOpen(); const openedMenu = await this.getOpen();
if (openedMenu && menu.el !== openedMenu) { if (openedMenu && menu.el !== openedMenu) {
openedMenu.setOpen(false, false); openedMenu.setOpen(false, false);
} }

8
core/src/components/menu-toggle/menu-toggle.tsx
View File

@ -37,8 +37,8 @@ export class MenuToggle {
async onClick() { async onClick() {
const menuCtrl = await getMenuController(this.doc); const menuCtrl = await getMenuController(this.doc);
if (menuCtrl) { if (menuCtrl) {
const menu = menuCtrl.get(this.menu); const menu = await menuCtrl.get(this.menu);
if (menu && menu.isActive()) { if (menu) {
return menuCtrl.toggle(this.menu); return menuCtrl.toggle(this.menu);
} }
} }
@ -50,8 +50,8 @@ export class MenuToggle {
async updateVisibility() { async updateVisibility() {
const menuCtrl = await getMenuController(this.doc); const menuCtrl = await getMenuController(this.doc);
if (menuCtrl) { if (menuCtrl) {
const menu = menuCtrl.get(this.menu); const menu = await menuCtrl.get(this.menu);
if (menu && menu.isActive()) { if (menu && await menu.isActive()) {
this.visible = true; this.visible = true;
return; return;
} }

5
core/src/components/menu/menu-interface.ts
View File

@ -9,20 +9,19 @@ export interface MenuI {
isAnimating: boolean; isAnimating: boolean;
width: number; width: number;
isEndSide: boolean; isEndSide: boolean;
_isOpen: boolean;
backdropEl?: HTMLElement; backdropEl?: HTMLElement;
menuInnerEl?: HTMLElement; menuInnerEl?: HTMLElement;
contentEl?: HTMLElement; contentEl?: HTMLElement;
menuCtrl?: HTMLIonMenuControllerElement; menuCtrl?: HTMLIonMenuControllerElement;
isOpen(): boolean; isActive(): Promise<boolean>;
open(animated?: boolean): Promise<boolean>; open(animated?: boolean): Promise<boolean>;
close(animated?: boolean): Promise<boolean>; close(animated?: boolean): Promise<boolean>;
toggle(animated?: boolean): Promise<boolean>; toggle(animated?: boolean): Promise<boolean>;
setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>; setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>;
_setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>; _setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>;
isActive(): boolean;
getWidth(): number;
} }
export interface MenuChangeEvent { export interface MenuChangeEvent {

35
core/src/components/menu/menu.tsx
View File

@ -14,7 +14,6 @@ import { assert, isEndSide as isEnd } from '../../utils/helpers';
export class Menu implements MenuI { export class Menu implements MenuI {
private animation?: Animation; private animation?: Animation;
private _isOpen = false;
private lastOnEnd = 0; private lastOnEnd = 0;
private gesture?: Gesture; private gesture?: Gesture;
@ -22,6 +21,7 @@ export class Menu implements MenuI {
isAnimating = false; isAnimating = false;
width!: number; // TODO width!: number; // TODO
_isOpen = false;
backdropEl?: HTMLElement; backdropEl?: HTMLElement;
menuInnerEl?: HTMLElement; menuInnerEl?: HTMLElement;
@ -165,7 +165,7 @@ export class Menu implements MenuI {
let isEnabled = !this.disabled; let isEnabled = !this.disabled;
if (isEnabled === true || typeof isEnabled === 'undefined') { if (isEnabled === true || typeof isEnabled === 'undefined') {
const menus = this.menuCtrl!.getMenus(); const menus = await this.menuCtrl!.getMenus();
isEnabled = !menus.some((m: any) => { isEnabled = !menus.some((m: any) => {
return m.side === this.side && !m.disabled; return m.side === this.side && !m.disabled;
}); });
@ -208,7 +208,7 @@ export class Menu implements MenuI {
@Listen('body:ionSplitPaneVisible') @Listen('body:ionSplitPaneVisible')
onSplitPaneChanged(ev: CustomEvent) { onSplitPaneChanged(ev: CustomEvent) {
this.isPaneVisible = (ev.target as HTMLIonSplitPaneElement).isPane(this.el); this.isPaneVisible = ev.detail.isPane(this.el);
this.updateState(); this.updateState();
} }
@ -228,8 +228,13 @@ export class Menu implements MenuI {
} }
@Method() @Method()
isOpen(): boolean { isOpen(): Promise<boolean> {
return this._isOpen; return Promise.resolve(this._isOpen);
}
@Method()
isActive(): Promise<boolean> {
return Promise.resolve(this._isActive());
} }
@Method() @Method()
@ -254,7 +259,7 @@ export class Menu implements MenuI {
async _setOpen(shouldOpen: boolean, animated = true): Promise<boolean> { async _setOpen(shouldOpen: boolean, animated = true): Promise<boolean> {
// If the menu is disabled or it is currently being animated, let's do nothing // 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; return this._isOpen;
} }
@ -266,16 +271,6 @@ export class Menu implements MenuI {
return shouldOpen; return shouldOpen;
} }
@Method()
isActive(): boolean {
return !this.disabled && !this.isPaneVisible;
}
@Method()
getWidth(): number {
return this.width;
}
private async loadAnimation(): Promise<void> { private async loadAnimation(): Promise<void> {
// Menu swipe animation takes the menu's inner width as parameter, // Menu swipe animation takes the menu's inner width as parameter,
// If `offsetWidth` changes, we need to create a new animation. // 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 { private canSwipe(): boolean {
return this.swipeGesture && !this.isAnimating && this.isActive(); return this.swipeGesture && !this.isAnimating && this._isActive();
} }
private canStart(detail: GestureDetail): boolean { private canStart(detail: GestureDetail): boolean {
@ -442,7 +441,7 @@ export class Menu implements MenuI {
} }
private updateState() { private updateState() {
const isActive = this.isActive(); const isActive = this._isActive();
if (this.gesture) { if (this.gesture) {
this.gesture.setDisabled(!isActive || !this.swipeGesture); this.gesture.setDisabled(!isActive || !this.swipeGesture);
} }

1
core/src/components/menu/readme.md
View File

@ -38,7 +38,6 @@ These can be controlled from the templates, or programmatically using the MenuCo
| Method | Description | | Method | Description |
| ---------- | ----------- | | ---------- | ----------- |
| `close` | | | `close` | |
| `getWidth` | |
| `isActive` | | | `isActive` | |
| `isOpen` | | | `isOpen` | |
| `open` | | | `open` | |

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

@ -30,7 +30,7 @@ export class ModalController implements OverlayController {
* Get the most recently opened modal overlay. * Get the most recently opened modal overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonModalElement { async getTop(): Promise<HTMLIonModalElement> {
return getOverlay(this.doc, 'ion-modal') as HTMLIonModalElement; return getOverlay(this.doc, 'ion-modal') as HTMLIonModalElement;
} }
} }

8
core/src/components/modal/modal.tsx
View File

@ -180,8 +180,8 @@ export class Modal implements OverlayInterface {
* *
*/ */
@Method() @Method()
onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onDidDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionModalDidDismiss', callback); return eventMethod(this.el, 'ionModalDidDismiss');
} }
/** /**
@ -190,8 +190,8 @@ export class Modal implements OverlayInterface {
* *
*/ */
@Method() @Method()
onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onWillDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionModalWillDismiss', callback); return eventMethod(this.el, 'ionModalWillDismiss');
} }
hostData() { hostData() {

7
core/src/components/nav-pop/nav-pop.tsx
View File

@ -8,12 +8,11 @@ export class NavPop {
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@Listen('child:click') @Listen('child:click')
pop(): Promise<any> { pop() {
const nav = this.el.closest('ion-nav'); const nav = this.el.closest('ion-nav');
if (nav && !nav.isAnimating()) { if (nav) {
return nav.pop(); nav.pop({ skipIfBusy: true });
} }
return Promise.resolve(null);
} }
} }

7
core/src/components/nav-push/nav-push.tsx
View File

@ -19,12 +19,11 @@ export class NavPush {
@Prop() componentProps?: ComponentProps; @Prop() componentProps?: ComponentProps;
@Listen('child:click') @Listen('child:click')
push(): Promise<any> { push() {
const nav = this.el.closest('ion-nav'); const nav = this.el.closest('ion-nav');
const toPush = this.component; const toPush = this.component;
if (nav && toPush && !nav.isAnimating()) { if (nav && toPush) {
return nav.push(toPush, this.componentProps); nav.push(toPush, this.componentProps, { skipIfBusy: true });
} }
return Promise.resolve(null);
} }
} }

5
core/src/components/nav-set-root/nav-set-root.tsx
View File

@ -20,12 +20,11 @@ export class NavSetRoot {
@Prop() componentProps?: ComponentProps; @Prop() componentProps?: ComponentProps;
@Listen('child:click') @Listen('child:click')
push(): Promise<any> { push() {
const nav = this.el.closest('ion-nav'); const nav = this.el.closest('ion-nav');
const toPush = this.component; const toPush = this.component;
if (nav && toPush) { if (nav && toPush) {
return nav.setRoot(toPush, this.componentProps); nav.setRoot(toPush, this.componentProps, { skipIfBusy: true });
} }
return Promise.resolve(null);
} }
} }

1
core/src/components/nav/nav-interface.ts
View File

@ -22,6 +22,7 @@ export interface RouterOutletOptions {
deepWait?: boolean; deepWait?: boolean;
mode?: Mode; mode?: Mode;
keyboardClose?: boolean; keyboardClose?: boolean;
skipIfBusy?: boolean;
} }
export interface NavOptions extends RouterOutletOptions { export interface NavOptions extends RouterOutletOptions {

71
core/src/components/nav/nav.tsx
View File

@ -330,7 +330,7 @@ export class Nav implements NavOutlet {
params: any, params: any,
direction: number direction: number
): Promise<RouteWrite> { ): Promise<RouteWrite> {
const active = this.getActive(); const active = this.getActiveSync();
if (matches(active, id, params)) { if (matches(active, id, params)) {
return Promise.resolve({ return Promise.resolve({
changed: false, changed: false,
@ -383,8 +383,8 @@ export class Nav implements NavOutlet {
/** @hidden */ /** @hidden */
@Method() @Method()
getRouteId(): RouteID | undefined { async getRouteId(): Promise<RouteID | undefined> {
const active = this.getActive(); const active = this.getActiveSync();
return active return active
? { ? {
id: active.element!.tagName, id: active.element!.tagName,
@ -394,35 +394,51 @@ export class Nav implements NavOutlet {
: undefined; : 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 * Gets the active view
*/ */
@Method() @Method()
getActive(): ViewController | undefined { getActive(): Promise<ViewController | undefined> {
return this.views[this.views.length - 1]; return Promise.resolve(this.getActiveSync());
} }
/** /**
* Returns the view at the index * Returns the view at the index
*/ */
@Method() @Method()
getByIndex(index: number): ViewController | undefined { getByIndex(index: number): Promise<ViewController | undefined> {
return this.views[index]; return Promise.resolve(this.views[index]);
}
/**
* Returns true or false if the current view can go back
*/
@Method()
canGoBack(view?: ViewController): Promise<boolean> {
return Promise.resolve(this.canGoBackSync(view));
} }
/** /**
* Gets the previous view * Gets the previous view
*/ */
@Method() @Method()
getPrevious(view = this.getActive()): ViewController | undefined { getPrevious(view?: ViewController): Promise<ViewController | undefined> {
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) { if (!view) {
return undefined; return undefined;
} }
@ -431,19 +447,6 @@ export class Nav implements NavOutlet {
return index > 0 ? views[index - 1] : undefined; 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: // _queueTrns() adds a navigation stack change to the queue and schedules it to run:
// 1. _nextTrns(): consumes the next transition in the queue // 1. _nextTrns(): consumes the next transition in the queue
// 2. _viewInit(): initializes enteringView if required // 2. _viewInit(): initializes enteringView if required
@ -458,6 +461,10 @@ export class Nav implements NavOutlet {
ti: TransitionInstruction, ti: TransitionInstruction,
done: TransitionDoneFn | undefined done: TransitionDoneFn | undefined
): Promise<boolean> { ): Promise<boolean> {
if (this.isTransitioning && ti.opts && ti.opts.skipIfBusy === true) {
return Promise.resolve(false);
}
const promise = new Promise<boolean>((resolve, reject) => { const promise = new Promise<boolean>((resolve, reject) => {
ti.resolve = resolve; ti.resolve = resolve;
ti.reject = reject; ti.reject = reject;
@ -551,7 +558,7 @@ export class Nav implements NavOutlet {
this.isTransitioning = true; this.isTransitioning = true;
this.prepareTI(ti); this.prepareTI(ti);
const leavingView = this.getActive(); const leavingView = this.getActiveSync();
const enteringView = this.getEnteringView(ti, leavingView); const enteringView = this.getEnteringView(ti, leavingView);
if (!leavingView && !enteringView) { if (!leavingView && !enteringView) {
@ -784,7 +791,7 @@ export class Nav implements NavOutlet {
const animated = this.animated && this.config.getBoolean('animated', true); const animated = this.animated && this.config.getBoolean('animated', true);
const animationOpts: TransitionOptions = { const animationOpts: TransitionOptions = {
mode: this.mode, mode: this.mode,
showGoBack: this.canGoBack(enteringView), showGoBack: this.canGoBackSync(enteringView),
animationCtrl: this.animationCtrl, animationCtrl: this.animationCtrl,
queue: this.queue, queue: this.queue,
window: this.win, window: this.win,
@ -891,7 +898,7 @@ export class Nav implements NavOutlet {
private canStart(): boolean { private canStart(): boolean {
return !!this.swipeGesture && return !!this.swipeGesture &&
!this.isTransitioning && !this.isTransitioning &&
this.canGoBack(); this.canGoBackSync();
} }
private onStart() { private onStart() {

2
core/src/components/nav/readme.md
View File

@ -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 | | `canGoBack` | Returns true or false if the current view can go back |
| `getActive` | Gets the active view | | `getActive` | Gets the active view |
| `getByIndex` | Returns the view at the index | | `getByIndex` | Returns the view at the index |
| `getLength` | |
| `getPrevious` | Gets the previous view | | `getPrevious` | Gets the previous view |
| `getRouteId` | | | `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. | | `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. | | `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. | | `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 | | `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. | | `popToRoot` | Navigate back to the root of the stack, no matter how far back that is. |

2
core/src/components/picker-controller/picker-controller.tsx
View File

@ -31,7 +31,7 @@ export class PickerController implements OverlayController {
* Get the most recently opened picker overlay. * Get the most recently opened picker overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonPickerElement { async getTop(): Promise<HTMLIonPickerElement> {
return getOverlay(this.doc, 'ion-picker') as HTMLIonPickerElement; return getOverlay(this.doc, 'ion-picker') as HTMLIonPickerElement;
} }
} }

31
core/src/components/picker/picker.tsx
View File

@ -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 { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
import { dismiss, eventMethod, present } from '../../utils/overlays'; import { dismiss, eventMethod, present } from '../../utils/overlays';
@ -23,9 +23,6 @@ export class Picker implements OverlayInterface {
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@State() private showSpinner!: boolean;
@State() private spinner!: string;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config!: Config; @Prop({ context: 'config' }) config!: Config;
@ -113,16 +110,6 @@ export class Picker implements OverlayInterface {
*/ */
@Event() ionPickerDidUnload!: EventEmitter<void>; @Event() ionPickerDidUnload!: EventEmitter<void>;
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() { componentDidLoad() {
this.ionPickerDidLoad.emit(); this.ionPickerDidLoad.emit();
} }
@ -183,10 +170,8 @@ export class Picker implements OverlayInterface {
* *
*/ */
@Method() @Method()
onDidDismiss( onDidDismiss(): Promise<OverlayEventDetail> {
callback?: (detail: OverlayEventDetail) => void return eventMethod(this.el, 'ionPickerDidDismiss');
): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionPickerDidDismiss', callback);
} }
/** /**
@ -195,18 +180,16 @@ export class Picker implements OverlayInterface {
* *
*/ */
@Method() @Method()
onWillDismiss( onWillDismiss(): Promise<OverlayEventDetail> {
callback?: (detail: OverlayEventDetail) => void return eventMethod(this.el, 'ionPickerWillDismiss');
): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionPickerWillDismiss', callback);
} }
/** /**
* Returns the column the matches the specified name * Returns the column the matches the specified name
*/ */
@Method() @Method()
getColumn(name: string): PickerColumn | undefined { getColumn(name: string): Promise<PickerColumn | undefined> {
return this.columns.find(column => column.name === name); return Promise.resolve(this.columns.find(column => column.name === name));
} }
private buttonClick(button: PickerButton) { private buttonClick(button: PickerButton) {

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

@ -30,7 +30,7 @@ export class PopoverController implements OverlayController {
* Get the most recently opened popover overlay. * Get the most recently opened popover overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonPopoverElement { async getTop(): Promise<HTMLIonPopoverElement> {
return getOverlay(this.doc, 'ion-popover') as HTMLIonPopoverElement; return getOverlay(this.doc, 'ion-popover') as HTMLIonPopoverElement;
} }
} }

8
core/src/components/popover/popover.tsx
View File

@ -201,8 +201,8 @@ export class Popover implements OverlayInterface {
* *
*/ */
@Method() @Method()
onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onDidDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionPopoverDidDismiss', callback); return eventMethod(this.el, 'ionPopoverDidDismiss');
} }
/** /**
@ -211,8 +211,8 @@ export class Popover implements OverlayInterface {
* *
*/ */
@Method() @Method()
onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onWillDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionPopoverWillDismiss', callback); return eventMethod(this.el, 'ionPopoverWillDismiss');
} }
hostData() { hostData() {

4
core/src/components/refresher/refresher.tsx
View File

@ -97,7 +97,7 @@ export class Refresher {
const contentEl = this.el.closest('ion-content'); const contentEl = this.el.closest('ion-content');
if (contentEl) { if (contentEl) {
await contentEl.componentOnReady(); await contentEl.componentOnReady();
this.scrollEl = contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
} else { } else {
console.error('ion-refresher did not attach, make sure the parent is an ion-content.'); console.error('ion-refresher did not attach, make sure the parent is an ion-content.');
} }
@ -156,7 +156,7 @@ export class Refresher {
*/ */
@Method() @Method()
getProgress() { getProgress() {
return this.progress; return Promise.resolve(this.progress);
} }
private canStart(): boolean { private canStart(): boolean {

2
core/src/components/reorder-group/reorder-group.tsx
View File

@ -45,7 +45,7 @@ export class ReorderGroup {
const contentEl = this.el.closest('ion-content'); const contentEl = this.el.closest('ion-content');
if (contentEl) { if (contentEl) {
await contentEl.componentOnReady(); await contentEl.componentOnReady();
this.scrollEl = contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
} }
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ this.gesture = (await import('../../utils/gesture/gesture')).createGesture({

2
core/src/components/router-outlet/route-outlet.tsx
View File

@ -92,7 +92,7 @@ export class RouterOutlet implements NavOutlet {
/** Returns the ID for the current route */ /** Returns the ID for the current route */
@Method() @Method()
getRouteId(): RouteID | undefined { async getRouteId(): Promise<RouteID | undefined> {
const active = this.activeEl; const active = this.activeEl;
return active ? { return active ? {
id: active.tagName, id: active.tagName,

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

@ -107,7 +107,7 @@ export class Router {
console.warn('[ion-router] router is busy, navChanged was cancelled'); console.warn('[ion-router] router is busy, navChanged was cancelled');
return false; 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 routes = readRoutes(this.el);
const chain = routerIDsToChain(ids, routes); const chain = routerIDsToChain(ids, routes);
if (!chain) { if (!chain) {

4
core/src/components/router/utils/dom.ts
View File

@ -44,7 +44,7 @@ export async function writeNavState(
} }
} }
export function readNavState(root: HTMLElement | undefined) { export async function readNavState(root: HTMLElement | undefined) {
const ids: RouteID[] = []; const ids: RouteID[] = [];
let outlet: NavOutletElement | undefined; let outlet: NavOutletElement | undefined;
let node: HTMLElement | undefined = root; let node: HTMLElement | undefined = root;
@ -52,7 +52,7 @@ export function readNavState(root: HTMLElement | undefined) {
while (true) { while (true) {
outlet = searchNavNode(node); outlet = searchNavNode(node);
if (outlet) { if (outlet) {
const id = outlet.getRouteId(); const id = await outlet.getRouteId();
if (id) { if (id) {
node = id.element; node = id.element;
id.element = undefined; id.element = undefined;

2
core/src/components/router/utils/interface.ts
View File

@ -1,7 +1,7 @@
export interface NavOutlet { export interface NavOutlet {
setRouteId(id: string, data: any, direction: number): Promise<RouteWrite>; setRouteId(id: string, data: any, direction: number): Promise<RouteWrite>;
getRouteId(): RouteID | undefined; getRouteId(): Promise<RouteID | undefined>;
} }
export interface RouterEventDetail { export interface RouterEventDetail {

41
core/src/components/slides/slides.tsx
View File

@ -177,24 +177,24 @@ export class Slides {
* Get the index of the active slide. * Get the index of the active slide.
*/ */
@Method() @Method()
getActiveIndex(): number { getActiveIndex(): Promise<number> {
return this.swiper.activeIndex; return Promise.resolve(this.swiper.activeIndex);
} }
/** /**
* Get the index of the previous slide. * Get the index of the previous slide.
*/ */
@Method() @Method()
getPreviousIndex(): number { getPreviousIndex(): Promise<number> {
return this.swiper.previousIndex; return Promise.resolve(this.swiper.previousIndex);
} }
/** /**
* Get the total number of slides. * Get the total number of slides.
*/ */
@Method() @Method()
length(): number { length(): Promise<number> {
return this.swiper.slides.length; return Promise.resolve(this.swiper.slides.length);
} }
/** /**
@ -202,23 +202,25 @@ export class Slides {
* *
*/ */
@Method() @Method()
isEnd(): boolean { isEnd(): Promise<ConstrainBoolean> {
return this.swiper.isEnd; return Promise.resolve(this.swiper.isEnd);
} }
/** /**
* Get whether or not the current slide is the first slide. * Get whether or not the current slide is the first slide.
*/ */
@Method() @Method()
isBeginning(): boolean { isBeginning(): Promise<boolean> {
return this.swiper.isBeginning; return Promise.resolve(this.swiper.isBeginning);
} }
/** /**
* Start auto play. * Start auto play.
*/ */
@Method() @Method()
startAutoplay(): void { startAutoplay()
{
this.swiper.autoplay.start(); this.swiper.autoplay.start();
} }
@ -226,7 +228,7 @@ export class Slides {
* Stop auto play. * Stop auto play.
*/ */
@Method() @Method()
stopAutoplay(): void { stopAutoplay() {
this.swiper.autoplay.stop(); this.swiper.autoplay.stop();
} }
@ -236,9 +238,10 @@ export class Slides {
@Method() @Method()
lockSwipeToNext(shouldLockSwipeToNext: boolean) { lockSwipeToNext(shouldLockSwipeToNext: boolean) {
if (shouldLockSwipeToNext) { if (shouldLockSwipeToNext) {
return this.swiper.lockSwipeToNext(); this.swiper.lockSwipeToNext();
} else {
this.swiper.unlockSwipeToNext();
} }
this.swiper.unlockSwipeToNext();
} }
/** /**
@ -247,9 +250,10 @@ export class Slides {
@Method() @Method()
lockSwipeToPrev(shouldLockSwipeToPrev: boolean) { lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
if (shouldLockSwipeToPrev) { if (shouldLockSwipeToPrev) {
return this.swiper.lockSwipeToPrev(); this.swiper.lockSwipeToPrev();
} else {
this.swiper.unlockSwipeToPrev();
} }
this.swiper.unlockSwipeToPrev();
} }
/** /**
@ -258,9 +262,10 @@ export class Slides {
@Method() @Method()
lockSwipes(shouldLockSwipes: boolean) { lockSwipes(shouldLockSwipes: boolean) {
if (shouldLockSwipes) { if (shouldLockSwipes) {
return this.swiper.lockSwipes(); this.swiper.lockSwipes();
} else {
this.swiper.unlockSwipes();
} }
this.swiper.unlockSwipes();
} }
private normalizeOptions() { private normalizeOptions() {

8
core/src/components/split-pane/readme.md
View File

@ -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 | | `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 ## CSS Custom Properties
| Name | Description | | Name | Description |

23
core/src/components/split-pane/split-pane.tsx
View File

@ -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 { Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme'; import { createThemedClasses } from '../../utils/theme';
@ -48,22 +48,22 @@ export class SplitPane {
/** /**
* Emitted when the split pane is visible. * 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 * Expression to be called when the split-pane visibility has changed
*/ */
@Event() protected ionSplitPaneVisible!: EventEmitter; @Event() ionSplitPaneVisible!: EventEmitter;
@Watch('visible') @Watch('visible')
visibleChanged(visible: boolean) { visibleChanged(visible: boolean) {
const detail = { visible }; const detail = { visible, isPane: this.isPane.bind(this) };
this.ionChange.emit(detail); this.ionChange.emit(detail);
this.ionSplitPaneVisible.emit(detail); this.ionSplitPaneVisible.emit(detail);
} }
componentDidLoad() { componentDidLoad() {
this._styleChildren(); this.styleChildren();
this.updateState(); this.updateState();
} }
@ -118,15 +118,7 @@ export class SplitPane {
this.visible = mediaList.matches; this.visible = mediaList.matches;
} }
/** Returns if the split pane is toggled or not */ private isPane(element: HTMLElement): boolean {
@Method()
isVisible(): boolean {
return this.visible;
}
/** @hidden */
@Method()
isPane(element: HTMLElement): boolean {
if (!this.visible) { if (!this.visible) {
return false; return false;
} }
@ -134,7 +126,7 @@ export class SplitPane {
&& element.classList.contains(SPLIT_PANE_SIDE); && element.classList.contains(SPLIT_PANE_SIDE);
} }
private _styleChildren() { private styleChildren() {
if (this.isServer) { if (this.isServer) {
return; return;
} }
@ -166,7 +158,6 @@ export class SplitPane {
} }
}; };
} }
} }
function setPaneClass(el: HTMLElement, isMain: boolean) { function setPaneClass(el: HTMLElement, isMain: boolean) {

1
core/src/components/tab/readme.md
View File

@ -42,7 +42,6 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
| Method | Description | | Method | Description |
| ----------- | ------------------------------------ | | ----------- | ------------------------------------ |
| `getTabId` | Get the Id for the tab |
| `setActive` | Set the active component for the tab | | `setActive` | Set the active component for the tab |

17
core/src/components/tab/tab.tsx
View File

@ -97,6 +97,11 @@ export class Tab {
@Event() ionTabMutated!: EventEmitter<void>; @Event() ionTabMutated!: EventEmitter<void>;
componentWillLoad() { componentWillLoad() {
// Set default name
if (!this.name && typeof this.component === 'string') {
this.name = this.component;
}
if (Build.isDev) { if (Build.isDev) {
if (this.component && this.el.childElementCount > 0) { 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.' + 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(); 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 */ /** Set the active component for the tab */
@Method() @Method()
async setActive(): Promise<void> { async setActive(): Promise<void> {

20
core/src/components/tabs/tabs.tsx
View File

@ -102,8 +102,8 @@ export class Tabs implements NavOutlet {
this.ionNavWillLoad.emit(); this.ionNavWillLoad.emit();
} }
async componentDidLoad() { componentDidLoad() {
await this.initSelect(); this.initSelect();
} }
componentDidUnload() { componentDidUnload() {
@ -134,7 +134,7 @@ export class Tabs implements NavOutlet {
*/ */
@Method() @Method()
async select(tabOrIndex: number | HTMLIonTabElement): Promise<boolean> { async select(tabOrIndex: number | HTMLIonTabElement): Promise<boolean> {
const selectedTab = this.getTab(tabOrIndex); const selectedTab = await this.getTab(tabOrIndex);
if (!this.shouldSwitch(selectedTab)) { if (!this.shouldSwitch(selectedTab)) {
return false; return false;
} }
@ -148,7 +148,7 @@ export class Tabs implements NavOutlet {
/** @hidden */ /** @hidden */
@Method() @Method()
async setRouteId(id: string): Promise<RouteWrite> { async setRouteId(id: string): Promise<RouteWrite> {
const selectedTab = this.getTab(id); const selectedTab = await this.getTab(id);
if (!this.shouldSwitch(selectedTab)) { if (!this.shouldSwitch(selectedTab)) {
return { changed: false, element: this.selectedTab }; return { changed: false, element: this.selectedTab };
} }
@ -163,16 +163,16 @@ export class Tabs implements NavOutlet {
/** @hidden */ /** @hidden */
@Method() @Method()
getRouteId(): RouteID | undefined { async getRouteId(): Promise<RouteID | undefined> {
const id = this.selectedTab && this.selectedTab.getTabId(); const id = this.selectedTab && this.selectedTab.name;
return id ? { id, element: this.selectedTab } : undefined; return id ? { id, element: this.selectedTab } : undefined;
} }
/** Get the tab at the given index */ /** Get the tab at the given index */
@Method() @Method()
getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement | undefined { async getTab(tabOrIndex: string | number | HTMLIonTabElement): Promise<HTMLIonTabElement | undefined> {
if (typeof tabOrIndex === 'string') { if (typeof tabOrIndex === 'string') {
return this.tabs.find(tab => tab.getTabId() === tabOrIndex); return this.tabs.find(tab => tab.name === tabOrIndex);
} }
if (typeof tabOrIndex === 'number') { if (typeof tabOrIndex === 'number') {
return this.tabs[tabOrIndex]; return this.tabs[tabOrIndex];
@ -184,8 +184,8 @@ export class Tabs implements NavOutlet {
* Get the currently selected tab * Get the currently selected tab
*/ */
@Method() @Method()
getSelected(): HTMLIonTabElement | undefined { getSelected(): Promise<HTMLIonTabElement | undefined> {
return this.selectedTab; return Promise.resolve(this.selectedTab);
} }
private initTabs() { private initTabs() {

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

@ -30,7 +30,7 @@ export class ToastController implements OverlayController {
* Get the most recently opened toast overlay. * Get the most recently opened toast overlay.
*/ */
@Method() @Method()
getTop(): HTMLIonToastElement { async getTop(): Promise<HTMLIonToastElement> {
return getOverlay(this.doc, 'ion-toast') as HTMLIonToastElement; return getOverlay(this.doc, 'ion-toast') as HTMLIonToastElement;
} }
} }

28
core/src/components/toast/readme.md
View File

@ -20,20 +20,20 @@ The toast can be dismissed automatically after a specific amount of time by pass
## Properties ## Properties
| Property | Attribute | Description | Type | | Property | Attribute | Description | Type |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------- | | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| `animated` | `animated` | If true, the toast will animate. Defaults to `true`. | `boolean` | | `animated` | `animated` | If true, the toast will animate. Defaults to `true`. | `boolean` |
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` | | `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[]` | | `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` | | `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` | | `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | | `boolean` | | `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` | | `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` |
| `message` | `message` | Message to be shown in the toast. | `string` | | `message` | `message` | Message to be shown in the toast. | `string` |
| `overlayId` | `overlay-id` | | `number` | | `overlayId` | `overlay-id` | | `number` |
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"top"`, `"bottom"` | | `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` | | `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` | | `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` |
## Events ## Events

8
core/src/components/toast/toast.tsx
View File

@ -163,8 +163,8 @@ export class Toast implements OverlayInterface {
* *
*/ */
@Method() @Method()
onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onDidDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionToastDidDismiss', callback); return eventMethod(this.el, 'ionToastDidDismiss');
} }
/** /**
@ -173,8 +173,8 @@ export class Toast implements OverlayInterface {
* *
*/ */
@Method() @Method()
onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> { onWillDismiss(): Promise<OverlayEventDetail> {
return eventMethod(this.el, 'ionToastWillDismiss', callback); return eventMethod(this.el, 'ionToastWillDismiss');
} }
hostData() { hostData() {

6
core/src/components/virtual-scroll/virtual-scroll.tsx
View File

@ -124,7 +124,7 @@ export class VirtualScroll {
await contentEl.componentOnReady(); await contentEl.componentOnReady();
this.contentEl = contentEl; this.contentEl = contentEl;
this.scrollEl = contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
this.calcCells(); this.calcCells();
this.updateState(); this.updateState();
} }
@ -148,8 +148,8 @@ export class VirtualScroll {
} }
@Method() @Method()
positionForItem(index: number): number { positionForItem(index: number): Promise<number> {
return positionForIndex(index, this.cells, this.getHeightIndex()); return Promise.resolve(positionForIndex(index, this.cells, this.getHeightIndex()));
} }
@Method() @Method()

2
core/src/utils/overlays-interface.ts
View File

@ -33,7 +33,7 @@ export interface OverlayInterface {
export interface OverlayController { export interface OverlayController {
create(opts?: any): Promise<HTMLElement>; create(opts?: any): Promise<HTMLElement>;
dismiss(data?: any, role?: string, alertId?: number): Promise<void>; dismiss(data?: any, role?: string, alertId?: number): Promise<void>;
getTop(): HTMLElement; getTop(): Promise<HTMLElement>;
} }
export interface HTMLIonOverlayElement extends HTMLStencilElement { export interface HTMLIonOverlayElement extends HTMLStencilElement {

8
core/src/utils/overlays.ts
View File

@ -162,15 +162,11 @@ export function autoFocus(containerEl: HTMLElement): HTMLElement | null {
return null; return null;
} }
export function eventMethod<T>(element: HTMLElement, eventName: string, callback?: (detail: T) => void): Promise<T> { export function eventMethod<T>(element: HTMLElement, eventName: string): Promise<T> {
let resolve: (detail: T) => void; let resolve: (detail: T) => void;
const promise = new Promise<T>(r => resolve = r); const promise = new Promise<T>(r => resolve = r);
onceEvent(element, eventName, (event: any) => { onceEvent(element, eventName, (event: any) => {
const detail = event.detail; resolve(event.detail);
if (callback) {
callback(detail);
}
resolve(detail);
}); });
return promise; return promise;
} }