From 00fc460c4e904de2a6dff169f68e040c17869fad Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 27 Mar 2018 12:05:09 +0200 Subject: [PATCH] feat(button): goback attribute --- core/src/components.d.ts | 8 +++++++- core/src/components/anchor/anchor.tsx | 6 +++++- core/src/components/anchor/readme.md | 10 ++++++++++ core/src/components/back-button/back-button.tsx | 3 +-- core/src/components/button/button.tsx | 3 ++- core/src/components/button/readme.md | 10 ++++++++++ core/src/components/item/item.tsx | 5 ++++- core/src/components/item/readme.md | 10 ++++++++++ core/src/utils/theme.ts | 6 ++---- 9 files changed, 51 insertions(+), 10 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f574bb37ce..df6c1a6230 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -488,6 +488,7 @@ declare global { declare global { interface HTMLIonAnchorElement extends HTMLStencilElement { + 'goBack': boolean; 'href': string; } var HTMLIonAnchorElement: { @@ -507,6 +508,7 @@ declare global { } namespace JSXElements { export interface IonAnchorAttributes extends HTMLAttributes { + 'goBack'?: boolean; 'href'?: string; } } @@ -734,6 +736,7 @@ declare global { * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. */ 'fill': 'clear' | 'outline' | 'solid' | 'default'; + 'goBack': boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -796,6 +799,7 @@ declare global { * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. */ 'fill'?: 'clear' | 'outline' | 'solid' | 'default'; + 'goBack'?: boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -2599,6 +2603,7 @@ declare global { * If true, the user cannot interact with the item. Defaults to `false`. */ 'disabled': boolean; + 'goBack': boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -2641,6 +2646,7 @@ declare global { * If true, the user cannot interact with the item. Defaults to `false`. */ 'disabled'?: boolean; + 'goBack'?: boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -4703,7 +4709,7 @@ declare global { 'delegate': FrameworkDelegate; 'getRouteId': () => RouteID; 'setRoot': (component: string | HTMLElement, params?: { [key: string]: any; }, opts?: RouterOutletOptions) => Promise; - 'setRouteId': (id: string, data: any, direction: number) => Promise; + 'setRouteId': (id: string, params: any, direction: number) => Promise; } var HTMLIonRouterOutletElement: { prototype: HTMLIonRouterOutletElement; diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx index d186415dc0..e1b3a169ca 100644 --- a/core/src/components/anchor/anchor.tsx +++ b/core/src/components/anchor/anchor.tsx @@ -9,9 +9,13 @@ export class Anchor { @Prop() href: string; + @Prop() goBack = false; + render() { return openURL(this.href, ev)}>; + onClick={(ev) => openURL(this.href, ev, this.goBack)}> + + ; } } diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md index 19932690f8..4ebb13af21 100644 --- a/core/src/components/anchor/readme.md +++ b/core/src/components/anchor/readme.md @@ -7,6 +7,11 @@ ## Properties +#### goBack + +boolean + + #### href string @@ -14,6 +19,11 @@ string ## Attributes +#### go-back + +boolean + + #### href string diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index a97b80d6cd..2790d44cda 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,7 +1,6 @@ import { Component, Element, Prop } from '@stencil/core'; import { Config } from '../../index'; import { openURL } from '../../utils/theme'; -import { RouterDirection } from '../router/utils/interfaces'; @Component({ tag: 'ion-back-button', @@ -42,7 +41,7 @@ export class BackButton { ev.preventDefault(); nav.pop(); } else if (this.defaultHref) { - openURL(this.defaultHref, ev, RouterDirection.Back); + openURL(this.defaultHref, ev, true); } } diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index ea992af7b5..470a9d8281 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -83,6 +83,7 @@ export class Button { */ @Prop() mode: 'ios' | 'md'; + @Prop() goBack = false; /** * Emitted when the button has focus. */ @@ -148,7 +149,7 @@ export class Button { disabled={this.disabled} onFocus={this.onFocus.bind(this)} onKeyUp={this.onKeyUp.bind(this)} - onClick={(ev) => openURL(this.href, ev)} + onClick={(ev) => openURL(this.href, ev, this.goBack)} onBlur={this.onBlur.bind(this)}> diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index e03ee1f1db..839adf88e7 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -119,6 +119,11 @@ button with a border, or to `"solid"`. The default style is `"solid"` except ins a toolbar, where the default is `"clear"`. +#### goBack + +boolean + + #### href string @@ -210,6 +215,11 @@ button with a border, or to `"solid"`. The default style is `"solid"` except ins a toolbar, where the default is `"clear"`. +#### go-back + +boolean + + #### href string diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index c3e6f56451..a0f3107c82 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -54,6 +54,9 @@ export class Item { */ @Prop() tappable = false; + @Prop() goBack = false; + + @Listen('ionStyle') itemStyle(ev: UIEvent) { ev.stopPropagation(); @@ -122,7 +125,7 @@ export class Item { openURL(this.href, ev)}> + onClick={(ev) => openURL(this.href, ev, this.goBack)}>
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 44699bbe01..2bca66d4ec 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -31,6 +31,11 @@ boolean If true, the user cannot interact with the item. Defaults to `false`. +#### goBack + +boolean + + #### href string @@ -82,6 +87,11 @@ boolean If true, the user cannot interact with the item. Defaults to `false`. +#### go-back + +boolean + + #### href string diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 700459957f..713eebb0dc 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -1,5 +1,4 @@ import { CssClassMap } from '../index'; -import { RouterDirection } from '../components/router/utils/interfaces'; /** * Create the mode and color classes for the component based on the classes passed in @@ -66,14 +65,13 @@ export function getClassMap(classes: string | undefined): CssClassMap { return map; } -export function openURL(url: string, ev: Event, direction = RouterDirection.Forward) { +export function openURL(url: string, ev: Event, goBack = false) { if (url && url[0] !== '#' && url.indexOf('://') === -1) { const router = document.querySelector('ion-router'); if (router) { ev && ev.preventDefault(); - return router.componentOnReady().then(() => router.push(url, direction)); + return router.componentOnReady().then(() => router.push(url, goBack ? -1 : 1)); } } return Promise.resolve(); } -