@neovici/cosmoz-treenode-navigator 6.0.1 → 7.0.0

package/cosmoz-treenode-navigator.js

@@ -1,297 +0,0 @@
-import {
-	component,
-	useEffect,
-	useState,
-	useMemo,
-	useCallback,
-	useRef,
-} from '@pionjs/pion';
-import { html, nothing } 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';
-
-import {
-	getParentPath,
-	computeDataPlane,
-	computeRowClass,
-	onNodeDblClicked,
-} from './helpers';
-import styles from './cosmoz-treenode-navigator.styles';
-
-const TreenodeNavigator = (host) => {
-	const {
-			/**
-			 * The main node structure
-			 */
-			tree,
-			/**
-			 * Placeholder for search field.
-			 */
-			searchPlaceholder,
-			/**
-			 * Text displayed when local search has finished
-			 * to suggest a search on the entire tree
-			 */
-			searchGlobalPlaceholder,
-			/**
-			 * Minimum length of searchValue to trigger a search
-			 */
-			searchMinLength,
-			nodePath,
-			opened,
-		} = host,
-		/**
-		 * The path of the opened node
-		 */
-		[openNodePath, setOpenNodePath] = useState(''),
-		/**
-		 * The highlighted (focused) node
-		 * This is the node which is currently selected in the list
-		 */
-		[highlightedNode, setHighlightedNode] = useState(),
-		/**
-		 * The search string
-		 */
-		[searchValue, setSearchValue] = useState(''),
-		search = useMemo(
-			() => (searchValue?.length > searchMinLength && searchValue) || undefined,
-			[searchValue, searchMinLength],
-		),
-		/**
-		 * The currently displayed node list
-		 */
-		dataPlane = useMemo(
-			() => computeDataPlane(tree, search, openNodePath),
-			[tree, search, openNodePath],
-		),
-		/**
-		 * Opens a node (renderLevel) based on a given path
-		 * @param {object} clickedNode - The clicked node
-		 * @return {undefined}
-		 */
-		openNode = useCallback(
-			(clickedNode) => {
-				setOpenNodePath(clickedNode?.pathLocator || '');
-				setSearchValue('');
-				setHighlightedNode();
-			},
-			[tree],
-		),
-		listRef = useRef();
-
-	useEffect(() => {
-		if (!openNodePath) {
-			notifyProperty(host, 'highlightedNodePath', '');
-			notifyProperty(host, 'nodesOnNodePath', []);
-		}
-	}, [openNodePath]);
-
-	useEffect(() => {
-		if (nodePath !== undefined) {
-			host.dispatchEvent(new CustomEvent('select-node'));
-		}
-	}, [nodePath]);
-
-	useEffect(() => {
-		notifyProperty(
-			host,
-			'highlightedNodePath',
-			highlightedNode?.pathLocator || '',
-		);
-	}, [highlightedNode]);
-
-	const meta = useMeta({ dataPlane, highlightedNode, openNode });
-
-	useEffect(() => {
-		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[nidx]);
-							if (nidx < vlist._firstVisible) {
-								vlist.scrollToIndex = { index: nidx, position: 'start' };
-							}
-						}
-						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);
-	}, [opened, meta]);
-
-	const renderItem = (node, index) =>
-		node
-			? html` <div class="item">
-					${((parentPath) =>
-						when(
-							search &&
-								(index === 0 ||
-									parentPath !== getParentPath(tree, dataPlane[index - 1])),
-							() => html`
-								<div class="section">
-									${tree.getPathString(parentPath, tree.searchProperty)}
-								</div>
-							`,
-						))(getParentPath(tree, node))}
-					<div
-						class=${computeRowClass('node', node, highlightedNode)}
-						@click=${() => setHighlightedNode(node)}
-						@dblclick=${(e) => onNodeDblClicked(e, host)}
-					>
-						<div class="name">${node[tree.searchProperty]}</div>
-						${when(
-							tree.hasChildren(node),
-							() => html`
-								<span class="icon" @click=${() => openNode(node)}>
-									<svg
-										viewBox="0 0 24 24"
-										preserveAspectRatio="xMidYMid meet"
-										focusable="false"
-										style="pointer-events: none; display: block; width: 100%; height: 100%;"
-									>
-										<g>
-											<path
-												d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-											></path>
-										</g>
-									</svg>
-								</span>
-							`,
-						)}
-					</div>
-				</div>`
-			: nothing;
-
-	return html`
-		<style>
-			${styles}
-		</style>
-		<div class="header">
-			<h3 class="path">
-				<span class="icon" @click=${() => openNode()}>
-					<svg
-						viewBox="0 0 24 24"
-						preserveAspectRatio="xMidYMid meet"
-						focusable="false"
-						style="pointer-events: none; display: block; width: 100%; height: 100%;"
-					>
-						<g><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
-					</svg>
-				</span>
-				${guard([tree, openNodePath], () =>
-					((openNodePath && tree?.getPathNodes(openNodePath)) || []).map(
-						(node) => html`
-							<span class="slash">/</span>
-							<span class="pointer" tabindex="0" @click=${() => openNode(node)}
-								>${node[tree.searchProperty]}</span
-							>
-						`,
-					),
-				)}
-			</h3>
-			<cosmoz-input
-				tabindex="0"
-				.value=${searchValue}
-				.placeholder=${searchPlaceholder}
-				@input=${(e) => setSearchValue(e.target.value)}
-			/>
-		</div>
-		${when(
-			tree,
-			() =>
-				html` <div class="items" ${ref((el) => (listRef.current = el))}>
-					<div virtualizer-sizer></div>
-					${virtualize({
-						items: dataPlane,
-						renderItem,
-						scroller: true,
-					})}
-				</div>`,
-		)}
-		${when(
-			search && openNodePath,
-			() => html`
-				<button class="btn-ghost" @click=${() => setOpenNodePath('')}>
-					${searchGlobalPlaceholder}
-				</button>
-			`,
-		)}
-	`;
-};
-
-customElements.define(
-	'cosmoz-treenode-navigator',
-	component(TreenodeNavigator),
-);

