Skip to content
Permalink
Browse files

feat(nav-link): merge nav-push/pop/set-root into a single component (#…

  • Loading branch information...
manucorporat committed Aug 27, 2019
1 parent d031434 commit c3044f59df96666bbe005f3615300a5130ca8727
Showing with 313 additions and 19 deletions.
  1. +1 βˆ’0 angular/src/directives/proxies-list.txt
  2. +11 βˆ’0 angular/src/directives/proxies.ts
  3. +2 βˆ’1 angular/src/ionic-module.ts
  4. +2 βˆ’2 angular/src/providers/menu-controller.ts
  5. +5 βˆ’0 core/api.txt
  6. +36 βˆ’0 core/src/components.d.ts
  7. +3 βˆ’0 core/src/components/action-sheet-controller/action-sheet-controller.tsx
  8. +2 βˆ’0 core/src/components/action-sheet-controller/readme.md
  9. +3 βˆ’0 core/src/components/alert-controller/alert-controller.tsx
  10. +2 βˆ’0 core/src/components/alert-controller/readme.md
  11. +1 βˆ’1 core/src/components/anchor/anchor.tsx
  12. +3 βˆ’0 core/src/components/loading-controller/loading-controller.tsx
  13. +2 βˆ’0 core/src/components/loading-controller/readme.md
  14. +3 βˆ’0 core/src/components/modal-controller/modal-controller.tsx
  15. +2 βˆ’0 core/src/components/modal-controller/readme.md
  16. +20 βˆ’0 core/src/components/nav-link/nav-link-utils.ts
  17. +37 βˆ’0 core/src/components/nav-link/nav-link.tsx
  18. +22 βˆ’0 core/src/components/nav-link/readme.md
  19. +106 βˆ’0 core/src/components/nav-link/test/basic/index.html
  20. +10 βˆ’4 core/src/components/nav-pop/nav-pop.tsx
  21. +2 βˆ’0 core/src/components/nav-pop/readme.md
  22. +9 βˆ’5 core/src/components/nav-push/nav-push.tsx
  23. +2 βˆ’0 core/src/components/nav-push/readme.md
  24. +9 βˆ’5 core/src/components/nav-set-root/nav-set-root.tsx
  25. +2 βˆ’0 core/src/components/nav-set-root/readme.md
  26. +3 βˆ’0 core/src/components/picker-controller/picker-controller.tsx
  27. +2 βˆ’0 core/src/components/picker-controller/readme.md
  28. +3 βˆ’0 core/src/components/popover-controller/popover-controller.tsx
  29. +2 βˆ’0 core/src/components/popover-controller/readme.md
  30. +2 βˆ’0 core/src/components/toast-controller/readme.md
  31. +3 βˆ’0 core/src/components/toast-controller/toast-controller.tsx
  32. +1 βˆ’1 core/stencil.config.ts
@@ -43,6 +43,7 @@ d.IonApp,
d.IonMenuButton,
d.IonMenuToggle,
d.IonNav,
d.IonNavLink,
d.IonNavPop,
d.IonNavPush,
d.IonNavSetRoot,
@@ -505,6 +505,17 @@ export class IonNav {
proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
proxyInputs(IonNav, ['animated', 'animation', 'root', 'rootParams', 'swipeGesture']);

export declare interface IonNavLink extends Components.IonNavLink {}
@Component({ selector: 'ion-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps', 'routerDirection'] })
export class IonNavLink {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
}
}
proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);

