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

feat(alert): add ability to use alert inline (#26316)

Browse Source
This commit is contained in:
Amanda Johnston
2022-11-18 13:32:27 -06:00
committed by GitHub
parent ef0d19c0f7
commit 08c0a5520a
13 changed files with 322 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/api.txt
View File

@ -80,20 +80,26 @@ ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefin
ion-alert,prop,header,string | undefined,undefined,false,false
ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-alert,prop,inputs,AlertInput[],[],false,false
ion-alert,prop,isOpen,boolean,false,false,false
ion-alert,prop,keyboardClose,boolean,true,false,false
ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false
ion-alert,prop,mode,"ios" | "md",undefined,false,false
ion-alert,prop,subHeader,string | undefined,undefined,false,false
ion-alert,prop,translucent,boolean,false,false,false
ion-alert,prop,trigger,string | undefined,undefined,false,false
ion-alert,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
ion-alert,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
ion-alert,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
ion-alert,method,present,present() => Promise<void>
ion-alert,event,didDismiss,OverlayEventDetail<any>,true
ion-alert,event,didPresent,void,true
ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
ion-alert,event,ionAlertDidPresent,void,true
ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
ion-alert,event,ionAlertWillPresent,void,true
ion-alert,event,willDismiss,OverlayEventDetail<any>,true
ion-alert,event,willPresent,void,true
ion-alert,css-prop,--backdrop-opacity
ion-alert,css-prop,--background
ion-alert,css-prop,--height

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

@ -171,6 +171,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 alert overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
@ -181,6 +182,7 @@ export namespace Components {
* Animation to use when the alert is presented.
*/
"enterAnimation"?: AnimationBuilder;
"hasController": boolean;
/**
* The main title in the heading of the alert.
*/
@ -193,6 +195,10 @@ export namespace Components {
* Array of input to show in the alert.
*/
"inputs": AlertInput[];
/**
* If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert 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.
*/
@ -230,6 +236,10 @@ export namespace Components {
* If `true`, the alert 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 alert to open when clicked.
*/
"trigger": string | undefined;
}
interface IonApp {
"setFocus": (elements: HTMLElement[]) => Promise<void>;
@ -3998,10 +4008,12 @@ 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;
/**
* Animation to use when the alert is presented.
*/
"enterAnimation"?: AnimationBuilder;
"hasController"?: boolean;
/**
* The main title in the heading of the alert.
*/
@ -4014,6 +4026,10 @@ declare namespace LocalJSX {
* Array of input to show in the alert.
*/
"inputs"?: AlertInput[];
/**
* If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert 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.
*/
@ -4030,6 +4046,14 @@ declare namespace LocalJSX {
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.
*/
"onDidDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
/**
* Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.
*/
"onDidPresent"?: (event: IonAlertCustomEvent<void>) => void;
/**
* Emitted after the alert has dismissed.
*/
@ -4046,6 +4070,14 @@ declare namespace LocalJSX {
* Emitted before the alert has presented.
*/
"onIonAlertWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
/**
* Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss.
*/
"onWillDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
/**
* Emitted before the alert has presented. Shorthand for ionAlertWillPresent.
*/
"onWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
"overlayIndex": number;
/**
* The subtitle in the heading of the alert. Displayed under the title.
@ -4055,6 +4087,10 @@ declare namespace LocalJSX {
* If `true`, the alert 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 alert to open when clicked.
*/
"trigger"?: string | undefined;
}
interface IonApp {
}

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

@ -9,10 +9,21 @@ import type {
CssClassMap,
OverlayEventDetail,
OverlayInterface,
FrameworkDelegate,
} from '../../interface';
import type { Gesture } from '../../utils/gesture';
import { createButtonActiveGesture } from '../../utils/gesture/button-active';
import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
import {
createDelegateController,
createTriggerController,
BACKDROP,
dismiss,
eventMethod,
isCancel,
prepareOverlay,
present,
safeCall,
} from '../../utils/overlays';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';
@ -34,12 +45,16 @@ import { mdLeaveAnimation } from './animations/md.leave';
scoped: true,
})
export class Alert implements ComponentInterface, OverlayInterface {
private readonly delegateController = createDelegateController(this);
private readonly triggerController = createTriggerController();
private activeId?: string;
private inputType?: string;
private processedInputs: AlertInput[] = [];
private processedButtons: AlertButton[] = [];
private wrapperEl?: HTMLElement;
private gesture?: Gesture;
private currentTransition?: Promise<any>;
presented = false;
lastFocus?: HTMLElement;
@ -49,6 +64,12 @@ export class Alert 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.
*/
@ -123,6 +144,36 @@ export class Alert implements ComponentInterface, OverlayInterface {
*/
@Prop() htmlAttributes?: { [key: string]: any };
/**
* If `true`, the alert will open. If `false`, the alert will close.
* Use this if you need finer grained control over presentation, otherwise
* just use the alertController or the `trigger` property.
* Note: `isOpen` will not automatically be set back to `false` when
* the alert 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 alert 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 alert has presented.
*/
@ -143,6 +194,30 @@ export class Alert implements ComponentInterface, OverlayInterface {
*/
@Event({ eventName: 'ionAlertDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
/**
* Emitted after the alert has presented.
* Shorthand for ionAlertWillDismiss.
*/
@Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
/**
* Emitted before the alert has presented.
* Shorthand for ionAlertWillPresent.
*/
@Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter<void>;
/**
* Emitted before the alert has dismissed.
* Shorthand for ionAlertWillDismiss.
*/
@Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter<OverlayEventDetail>;
/**
* Emitted after the alert has dismissed.
* Shorthand for ionAlertDidDismiss.
*/
@Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
@Listen('keydown', { target: 'document' })
onKeydown(ev: any) {
const inputTypes = new Set(this.processedInputs.map((i) => i.type));
@ -247,6 +322,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
connectedCallback() {
prepareOverlay(this.el);
this.triggerChanged();
}
componentWillLoad() {
@ -255,6 +331,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
}
disconnectedCallback() {
this.triggerController.removeClickListener();
if (this.gesture) {
this.gesture.destroy();
this.gesture = undefined;
@ -282,8 +360,24 @@ export class Alert implements ComponentInterface, OverlayInterface {
* Present the alert overlay after it has been created.
*/
@Method()
present(): Promise<void> {
return present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
async present(): Promise<void> {
/**
* When using an inline alert
* and dismissing an alert it is possible to
* quickly present the alert 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, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
await this.currentTransition;
this.currentTransition = undefined;
}
/**
@ -296,8 +390,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/
@Method()
dismiss(data?: any, role?: string): Promise<boolean> {
return dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
async dismiss(data?: any, role?: string): Promise<boolean> {
this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
const dismissed = await this.currentTransition;
if (dismissed) {
this.delegateController.removeViewFromDom();
}
return dismissed;
}
/**

30
core/src/components/alert/test/isOpen/alert.e2e.ts Normal file
View File

@ -0,0 +1,30 @@
import { test } from '@utils/test/playwright';
test.describe('alert: 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/alert/test/isOpen');
});
test('should open the alert', async ({ page }) => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
await page.click('#default');
await ionAlertDidPresent.next();
await page.waitForSelector('ion-alert', { state: 'visible' });
});
test('should open the alert then close after a timeout', async ({ page }) => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
await page.click('#timeout');
await ionAlertDidPresent.next();
await page.waitForSelector('ion-alert', { state: 'visible' });
await ionAlertDidDismiss.next();
await page.waitForSelector('ion-alert', { state: 'hidden' });
});
});

51
core/src/components/alert/test/isOpen/index.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Alert - 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>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Alert - isOpen</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button id="default" onclick="openAlert()">Open Alert</ion-button>
<ion-button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</ion-button>
<ion-alert header="Alert" message="Hello World!"></ion-alert>
</ion-content>
</ion-app>
<script>
const alert = document.querySelector('ion-alert');
alert.buttons = ['OK'];
const openAlert = (timeout) => {
alert.isOpen = true;
if (timeout) {
setTimeout(() => {
alert.isOpen = false;
}, timeout);
}
};
alert.addEventListener('ionAlertDidDismiss', () => {
alert.isOpen = false;
});
</script>
</body>
</html>

31
core/src/components/alert/test/trigger/alert.e2e.ts Normal file
View File

@ -0,0 +1,31 @@
import { test } from '@utils/test/playwright';
test.describe('alert: trigger', () => {
test.beforeEach(async ({ page, skip }) => {
skip.rtl('trigger does not behave differently in RTL');
skip.mode('md');
await page.goto('/src/components/alert/test/trigger');
});
test('should open the alert', async ({ page }) => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
await page.click('#default');
await ionAlertDidPresent.next();
await page.waitForSelector('#default-alert', { state: 'visible' });
});
test('should present a previously presented alert', async ({ page }) => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
await page.click('#timeout');
await ionAlertDidDismiss.next();
await page.click('#timeout');
await ionAlertDidPresent.next();
await page.waitForSelector('#timeout-alert', { state: 'visible' });
});
});

47
core/src/components/alert/test/trigger/index.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Alert - 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>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Alert - Trigger</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button id="default">Open Alert</ion-button>
<ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
<ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
<ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
</ion-content>
</ion-app>
<script>
const defaultAlert = document.querySelector('#default-alert');
const timeoutAlert = document.querySelector('#timeout-alert');
defaultAlert.buttons = ['OK'];
timeoutAlert.buttons = ['OK'];
timeoutAlert.addEventListener('didPresent', () => {
setTimeout(() => {
timeoutAlert.dismiss();
}, 500);
});
</script>
</body>
</html>

9
core/src/utils/framework-delegate.ts
View File

@ -86,7 +86,14 @@ export const CoreDelegate = () => {
BaseComponent.appendChild(el);
await new Promise((resolve) => componentOnReady(el, resolve));
} else if (BaseComponent.children.length > 0) {
} else if (
BaseComponent.children.length > 0 &&
(BaseComponent.tagName === 'ION-MODAL' || BaseComponent.tagName === 'ION-POPOVER')
) {
/**
* The delegate host wrapper el is only needed for modals and popovers
* because they allow the dev to provide custom content to the overlay.
*/
const root = BaseComponent.children[0] as HTMLElement;
if (!root.classList.contains('ion-delegate-host')) {
/**

7
packages/react/src/components/IonAlert.tsx
View File

@ -1,10 +1,9 @@
import { AlertOptions, alertController } from '@ionic/core/components';
import { JSX } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-alert.js';
import { createControllerComponent } from './createControllerComponent';
import { createInlineOverlayComponent } from './createInlineOverlayComponent';
export const IonAlert = /*@__PURE__*/ createControllerComponent<AlertOptions, HTMLIonAlertElement>(
export const IonAlert = /*@__PURE__*/ createInlineOverlayComponent<JSX.IonAlert, HTMLIonAlertElement>(
'ion-alert',
alertController,
defineCustomElement
);

4
packages/react/test-app/tests/e2e/specs/overlay-components/IonAlert.cy.ts
View File

@ -13,7 +13,7 @@ describe('IonAlert', () => {
//click ok
cy.get('ion-alert').get('button:contains("Ok")').click();
cy.get('div').contains('Ok clicked');
cy.get('ion-alert').should('not.exist');
cy.get('ion-alert').should('not.be.visible');
});
it('display alert and call dismiss to close it', () => {
@ -22,6 +22,6 @@ describe('IonAlert', () => {
cy.get('ion-alert').contains('Alert');
//verify alert is gone
cy.get('ion-alert').should('not.exist');
cy.get('ion-alert').should('not.be.visible');
});
});

1
packages/vue/scripts/copy-overlays.js
View File

@ -9,7 +9,6 @@ function generateOverlays() {
},
{
tag: 'ion-alert',
controller: 'alertController',
name: 'IonAlert'
},
{

3
packages/vue/src/components/Overlays.ts
View File

@ -5,7 +5,6 @@
import {
JSX,
alertController,
pickerController,
} from '@ionic/core/components';
@ -21,7 +20,7 @@ import { defineOverlayContainer } from '../vue-component-lib/overlays';
export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
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 IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
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']);

2
packages/vue/test/base/tests/e2e/specs/overlays.cy.js
View File

@ -94,7 +94,7 @@ describe('Overlays', () => {
});
it(`should open and close ion-alert via component`, () => {
testComponent('ion-alert');
testInlineOverlay('ion-alert');
});
it(`should open and close ion-action-sheet via component`, () => {