package/helpers.js

@@ -1,124 +0,0 @@
-export const //
-	getParentPath = (tree, node) => {
-		const path = node.pathLocator || node.path,
-			pathLocatorSeparator = tree.pathLocatorSeparator;
-		return path.includes(pathLocatorSeparator)
-			? path.substring(0, path.lastIndexOf(pathLocatorSeparator))
-			: path;
-	},
-	/**
-	 * Returns a node array with the children of a node on the given path
-	 * If the node doesn't have children, the node gets returned
-	 * @param {Tree} tree - The main tree
-	 * @param {String} pathLocator - The separated address parts of a node
-	 * @return {Array} - Nodes
-	 */
-	renderLevel = (tree, pathLocator) => {
-		if (!tree) {
-			return;
-		}
-		const node = tree.getNodeByPathLocator(pathLocator),
-			children = tree.getChildren(node),
-			searchProperty = tree.searchProperty,
-			sortFunc = (a, b) => {
-				// First sort based on "folder" status (containing children)
-				if (tree.hasChildren(a)) {
-					if (!tree.hasChildren(b)) {
-						return -1;
-					}
-				} else if (tree.hasChildren(b)) {
-					return 1;
-				}
-				// Then sort on searchProperty
-				const val1 = a[searchProperty],
-					val2 = b[searchProperty];
-
-				if (val1 > val2) {
-					return 1;
-				}
-				if (val1 < val2) {
-					return -1;
-				}
-				return 0;
-			};
-		return children.length > 0 ? children.sort(sortFunc) : node;
-	},
-	/**
-	 * Returns the found nodes based on a search string and a given tree to be searched
-	 * @param {Tree} tree - The main tree
-	 * @param {String|undefined} search - The search string
-	 * @param {String} pathLocator - The separated address parts of a node
-	 * @return {Array} - The found nodes
-	 */
-	computeDataPlane = (tree, search, pathLocator) => {
-		if (!tree) {
-			return [];
-		}
-		const nodes = renderLevel(tree, pathLocator);
-		return search ? tree.searchNodes(search, nodes, false) : nodes;
-	},
-	/**
-	 * Returns the classes of a row based its selection state
-	 * @param {String} classes - The default classes
-	 * @param {object} node - Node to check
-	 * @param {object} highlightedNode - Currently highlighted node
-	 * @return {String} - The CSS classes
-	 */
-	computeRowClass = (classes, node, highlightedNode) => {
-		let selected = false;
-		if (highlightedNode) {
-			selected =
-				node === highlightedNode ||
-				(node.id && node.id === highlightedNode.id) ||
-				node.pathLocator === highlightedNode.pathLocator;
-		}
-		return selected ? classes + ' selected' : classes;
-	},
-	/**
-	 * Selects the doubled clicked node and dispatches an node-dblclicked event.
-	 * @param {Event} event The triggering event
-	 * @param {object} host Host
-	 * @return {undefined}
-	 */
-	onNodeDblClicked = (event, host) => {
-		host.dispatchEvent(
-			new CustomEvent('node-dblclicked', {
-				detail: {
-					model: event.model,
-				},
-			})
-		);
-	},
-	/**
-	 * Returns the nodes on a path specified by a given path locator
-	 * @param {String} pathLocator - The separated address parts of a node
-	 * @param {Tree} tree - The main tree
-	 * @return {Array} - The found nodes or empty array
-	 */
-	getTreePathParts = (pathLocator, tree) => {
-		if (!tree || !pathLocator) {
-			return [];
-		}
-		return tree.getPathNodes(pathLocator);
-	},
-	/**
-	 * Returns a node based on a given path locator.
-	 * If pathLocator is empty or not defined, null gets returned.
-	 * If pathLocator is only partly valid, the last valid node gets returned.
-	 * @param {String} pathLocator - The separated address parts of a node
-	 * @param {Tree} tree - The main tree
-	 * @return {Object} - The found node
-	 */
-	getNode = (pathLocator, tree) => {
-		if (!tree || !pathLocator) {
-			return null;
-		}
-
-		const node = tree.getNodeByPathLocator(pathLocator);
-		let nodes;
-
-		if (!node) {
-			nodes = tree.getPathNodes(pathLocator).filter((n) => n != null);
-		}
-		return nodes && nodes.length > 0 ? nodes.pop() : node;
-	};