export declare interface IonNavPop extends Components.IonNavPop {}
@Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
export class IonNavPop {
@@ -13,7 +13,7 @@ import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
import { IonTabs } from './directives/navigation/ion-tabs';
import { NavDelegate } from './directives/navigation/nav-delegate';
import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -66,6 +66,7 @@ const DECLARATIONS = [
IonMenuButton,
IonMenuToggle,
IonNav,
IonNavLink,
IonNavPop,
IonNavPush,
IonNavSetRoot,
@@ -53,10 +53,10 @@ export class MenuController {
* @param shouldEnable True if it should be swipe-able, false if not.
* @param [menuId] Optionally get the menu by its id, or side.
* @return Returns the instance of the menu, which is useful for chaining.
* @deprecated Use swipeGesture() instead
* @deprecated Use swipeGesture() instead.
*/
swipeEnable(shouldEnable: boolean, menuId?: string) {
console.warn('MenuController.swipeEnable is deprecated. Use MenuController.swipeGesture() instead');
console.warn('[DEPRECATED][ion-menu-controller] swipeEnable() is deprecated. Use MenuController.swipeGesture() instead');
return this.swipeGesture(shouldEnable, menuId);
}

@@ -729,6 +729,11 @@ ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentPr
ion-nav,event,ionNavDidChange,void,false
ion-nav,event,ionNavWillChange,void,false

ion-nav-link,none
ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false

ion-nav-pop,none

ion-nav-push,none
@@ -1639,6 +1639,20 @@ export namespace Components {
*/
'swipeGesture'?: boolean;
}
interface IonNavLink {
/**
* Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
*/
'component'?: NavComponent;
/**
* Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
*/
'componentProps'?: ComponentProps;
/**
* The transition direction when navigating to another page.
*/
'routerDirection': RouterDirection;
}
interface IonNavPop {}
interface IonNavPush {
/**
@@ -3186,6 +3200,12 @@ declare global {
new (): HTMLIonNavElement;
};

interface HTMLIonNavLinkElement extends Components.IonNavLink, HTMLStencilElement {}
var HTMLIonNavLinkElement: {
prototype: HTMLIonNavLinkElement;
new (): HTMLIonNavLinkElement;
};

interface HTMLIonNavPopElement extends Components.IonNavPop, HTMLStencilElement {}
var HTMLIonNavPopElement: {
prototype: HTMLIonNavPopElement;
@@ -3524,6 +3544,7 @@ declare global {
'ion-modal': HTMLIonModalElement;
'ion-modal-controller': HTMLIonModalControllerElement;
'ion-nav': HTMLIonNavElement;
'ion-nav-link': HTMLIonNavLinkElement;
'ion-nav-pop': HTMLIonNavPopElement;
'ion-nav-push': HTMLIonNavPushElement;
'ion-nav-set-root': HTMLIonNavSetRootElement;
@@ -4931,6 +4952,20 @@ declare namespace LocalJSX {
*/
'swipeGesture'?: boolean;
}
interface IonNavLink extends JSXBase.HTMLAttributes<HTMLIonNavLinkElement> {
/**
* Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
*/
'component'?: NavComponent;
/**
* Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
*/
'componentProps'?: ComponentProps;
/**
* The transition direction when navigating to another page.
*/
'routerDirection'?: RouterDirection;
}
interface IonNavPop extends JSXBase.HTMLAttributes<HTMLIonNavPopElement> {}
interface IonNavPush extends JSXBase.HTMLAttributes<HTMLIonNavPushElement> {
/**
@@ -6207,6 +6242,7 @@ declare namespace LocalJSX {
'ion-modal': IonModal;
'ion-modal-controller': IonModalController;
'ion-nav': IonNav;
'ion-nav-link': IonNavLink;
'ion-nav-pop': IonNavPop;
'ion-nav-push': IonNavPush;
'ion-nav-set-root': IonNavSetRoot;
@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
import { ActionSheetOptions, OverlayController } from '../../interface';
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';

/**
* @deprecated Use the `actionSheetController` exported from core.
*/
@Component({
tag: 'ion-action-sheet-controller'
})
@@ -5,6 +5,8 @@ Action Sheet controllers programmatically control the action sheet component. Ac
<!-- Auto Generated Below -->


> **[DEPRECATED]** Use the `actionSheetController` exported from core.
## Methods

### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
import { AlertOptions, OverlayController } from '../../interface';
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';

/**
* @deprecated Use the `alertController` exported from core.
*/
@Component({
tag: 'ion-alert-controller'
})
@@ -6,6 +6,8 @@ Alert controllers programmatically control the alert component. Alerts can be cr
<!-- Auto Generated Below -->


> **[DEPRECATED]** Use the `alertController` exported from core.
## Methods

### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`
@@ -40,7 +40,7 @@ export class Anchor implements ComponentInterface {
@Prop() routerDirection: RouterDirection = 'forward';

componentDidLoad() {
console.warn('The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
console.warn('[DEPRECATED][ion-anchor] The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
}

private onClick = (ev: Event) => {
@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
import { LoadingOptions, OverlayController } from '../../interface';
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';

/**
* @deprecated Use the `loadingController` exported from core.
*/
@Component({
tag: 'ion-loading-controller'
})
@@ -8,6 +8,8 @@ Loading controllers programmatically control the loading component. Loadings can
<!-- Auto Generated Below -->


> **[DEPRECATED]** Use the `loadingController` exported from core.
## Methods

### `create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>`
@@ -3,6 +3,9 @@ import { Build, Component, ComponentInterface, Method } from '@stencil/core';
import { ComponentRef, ModalOptions, OverlayController } from '../../interface';
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';

/**
* @deprecated Use the `modalController` exported from core.
*/
@Component({
tag: 'ion-modal-controller'
})
@@ -6,6 +6,8 @@ Modal controllers programmatically control the modal component. Modals can be cr
<!-- Auto Generated Below -->


> **[DEPRECATED]** Use the `modalController` exported from core.
## Methods

### `create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>`
@@ -0,0 +1,20 @@
import { ComponentProps, NavComponent } from '../../interface';
import { RouterDirection } from '../router/utils/interface';

export const navLink = (el: HTMLElement, routerDirection: RouterDirection, component?: NavComponent, componentProps?: ComponentProps) => {
const nav = el.closest('ion-nav');
if (nav) {
if (routerDirection === 'forward') {
if (component !== undefined) {
return nav.push(component, componentProps, { skipIfBusy: true });
}
} else if (routerDirection === 'root') {
if (component !== undefined) {
return nav.setRoot(component, componentProps, { skipIfBusy: true });
}
} else if (routerDirection === 'back') {
return nav.pop({ skipIfBusy: true });
}
}
return Promise.resolve(false);
};
@@ -0,0 +1,37 @@
import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';

import { ComponentProps, NavComponent, RouterDirection } from '../../interface';

import { navLink } from './nav-link-utils';

@Component({
tag: 'ion-nav-link'
})
export class NavLink implements ComponentInterface {
@Element() el!: HTMLElement;

/**
* Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
*/
@Prop() component?: NavComponent;

/**
* Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
*/
@Prop() componentProps?: ComponentProps;

/**
* The transition direction when navigating to another page.
*/
@Prop() routerDirection: RouterDirection = 'forward';

private onClick = () => {
return navLink(this.el, this.routerDirection, this.component, this.componentProps);
}

render() {
return (
<Host onClick={this.onClick}></Host>
);
}
}
@@ -0,0 +1,22 @@
# ion-nav-link

A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.

It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.


<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `component` | `component` | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
| `componentProps` | -- | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | `undefined \| { [key: string]: any; }` | `undefined` |
| `routerDirection` | `router-direction` | The transition direction when navigating to another page. | `"back" \| "forward" \| "root"` | `'forward'` |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*

0 comments on commit c3044f5

Please sign in to comment.
You can’t perform that action at this time.