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) diff --git a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx new file mode 100644 index 0000000000..a7272bf468 --- /dev/null +++ b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { HashRouter, HashRouterProps } from 'react-router-dom'; + +import { RouteManagerWithRouter } from './Router'; + +export class IonReactHashRouter extends React.Component { + render() { + 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..aba729b6a3 --- /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 class IonReactRouter 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), @@ -41,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) { @@ -266,11 +284,21 @@ 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 +310,5 @@ class RouteManager extends React.Component { - render() { - const { children, ...props } = this.props; - return ( - - {children} - - ); - } -} 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; - } - }); - }); - } } 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..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'; }; @@ -75,6 +77,12 @@ 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; } -})(); +} diff --git a/packages/react/src/contexts/NavContext.ts b/packages/react/src/contexts/NavContext.ts index 8bc1873187..cafd475aa4 100644 --- a/packages/react/src/contexts/NavContext.ts +++ b/packages/react/src/contexts/NavContext.ts @@ -2,8 +2,6 @@ import { RouterDirection } from '@ionic/core'; import React from 'react'; export interface NavContextState { - getHistory: () => 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) => {