From ae47d77710140f01ac9793c7c8c09bfd84b9b6d3 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 6 Aug 2020 10:33:22 -0500 Subject: [PATCH] chore(api): internal updates required for stencil 2 upgrade (#21889) Stencil 2 is removing deprecated APIs, and these are the remaining ones Ionic has been using. --- core/src/components/action-sheet/action-sheet.tsx | 2 +- core/src/components/alert/alert.tsx | 2 +- core/src/components/back-button/back-button.tsx | 2 +- core/src/components/button/button.tsx | 10 +++++----- core/src/components/header/header.tsx | 2 +- core/src/components/menu/menu.tsx | 6 +++--- core/src/components/nav/nav.tsx | 2 +- core/src/components/slides/slides.tsx | 2 +- core/src/components/split-pane/split-pane.tsx | 2 +- core/src/components/tab-button/tab-button.tsx | 9 +++++++-- 10 files changed, 22 insertions(+), 17 deletions(-) diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 00aaa73ea1..84c7d81c0a 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -198,7 +198,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { } } - componentDidUnload() { + disconnectedCallback() { if (this.gesture) { this.gesture.destroy(); this.gesture = undefined; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 91a0f8854a..42fbca8098 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -177,7 +177,7 @@ export class Alert implements ComponentInterface, OverlayInterface { this.buttonsChanged(); } - componentDidUnload() { + disconnectedCallback() { if (this.gesture) { this.gesture.destroy(); this.gesture = undefined; diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 2f85ff6182..d1139ac4b4 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -40,7 +40,7 @@ export class BackButton implements ComponentInterface, ButtonInterface { /** * If `true`, the user cannot interact with the button. */ - @Prop({ reflectToAttr: true }) disabled = false; + @Prop({ reflect: true }) disabled = false; /** * The icon name to use for the back button. diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 4f83871214..71a9a9d9bc 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -46,20 +46,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf /** * If `true`, the user cannot interact with the button. */ - @Prop({ reflectToAttr: true }) disabled = false; + @Prop({ reflect: true }) disabled = false; /** * Set to `"block"` for a full-width button or to `"full"` for a full-width button * without left and right borders. */ - @Prop({ reflectToAttr: true }) expand?: 'full' | 'block'; + @Prop({ reflect: true }) expand?: 'full' | 'block'; /** * Set to `"clear"` for a transparent button, to `"outline"` for a transparent * button with a border, or to `"solid"`. The default style is `"solid"` except inside of * a toolbar, where the default is `"clear"`. */ - @Prop({ reflectToAttr: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default'; + @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default'; /** * When using a router, it specifies the transition direction when navigating to @@ -96,12 +96,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf /** * The button shape. */ - @Prop({ reflectToAttr: true }) shape?: 'round'; + @Prop({ reflect: true }) shape?: 'round'; /** * The button size. */ - @Prop({ reflectToAttr: true }) size?: 'small' | 'default' | 'large'; + @Prop({ reflect: true }) size?: 'small' | 'default' | 'large'; /** * If `true`, activates a button with a heavier font weight. diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 17f623114e..eaee37f9ea 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -49,7 +49,7 @@ export class Header implements ComponentInterface { await this.checkCollapsibleHeader(); } - componentDidUnload() { + disconnectedCallback() { this.destroyCollapsibleHeader(); } diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 079e4f8f6b..f0ae525de9 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -48,12 +48,12 @@ export class Menu implements ComponentInterface, MenuI { /** * The content's id the menu should use. */ - @Prop({ reflectToAttr: true }) contentId?: string; + @Prop({ reflect: true }) contentId?: string; /** * An id for the menu. */ - @Prop({ reflectToAttr: true }) menuId?: string; + @Prop({ reflect: true }) menuId?: string; /** * The display type of the menu. @@ -96,7 +96,7 @@ export class Menu implements ComponentInterface, MenuI { /** * Which side of the view the menu should be placed. */ - @Prop({ reflectToAttr: true }) side: Side = 'start'; + @Prop({ reflect: true }) side: Side = 'start'; @Watch('side') protected sideChanged() { diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index b5527dc0c7..7bedccf67f 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -120,7 +120,7 @@ export class Nav implements NavOutlet { this.swipeGestureChanged(); } - componentDidUnload() { + disconnectedCallback() { for (const view of this.views) { lifecycle(view.element!, LIFECYCLE_WILL_UNLOAD); view._destroy(); diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index b65d52ba9b..314dcf4684 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -13,7 +13,7 @@ import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface'; ios: 'slides.ios.scss', md: 'slides.md.scss' }, - assetsDir: 'swiper', + assetsDirs: ['swiper'], }) export class Slides implements ComponentInterface { diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index a31ac2fbd7..d782cd0b9a 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -31,7 +31,7 @@ export class SplitPane implements ComponentInterface { /** * The content `id` of the split-pane's main content. */ - @Prop({ reflectToAttr: true }) contentId?: string; + @Prop({ reflect: true }) contentId?: string; /** * If `true`, the split pane will be hidden. diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index 9e07e17cd5..c51b607926 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -77,9 +77,14 @@ export class TabButton implements ComponentInterface, AnchorInterface { */ @Event() ionTabButtonClick!: EventEmitter; - @Listen('ionTabBarChanged', { target: 'parent' }) + @Listen('ionTabBarChanged', { target: 'window' }) onTabBarChanged(ev: CustomEvent) { - this.selected = this.tab === ev.detail.tab; + const dispatchedFrom = ev.target as HTMLElement; + const parent = this.el.parentElement as EventTarget; + + if ((ev.composedPath && ev.composedPath().includes(parent)) || dispatchedFrom && dispatchedFrom.contains(this.el)) { + this.selected = this.tab === ev.detail.tab; + } } componentWillLoad() {