package/test/cosmoz-treenode-button-view.test.js

@@ -1,52 +0,0 @@
-import { assert, fixture, html } from '@open-wc/testing';
-import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-import rtlData from './data/rtlTest.js';
-import '../cosmoz-treenode-button-view';
-
-suite('rtl', () => {
-	let treeButton;
-
-	suiteSetup(async () => {
-		treeButton = await fixture(html`<cosmoz-treenode-button-view .tree=${ new DefaultTree(rtlData) }>`);
-	});
-
-	test('button renders selected path', done => {
-		treeButton.nodePath = '1.2.3';
-
-		// Button view label depends on a binding in a cosmoz-treenode-navigator
-		// stamped asynchronously, so we need to wait a bit.
-		setTimeout(() => {
-			const buttonLabel = treeButton.shadowRoot.querySelector('.pathToNode').textContent;
-			assert.isTrue(buttonLabel.endsWith('1 / 2 / 3'));
-			done();
-		}, 500);
-	});
-
-	/*
-			// commented out because test is unstable
-			function isIdActiveElement(id, element, idPreviouslyFound) {
-				let idFound = idPreviouslyFound || element && element.id === id;
-
-				if (element != null && element.shadowRoot != null) {
-					return isIdActiveElement(id, element.shadowRoot.activeElement, idFound);
-				}
-
-				// active element not null means that it has focus
-				return element != null && idFound;
-			}
-
-			test('search input has focus when dialog has opened', done => {
-				treeButton.$$('.pathToNode').click();
-				Polymer.Base.async(() => {
-					// real focus can only be tested here, not valid outside test()
-					if (window.document.hasFocus()) {
-						assert.equal(isIdActiveElement('searchInput', window.document.activeElement), true);
-					}
-					if (treeButton.$.dialogTree != null) {
-						treeButton.$.dialogTree.close();
-					}
-					done();
-				}, 50);
-			});
-		*/
-});

