@neovici/cosmoz-treenode-navigator 5.2.0 → 5.4.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [5.4.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.3.0...v5.4.0) (2022-11-03)
+
+
+### Features
+
+* **select:** close dialog manually ([3abb0d0](https://github.com/neovici/cosmoz-treenode-navigator/commit/3abb0d0d75c11ad3e77001ba401f4fe998ad66a7))
+
+# [5.3.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.2.0...v5.3.0) (2022-08-01)
+
+
+### Bug Fixes
+
+* close on enter ([e7cd4d1](https://github.com/neovici/cosmoz-treenode-navigator/commit/e7cd4d191abdf1b9486a5d097154f530130d4a96))
+* **cosmoz-treenode-button-view:** pass opened to treenode ([4f43ade](https://github.com/neovici/cosmoz-treenode-navigator/commit/4f43ade0844fe5168cf84f6f7833dc61a608e176))
+* **renderLevel:** handle leaf nodes ([760f6bf](https://github.com/neovici/cosmoz-treenode-navigator/commit/760f6bf4888ccbec0184ca72ea21ab4781e66f46))
+
+
+### Features
+
+* **treenode-navigator:** autoscroll to highlighed node ([5c55a38](https://github.com/neovici/cosmoz-treenode-navigator/commit/5c55a38ad406b3d711405b8173c388fb26d5eb6c))
+
 # [5.2.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.1.0...v5.2.0) (2022-08-01)
 
 

package/cosmoz-treenode-button-view.js

@@ -127,7 +127,8 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			<cosmoz-dialog
 				id="dialogTree"
 				class="treeDialog"
-				on-iron-overlay-opened="focusSearch"
+				on-iron-overlay-opened="onOpened"
+				on-iron-overlay-closed="onClosed"
 				modal
 				prerender
 			>
@@ -147,13 +148,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 						nodes-on-node-path="{{ nodesOnNodePath }}"
 						on-node-dblclicked="_selectNodeAndCloseDialog"
 						on-select-node="selectNode"
+						opened="[[ opened ]]"
 					>
 						<slot></slot>
 					</cosmoz-treenode-navigator>
 					<div class="buttons">
 						<paper-button
 							disabled="[[!highlightedNodePath]]"
-							dialog-confirm
 							autofocus
 							on-click="selectNode"
 							>[[ _('Select', t) ]]</paper-button
@@ -174,13 +175,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		return {
 			multiSelection: {
 				type: Boolean,
-				value: false
+				value: false,
 			},
 			/*
 			 * The main node structure
 			 */
 			tree: {
-				type: Tree
+				type: Tree,
 			},
 			/*
 			 * Currently selected node object
@@ -190,7 +191,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 				value() {
 					return {};
 				},
-				notify: true
+				notify: true,
 			},
 			/**
 			 * Selected nodes
@@ -198,32 +199,40 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			selectedNodes: {
 				type: Array,
 				notify: true,
-				value: () => []
+				value: () => [],
 			},
 			/**
 			 * If true, reset button gets hidden
 			 */
 			noReset: {
 				type: Boolean,
-				value: false
+				value: false,
+			},
+			/**
+			 * If true opened
+			 */
+			opened: {
+				type: Boolean,
+				value: false,
 			},
+
 			/*
 			 * Placeholder for the search field
 			 */
 			searchPlaceholder: {
-				type: String
+				type: String,
 			},
 			/*
 			 * Placeholder for button text
 			 */
 			buttonTextPlaceholder: {
 				type: String,
-				computed: 'getButtonTextPlaceholder(multiSelection)'
+				computed: 'getButtonTextPlaceholder(multiSelection)',
 			},
 
 			buttonText: {
 				type: String,
-				computed: '_getButtonLabel(nodesOnNodePath, buttonTextPlaceholder)'
+				computed: '_getButtonLabel(nodesOnNodePath, buttonTextPlaceholder)',
 			},
 
 			/*
@@ -231,13 +240,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			 */
 			nodePath: {
 				type: String,
-				notify: true
+				notify: true,
 			},
 			/*
 			 * The nodes on the path of the selected node
 			 */
 			nodesOnNodePath: {
-				type: Array
+				type: Array,
 			},
 			/*
 			 * Text displayed when local search has finished
@@ -245,14 +254,14 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			 */
 			searchGlobalPlaceholder: {
 				type: String,
-				value: 'Click to search again but globally.'
+				value: 'Click to search again but globally.',
 			},
 			/*
 			 * Settable text for dialog title.
 			 */
 			dialogText: {
 				type: String,
-				value: 'Search or navigate to chosen destination'
+				value: 'Search or navigate to chosen destination',
 			},
 			/*
 			 * Minimum length before an search
@@ -260,14 +269,14 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			 */
 			searchMinLength: {
 				type: Number,
-				value: 1
+				value: 1,
 			},
 			/*
 			 * Path string of highlighted (focused) node
 			 */
 			highlightedNodePath: {
-				type: String
-			}
+				type: String,
+			},
 		};
 	}
 	/**
@@ -324,8 +333,8 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			return placeholder;
 		}
 		return pathParts
-			.filter(n => n)
-			.map(part => part[this.tree.searchProperty])
+			.filter((n) => n)
+			.map((part) => part[this.tree.searchProperty])
 			.join(' / ');
 	}
 	/**
@@ -348,7 +357,10 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 * @returns {void}
 	 */
 	focusSearch() {
-		this.$.dialogTree.paperDialog.querySelector('#treeNavigator').focus();
+		this.$.dialogTree.paperDialog
+			.querySelector('#treeNavigator')
+			.shadowRoot.querySelector('cosmoz-input')
+			.focus();
 	}
 	/**
 	 * Reset the component to make it ready for reuse
@@ -383,7 +395,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		if (this.multiSelection) {
 			if (
 				!this.selectedNodes.some(
-					node => node.pathLocator === this.highlightedNodePath
+					(node) => node.pathLocator === this.highlightedNodePath
 				)
 			) {
 				this.push('selectedNodes', this.selectedNode);
@@ -391,6 +403,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			this.nodePath = '';
 			this.selectedNode = {};
 		}
+		this.$.dialogTree.close();
 	}
 	/**
 	 * Selects node and closes the dialog
@@ -398,7 +411,6 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 */
 	_selectNodeAndCloseDialog() {
 		this.selectNode();
-		this.$.dialogTree.close();
 	}
 	/**
 	 * Determine if selected nodes container should be visible or not.
@@ -423,5 +435,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			}
 		);
 	}
+
+	onOpened() {
+		this.opened = true;
+		this.focusSearch();
+	}
+	onClosed() {
+		this.opened = false;
+	}
 }
 customElements.define(CosmozTreenodeButtonView.is, CosmozTreenodeButtonView);

package/cosmoz-treenode-navigator.js

@@ -1,8 +1,17 @@
-import { component, useEffect, useState, useMemo, useCallback } from 'haunted';
+import {
+	component,
+	useEffect,
+	useState,
+	useMemo,
+	useCallback,
+	useRef,
+} from 'haunted';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 import { guard } from 'lit-html/directives/guard.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+
 import '@neovici/cosmoz-input';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
@@ -35,6 +44,7 @@ const TreenodeNavigator = (host) => {
 			 */
 			searchMinLength,
 			nodePath,
+			opened,
 		} = host,
 		/**
 		 * The path of the opened node
@@ -72,7 +82,8 @@ const TreenodeNavigator = (host) => {
 				setHighlightedNode();
 			},
 			[tree]
-		);
+		),
+		listRef = useRef();
 
 	useEffect(() => {
 		if (!openNodePath) {
@@ -98,57 +109,87 @@ const TreenodeNavigator = (host) => {
 	const meta = useMeta({ dataPlane, highlightedNode, openNode });
 
 	useEffect(() => {
-		// eslint-disable-next-line max-lines-per-function
-		const handler = (e) => {
-			if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
-				return;
-			}
-			const { dataPlane: items, highlightedNode: node, openNode: open } = meta,
-				getIndex = () =>
-					items.findIndex((i) => i.pathLocator === node?.pathLocator);
-
-			switch (e.key) {
-				case 'Up':
-				case 'ArrowUp':
-					{
-						const idx = getIndex();
-						e.preventDefault();
-						setHighlightedNode(items[Math.max(idx - 1, 0)]);
-					}
-					break;
-				case 'Down':
-				case 'ArrowDown':
-					{
-						const idx = getIndex();
-						if (idx < items.length - 1) {
+		if (!opened) {
+			return;
+		}
+
+		const getVlist = () => {
+				const list = listRef.current,
+					vlist = list[Object.getOwnPropertySymbols(list)[0]];
+				return vlist;
+			},
+			// eslint-disable-next-line max-lines-per-function, max-statements
+			handler = (e) => {
+				if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+					return;
+				}
+				const {
+						dataPlane: items,
+						highlightedNode: node,
+						openNode: open,
+					} = meta,
+					vlist = getVlist(),
+					getIndex = () =>
+						items.findIndex((i) => i.pathLocator === node?.pathLocator);
+
+				switch (e.key) {
+					case 'Up':
+					case 'ArrowUp':
+						{
+							const idx = getIndex(),
+								nidx = Math.max(idx - 1, 0);
 							e.preventDefault();
-							setHighlightedNode(items[idx + 1]);
+							setHighlightedNode(items[nidx]);
+							if (nidx < vlist._firstVisible) {
+								vlist.scrollToIndex = { index: nidx, position: 'start' };
+							}
 						}
-					}
-					break;
-
-				case 'Enter':
-					if (node) {
-						e.preventDefault();
-						host.dispatchEvent(new CustomEvent('select-node'));
-					}
-					break;
-
-				case 'Right':
-				case 'ArrowRight':
-					if (node) {
-						e.preventDefault();
-						open(node);
-					}
-					break;
-				default:
-					break;
-			}
-		};
+						break;
+					case 'Down':
+					case 'ArrowDown':
+						{
+							const idx = getIndex();
+							if (idx < items.length - 1) {
+								const nidx = idx + 1;
+								e.preventDefault();
+								setHighlightedNode(items[nidx]);
+								if (nidx > vlist._lastVisible) {
+									vlist.scrollToIndex = { index: nidx, position: 'end' };
+								}
+							}
+						}
+						break;
+
+					case 'Enter':
+						if (node) {
+							e.preventDefault();
+							host.dispatchEvent(new CustomEvent('node-dblclicked'));
+						}
+						break;
+
+					case 'Right':
+					case 'ArrowRight':
+						if (node && tree.hasChildren(node)) {
+							e.preventDefault();
+							open(node);
+						}
+						break;
+					default:
+						break;
+				}
+			};
+
+		// autoscroll on open
+		(() => {
+			getVlist().scrollToIndex = {
+				index: meta.dataPlane?.indexOf(meta.highlightedNode),
+				position: 'center',
+			};
+		})();
 
 		document.addEventListener('keydown', handler, true);
 		return () => document.removeEventListener('keydown', handler, true);
-	}, [meta]);
+	}, [opened, meta]);
 
 	const renderItem = (node, index) => html` <div class="item">
 		${((parentPath) =>
@@ -227,9 +268,13 @@ const TreenodeNavigator = (host) => {
 		</div>
 		${when(
 			tree,
-			() => html` <div class="items">
+			() => html` <div class="items" ${ref((el) => (listRef.current = el))}>
 				<div virtualizer-sizer></div>
-				${virtualize({ items: dataPlane, renderItem, scroller: true })}
+				${virtualize({
+					items: dataPlane,
+					renderItem,
+					scroller: true,
+				})}
 			</div>`
 		)}
 		${when(

package/helpers.js

@@ -19,7 +19,6 @@ export const //
 		}
 		const node = tree.getNodeByPathLocator(pathLocator),
 			children = tree.getChildren(node),
-			level = children.length > 0 ? children : node,
 			searchProperty = tree.searchProperty,
 			sortFunc = (a, b) => {
 				// First sort based on "folder" status (containing children)
@@ -42,7 +41,7 @@ export const //
 				}
 				return 0;
 			};
-		return level.sort(sortFunc);
+		return children.length > 0 ? children.sort(sortFunc) : node;
 	},
 	/**
 	 * Returns the found nodes based on a search string and a given tree to be searched

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-treenode-navigator",
-	"version": "5.2.0",
+	"version": "5.4.0",
 	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
 		"polymer",