feature(react): rc2 release

* fix(): add a page with class ion-page back to ionrouteroutlet - fixes #19146 * wip * fix(react): attributes show up in dom * chore(): adding ion-page to core wip * wip * fix destroy method * wrap dom writes in raf * Add comments * fix(react): IonPage work * chore(): ionpage rc3 changelog text * fix(): syncing ion-page in a new way to get rid of timeout loop * chore(): ViewStacks refactor out of router * fix(): remove unused method in router * wip - before setActiveView rework * fix(): react router ion page work * chore(): cleanup and dev release * fix(): remove need to name tabs * chore(): adding dev mode helpers * fix(): adding className prop to back button fixes #19251 * fix(): routerDirection changes * chore(): rc2 release * fix(): fix react version in package * chores(): build kickoff
2025-08-15 09:34:19 +08:00 · 2019-09-12 14:25:37 -06:00
parent aec2936725
commit 73dd70d756
32 changed files with 822 additions and 611 deletions
--- a/packages/react-router/src/ReactRouter/StackManager.tsx
+++ b/packages/react-router/src/ReactRouter/StackManager.tsx
@ -0,0 +1,90 @@
+import React from 'react';
+import { generateUniqueId, isDevMode } from '../utils';
+import { View } from './View';
+import { ViewTransitionManager } from './ViewTransitionManager';
+import { RouteManagerContext } from './RouteManagerContext';
+import { ViewItem } from './ViewItem';
+
+type StackManagerProps = {
+  id?: string;
+};
+
+type StackManagerState = {}
+
+export class StackManager extends React.Component<StackManagerProps, StackManagerState> {
+  routerOutletEl: React.RefObject<HTMLIonRouterOutletElement> = React.createRef();
+  context!: React.ContextType<typeof RouteManagerContext>;
+  id: string;
+
+  constructor(props: StackManagerProps) {
+    super(props);
+    this.id = this.props.id || generateUniqueId();
+    this.handleViewSync = this.handleViewSync.bind(this);
+    this.handleHideView = this.handleHideView.bind(this);
+  }
+
+  componentDidMount() {
+    this.context.setupIonRouter(this.id, this.props.children, this.routerOutletEl.current!);
+  }
+
+  componentWillUnmount() {
+    this.context.removeViewStack(this.id);
+  }
+
+  handleViewSync(page: HTMLElement, viewId: string) {
+    this.context.syncView(page, viewId);
+  }
+
+  handleHideView(viewId: string) {
+    this.context.hideView(viewId);
+  }
+
+  renderChild(item: ViewItem) {
+    const component = React.cloneElement(item.route, {
+      computedMatch: item.routeData.match
+    });
+    return component;
+  }
+
+  render() {
+    const context = this.context;
+    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 childElements = views.map((view) => {
+      return (
+        <ViewTransitionManager
+          id={view.id}
+          key={view.key}
+          mount={view.mount}
+        >
+          <View
+            onViewSync={this.handleViewSync}
+            onHideView={this.handleHideView}
+            view={view}
+          >
+            {this.renderChild(view)}
+          </View>
+        </ViewTransitionManager>
+      );
+    });
+
+    const elementProps: any = {
+      ref: this.routerOutletEl
+    }
+
+    if(isDevMode()) {
+      elementProps['data-stack-id'] = this.id
+    }
+
+    const routerOutletChild = React.cloneElement(ionRouterOutlet, elementProps, childElements);
+
+
+    return routerOutletChild;
+  }
+
+  static get contextType() {
+    return RouteManagerContext;
+  }
+}