javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): adding swipe back functionality and routerOutlet ready improvements, fixes #19818 (#19849)

Browse Source
This commit is contained in:
Ely Lucas
2019-11-06 10:08:57 -07:00
committed by Ely Lucas
parent 2f5d823748
commit f3ac682010
7 changed files with 124 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/react-router/src/ReactRouter/StackManager.tsx
View File

@ -11,7 +11,11 @@ interface StackManagerProps {
id?: string;
}
export class StackManager extends React.Component<StackManagerProps, {}> {
interface StackManagerState {
routerOutletReady: boolean;
}
export class StackManager extends React.Component<StackManagerProps, StackManagerState> {
routerOutletEl: React.RefObject<HTMLIonRouterOutletElement> = React.createRef();
context!: React.ContextType<typeof RouteManagerContext>;
id: string;
@ -21,10 +25,18 @@ export class StackManager extends React.Component<StackManagerProps, {}> {
this.id = this.props.id || generateId();
this.handleViewSync = this.handleViewSync.bind(this);
this.handleHideView = this.handleHideView.bind(this);
this.state = {
routerOutletReady: false
};
}
componentDidMount() {
this.context.setupIonRouter(this.id, this.props.children, this.routerOutletEl.current!);
this.routerOutletEl.current!.addEventListener('routerOutletReady', () => {
this.setState({
routerOutletReady: true
});
});
}
componentWillUnmount() {
@ -51,8 +63,9 @@ export class StackManager extends React.Component<StackManagerProps, {}> {
const viewStack = context.viewStacks.get(this.id);
const views = (viewStack || { views: [] }).views.filter(x => x.show);
const ionRouterOutlet = React.Children.only(this.props.children) as React.ReactElement;
const { routerOutletReady } = this.state;
const childElements = views.map(view => {
const childElements = routerOutletReady ? views.map(view => {
return (
<ViewTransitionManager
id={view.id}
@ -68,7 +81,7 @@ export class StackManager extends React.Component<StackManagerProps, {}> {
</View>
</ViewTransitionManager>
);
});
}) : <div></div>;
const elementProps: any = {
ref: this.routerOutletEl