javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into chore/sync-with-main-6

Browse Source
This commit is contained in:
amandaesmith3
2023-05-05 13:30:21 -05:00
parent 4a6870553b 1be73330ca
commit 6c68c56a7f
1333 changed files with 8739 additions and 6747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import {
prepareOverlay,
present,
createTriggerController,
setOverlayId
} from '@utils/overlays';
import { getClassMap } from '@utils/theme';
import { deepReady, waitForMount } from '@utils/transition';
@ -65,8 +66,6 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
export class Modal implements ComponentInterface, OverlayInterface {
private readonly triggerController = createTriggerController();
private gesture?: Gesture;
private modalIndex = modalIds++;
private modalId?: string;
private coreDelegate: FrameworkDelegate = CoreDelegate();
private currentTransition?: Promise<any>;
private sheetTransition?: Promise<any>;
@ -344,16 +343,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
componentWillLoad() {
const { breakpoints, initialBreakpoint, el } = this;
const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
/**
* If user has custom ID set then we should
* not assign the default incrementing ID.
*/
this.modalId = this.el.hasAttribute('id') ? this.el.getAttribute('id')! : `ion-modal-${this.modalIndex}`;
const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
if (isSheetModal) {
this.currentBreakpoint = this.initialBreakpoint;
}
@ -361,6 +354,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
}
setOverlayId(el);
}
componentDidLoad() {
@ -861,7 +856,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
const showHandle = handle !== false && isSheetModal;
const mode = getIonMode(this);
const { modalId } = this;
const isCardModal = presentingElement !== undefined && mode === 'ios';
const isHandleCycle = handleBehavior === 'cycle';
@ -881,7 +875,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
'overlay-hidden': true,
...getClassMap(this.cssClass),
}}
id={modalId}
onIonBackdropTap={this.onBackdropTap}
onIonModalDidPresent={this.onLifecycle}
onIonModalWillPresent={this.onLifecycle}
@ -935,8 +928,6 @@ const LIFECYCLE_MAP: any = {
ionModalDidDismiss: 'ionViewDidLeave',
};
let modalIds = 0;
interface ModalOverlayOptions {
/**
* The element that presented the modal.

41
core/src/components/modal/test/modal-id.spec.ts Normal file
View File

@ -0,0 +1,41 @@
import { newSpecPage } from '@stencil/core/testing';
import { Modal } from '../modal';
it('modal should be assigned an incrementing id', async () => {
const page = await newSpecPage({
components: [Modal],
html: `<ion-modal is-open="true"></ion-modal>`,
});
let modal: HTMLIonModalElement;
modal = page.body.querySelector('ion-modal')!;
expect(modal).not.toBe(null);
expect(modal.getAttribute('id')).toBe('ion-overlay-1');
// Remove the modal from the DOM
modal.remove();
await page.waitForChanges();
// Create a new modal to verify the id is incremented
modal = document.createElement('ion-modal');
modal.isOpen = true;
page.body.appendChild(modal);
await page.waitForChanges();
modal = page.body.querySelector('ion-modal')!;
expect(modal.getAttribute('id')).toBe('ion-overlay-2');
// Presenting the same modal again should reuse the existing id
modal.isOpen = false;
await page.waitForChanges();
modal.isOpen = true;
await page.waitForChanges();
modal = page.body.querySelector('ion-modal')!;
expect(modal.getAttribute('id')).toBe('ion-overlay-2');
});