UNPKG

@stencil/router/dist/collection/components/route-link/route-link.js

Version:

12.3 kBJavaScriptView Raw

1import { h } from '@stencil/core';
2import { matchPath } from '../../utils/match-path';
3import { isModifiedEvent } from '../../utils/dom-utils';
4import ActiveRouter from '../../global/active-router';
5const getUrl = (url, root) => {
  // Don't allow double slashes
  if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
      return root.slice(0, root.length - 1) + url;
  }
  return root + url;
11};
12/**
* @name Route
* @module ionic
* @description
*/
17export class RouteLink {
  constructor() {
      this.unsubscribe = () => { return; };
      this.activeClass = 'link-active';
      this.exact = false;
      this.strict = true;
      /**
        *  Custom tag to use instead of an anchor
        */
      this.custom = 'a';
      this.match = null;
  }
  componentWillLoad() {
      this.computeMatch();
  }
  // Identify if the current route is a match.
  computeMatch() {
      if (this.location) {
          this.match = matchPath(this.location.pathname, {
              path: this.urlMatch || this.url,
              exact: this.exact,
              strict: this.strict
          });
      }
  }
  handleClick(e) {
      if (isModifiedEvent(e) || !this.history || !this.url || !this.root) {
          return;
      }
      e.preventDefault();
      return this.history.push(getUrl(this.url, this.root));
  }
  // Get the URL for this route link without the root from the router
  render() {
      let anchorAttributes = {
          class: {
              [this.activeClass]: this.match !== null,
          },
          onClick: this.handleClick.bind(this)
      };
      if (this.anchorClass) {
          anchorAttributes.class[this.anchorClass] = true;
      }
      if (this.custom === 'a') {
          anchorAttributes = Object.assign({}, anchorAttributes, { href: this.url, title: this.anchorTitle, role: this.anchorRole, tabindex: this.anchorTabIndex, 'aria-haspopup': this.ariaHaspopup, id: this.anchorId, 'aria-posinset': this.ariaPosinset, 'aria-setsize': this.ariaSetsize, 'aria-label': this.ariaLabel });
      }
      return (h(this.custom, Object.assign({}, anchorAttributes),
          h("slot", null)));
  }
  static get is() { return "stencil-route-link"; }
  static get properties() { return {
      "url": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "url",
          "reflect": false
      },
      "urlMatch": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "Path",
              "resolved": "(string | RegExp)[] | RegExp | string | undefined",
              "references": {
                  "Path": {
                      "location": "import",
                      "path": "../../global/interfaces"
                  }
              }
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "url-match",
          "reflect": false
      },
      "activeClass": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string",
              "references": {}
          },
          "required": false,
          "optional": false,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "active-class",
          "reflect": false,
          "defaultValue": "'link-active'"
      },
      "exact": {
          "type": "boolean",
          "mutable": false,
          "complexType": {
              "original": "boolean",
              "resolved": "boolean",
              "references": {}
          },
          "required": false,
          "optional": false,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "exact",
          "reflect": false,
          "defaultValue": "false"
      },
      "strict": {
          "type": "boolean",
          "mutable": false,
          "complexType": {
              "original": "boolean",
              "resolved": "boolean",
              "references": {}
          },
          "required": false,
          "optional": false,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "strict",
          "reflect": false,
          "defaultValue": "true"
      },
      "custom": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string",
              "references": {}
          },
          "required": false,
          "optional": false,
          "docs": {
              "tags": [],
              "text": "Custom tag to use instead of an anchor"
          },
          "attribute": "custom",
          "reflect": false,
          "defaultValue": "'a'"
      },
      "anchorClass": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "anchor-class",
          "reflect": false
      },
      "anchorRole": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "anchor-role",
          "reflect": false
      },
      "anchorTitle": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "anchor-title",
          "reflect": false
      },
      "anchorTabIndex": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "anchor-tab-index",
          "reflect": false
      },
      "anchorId": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "anchor-id",
          "reflect": false
      },
      "history": {
          "type": "unknown",
          "mutable": false,
          "complexType": {
              "original": "RouterHistory",
              "resolved": "RouterHistory | undefined",
              "references": {
                  "RouterHistory": {
                      "location": "import",
                      "path": "../../global/interfaces"
                  }
              }
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          }
      },
      "location": {
          "type": "unknown",
          "mutable": false,
          "complexType": {
              "original": "LocationSegments",
              "resolved": "LocationSegments | undefined",
              "references": {
                  "LocationSegments": {
                      "location": "import",
                      "path": "../../global/interfaces"
                  }
              }
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          }
      },
      "root": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "root",
          "reflect": false
      },
      "ariaHaspopup": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "aria-haspopup",
          "reflect": false
      },
      "ariaPosinset": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "aria-posinset",
          "reflect": false
      },
      "ariaSetsize": {
          "type": "number",
          "mutable": false,
          "complexType": {
              "original": "number",
              "resolved": "number | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "aria-setsize",
          "reflect": false
      },
      "ariaLabel": {
          "type": "string",
          "mutable": false,
          "complexType": {
              "original": "string",
              "resolved": "string | undefined",
              "references": {}
          },
          "required": false,
          "optional": true,
          "docs": {
              "tags": [],
              "text": ""
          },
          "attribute": "aria-label",
          "reflect": false
      }
  }; }
  static get states() { return {
      "match": {}
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
          "propName": "location",
          "methodName": "computeMatch"
      }]; }
