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-20 20:33:32 +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/ViewStacks.ts
+++ b/packages/react-router/src/ReactRouter/ViewStacks.ts
@ -0,0 +1,100 @@
+import { Location as HistoryLocation } from 'history';
+import { ViewItem } from './ViewItem';
+import { IonRouteData } from './IonRouteData';
+import { matchPath } from 'react-router-dom';
+
+export interface ViewStack {
+  id: string;
+  routerOutlet: HTMLIonRouterOutletElement;
+  views: ViewItem[]
+}
+
+/**
+ * The holistic view of all the Routes configured for an application inside of an IonRouterOutlet.
+ */
+export class ViewStacks {
+  private viewStacks: { [key: string]: ViewStack } = {};
+
+  get(key: string) {
+    return this.viewStacks[key];
+  }
+
+  set(key: string, viewStack: ViewStack) {
+    this.viewStacks[key] = viewStack;
+  }
+
+  getKeys() {
+    return Object.keys(this.viewStacks);
+  }
+
+  delete(key: string) {
+    delete this.viewStacks[key];
+  }
+
+  findViewInfoByLocation(location: HistoryLocation, key?: string) {
+    let view: ViewItem<IonRouteData> | undefined;
+    let match: IonRouteData["match"] | null | undefined;
+    let viewStack: ViewStack | undefined;
+    if (key) {
+      viewStack = this.viewStacks[key];
+      if (viewStack) {
+        viewStack.views.some(matchView);
+      }
+    } else {
+      const keys = this.getKeys();
+      keys.some(key => {
+        viewStack = this.viewStacks[key];
+        return viewStack.views.some(matchView);
+      });
+    }
+
+    const result = { view, viewStack, match };
+    return result;
+
+    function matchView(v: ViewItem) {
+      const matchProps = {
+        exact: v.routeData.childProps.exact,
+        path: v.routeData.childProps.path || v.routeData.childProps.from,
+        component: v.routeData.childProps.component
+      };
+      match = matchPath(location.pathname, matchProps)
+      if (match) {
+        view = v;
+        return true;
+      }
+      return false;
+    }
+
+  }
+
+  findViewInfoById(id: string = '') {
+    let view: ViewItem<IonRouteData> | undefined;
+    let viewStack: ViewStack | undefined;
+    const keys = this.getKeys();
+    keys.some(key => {
+      const vs = this.viewStacks[key];
+      view = vs.views.find(x => x.id === id);
+      if (view) {
+        viewStack = vs;
+        return true;
+      } else {
+        return false;
+      }
+    });
+    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;
+        }
+      })
+    })
+  }
+}
+