UNPKG

3.51 kBJavaScriptView Raw
1import { r as registerInstance, h, g as getElement } from './stencilrouter-1307249c.js';
2import { A as ActiveRouter } from './chunk-cfc6485e.js';
3import { m as matchPath, a as matchesAreEqual } from './chunk-8fc41abb.js';
4import './chunk-d2e78d53.js';
5
6/**
7 * @name Route
8 * @module ionic
9 * @description
10 */
11class Route {
12 constructor(hostRef) {
13 registerInstance(this, hostRef);
14 this.group = null;
15 this.match = null;
16 this.componentProps = {};
17 this.exact = false;
18 this.scrollOnNextRender = false;
19 this.previousMatch = null;
20 }
21 // Identify if the current route is a match.
22 computeMatch(newLocation) {
23 const isGrouped = this.group != null || (this.el.parentElement != null && this.el.parentElement.tagName.toLowerCase() === 'stencil-route-switch');
24 if (!newLocation || isGrouped) {
25 return;
26 }
27 this.previousMatch = this.match;
28 return this.match = matchPath(newLocation.pathname, {
29 path: this.url,
30 exact: this.exact,
31 strict: true
32 });
33 }
34 async loadCompleted() {
35 let routeViewOptions = {};
36 if (this.history && this.history.location.hash) {
37 routeViewOptions = {
38 scrollToId: this.history.location.hash.substr(1)
39 };
40 }
41 else if (this.scrollTopOffset) {
42 routeViewOptions = {
43 scrollTopOffset: this.scrollTopOffset
44 };
45 }
46 // After all children have completed then tell switch
47 // the provided callback will get executed after this route is in view
48 if (typeof this.componentUpdated === 'function') {
49 this.componentUpdated(routeViewOptions);
50 // If this is an independent route and it matches then routes have updated.
51 // If the only change to location is a hash change then do not scroll.
52 }
53 else if (this.match && !matchesAreEqual(this.match, this.previousMatch) && this.routeViewsUpdated) {
54 this.routeViewsUpdated(routeViewOptions);
55 }
56 }
57 async componentDidUpdate() {
58 await this.loadCompleted();
59 }
60 async componentDidLoad() {
61 await this.loadCompleted();
62 }
63 render() {
64 // If there is no activeRouter then do not render
65 // Check if this route is in the matching URL (for example, a parent route)
66 if (!this.match || !this.history) {
67 return null;
68 }
69 // component props defined in route
70 // the history api
71 // current match data including params
72 const childProps = Object.assign({}, this.componentProps, { history: this.history, match: this.match });
73 // If there is a routerRender defined then use
74 // that and pass the component and component props with it.
75 if (this.routeRender) {
76 return this.routeRender(Object.assign({}, childProps, { component: this.component }));
77 }
78 if (this.component) {
79 const ChildComponent = this.component;
80 return (h(ChildComponent, Object.assign({}, childProps)));
81 }
82 }
83 get el() { return getElement(this); }
84 static get watchers() { return {
85 "location": ["computeMatch"]
86 }; }
87 static get style() { return "stencil-route.inactive{display:none}"; }
88}
89ActiveRouter.injectProps(Route, [
90 'location',
91 'history',
92 'historyType',
93 'routeViewsUpdated'
94]);
95
96export { Route as stencil_route };