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

fix(overlays): move prepareOverlay to connectedCallback

Browse Source 
For custom elements builds, overlays cannot use hasAttribute() in the constructor, so moving it to connectedCallback instead.
This commit is contained in:
Adam Bradley
2020-07-21 13:07:54 -05:00
committed by GitHub
parent f4a08b7ed4
commit 79518468dd
8 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,7 +117,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation); return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
} }
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -167,7 +167,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
}) as AlertInput); }) as AlertInput);
} }
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -111,7 +111,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
*/ */
@Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>; @Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -130,7 +130,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
} }
} }
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -100,7 +100,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
*/ */
@Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>; @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -115,7 +115,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
*/ */
@Event({ eventName: 'ionPopoverDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>; @Event({ eventName: 'ionPopoverDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -126,7 +126,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/ */
@Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>; @Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
constructor() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el);
} }

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

@ -31,8 +31,10 @@ export const popoverController = /*@__PURE__*/createController<PopoverOptions, H
export const toastController = /*@__PURE__*/createController<ToastOptions, HTMLIonToastElement>('ion-toast'); export const toastController = /*@__PURE__*/createController<ToastOptions, HTMLIonToastElement>('ion-toast');
export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => { export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => {
const doc = document; /* tslint:disable-next-line */
connectListeners(doc); if (typeof document !== 'undefined') {
connectListeners(document);
}
const overlayIndex = lastId++; const overlayIndex = lastId++;
el.overlayIndex = overlayIndex; el.overlayIndex = overlayIndex;
if (!el.hasAttribute('id')) { if (!el.hasAttribute('id')) {
@ -41,9 +43,10 @@ export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => {
}; };
export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined): Promise<T> => { export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined): Promise<T> => {
/* tslint:disable-next-line */
if (typeof customElements !== 'undefined') {
return customElements.whenDefined(tagName).then(() => { return customElements.whenDefined(tagName).then(() => {
const doc = document; const element = document.createElement(tagName) as HTMLIonOverlayElement;
const element = doc.createElement(tagName) as HTMLIonOverlayElement;
element.classList.add('overlay-hidden'); element.classList.add('overlay-hidden');
// convert the passed in overlay options into props // convert the passed in overlay options into props
@ -51,10 +54,12 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string,
Object.assign(element, opts); Object.assign(element, opts);
// append the overlay element to the document body // append the overlay element to the document body
getAppRoot(doc).appendChild(element); getAppRoot(document).appendChild(element);
return element.componentOnReady() as any; return element.componentOnReady() as any;
}); });
}
return Promise.resolve() as any;
}; };
export const connectListeners = (doc: Document) => { export const connectListeners = (doc: Document) => {