From 71fdcbc1b4939b5556c614bc6b1baca8e86874c8 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 17 Oct 2019 12:32:47 -0600 Subject: [PATCH 1/5] fix(react): adding HashRouter to available ion routers, fixes #19621 (#19683) --- .../src/ReactRouter/IonReactHashRouter.tsx | 16 ++++++++++ .../src/ReactRouter/IonReactRouter.tsx | 15 +++++++++ .../src/ReactRouter/NavManager.tsx | 25 +++++---------- .../react-router/src/ReactRouter/Router.tsx | 32 ++++++++++--------- .../react-router/src/ReactRouter/index.ts | 4 +-- .../src/components/navigation/IonTabBar.tsx | 2 +- packages/react/src/contexts/NavContext.ts | 4 --- 7 files changed, 59 insertions(+), 39 deletions(-) create mode 100644 packages/react-router/src/ReactRouter/IonReactHashRouter.tsx create mode 100644 packages/react-router/src/ReactRouter/IonReactRouter.tsx diff --git a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx new file mode 100644 index 0000000000..dc87cc22a0 --- /dev/null +++ b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { HashRouter, HashRouterProps } from 'react-router-dom'; + +import { RouteManagerWithRouter } from './Router'; + +export const IonReactHashRouter = /*@__PURE__*/ (() => class IonReactHashRouterInternal extends React.Component { + render() { + console.log('hash router in your bundle!!!'); + const { children, ...props } = this.props; + return ( + + {children} + + ); + } +})(); diff --git a/packages/react-router/src/ReactRouter/IonReactRouter.tsx b/packages/react-router/src/ReactRouter/IonReactRouter.tsx new file mode 100644 index 0000000000..259739d8b8 --- /dev/null +++ b/packages/react-router/src/ReactRouter/IonReactRouter.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { BrowserRouter, BrowserRouterProps } from 'react-router-dom'; + +import { RouteManagerWithRouter } from './Router'; + +export const IonReactRouter = /*@__PURE__*/ (() => class IonReactRouterInternal extends React.Component { + render() { + const { children, ...props } = this.props; + return ( + + {children} + + ); + } +})(); diff --git a/packages/react-router/src/ReactRouter/NavManager.tsx b/packages/react-router/src/ReactRouter/NavManager.tsx index 2e3183c2a0..1423090fdf 100644 --- a/packages/react-router/src/ReactRouter/NavManager.tsx +++ b/packages/react-router/src/ReactRouter/NavManager.tsx @@ -15,6 +15,7 @@ interface NavManagerProps extends RouteComponentProps { findViewInfoByLocation: (location: HistoryLocation) => { view?: ViewItem, viewStack?: ViewStack }; findViewInfoById: (id: string) => { view?: ViewItem, viewStack?: ViewStack }; getActiveIonPage: () => { view?: ViewItem, viewStack?: ViewStack }; + onNavigate: (type: 'push' | 'replace', path: string, state?: any) => void; } export class NavManager extends React.Component { @@ -27,8 +28,6 @@ export class NavManager extends React.Component true, - getHistory: this.getHistory.bind(this), - getLocation: this.getLocation.bind(this), navigate: this.navigate.bind(this), getStackManager: this.getStackManager.bind(this), getPageManager: this.getPageManager.bind(this), @@ -66,36 +65,28 @@ export class NavManager extends React.Component { listenUnregisterCallback: UnregisterCallback | undefined; activeIonPageId?: string; + currentDirection?: RouterDirection; constructor(props: RouteComponentProps) { super(props); this.listenUnregisterCallback = this.props.history.listen(this.historyChange.bind(this)); + this.handleNavigate = this.handleNavigate.bind(this); this.state = { viewStacks: new ViewStacks(), hideView: this.hideView.bind(this), @@ -57,6 +59,8 @@ class RouteManager extends React.Component this.state.viewStacks.findViewInfoById(id)} findViewInfoByLocation={(location: HistoryLocation) => this.state.viewStacks.findViewInfoByLocation(location)} getActiveIonPage={() => this.state.viewStacks.findViewInfoById(this.activeIonPageId)} @@ -282,16 +295,5 @@ class RouteManager extends React.Component { - render() { - const { children, ...props } = this.props; - return ( - - {children} - - ); - } -} diff --git a/packages/react-router/src/ReactRouter/index.ts b/packages/react-router/src/ReactRouter/index.ts index f36dd64359..6e8cbe6211 100644 --- a/packages/react-router/src/ReactRouter/index.ts +++ b/packages/react-router/src/ReactRouter/index.ts @@ -1,2 +1,2 @@ - -export { IonReactRouter } from './Router'; +export { IonReactRouter } from './IonReactRouter'; +export { IonReactHashRouter } from './IonReactHashRouter'; diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx index 9b97707746..4bb9593c06 100644 --- a/packages/react/src/components/navigation/IonTabBar.tsx +++ b/packages/react/src/components/navigation/IonTabBar.tsx @@ -72,7 +72,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component History; - getLocation: () => Location; getPageManager: () => any; getStackManager: () => any; goBack: (defaultHref?: string) => void; @@ -15,8 +13,6 @@ export interface NavContextState { } export const NavContext = /*@__PURE__*/React.createContext({ - getHistory: () => window.history, - getLocation: () => window.location, getPageManager: () => undefined, getStackManager: () => undefined, goBack: (defaultHref?: string) => { From ce7314db0b290ad83ec94efdf8fadec57be0062c Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 17 Oct 2019 17:31:06 -0600 Subject: [PATCH 2/5] chore(react): removing console log and tree shaking change --- packages/react-router/src/ReactRouter/IonReactHashRouter.tsx | 5 ++--- packages/react-router/src/ReactRouter/IonReactRouter.tsx | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx index dc87cc22a0..a7272bf468 100644 --- a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx +++ b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx @@ -3,9 +3,8 @@ import { HashRouter, HashRouterProps } from 'react-router-dom'; import { RouteManagerWithRouter } from './Router'; -export const IonReactHashRouter = /*@__PURE__*/ (() => class IonReactHashRouterInternal extends React.Component { +export class IonReactHashRouter extends React.Component { render() { - console.log('hash router in your bundle!!!'); const { children, ...props } = this.props; return ( @@ -13,4 +12,4 @@ export const IonReactHashRouter = /*@__PURE__*/ (() => class IonReactHashRouterI ); } -})(); +} diff --git a/packages/react-router/src/ReactRouter/IonReactRouter.tsx b/packages/react-router/src/ReactRouter/IonReactRouter.tsx index 259739d8b8..aba729b6a3 100644 --- a/packages/react-router/src/ReactRouter/IonReactRouter.tsx +++ b/packages/react-router/src/ReactRouter/IonReactRouter.tsx @@ -3,7 +3,7 @@ import { BrowserRouter, BrowserRouterProps } from 'react-router-dom'; import { RouteManagerWithRouter } from './Router'; -export const IonReactRouter = /*@__PURE__*/ (() => class IonReactRouterInternal extends React.Component { +export class IonReactRouter extends React.Component { render() { const { children, ...props } = this.props; return ( @@ -12,4 +12,4 @@ export const IonReactRouter = /*@__PURE__*/ (() => class IonReactRouterInternal ); } -})(); +} From 5acb58a03d24545c9e3e84ac4de6eab063481cff Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Mon, 21 Oct 2019 06:25:01 -0600 Subject: [PATCH 3/5] fix(react): removing pages from DOM on nav, fixes #19701 (#19712) --- .../react-router/src/ReactRouter/Router.tsx | 29 ++++++++++++++----- .../src/ReactRouter/ViewStacks.ts | 12 -------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/react-router/src/ReactRouter/Router.tsx b/packages/react-router/src/ReactRouter/Router.tsx index f6b34f73e8..b0842b8476 100644 --- a/packages/react-router/src/ReactRouter/Router.tsx +++ b/packages/react-router/src/ReactRouter/Router.tsx @@ -43,6 +43,12 @@ class RouteManager extends React.Component v.prevId === view.id); + viewsToRemove.forEach(v => { + this.removeOrphanedViews(v, viewStack); + // If view is not currently visible, go ahead and remove it from DOM + if (v.ionPageElement!.classList.contains('ion-page-hidden')) { + v.show = false; + v.ionPageElement = undefined; + v.isIonRoute = false; + v.prevId = undefined; + v.key = generateId(); + } + v.mount = false; + }); } async setupIonRouter(id: string, children: any, routerOutlet: HTMLIonRouterOutletElement) { diff --git a/packages/react-router/src/ReactRouter/ViewStacks.ts b/packages/react-router/src/ReactRouter/ViewStacks.ts index b27aaa0386..660baa87c5 100644 --- a/packages/react-router/src/ReactRouter/ViewStacks.ts +++ b/packages/react-router/src/ReactRouter/ViewStacks.ts @@ -85,16 +85,4 @@ export class ViewStacks { return { view, viewStack }; } - setHiddenViews() { - const keys = this.getKeys(); - keys.forEach(key => { - const viewStack = this.viewStacks[key]; - viewStack!.views.forEach(view => { - if (!view.routeData.match && !view.isIonRoute) { - view.show = false; - view.mount = false; - } - }); - }); - } } From 834666c75484cca3eed3a2f45231b6b0592a3c3d Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Mon, 21 Oct 2019 06:29:19 -0600 Subject: [PATCH 4/5] fix(react): adding change events to iontabs, fixes #19665 (#19711) --- .../src/components/navigation/IonTabBar.tsx | 10 +++++++++- .../react/src/components/navigation/IonTabs.tsx | 16 +++++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx index 4bb9593c06..fb656acfd0 100644 --- a/packages/react/src/components/navigation/IonTabBar.tsx +++ b/packages/react/src/components/navigation/IonTabBar.tsx @@ -6,6 +6,8 @@ import { IonTabBarInner } from '../inner-proxies'; import { IonTabButton } from '../proxies'; type Props = LocalJSX.IonTabBar & { + onIonTabsDidChange?: (event: CustomEvent<{ tab: string }>) => void; + onIonTabsWillChange?: (event: CustomEvent<{ tab: string }>) => void; currentPath?: string; slot?: 'bottom' | 'top'; }; @@ -72,9 +74,15 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component class extends React.Component { +export class IonTabs extends React.Component { context!: React.ContextType; routerOutletRef: React.Ref = React.createRef(); @@ -38,7 +39,7 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component render() { let outlet: React.ReactElement<{}> | undefined; - let tabBar: React.ReactElement<{ slot: 'bottom' | 'top' }> | undefined; + let tabBar: React.ReactElement | undefined; React.Children.forEach(this.props.children, (child: any) => { if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) { @@ -48,7 +49,8 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component outlet = child; } if (child.type === IonTabBar) { - tabBar = child; + const { onIonTabsDidChange, onIonTabsWillChange } = this.props; + tabBar = React.cloneElement(child, { onIonTabsDidChange, onIonTabsWillChange }); } }); @@ -71,11 +73,7 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component ); } - static get displayName() { - return 'IonTabs'; - } - static get contextType() { return NavContext; } -})(); +} From a2e1c5591175ce5f22e96cc254c7c781a67c1076 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 21 Oct 2019 17:36:16 -0400 Subject: [PATCH 5/5] 4.11.2 --- CHANGELOG.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d844ad4c39..b53371022a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,20 @@ +## [4.11.2](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.2) (2019-10-21) + + +### Bug Fixes + +* **animations:** ensure all elements are cleaned up when calling .destroy() ([#19654](https://github.com/ionic-team/ionic/issues/19654)) ([d97e167](https://github.com/ionic-team/ionic/commit/d97e167)) +* **header:** collapsible header works in tabs ([#19658](https://github.com/ionic-team/ionic/issues/19658)) ([4853909](https://github.com/ionic-team/ionic/commit/4853909)), closes [#19640](https://github.com/ionic-team/ionic/issues/19640) +* **ios:** hide leaving view after nav transition to avoid flicker ([#19691](https://github.com/ionic-team/ionic/issues/19691)) ([70e0562](https://github.com/ionic-team/ionic/commit/70e0562)), closes [#19674](https://github.com/ionic-team/ionic/issues/19674) +* **menu:** clamp out of bounds swipe value ([#19684](https://github.com/ionic-team/ionic/issues/19684)) ([1535e95](https://github.com/ionic-team/ionic/commit/1535e95)), closes [#18927](https://github.com/ionic-team/ionic/issues/18927) +* **react:** add IonPicker as controller component, fixes [#19620](https://github.com/ionic-team/ionic/issues/19620) ([#19643](https://github.com/ionic-team/ionic/issues/19643)) ([ed98d9e](https://github.com/ionic-team/ionic/commit/ed98d9e)) +* **react:** adding change events to IonTabs, fixes [#19665](https://github.com/ionic-team/ionic/issues/19665) ([#19711](https://github.com/ionic-team/ionic/issues/19711)) ([b7baf24](https://github.com/ionic-team/ionic/commit/b7baf24)) +* **react:** adding HashRouter to available ion routers, fixes [#19621](https://github.com/ionic-team/ionic/issues/19621) ([#19683](https://github.com/ionic-team/ionic/issues/19683)) ([fcdbb3c](https://github.com/ionic-team/ionic/commit/fcdbb3c)) +* **react:** pages no longer hidden when navigating between tabs, fixes [#19646](https://github.com/ionic-team/ionic/issues/19646) ([#19647](https://github.com/ionic-team/ionic/issues/19647)) ([8776556](https://github.com/ionic-team/ionic/commit/8776556)) +* **react:** ensure views are removed from DOM after navigating back, fixes [#19701](https://github.com/ionic-team/ionic/issues/19701) ([#19712](https://github.com/ionic-team/ionic/issues/19712)) ([ee21d3a](https://github.com/ionic-team/ionic/commit/ee21d3a)) + + + # [5.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v4.11.1...v5.0.0-beta.0) (2019-10-15)