mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00
feat(loading): use loading overlay inline (#26153)
This commit is contained in:
Sean Perkins
@ -695,6 +695,7 @@ ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
|
||||
ion-loading,prop,duration,number,0,false,false
|
||||
ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
|
||||
ion-loading,prop,isOpen,boolean,false,false,false
|
||||
ion-loading,prop,keyboardClose,boolean,true,false,false
|
||||
ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
|
||||
@ -702,14 +703,19 @@ ion-loading,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-loading,prop,showBackdrop,boolean,true,false,false
|
||||
ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-loading,prop,translucent,boolean,false,false,false
|
||||
ion-loading,prop,trigger,string | undefined,undefined,false,false
|
||||
ion-loading,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
|
||||
ion-loading,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
ion-loading,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
ion-loading,method,present,present() => Promise<void>
|
||||
ion-loading,event,didDismiss,OverlayEventDetail<any>,true
|
||||
ion-loading,event,didPresent,void,true
|
||||
ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
|
||||
ion-loading,event,ionLoadingDidPresent,void,true
|
||||
ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
|
||||
ion-loading,event,ionLoadingWillPresent,void,true
|
||||
ion-loading,event,willDismiss,OverlayEventDetail<any>,true
|
||||
ion-loading,event,willPresent,void,true
|
||||
ion-loading,css-prop,--backdrop-opacity
|
||||
ion-loading,css-prop,--background
|
||||
ion-loading,css-prop,--height
|
||||
|
||||
36
core/src/components.d.ts
vendored
36
core/src/components.d.ts
vendored
@ -1385,6 +1385,7 @@ export namespace Components {
|
||||
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
|
||||
*/
|
||||
"cssClass"?: string | string[];
|
||||
"delegate"?: FrameworkDelegate;
|
||||
/**
|
||||
* Dismiss the loading overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
@ -1399,10 +1400,15 @@ export namespace Components {
|
||||
* Animation to use when the loading indicator is presented.
|
||||
*/
|
||||
"enterAnimation"?: AnimationBuilder;
|
||||
"hasController": boolean;
|
||||
/**
|
||||
* Additional attributes to pass to the loader.
|
||||
*/
|
||||
"htmlAttributes"?: LoadingAttributes;
|
||||
/**
|
||||
* If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
|
||||
*/
|
||||
"isOpen": boolean;
|
||||
/**
|
||||
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
||||
*/
|
||||
@ -1444,6 +1450,10 @@ export namespace Components {
|
||||
* If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
|
||||
*/
|
||||
"translucent": boolean;
|
||||
/**
|
||||
* An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
|
||||
*/
|
||||
"trigger": string | undefined;
|
||||
}
|
||||
interface IonMenu {
|
||||
/**
|
||||
@ -5183,6 +5193,7 @@ declare namespace LocalJSX {
|
||||
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
|
||||
*/
|
||||
"cssClass"?: string | string[];
|
||||
"delegate"?: FrameworkDelegate;
|
||||
/**
|
||||
* Number of milliseconds to wait before dismissing the loading indicator.
|
||||
*/
|
||||
@ -5191,10 +5202,15 @@ declare namespace LocalJSX {
|
||||
* Animation to use when the loading indicator is presented.
|
||||
*/
|
||||
"enterAnimation"?: AnimationBuilder;
|
||||
"hasController"?: boolean;
|
||||
/**
|
||||
* Additional attributes to pass to the loader.
|
||||
*/
|
||||
"htmlAttributes"?: LoadingAttributes;
|
||||
/**
|
||||
* If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
|
||||
*/
|
||||
"isOpen"?: boolean;
|
||||
/**
|
||||
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
||||
*/
|
||||
@ -5211,6 +5227,14 @@ declare namespace LocalJSX {
|
||||
* The mode determines which platform styles to use.
|
||||
*/
|
||||
"mode"?: "ios" | "md";
|
||||
/**
|
||||
* Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.
|
||||
*/
|
||||
"onDidDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
|
||||
/**
|
||||
* Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.
|
||||
*/
|
||||
"onDidPresent"?: (event: IonLoadingCustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted after the loading has dismissed.
|
||||
*/
|
||||
@ -5227,6 +5251,14 @@ declare namespace LocalJSX {
|
||||
* Emitted before the loading has presented.
|
||||
*/
|
||||
"onIonLoadingWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.
|
||||
*/
|
||||
"onWillDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
|
||||
/**
|
||||
* Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.
|
||||
*/
|
||||
"onWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
|
||||
"overlayIndex": number;
|
||||
/**
|
||||
* If `true`, a backdrop will be displayed behind the loading indicator.
|
||||
@ -5240,6 +5272,10 @@ declare namespace LocalJSX {
|
||||
* If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
|
||||
*/
|
||||
"translucent"?: boolean;
|
||||
/**
|
||||
* An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
|
||||
*/
|
||||
"trigger"?: string | undefined;
|
||||
}
|
||||
interface IonMenu {
|
||||
/**
|
||||
|
||||
@ -1,16 +1,26 @@
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
|
||||
import { Watch, Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import type {
|
||||
AnimationBuilder,
|
||||
FrameworkDelegate,
|
||||
LoadingAttributes,
|
||||
OverlayEventDetail,
|
||||
OverlayInterface,
|
||||
SpinnerTypes,
|
||||
} from '../../interface';
|
||||
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
|
||||
import { raf } from '../../utils/helpers';
|
||||
import {
|
||||
BACKDROP,
|
||||
dismiss,
|
||||
eventMethod,
|
||||
prepareOverlay,
|
||||
present,
|
||||
createDelegateController,
|
||||
createTriggerController,
|
||||
} from '../../utils/overlays';
|
||||
import type { IonicSafeString } from '../../utils/sanitization';
|
||||
import { sanitizeDOMString } from '../../utils/sanitization';
|
||||
import { getClassMap } from '../../utils/theme';
|
||||
@ -32,7 +42,10 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
scoped: true,
|
||||
})
|
||||
export class Loading implements ComponentInterface, OverlayInterface {
|
||||
private readonly delegateController = createDelegateController(this);
|
||||
private readonly triggerController = createTriggerController();
|
||||
private durationTimeout: any;
|
||||
private currentTransition?: Promise<any>;
|
||||
|
||||
presented = false;
|
||||
lastFocus?: HTMLElement;
|
||||
@ -42,6 +55,12 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
/** @internal */
|
||||
@Prop() overlayIndex!: number;
|
||||
|
||||
/** @internal */
|
||||
@Prop() delegate?: FrameworkDelegate;
|
||||
|
||||
/** @internal */
|
||||
@Prop() hasController = false;
|
||||
|
||||
/**
|
||||
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
||||
*/
|
||||
@ -105,6 +124,36 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Prop() htmlAttributes?: LoadingAttributes;
|
||||
|
||||
/**
|
||||
* If `true`, the loading indicator will open. If `false`, the loading indicator will close.
|
||||
* Use this if you need finer grained control over presentation, otherwise
|
||||
* just use the loadingController or the `trigger` property.
|
||||
* Note: `isOpen` will not automatically be set back to `false` when
|
||||
* the loading indicator dismisses. You will need to do that in your code.
|
||||
*/
|
||||
@Prop() isOpen = false;
|
||||
@Watch('isOpen')
|
||||
onIsOpenChange(newValue: boolean, oldValue: boolean) {
|
||||
if (newValue === true && oldValue === false) {
|
||||
this.present();
|
||||
} else if (newValue === false && oldValue === true) {
|
||||
this.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* An ID corresponding to the trigger element that
|
||||
* causes the loading indicator to open when clicked.
|
||||
*/
|
||||
@Prop() trigger: string | undefined;
|
||||
@Watch('trigger')
|
||||
triggerChanged() {
|
||||
const { trigger, el, triggerController } = this;
|
||||
if (trigger) {
|
||||
triggerController.addClickListener(el, trigger);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emitted after the loading has presented.
|
||||
*/
|
||||
@ -125,8 +174,33 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted after the loading indicator has presented.
|
||||
* Shorthand for ionLoadingWillDismiss.
|
||||
*/
|
||||
@Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted before the loading indicator has presented.
|
||||
* Shorthand for ionLoadingWillPresent.
|
||||
*/
|
||||
@Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted before the loading indicator has dismissed.
|
||||
* Shorthand for ionLoadingWillDismiss.
|
||||
*/
|
||||
@Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter<OverlayEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted after the loading indicator has dismissed.
|
||||
* Shorthand for ionLoadingDidDismiss.
|
||||
*/
|
||||
@Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
|
||||
|
||||
connectedCallback() {
|
||||
prepareOverlay(this.el);
|
||||
this.triggerChanged();
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
@ -136,16 +210,48 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
/**
|
||||
* If loading indicator was rendered with isOpen="true"
|
||||
* then we should open loading indicator immediately.
|
||||
*/
|
||||
if (this.isOpen === true) {
|
||||
raf(() => this.present());
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.triggerController.removeClickListener();
|
||||
}
|
||||
|
||||
/**
|
||||
* Present the loading overlay after it has been created.
|
||||
*/
|
||||
@Method()
|
||||
async present(): Promise<void> {
|
||||
await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, undefined);
|
||||
/**
|
||||
* When using an inline loading indicator
|
||||
* and dismissing a loading indicator it is possible to
|
||||
* quickly present the loading indicator while it is
|
||||
* dismissing. We need to await any current
|
||||
* transition to allow the dismiss to finish
|
||||
* before presenting again.
|
||||
*/
|
||||
if (this.currentTransition !== undefined) {
|
||||
await this.currentTransition;
|
||||
}
|
||||
|
||||
await this.delegateController.attachViewToDom();
|
||||
|
||||
this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
|
||||
|
||||
await this.currentTransition;
|
||||
|
||||
if (this.duration > 0) {
|
||||
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
||||
}
|
||||
|
||||
this.currentTransition = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -158,11 +264,19 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
*/
|
||||
@Method()
|
||||
dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
if (this.durationTimeout) {
|
||||
clearTimeout(this.durationTimeout);
|
||||
}
|
||||
return dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
|
||||
this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
|
||||
|
||||
const dismissed = await this.currentTransition;
|
||||
|
||||
if (dismissed) {
|
||||
this.delegateController.removeViewFromDom();
|
||||
}
|
||||
|
||||
return dismissed;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
80
core/src/components/loading/test/isOpen/index.html
Normal file
80
core/src/components/loading/test/isOpen/index.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Loading - isOpen</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #6f7378;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - isOpen</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Default</h2>
|
||||
<ion-button id="default" onclick="openLoading()">Open Loading</ion-button>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<h2>Open, then close after 500ms</h2>
|
||||
<ion-button id="timeout" onclick="openLoading(500)">Open Loading</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-loading message="Hello world"></ion-loading>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
const loading = document.querySelector('ion-loading');
|
||||
|
||||
const openLoading = (timeout) => {
|
||||
loading.isOpen = true;
|
||||
|
||||
if (timeout) {
|
||||
setTimeout(() => {
|
||||
loading.isOpen = false;
|
||||
}, timeout);
|
||||
}
|
||||
};
|
||||
|
||||
loading.addEventListener('ionLoadingDidDismiss', () => {
|
||||
loading.isOpen = false;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
core/src/components/loading/test/isOpen/loading.e2e.ts
Normal file
30
core/src/components/loading/test/isOpen/loading.e2e.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('loading: isOpen', () => {
|
||||
test.beforeEach(async ({ page, skip }) => {
|
||||
skip.rtl('isOpen does not behave differently in RTL');
|
||||
skip.mode('md', 'isOpen does not behave differently in MD');
|
||||
await page.goto('/src/components/loading/test/isOpen');
|
||||
});
|
||||
|
||||
test('should open the loading indicator', async ({ page }) => {
|
||||
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
|
||||
await page.click('#default');
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
await page.waitForSelector('ion-loading', { state: 'visible' });
|
||||
});
|
||||
|
||||
test('should open the loading indicator then close after a timeout', async ({ page }) => {
|
||||
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
|
||||
const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
|
||||
await page.click('#timeout');
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
await page.waitForSelector('ion-loading', { state: 'visible' });
|
||||
|
||||
await ionLoadingDidDismiss.next();
|
||||
|
||||
await page.waitForSelector('ion-loading', { state: 'hidden' });
|
||||
});
|
||||
});
|
||||
71
core/src/components/loading/test/trigger/index.html
Normal file
71
core/src/components/loading/test/trigger/index.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Loading - trigger</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #6f7378;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - trigger</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Default</h2>
|
||||
<ion-button id="default">Open Loading</ion-button>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<h2>Open, then close after 500ms</h2>
|
||||
<ion-button id="timeout">Open Loading</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-loading id="default-loading" trigger="default" message="Hello world"></ion-loading>
|
||||
<ion-loading id="timeout-loading" trigger="timeout" message="Hello world"></ion-loading>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
<script>
|
||||
const loadingTimeout = document.getElementById('timeout-loading');
|
||||
loadingTimeout.addEventListener('didPresent', () => {
|
||||
setTimeout(() => {
|
||||
loadingTimeout.dismiss();
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
core/src/components/loading/test/trigger/loading.e2e.ts
Normal file
31
core/src/components/loading/test/trigger/loading.e2e.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('loading: trigger', () => {
|
||||
test.beforeEach(async ({ page, skip }) => {
|
||||
skip.rtl('trigger does not behave differently in RTL');
|
||||
skip.mode('md');
|
||||
await page.goto('/src/components/loading/test/trigger');
|
||||
});
|
||||
|
||||
test('should open the loading indicator', async ({ page }) => {
|
||||
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
|
||||
await page.click('#default');
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
await page.waitForSelector('#default-loading', { state: 'visible' });
|
||||
});
|
||||
|
||||
test('should present a previously presented loading indicator', async ({ page }) => {
|
||||
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
|
||||
const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
|
||||
|
||||
await page.click('#timeout');
|
||||
|
||||
await ionLoadingDidDismiss.next();
|
||||
|
||||
await page.click('#timeout');
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
await page.waitForSelector('#timeout-loading', { state: 'visible' });
|
||||
});
|
||||
});
|
||||
@ -53,6 +53,8 @@ export const CoreDelegate = () => {
|
||||
userComponentProps: any = {},
|
||||
cssClasses: string[] = []
|
||||
) => {
|
||||
const hasUserDefinedComponent = userComponent !== undefined;
|
||||
|
||||
BaseComponent = parentElement;
|
||||
/**
|
||||
* If passing in a component via the `component` props
|
||||
@ -86,7 +88,7 @@ export const CoreDelegate = () => {
|
||||
BaseComponent.appendChild(el);
|
||||
|
||||
await new Promise((resolve) => componentOnReady(el, resolve));
|
||||
} else if (BaseComponent.children.length > 0) {
|
||||
} else if (hasUserDefinedComponent && BaseComponent.children.length > 0) {
|
||||
// If there is no component, then we need to create a new parent
|
||||
// element to apply the css classes to.
|
||||
const el = BaseComponent.ownerDocument?.createElement('div');
|
||||
|
||||
@ -43,6 +43,7 @@ export interface HTMLIonOverlayElement extends HTMLStencilElement {
|
||||
lastFocus?: HTMLElement;
|
||||
|
||||
dismiss(data?: any, role?: string): Promise<boolean>;
|
||||
present: () => Promise<void>;
|
||||
}
|
||||
|
||||
export type OverlaySelect = HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;
|
||||
|
||||
@ -6,6 +6,7 @@ import type {
|
||||
Animation,
|
||||
AnimationBuilder,
|
||||
BackButtonEvent,
|
||||
FrameworkDelegate,
|
||||
HTMLIonOverlayElement,
|
||||
IonicConfig,
|
||||
LoadingOptions,
|
||||
@ -16,6 +17,7 @@ import type {
|
||||
ToastOptions,
|
||||
} from '../interface';
|
||||
|
||||
import { CoreDelegate } from './framework-delegate';
|
||||
import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
|
||||
import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from './helpers';
|
||||
|
||||
@ -612,3 +614,151 @@ export const safeCall = (handler: any, arg?: any) => {
|
||||
};
|
||||
|
||||
export const BACKDROP = 'backdrop';
|
||||
|
||||
/**
|
||||
* Creates a delegate controller.
|
||||
*
|
||||
* Requires that the component has the following properties:
|
||||
* - `el: HTMLElement`
|
||||
* - `hasController: boolean`
|
||||
* - `delegate?: FrameworkDelegate`
|
||||
*
|
||||
* @param ref The component class instance.
|
||||
*/
|
||||
export const createDelegateController = (ref: {
|
||||
el: HTMLElement;
|
||||
hasController: boolean;
|
||||
delegate?: FrameworkDelegate;
|
||||
}) => {
|
||||
let inline = false;
|
||||
let workingDelegate: FrameworkDelegate | undefined;
|
||||
|
||||
const coreDelegate: FrameworkDelegate = CoreDelegate();
|
||||
|
||||
/**
|
||||
<<<<<<< HEAD
|
||||
* * Determines whether or not an overlay is being used
|
||||
=======
|
||||
* Determines whether or not an overlay is being used
|
||||
>>>>>>> FW-2334
|
||||
* inline or via a controller/JS and returns the correct delegate.
|
||||
* By default, subsequent calls to getDelegate will use
|
||||
* a cached version of the delegate.
|
||||
* This is useful for calling dismiss after present,
|
||||
* so that the correct delegate is given.
|
||||
* @param force `true` to force the non-cached version of the delegate.
|
||||
* @returns The delegate to use and whether or not the overlay is inline.
|
||||
*/
|
||||
const getDelegate = (force = false) => {
|
||||
if (workingDelegate && !force) {
|
||||
return {
|
||||
delegate: workingDelegate,
|
||||
inline,
|
||||
};
|
||||
}
|
||||
const { el, hasController, delegate } = ref;
|
||||
/**
|
||||
* If using overlay inline
|
||||
* we potentially need to use the coreDelegate
|
||||
* so that this works in vanilla JS apps.
|
||||
* If a developer has presented this component
|
||||
* via a controller, then we can assume
|
||||
* the component is already in the
|
||||
* correct place.
|
||||
*/
|
||||
const parentEl = el.parentNode as HTMLElement | null;
|
||||
inline = parentEl !== null && !hasController;
|
||||
workingDelegate = inline ? delegate || coreDelegate : delegate;
|
||||
|
||||
return { inline, delegate: workingDelegate };
|
||||
};
|
||||
|
||||
/**
|
||||
* Attaches a component in the DOM. Teleports the component
|
||||
* to the root of the app.
|
||||
* @param component The component to optionally construct and append to the element.
|
||||
*/
|
||||
const attachViewToDom = async (component?: any) => {
|
||||
const { delegate } = getDelegate(true);
|
||||
if (delegate) {
|
||||
return await delegate.attachViewToDom(ref.el, component);
|
||||
}
|
||||
const { hasController } = ref;
|
||||
if (hasController && component !== undefined) {
|
||||
throw new Error('framework delegate is missing');
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Moves a component back to its original location in the DOM.
|
||||
*/
|
||||
const removeViewFromDom = () => {
|
||||
const { delegate } = getDelegate();
|
||||
if (delegate && ref.el !== undefined) {
|
||||
delegate.removeViewFromDom(ref.el.parentElement, ref.el);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
attachViewToDom,
|
||||
removeViewFromDom,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructs a trigger interaction for an overlay.
|
||||
* Presents an overlay when the trigger is clicked.
|
||||
*
|
||||
* Usage:
|
||||
* ```ts
|
||||
* triggerController = createTriggerController();
|
||||
* triggerController.addClickListener(el, trigger);
|
||||
* ```
|
||||
*/
|
||||
export const createTriggerController = () => {
|
||||
let destroyTriggerInteraction: (() => void) | undefined;
|
||||
|
||||
/**
|
||||
* Removes the click listener from the trigger element.
|
||||
*/
|
||||
const removeClickListener = (): void => {
|
||||
if (destroyTriggerInteraction) {
|
||||
destroyTriggerInteraction();
|
||||
destroyTriggerInteraction = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a click listener to the trigger element.
|
||||
* Presents the overlay when the trigger is clicked.
|
||||
* @param el The overlay element.
|
||||
* @param trigger The ID of the element to add a click listener to.
|
||||
*/
|
||||
const addClickListener = (el: HTMLIonOverlayElement, trigger: string): void => {
|
||||
removeClickListener();
|
||||
|
||||
const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
|
||||
if (!triggerEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
const configureTriggerInteraction = (targetEl: HTMLElement, overlayEl: HTMLIonOverlayElement) => {
|
||||
const openOverlay = () => {
|
||||
overlayEl.present();
|
||||
};
|
||||
targetEl.addEventListener('click', openOverlay);
|
||||
|
||||
return () => {
|
||||
targetEl.removeEventListener('click', openOverlay);
|
||||
};
|
||||
};
|
||||
|
||||
destroyTriggerInteraction = configureTriggerInteraction(triggerEl, el);
|
||||
};
|
||||
|
||||
return {
|
||||
addClickListener,
|
||||
removeClickListener,
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { LoadingOptions, loadingController } from '@ionic/core/components';
|
||||
import { JSX } from '@ionic/core/components';
|
||||
import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
|
||||
|
||||
import { createControllerComponent } from './createControllerComponent';
|
||||
import { createInlineOverlayComponent } from './createInlineOverlayComponent';
|
||||
|
||||
export const IonLoading = /*@__PURE__*/ createControllerComponent<
|
||||
LoadingOptions,
|
||||
export const IonLoading = /*@__PURE__*/ createInlineOverlayComponent<
|
||||
JSX.IonLoading,
|
||||
HTMLIonLoadingElement
|
||||
>('ion-loading', loadingController, defineCustomElement);
|
||||
>('ion-loading', defineCustomElement);
|
||||
@ -9,7 +9,7 @@ describe('IonLoading', () => {
|
||||
cy.get('ion-loading').contains('Loading');
|
||||
|
||||
//loading goes away after 1s
|
||||
cy.get('ion-loading').should('not.exist');
|
||||
cy.get('ion-loading').should('not.be.visible');
|
||||
});
|
||||
|
||||
it('display loading and call dismiss to close it', () => {
|
||||
@ -17,7 +17,7 @@ describe('IonLoading', () => {
|
||||
cy.get('ion-button').contains('Show Loading, hide after 250 ms').click();
|
||||
cy.get('ion-loading').contains('Loading');
|
||||
|
||||
//verify loading is gone
|
||||
cy.get('ion-loading').should('not.exist');
|
||||
//verify loading is hidden
|
||||
cy.get('ion-loading').should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
@ -23,7 +23,7 @@ export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonAction
|
||||
|
||||
export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
|
||||
|
||||
export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController);
|
||||
export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'], loadingController);
|
||||
|
||||
export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user