fix(overlays): page is removed properly

This commit is contained in:
Manu Mtz.-Almeida
2018-03-20 19:12:22 +01:00
parent 769282935b
commit 9988c754ac
5 changed files with 20 additions and 9 deletions

View File

@ -40,7 +40,7 @@ function removeClone(componentEl: HTMLElement, inputEl: HTMLElement) {
if (componentEl && componentEl.parentElement) { if (componentEl && componentEl.parentElement) {
const clonedInputEles = componentEl.parentElement.querySelectorAll('.cloned-input'); const clonedInputEles = componentEl.parentElement.querySelectorAll('.cloned-input');
for (let i = 0; i < clonedInputEles.length; i++) { for (let i = 0; i < clonedInputEles.length; i++) {
clonedInputEles[i].parentNode.removeChild(clonedInputEles[i]); clonedInputEles[i].remove();
} }
componentEl.style.pointerEvents = ''; componentEl.style.pointerEvents = '';
} }

View File

@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@
import { Animation, AnimationBuilder, Config, FrameworkDelegate } from '../../index'; import { Animation, AnimationBuilder, Config, FrameworkDelegate } from '../../index';
import { createThemedClasses, getClassMap } from '../../utils/theme'; import { createThemedClasses, getClassMap } from '../../utils/theme';
import { BACKDROP, OverlayEventDetail, OverlayInterface, attachComponent, dismiss, eventMethod, present } from '../../utils/overlays'; import { BACKDROP, OverlayEventDetail, OverlayInterface, attachComponent, detachComponent, dismiss, eventMethod, present } from '../../utils/overlays';
import iosEnterAnimation from './animations/ios.enter'; import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave'; import iosLeaveAnimation from './animations/ios.leave';
@ -186,7 +186,8 @@ export class Modal implements OverlayInterface {
*/ */
@Method() @Method()
dismiss(data?: any, role?: string): Promise<void> { dismiss(data?: any, role?: string): Promise<void> {
return dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation); return dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation)
.then(() => detachComponent(this.delegate, this.usersElement));
} }
/** /**

View File

@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@
import { Animation, AnimationBuilder, Config, FrameworkDelegate } from '../../index'; import { Animation, AnimationBuilder, Config, FrameworkDelegate } from '../../index';
import { createThemedClasses, getClassMap } from '../../utils/theme'; import { createThemedClasses, getClassMap } from '../../utils/theme';
import { BACKDROP, OverlayEventDetail, OverlayInterface, attachComponent, dismiss, eventMethod, present } from '../../utils/overlays'; import { BACKDROP, OverlayEventDetail, OverlayInterface, attachComponent, detachComponent, dismiss, eventMethod, present } from '../../utils/overlays';
import iosEnterAnimation from './animations/ios.enter'; import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave'; import iosLeaveAnimation from './animations/ios.leave';
@ -196,7 +196,8 @@ export class Popover implements OverlayInterface {
*/ */
@Method() @Method()
dismiss(data?: any, role?: string): Promise<void> { dismiss(data?: any, role?: string): Promise<void> {
return dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.ev); return dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.ev)
.then(() => detachComponent(this.delegate, this.usersElement));
} }
/** /**

View File

@ -82,7 +82,7 @@ export class RippleEffect {
style.animationDuration = duration + 'ms'; style.animationDuration = duration + 'ms';
this.el.appendChild(div); this.el.appendChild(div);
setTimeout(() => this.el.removeChild(div), duration + 50); setTimeout(() => div.remove(), duration + 50);
}); });
} }
} }

View File

@ -98,9 +98,7 @@ export function dismiss(
return overlayAnimation(overlay, animationBuilder, overlay.el, opts).then(() => { return overlayAnimation(overlay, animationBuilder, overlay.el, opts).then(() => {
overlay.didDismiss.emit({data, role}); overlay.didDismiss.emit({data, role});
if (overlay.el.parentNode) { overlay.el.remove();
overlay.el.parentNode.removeChild(overlay.el);
}
}); });
} }
@ -154,6 +152,17 @@ export function attachComponent(delegate: FrameworkDelegate, container: Element,
return Promise.resolve(el); return Promise.resolve(el);
} }
export function detachComponent(delegate: FrameworkDelegate, element: HTMLElement) {
if (element) {
if (delegate) {
const container = element.parentElement;
return delegate.removeViewFromDom(container, element);
}
element.remove();
}
return Promise.resolve();
}
export function eventMethod<T>(element: HTMLElement, eventName: string, callback?: (detail: T) => void): Promise<T> { export function eventMethod<T>(element: HTMLElement, eventName: string, callback?: (detail: T) => void): Promise<T> {
let resolve: Function; let resolve: Function;
const promise = new Promise<T>(r => resolve = r); const promise = new Promise<T>(r => resolve = r);