From 4a3030f0871106e3a9a9d901b85e91243073f2bb Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 8 Mar 2018 01:42:08 +0100 Subject: [PATCH] feat(route): adds route-link --- packages/core/src/components.d.ts | 21 +++++----- .../core/src/components/button/button.tsx | 6 +-- packages/core/src/components/item/item.tsx | 15 ++++--- .../core/src/components/route-link/readme.md | 14 +------ .../src/components/route-link/route-link.tsx | 13 ++++-- packages/core/src/components/router/readme.md | 5 +++ .../src/components/router/router-utils.ts | 0 .../core/src/components/router/router.tsx | 41 +++++++++++-------- packages/core/src/utils/theme.ts | 11 +++++ 9 files changed, 74 insertions(+), 52 deletions(-) delete mode 100644 packages/core/src/components/router/router-utils.ts diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 5fafc926e6..a1ea90b0c3 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2546,31 +2546,30 @@ declare global { import { - RouteLink as IonRouteLink + RouteLink as IonAnchor } from './components/route-link/route-link'; declare global { - interface HTMLIonRouteLinkElement extends IonRouteLink, HTMLStencilElement { + interface HTMLIonAnchorElement extends IonAnchor, HTMLStencilElement { } - var HTMLIonRouteLinkElement: { - prototype: HTMLIonRouteLinkElement; - new (): HTMLIonRouteLinkElement; + var HTMLIonAnchorElement: { + prototype: HTMLIonAnchorElement; + new (): HTMLIonAnchorElement; }; interface HTMLElementTagNameMap { - "ion-route-link": HTMLIonRouteLinkElement; + "ion-anchor": HTMLIonAnchorElement; } interface ElementTagNameMap { - "ion-route-link": HTMLIonRouteLinkElement; + "ion-anchor": HTMLIonAnchorElement; } namespace JSX { interface IntrinsicElements { - "ion-route-link": JSXElements.IonRouteLinkAttributes; + "ion-anchor": JSXElements.IonAnchorAttributes; } } namespace JSXElements { - export interface IonRouteLinkAttributes extends HTMLAttributes { - router?: any; - url?: string; + export interface IonAnchorAttributes extends HTMLAttributes { + href?: string; } } } diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 4a2ec2e0b4..233304bc26 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core'; import { CssClassMap } from '../../index'; import { BlurEvent, FocusEvent } from '../../utils/input-interfaces'; -import { getButtonClassMap, getElementClassMap } from '../../utils/theme'; +import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme'; @Component({ @@ -133,16 +133,16 @@ export class Button { const attrs = (TagType === 'button') ? { type: this.type } - : {}; + : { href: this.href }; return ( openURL(this.href, ev)} onBlur={this.onBlur.bind(this)}> diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx index 00dcd38e23..944d0538f6 100644 --- a/packages/core/src/components/item/item.tsx +++ b/packages/core/src/components/item/item.tsx @@ -1,5 +1,5 @@ import { Component, Element, Listen, Prop, State } from '@stencil/core'; -import { createThemedClasses, getElementClassMap } from '../../utils/theme'; +import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme'; import { CssClassMap } from '../../index'; @@ -104,10 +104,10 @@ export class Item { const clickable = !!(this.href || this.onclick || this.tappable); - let TagType = 'div'; - if (clickable) { - TagType = this.href ? 'a' : 'button'; - } + const TagType = clickable + ? this.href ? 'a' : 'button' + : 'div'; + const attrs = (TagType === 'button') ? {type: 'button'} : {href: this.href}; @@ -125,7 +125,10 @@ export class Item { this.hasStyleChange = false; return ( - + openURL(this.href, ev)}>
diff --git a/packages/core/src/components/route-link/readme.md b/packages/core/src/components/route-link/readme.md index 9ca04d6f28..19932690f8 100644 --- a/packages/core/src/components/route-link/readme.md +++ b/packages/core/src/components/route-link/readme.md @@ -7,24 +7,14 @@ ## Properties -#### router - -any - - -#### url +#### href string ## Attributes -#### router - -any - - -#### url +#### href string diff --git a/packages/core/src/components/route-link/route-link.tsx b/packages/core/src/components/route-link/route-link.tsx index f404fb50cb..3a47db8ba2 100644 --- a/packages/core/src/components/route-link/route-link.tsx +++ b/packages/core/src/components/route-link/route-link.tsx @@ -1,12 +1,17 @@ import { Component, Prop } from '@stencil/core'; +import { openURL } from '../../utils/theme'; @Component({ - tag: 'ion-route-link' + tag: 'ion-anchor' }) export class RouteLink { - @Prop() url: string; - // The instance of the router - @Prop() router: any; + @Prop() href: string; + + render() { + return openURL(this.href, ev)}>; + } } diff --git a/packages/core/src/components/router/readme.md b/packages/core/src/components/router/readme.md index 5ae07c076a..87a6d75f0d 100644 --- a/packages/core/src/components/router/readme.md +++ b/packages/core/src/components/router/readme.md @@ -29,6 +29,11 @@ string boolean +## Methods + +#### pushURL() + + ---------------------------------------------- diff --git a/packages/core/src/components/router/router-utils.ts b/packages/core/src/components/router/router-utils.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/core/src/components/router/router.tsx b/packages/core/src/components/router/router.tsx index b722227762..37e85e931a 100644 --- a/packages/core/src/components/router/router.tsx +++ b/packages/core/src/components/router/router.tsx @@ -1,8 +1,8 @@ -import { Component, Element, Listen, Prop } from '@stencil/core'; +import { Component, Element, Listen, Method, Prop } from '@stencil/core'; import { Config, DomController } from '../../index'; import { flattenRouterTree, readRoutes } from './utils/parser'; import { readNavState, writeNavState } from './utils/dom'; -import { chainToPath, readPath, writePath } from './utils/path'; +import { chainToPath, parsePath, readPath, writePath } from './utils/path'; import { RouteChain } from './utils/interfaces'; import { routerIDsToChain, routerPathToChain } from './utils/matching'; @@ -42,10 +42,7 @@ export class Router { this.state++; window.history.replaceState(this.state, document.title, document.location.href); } - if (!this.busy) { - console.debug('[OUT] hash changed -> write nav state'); - this.writeNavStateRoot(); - } + this.writeNavStateRoot(); } @Listen('body:ionNavChanged') @@ -63,21 +60,34 @@ export class Router { } const isPop = ev.detail.isPop === true; - this.writePath(chain, isPop); + const path = chainToPath(chain); + this.writePath(path, isPop); + } + + @Method() + pushURL(url: string) { + this.writePath(parsePath(url), false); + return this.writeNavStateRoot(); } private writeNavStateRoot(): Promise { - const node = document.querySelector('ion-app'); - const currentPath = this.readPath(); - const direction = window.history.state >= this.state ? 1 : -1; - if (currentPath) { - const {chain} = routerPathToChain(currentPath, this.routes); - return this.writeNavState(node, chain, direction); + if (this.busy) { + return Promise.resolve(); } - return Promise.resolve(); + const currentPath = this.readPath(); + if (!currentPath) { + return Promise.resolve(); + } + const direction = window.history.state >= this.state ? 1 : -1; + const node = document.querySelector('ion-app'); + const {chain} = routerPathToChain(currentPath, this.routes); + return this.writeNavState(node, chain, direction); } private writeNavState(node: any, chain: RouteChain, direction: number): Promise { + if (this.busy) { + return Promise.resolve(); + } this.busy = true; return writeNavState(node, chain, 0, direction) .catch(err => console.error(err)) @@ -89,8 +99,7 @@ export class Router { return readNavState(root); } - private writePath(chain: RouteChain, isPop: boolean) { - const path = chainToPath(chain); + private writePath(path: string[], isPop: boolean) { this.state = writePath(window.history, this.base, this.useHash, path, isPop, this.state); } diff --git a/packages/core/src/utils/theme.ts b/packages/core/src/utils/theme.ts index e0d1ef4826..a92741c096 100644 --- a/packages/core/src/utils/theme.ts +++ b/packages/core/src/utils/theme.ts @@ -62,3 +62,14 @@ export function getClassMap(classes: string | undefined): CssClassMap { return map; } +export function openURL(url: string, ev: Event) { + if (url && url.indexOf('://') === -1) { + const router = document.querySelector('ion-router'); + if (router) { + ev && ev.preventDefault(); + return router.componentOnReady().then(() => router.pushURL(url)); + } + } + return Promise.resolve(); +} +