package/test/cosmoz-treenode-navigator.test.js

@@ -1,102 +0,0 @@
-import { assert, fixture, html } from '@open-wc/testing';
-import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-import basicTree from './data/basicTree.js';
-import '../cosmoz-treenode-navigator';
-import { computeDataPlane } from '../helpers';
-
-suite('cosmoz-treenode-navigator', () => {
-	let navigator;
-
-	setup(async () => {
-		navigator = await fixture(html` <cosmoz-treenode-navigator
-			.tree=${new DefaultTree(basicTree)}
-			.searchPlaceholder="${'Custom search placeholder'}"
-			.searchMinLength="${2}"
-		></cosmoz-treenode-navigator>`);
-	});
-
-	test('instantiating the element', () => {
-		assert.equal(navigator.tagName, 'COSMOZ-TREENODE-NAVIGATOR');
-	});
-
-	test('tree length and sort', () => {
-		// given a node navigator with some data
-
-		// when I enter the first node
-		navigator.openNodePath = '1000';
-
-		const dataPlane = computeDataPlane(
-			navigator.tree,
-			navigator.searchValue,
-			navigator.openNodePath
-		);
-		// then I can see the contents of the node
-		// and it is ordered folder-first, then alphabetically
-		assert.equal(dataPlane[0].name, 'Data');
-		assert.equal(dataPlane[1].name, 'Backup');
-		assert.equal(dataPlane.length, 2);
-	});
-
-	test('set proper search placeholder', () => {
-		assert.equal(
-			navigator.shadowRoot
-				.querySelector('cosmoz-input')
-				.shadowRoot.querySelector('input').placeholder,
-			'Custom search placeholder'
-		);
-	});
-
-	test('should check if node has children', () => {
-		const node = {
-			name: 'D:',
-			path: '1000',
-			children: {
-				1001: {
-					name: 'Data',
-					pathLocator: '1000.1001',
-					children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' } },
-				},
-			},
-			parentSectionName: 'D:',
-			pathLocator: '1000',
-		};
-		assert.equal(navigator.tree.hasChildren(node), true);
-		const node2 = {
-			name: 'Git',
-			path: '1.5.7',
-			parentSectionName: 'C:/Program Files',
-			pathLocator: '1.5.7',
-		};
-		assert.equal(navigator.tree.hasChildren(node2), false);
-	});
-
-	test('match search string', () => {
-		// given a node navigator with some data
-		// when I search for 'John'
-		navigator.searchValue = 'John';
-
-		const dataPlane = computeDataPlane(
-			navigator.tree,
-			navigator.searchValue,
-			'1000'
-		);
-
-		//then I can see only 1 item matching 'John'
-		assert.lengthOf(dataPlane, 1);
-		assert.equal(dataPlane[0].name, 'John');
-	});
-
-	test('not match search string', () => {
-		// given a node navigator with some data
-		// when I search for 'NONEXISTING'
-		navigator.searchValue = 'NONEXISTING';
-		const dataPlane = computeDataPlane(
-			navigator.tree,
-			navigator.searchValue,
-			'1000'
-		);
-
-		//then I can see that is no contents
-		assert.lengthOf(dataPlane, 0);
-	});
-});