Add support for RouterLink (resolves #49)

FlowingCode · Nov 10, 2020 · 104dc65 · 104dc65
1 parent 9c1e528
commit 104dc65
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 5 deletions.
diff --git a/src/main/java/com/flowingcode/addons/applayout/MenuItem.java b/src/main/java/com/flowingcode/addons/applayout/MenuItem.java
@@ -29,6 +29,7 @@
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.icon.IconFactory;
+import com.vaadin.flow.router.RouterLink;
 import com.vaadin.flow.server.Command;
 
 /**
@@ -58,7 +59,12 @@ public MenuItem(String label, Command command) {
 		this.setLabel(label);
 		this.setCommand(command);	
 	}
-
+
+	/** Create a new instance of {@code MenuItem} with a label for the given navigation target. */
+	public MenuItem(String label, Class<? extends Component> navigationTarget) {
+		setLink(new RouterLink(label, navigationTarget));
+	}
+
 	/** Create a new instance of {@code MenuItem} with a label and an icon. */
 	public MenuItem(String label, String icon) {
 		this(label);
@@ -112,6 +118,17 @@ public MenuItem setLabel(String label) {
 		return this;
 	}
 
+	public MenuItem setLink(RouterLink link) {
+		setLabel(link.getText());
+		setHref(link.getHref());
+		return this;
+	}
+
+	public MenuItem setHref(String href) {
+		getElement().setProperty("href", href);
+		return this;
+	}
+
 	public MenuItem configure(Consumer<MenuItem> consumer) {
 		consumer.accept(this);
 		return this;

diff --git a/src/main/resources/META-INF/frontend/fc-applayout/fc-menuitem.js b/src/main/resources/META-INF/frontend/fc-applayout/fc-menuitem.js
@@ -20,6 +20,7 @@
 
 
 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {} from '@polymer/polymer/lib/elements/dom-if.js';
 
 import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import "@polymer/paper-item/paper-icon-item.js";
@@ -49,6 +50,10 @@ class MenuItem extends ThemableMixin(PolymerElement) {
 			:host #label {
 				flex-grow: 1
 			}
+			:host a#label {
+				color: inherit;
+				text-decoration: none
+			}
 		</style>
 	         	
 	    <iron-iconset-svg name="fc-menuitem-icons" size="24">
@@ -60,7 +65,16 @@ class MenuItem extends ThemableMixin(PolymerElement) {
 		<iron-collapse-button no-icons="true">
 			<paper-icon-item id="item" slot="collapse-trigger" role="option" disabled="[[disabled]]">
 				<iron-icon src="[[src]]" icon="[[icon]]" slot="item-icon"></iron-icon>
-				<span id="label">[[label]]</span>
+				<dom-if if="[[href]]" restamp>
+					<template>
+						<a router-link href="{{href}}" id="label" onclick="getRootNode().host.__closeDrawer()">[[label]]</a>
+					</template>
+				</dom-if>
+				<dom-if if="{{!href}}" restamp>
+					<template>
+						<span id="label">[[label]]</span>
+					</template>
+				</dom-if>
 				<slot></slot>
 			</paper-icon-item>
 			<div slot="collapse-content" class="sub-menu">
@@ -73,6 +87,11 @@ class MenuItem extends ThemableMixin(PolymerElement) {
 		return {
 			key: String,
 			label : String,
+			href: {
+				type: String,
+				notify: true,
+				value: null,
+			},
 			src : {
 				type: String,
 				reflectToAttribute: true
@@ -125,6 +144,11 @@ class MenuItem extends ThemableMixin(PolymerElement) {
 		return !!(this.src || this.icon);
 	}
 
+	__closeDrawer() {
+		let container = this.closest('[fc-menuitem-container]'); 
+		if (container) container.close();
+	}
+
 	connectedCallback () {
 		super.connectedCallback ();
 		var slot = this.shadowRoot.querySelector("slot[name='menu-item']");

diff --git a/src/test/java/com/flowingcode/addons/applayout/ApplayoutDemoView.java b/src/test/java/com/flowingcode/addons/applayout/ApplayoutDemoView.java
@@ -181,6 +181,10 @@ private Component[] createMenuItems() {
 
 				new MenuItem("Toggle", "fc-menuitem-icons:empty").configure(mi -> mi.add(new PaperToggle())),
 
+				new MenuItem("External link").setHref("http://www.google.com"),
+
+				new MenuItem("Internal Link", InternalView.class),
+
 				// icon as VaadinIcon enum
 				new MenuItem("Content", VaadinIcon.BOOK, () -> showHamletContent()).setCommand(MouseButton.MIDDLE,
 						() -> {

diff --git a/src/test/java/com/flowingcode/addons/applayout/DemoView.java b/src/test/java/com/flowingcode/addons/applayout/DemoView.java
@@ -33,6 +33,4 @@ public void beforeEnter(BeforeEnterEvent event) {
 		event.forwardTo(ApplayoutDemoView.class);
 	}
 
-}
-
-
+}
diff --git a/src/test/java/com/flowingcode/addons/applayout/InternalView.java b/src/test/java/com/flowingcode/addons/applayout/InternalView.java
@@ -0,0 +1,13 @@
+package com.flowingcode.addons.applayout;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.router.Route;
+
+@Route("internal-view")
+public class InternalView extends Div {
+
+	public InternalView() {
+		add(new Span("Internal view"));
+	}
+}