398}
399ActiveRouter.injectProps(RouteLink, [
  'history',
  'location',
  'root'
403]);

1	`import { h } from '@stencil/core';`
2	`import { matchPath } from '../../utils/match-path';`
3	`import { isModifiedEvent } from '../../utils/dom-utils';`
4	`import ActiveRouter from '../../global/active-router';`
5	`const getUrl = (url, root) => {`
6	`// Don't allow double slashes`
7	`if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {`
8	`return root.slice(0, root.length - 1) + url;`
9	`}`
10	`return root + url;`
11	`};`
12	`/**`
13	`* @name Route`
14	`* @module ionic`
15	`* @description`
16	`*/`
17	`export class RouteLink {`
18	`constructor() {`
19	`this.unsubscribe = () => { return; };`
20	`this.activeClass = 'link-active';`
21	`this.exact = false;`
22	`this.strict = true;`
23	`/**`
24	`* Custom tag to use instead of an anchor`
25	`*/`
26	`this.custom = 'a';`
27	`this.match = null;`
28	`}`
29	`componentWillLoad() {`
30	`this.computeMatch();`
31	`}`
32	`// Identify if the current route is a match.`
33	`computeMatch() {`
34	`if (this.location) {`
35	`this.match = matchPath(this.location.pathname, {`
36	`path: this.urlMatch \|\| this.url,`
37	`exact: this.exact,`
38	`strict: this.strict`
39	`});`
40	`}`
41	`}`
42	`handleClick(e) {`
43	`if (isModifiedEvent(e) \|\| !this.history \|\| !this.url \|\| !this.root) {`
44	`return;`
45	`}`
46	`e.preventDefault();`
47	`return this.history.push(getUrl(this.url, this.root));`
48	`}`
49	`// Get the URL for this route link without the root from the router`
50	`render() {`
51	`let anchorAttributes = {`
52	`class: {`
53	`[this.activeClass]: this.match !== null,`
54	`},`
55	`onClick: this.handleClick.bind(this)`
56	`};`
57	`if (this.anchorClass) {`
58	`anchorAttributes.class[this.anchorClass] = true;`
59	`}`
60	`if (this.custom === 'a') {`
61	`anchorAttributes = Object.assign({}, anchorAttributes, { href: this.url, title: this.anchorTitle, role: this.anchorRole, tabindex: this.anchorTabIndex, 'aria-haspopup': this.ariaHaspopup, id: this.anchorId, 'aria-posinset': this.ariaPosinset, 'aria-setsize': this.ariaSetsize, 'aria-label': this.ariaLabel });`
62	`}`
63	`return (h(this.custom, Object.assign({}, anchorAttributes),`
64	`h("slot", null)));`
65	`}`
66	`static get is() { return "stencil-route-link"; }`
67	`static get properties() { return {`
68	`"url": {`
69	`"type": "string",`
70	`"mutable": false,`
71	`"complexType": {`
72	`"original": "string",`
73	`"resolved": "string \| undefined",`
74	`"references": {}`
75	`},`
76	`"required": false,`
77	`"optional": true,`
78	`"docs": {`
79	`"tags": [],`
80	`"text": ""`
81	`},`
82	`"attribute": "url",`
83	`"reflect": false`
84	`},`
85	`"urlMatch": {`
86	`"type": "string",`
87	`"mutable": false,`
88	`"complexType": {`
89	`"original": "Path",`
90	`"resolved": "(string \| RegExp)[] \| RegExp \| string \| undefined",`
91	`"references": {`
92	`"Path": {`
93	`"location": "import",`
94	`"path": "../../global/interfaces"`
95	`}`
96	`}`
97	`},`
98	`"required": false,`
99	`"optional": true,`
100	`"docs": {`
101	`"tags": [],`
102	`"text": ""`
103	`},`
104	`"attribute": "url-match",`
105	`"reflect": false`
106	`},`
107	`"activeClass": {`
108	`"type": "string",`
109	`"mutable": false,`
110	`"complexType": {`
111	`"original": "string",`
112	`"resolved": "string",`
113	`"references": {}`
114	`},`
115	`"required": false,`
116	`"optional": false,`
117	`"docs": {`
118	`"tags": [],`
119	`"text": ""`
120	`},`
121	`"attribute": "active-class",`
122	`"reflect": false,`
123	`"defaultValue": "'link-active'"`
124	`},`
125	`"exact": {`
126	`"type": "boolean",`
127	`"mutable": false,`
128	`"complexType": {`
129	`"original": "boolean",`
130	`"resolved": "boolean",`
131	`"references": {}`
132	`},`
133	`"required": false,`
134	`"optional": false,`
135	`"docs": {`
136	`"tags": [],`
137	`"text": ""`
138	`},`
139	`"attribute": "exact",`
140	`"reflect": false,`
141	`"defaultValue": "false"`
142	`},`
143	`"strict": {`
144	`"type": "boolean",`
145	`"mutable": false,`
146	`"complexType": {`
147	`"original": "boolean",`
148	`"resolved": "boolean",`
149	`"references": {}`
150	`},`
151	`"required": false,`
152	`"optional": false,`
153	`"docs": {`
154	`"tags": [],`
155	`"text": ""`
156	`},`
157	`"attribute": "strict",`
158	`"reflect": false,`
159	`"defaultValue": "true"`
160	`},`
161	`"custom": {`
162	`"type": "string",`
163	`"mutable": false,`
164	`"complexType": {`
165	`"original": "string",`
166	`"resolved": "string",`
167	`"references": {}`
168	`},`
169	`"required": false,`
170	`"optional": false,`
171	`"docs": {`
172	`"tags": [],`
173	`"text": "Custom tag to use instead of an anchor"`
174	`},`
175	`"attribute": "custom",`
176	`"reflect": false,`
177	`"defaultValue": "'a'"`
178	`},`
179	`"anchorClass": {`
180	`"type": "string",`
181	`"mutable": false,`
182	`"complexType": {`
183	`"original": "string",`
184	`"resolved": "string \| undefined",`
185	`"references": {}`
186	`},`
187	`"required": false,`
188	`"optional": true,`
189	`"docs": {`
190	`"tags": [],`
191	`"text": ""`
192	`},`
193	`"attribute": "anchor-class",`
194	`"reflect": false`
195	`},`
196	`"anchorRole": {`
197	`"type": "string",`
198	`"mutable": false,`
199	`"complexType": {`
200	`"original": "string",`
201	`"resolved": "string \| undefined",`
202	`"references": {}`
203	`},`
204	`"required": false,`
205	`"optional": true,`
206	`"docs": {`
207	`"tags": [],`
208	`"text": ""`
209	`},`
210	`"attribute": "anchor-role",`
211	`"reflect": false`
212	`},`
213	`"anchorTitle": {`
214	`"type": "string",`
215	`"mutable": false,`
216	`"complexType": {`
217	`"original": "string",`
218	`"resolved": "string \| undefined",`
219	`"references": {}`
220	`},`
221	`"required": false,`
222	`"optional": true,`
223	`"docs": {`
224	`"tags": [],`
225	`"text": ""`
226	`},`
227	`"attribute": "anchor-title",`
228	`"reflect": false`
229	`},`
230	`"anchorTabIndex": {`
231	`"type": "string",`
232	`"mutable": false,`
233	`"complexType": {`
234	`"original": "string",`
235	`"resolved": "string \| undefined",`
236	`"references": {}`
237	`},`
238	`"required": false,`
239	`"optional": true,`
240	`"docs": {`
241	`"tags": [],`
242	`"text": ""`
243	`},`
244	`"attribute": "anchor-tab-index",`
245	`"reflect": false`
246	`},`
247	`"anchorId": {`
248	`"type": "string",`
249	`"mutable": false,`
250	`"complexType": {`
251	`"original": "string",`
252	`"resolved": "string \| undefined",`
253	`"references": {}`
254	`},`
255	`"required": false,`
256	`"optional": true,`
257	`"docs": {`
258	`"tags": [],`
259	`"text": ""`
260	`},`
261	`"attribute": "anchor-id",`
262	`"reflect": false`
263	`},`
264	`"history": {`
265	`"type": "unknown",`
266	`"mutable": false,`
267	`"complexType": {`
268	`"original": "RouterHistory",`
269	`"resolved": "RouterHistory \| undefined",`
270	`"references": {`
271	`"RouterHistory": {`
272	`"location": "import",`
273	`"path": "../../global/interfaces"`
274	`}`
275	`}`
276	`},`
277	`"required": false,`
278	`"optional": true,`
279	`"docs": {`
280	`"tags": [],`
281	`"text": ""`
282	`}`
283	`},`
284	`"location": {`
285	`"type": "unknown",`
286	`"mutable": false,`
287	`"complexType": {`
288	`"original": "LocationSegments",`
289	`"resolved": "LocationSegments \| undefined",`
290	`"references": {`
291	`"LocationSegments": {`
292	`"location": "import",`
293	`"path": "../../global/interfaces"`
294	`}`
295	`}`
296	`},`
297	`"required": false,`
298	`"optional": true,`
299	`"docs": {`
300	`"tags": [],`
301	`"text": ""`
302	`}`
303	`},`
304	`"root": {`
305	`"type": "string",`
306	`"mutable": false,`
307	`"complexType": {`
308	`"original": "string",`
309	`"resolved": "string \| undefined",`
310	`"references": {}`
311	`},`
312	`"required": false,`
313	`"optional": true,`
314	`"docs": {`
315	`"tags": [],`
316	`"text": ""`
317	`},`
318	`"attribute": "root",`
319	`"reflect": false`
320	`},`
321	`"ariaHaspopup": {`
322	`"type": "string",`
323	`"mutable": false,`
324	`"complexType": {`
325	`"original": "string",`
326	`"resolved": "string \| undefined",`
327	`"references": {}`
328	`},`
329	`"required": false,`
330	`"optional": true,`
331	`"docs": {`
332	`"tags": [],`
333	`"text": ""`
334	`},`
335	`"attribute": "aria-haspopup",`
336	`"reflect": false`
337	`},`
338	`"ariaPosinset": {`
339	`"type": "string",`
340	`"mutable": false,`
341	`"complexType": {`
342	`"original": "string",`
343	`"resolved": "string \| undefined",`
344	`"references": {}`
345	`},`
346	`"required": false,`
347	`"optional": true,`
348	`"docs": {`
349	`"tags": [],`
350	`"text": ""`
351	`},`
352	`"attribute": "aria-posinset",`
353	`"reflect": false`
354	`},`
355	`"ariaSetsize": {`
356	`"type": "number",`
357	`"mutable": false,`
358	`"complexType": {`
359	`"original": "number",`
360	`"resolved": "number \| undefined",`
361	`"references": {}`
362	`},`
363	`"required": false,`
364	`"optional": true,`
365	`"docs": {`
366	`"tags": [],`
367	`"text": ""`
368	`},`
369	`"attribute": "aria-setsize",`
370	`"reflect": false`
371	`},`
372	`"ariaLabel": {`
373	`"type": "string",`
374	`"mutable": false,`
375	`"complexType": {`
376	`"original": "string",`
377	`"resolved": "string \| undefined",`
378	`"references": {}`
379	`},`
380	`"required": false,`
381	`"optional": true,`
382	`"docs": {`
383	`"tags": [],`
384	`"text": ""`
385	`},`
386	`"attribute": "aria-label",`
387	`"reflect": false`
388	`}`
389	`}; }`
390	`static get states() { return {`
391	`"match": {}`
392	`}; }`
393	`static get elementRef() { return "el"; }`
394	`static get watchers() { return [{`
395	`"propName": "location",`
396	`"methodName": "computeMatch"`
397	`}]; }`
398	`}`
399	`ActiveRouter.injectProps(RouteLink, [`
400	`'history',`
401	`'location',`
402	`'root'`
403	`]);`