From 64f08669c20278c16d2881b460206d2478ba62e7 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sun, 25 Feb 2018 18:31:11 +0100 Subject: [PATCH] fix(overlay): using hostData for zIndex --- .../components/action-sheet/action-sheet.tsx | 5 +++-- packages/core/src/components/alert/alert.tsx | 13 +++++------ .../core/src/components/loading/loading.tsx | 5 +++-- packages/core/src/components/menu/menu.tsx | 6 +++-- packages/core/src/components/modal/modal.tsx | 10 +++++++-- .../core/src/components/picker/picker.tsx | 15 +++++++------ .../core/src/components/popover/popover.tsx | 22 ++++++++----------- packages/core/src/utils/helpers.ts | 10 --------- packages/core/src/utils/overlays.ts | 10 +++++++++ 9 files changed, 50 insertions(+), 46 deletions(-) diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index a4f7b2de3b..28568c20e8 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -146,8 +146,6 @@ export class ActionSheet implements OverlayInterface { this.ionActionSheetWillPresent.emit(); - this.el.style.zIndex = `${20000 + this.overlayId}`; - // get the user's animation fn if one was provided const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation); @@ -198,6 +196,9 @@ export class ActionSheet implements OverlayInterface { const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'action-sheet-translucent') : {}; return { + style: { + zIndex: 20000 + this.overlayId, + }, class: { ...themedClasses, ...getClassMap(this.cssClass) diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index a4c89e8484..6229c2b39f 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -1,8 +1,8 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, Config, CssClassMap, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index'; -import { autoFocus, domControllerAsync } from '../../utils/helpers'; +import { domControllerAsync } from '../../utils/helpers'; import { createThemedClasses, getClassMap } from '../../utils/theme'; -import { BACKDROP, OverlayInterface, overlayAnimation } from '../../utils/overlays'; +import { BACKDROP, OverlayInterface, autoFocus, overlayAnimation } from '../../utils/overlays'; import iosEnterAnimation from './animations/ios.enter'; import iosLeaveAnimation from './animations/ios.leave'; @@ -128,10 +128,6 @@ export class Alert implements OverlayInterface { this.ionAlertDidLoad.emit(); } - componentDidEnter() { - this.ionAlertDidPresent.emit(); - } - componentDidUnload() { this.ionAlertDidUnload.emit(); } @@ -152,8 +148,6 @@ export class Alert implements OverlayInterface { this.presented = true; this.ionAlertWillPresent.emit(); - this.el.style.zIndex = `${20000 + this.overlayId}`; - // get the user's animation fn if one was provided const animationBuilder = this.enterAnimation || this.config.get('alertEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation); @@ -337,6 +331,9 @@ export class Alert implements OverlayInterface { return { role: 'alertdialog', + style: { + zIndex: 20000 + this.overlayId, + }, class: { ...themedClasses, ...getClassMap(this.cssClass) diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index b04ca059a5..ac7d0ecfc5 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -158,8 +158,6 @@ export class Loading implements OverlayInterface { this.presented = true; this.ionLoadingWillPresent.emit(); - this.el.style.zIndex = `${20000 + this.overlayId}`; - // get the user's animation fn if one was provided const animationBuilder = this.enterAnimation || this.config.get('loadingEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation); @@ -208,6 +206,9 @@ export class Loading implements OverlayInterface { const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'loading-translucent') : {}; return { + style: { + zIndex: 20000 + this.overlayId, + }, class: { ...themedClasses, ...getClassMap(this.cssClass) diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 811dfed921..bcabb6451b 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -237,8 +237,10 @@ export class Menu { return Promise.resolve(); } // Destroy existing animation - this.animation && this.animation.destroy(); - this.animation = null; + if (this.animation) { + this.animation.destroy(); + this.animation = null; + } this.width = width; // Create new animation diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index c0411cf298..683d70b2d1 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -155,8 +155,6 @@ export class Modal implements OverlayInterface { this.presented = true; this.ionModalWillPresent.emit(); - this.el.style.zIndex = `${20000 + this.overlayId}`; - // get the user's animation fn if one was provided const animationBuilder = this.enterAnimation || this.config.get('modalEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation); @@ -222,6 +220,14 @@ export class Modal implements OverlayInterface { return this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`); } + hostData() { + return { + style: { + zIndex: 20000 + this.overlayId, + } + } + } + render() { const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper'); diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index e21ca5244d..82c901be55 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -163,15 +163,8 @@ export class Picker implements OverlayInterface { } this.presented = true; - if (this.animation) { - this.animation.destroy(); - this.animation = null; - } - this.ionPickerWillPresent.emit(); - this.el.style.zIndex = `${20000 + this.overlayId}`; - // get the user's animation fn if one was provided const animationBuilder = this.enterAnimation || this.config.get('pickerEnter', iosEnterAnimation); @@ -271,6 +264,14 @@ export class Picker implements OverlayInterface { return selected; } + hostData() { + return { + style: { + zIndex: 20000 + this.overlayId, + } + } + } + render() { // TODO: cssClass diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index ebfc7c7c3a..15798cc6e9 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -131,6 +131,12 @@ export class Popover implements OverlayInterface { */ @Event() ionPopoverDidUnload: EventEmitter; + componentWillLoad() { + if (!this.delegate) { + this.delegate = new DomFrameworkDelegate(); + } + } + componentDidLoad() { this.ionPopoverDidLoad.emit(); } @@ -164,15 +170,10 @@ export class Popover implements OverlayInterface { this.ionPopoverWillPresent.emit(); - this.el.style.zIndex = `${10000 + this.overlayId}`; - // get the user's animation fn if one was provided const animationBuilder = this.enterAnimation || this.config.get('popoverEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation); const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`); - if (!this.delegate) { - this.delegate = new DomFrameworkDelegate(); - } const cssClasses: string[] = []; if (this.cssClass && this.cssClass.length) { @@ -203,17 +204,9 @@ export class Popover implements OverlayInterface { return Promise.reject('overlay is not presented'); } this.presented = false; - if (this.animation) { - this.animation.destroy(); - this.animation = null; - } this.ionPopoverWillDismiss.emit({ data, role }); - if (!this.delegate) { - this.delegate = new DomFrameworkDelegate(); - } - const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation); return this.playAnimation(animationBuilder).then(() => { @@ -235,6 +228,9 @@ export class Popover implements OverlayInterface { const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'popover-translucent') : {}; return { + style: { + zIndex: 10000 + this.overlayId, + }, class: { ...themedClasses } diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts index b76b884dde..8102048067 100644 --- a/packages/core/src/utils/helpers.ts +++ b/packages/core/src/utils/helpers.ts @@ -15,16 +15,6 @@ export function assert(actual: any, reason: string) { } } -export function autoFocus(containerEl: HTMLElement): HTMLElement|null { - const focusableEls = containerEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'); - if (focusableEls.length > 0) { - const el = focusableEls[0] as HTMLInputElement; - el.focus(); - return el; - } - return null; -} - export function now(ev: UIEvent) { return ev.timeStamp || Date.now(); } diff --git a/packages/core/src/utils/overlays.ts b/packages/core/src/utils/overlays.ts index ac801583ae..a76746f339 100644 --- a/packages/core/src/utils/overlays.ts +++ b/packages/core/src/utils/overlays.ts @@ -76,6 +76,16 @@ export function overlayAnimation( }); } +export function autoFocus(containerEl: HTMLElement): HTMLElement { + const focusableEls = containerEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'); + if (focusableEls.length > 0) { + const el = focusableEls[0] as HTMLInputElement; + el.focus(); + return el; + } + return null; +} + export interface OverlayInterface { overlayId: number; animation: Animation|undefined;