@neovici/cosmoz-omnitable 14.2.0 → 14.3.0

package/cosmoz-omnitable-styles.js

@@ -307,21 +307,15 @@ export default css`
 	}
 
 	/* End of empty data set styling */
-
 	.tableContent-scroller {
 		flex: auto;
 		position: relative;
 		overflow: auto;
 		overflow-x: hidden;
 		will-change: transform;
-	}
-
-	#groupedList {
-		position: absolute !important;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
+		flex-basis: 0.000001px;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.itemRow {

package/cosmoz-omnitable.js

@@ -4,7 +4,6 @@ import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
 import '@polymer/paper-spinner/paper-spinner-lite';
 
-import '@neovici/cosmoz-grouped-list';
 import '@neovici/cosmoz-bottom-bar';
 
 import './cosmoz-omnitable-column';
@@ -18,13 +17,14 @@ import styles from './cosmoz-omnitable-styles';
 import { html as polymerHtml } from '@polymer/polymer/lib/utils/html-tag';
 import { html } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 import { useOmnitable } from './lib/use-omnitable';
 import { component } from '@pionjs/pion';
 import { renderHeader } from './lib/render-header';
 import { renderFooter } from './lib/render-footer';
 import { renderList } from './lib/render-list';
-import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import './grouped-list/index.js';
 
 const shimCSS = (s) => window.ShadyCSS?.ApplyShim?.transformCssText?.(s) || s;
 

package/grouped-list/cosmoz-grouped-list-row.js

@@ -0,0 +1,41 @@
+import { render } from 'lit-html';
+
+customElements.define(
+	'cosmoz-grouped-list-row',
+	class Element extends HTMLElement {
+		get item() {
+			return this._item;
+		}
+
+		set item(item) {
+			this._item = item;
+			this._render();
+		}
+
+		get index() {
+			return this._index;
+		}
+
+		set index(index) {
+			this._index = index;
+			this._render();
+		}
+
+		get renderFn() {
+			return this._renderFn;
+		}
+
+		set renderFn(renderFn) {
+			this._renderFn = renderFn;
+			this._render();
+		}
+
+		_render() {
+			if (this._item == null || this._index == null || this._renderFn == null) {
+				return;
+			}
+
+			render(this._renderFn(this._item, this._index), this);
+		}
+	}
+);

package/grouped-list/cosmoz-grouped-list.js

@@ -0,0 +1,13 @@
+import {
+	renderCosmozGroupedList,
+	useCosmozGroupedList,
+} from './use-cosmoz-grouped-list.js';
+import { component } from '@pionjs/pion';
+
+const CosmozGroupedList = (host) =>
+	renderCosmozGroupedList(useCosmozGroupedList(host));
+
+customElements.define(
+	'cosmoz-grouped-list',
+	component(CosmozGroupedList, { useShadowDOM: false }),
+);

package/grouped-list/index.js

@@ -0,0 +1 @@
+import './cosmoz-grouped-list.js';

package/grouped-list/use-collapsible-items.js

@@ -0,0 +1,32 @@
+import { useCallback } from '@pionjs/pion';
+import { useWeakState } from './use-weak-state';
+import { isGroup } from './utils';
+
+export const useCollapsibleItems = () => {
+	const { setItemState, state, signal } = useWeakState(),
+		toggleFold = useCallback((item, folded) => {
+			if (!isGroup(item)) {
+				return;
+			}
+
+			setItemState(item, (state) => ({
+				folded: folded !== undefined ? folded : !state.folded,
+			}));
+		}, []),
+		toggleCollapse = useCallback((item, collapsed) => {
+			if (isGroup(item)) {
+				return;
+			}
+
+			setItemState(item, (state) => ({
+				expanded: collapsed !== undefined ? !collapsed : !state.expanded,
+			}));
+		}, []);
+
+	return {
+		state,
+		signal,
+		toggleFold,
+		toggleCollapse,
+	};
+};

package/grouped-list/use-cosmoz-grouped-list.js

@@ -0,0 +1,115 @@
+import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { useCallback, useLayoutEffect, useMemo } from '@pionjs/pion';
+import { html } from 'lit-html';
+import './cosmoz-grouped-list-row';
+import { useCollapsibleItems } from './use-collapsible-items';
+import { useSelectedItems } from './use-selected-items';
+import { byReference, isExpanded, isFolded, prepareData } from './utils';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+
+const styles = {
+		host: {
+			position: 'relative',
+			display: 'flex',
+			flexDirection: 'column',
+		},
+	},
+	// eslint-disable-next-line max-lines-per-function
+	useCosmozGroupedList = (host) => {
+		const {
+				data,
+				renderItem,
+				renderGroup,
+				displayEmptyGroups,
+				compareItemsFn = byReference,
+			} = host,
+			{ toggleFold, toggleCollapse, state, signal } = useCollapsibleItems(),
+			// TODO: state changes trigger recalculation, which is slow (200ms with 10k items)
+			// it only makes sense to do it when a group is folded
+			// suggested fix: separate signal for item collapse and group fold
+			flatData = useMemo(
+				() => prepareData(data, displayEmptyGroups, state),
+				[data, displayEmptyGroups, signal]
+			),
+			{
+				selectedItems,
+				isItemSelected,
+				isGroupSelected,
+				isSelected,
+				select,
+				deselect,
+				selectOnly,
+				selectAll,
+				deselectAll,
+				toggleSelect,
+				toggleSelectTo,
+			} = useSelectedItems({
+				initial: [],
+				compareItemsFn,
+				data,
+				flatData,
+			}),
+			renderRow = useCallback(
+				(item, index) =>
+					// eslint-disable-next-line no-nested-ternary
+					Array.isArray(item.items)
+						? renderGroup(item, index, {
+								selected: isGroupSelected(item, selectedItems),
+								folded: isFolded(item, state),
+								toggleSelect: (selected) =>
+									toggleSelect(
+										item,
+										typeof selected === 'boolean' ? selected : undefined
+									),
+								toggleFold: () => toggleFold(item),
+						  })
+						: renderItem(item, index, {
+								selected: selectedItems.includes(item),
+								expanded: isExpanded(item, state),
+								toggleSelect: (selected) =>
+									toggleSelect(
+										item,
+										typeof selected === 'boolean' ? selected : undefined
+									),
+								toggleCollapse: () => toggleCollapse(item),
+						  }),
+				[renderItem, renderGroup, selectedItems, toggleSelect, signal]
+			);
+
+		useLayoutEffect(() => Object.assign(host.style, styles.host), []);
+
+		useNotifyProperty('selectedItems', selectedItems);
+		const api = {
+			toggleFold,
+			toggleCollapse,
+			isItemSelected,
+			isGroupSelected,
+			isSelected,
+			select,
+			deselect,
+			selectOnly,
+			selectAll,
+			deselectAll,
+			toggleSelect,
+			toggleSelectTo,
+		};
+
+		useImperativeApi(api, Object.values(api));
+
+		return {
+			renderRow,
+			flatData,
+		};
+	},
+	renderCosmozGroupedList = ({ renderRow, flatData }) =>
+		virtualize({
+			items: flatData,
+			renderItem: (item, index) => html`<cosmoz-grouped-list-row
+				.item=${item}
+				.index=${index}
+				.renderFn=${renderRow}
+			></cosmoz-grouped-list-row>`,
+		});
+
+export { renderCosmozGroupedList, useCosmozGroupedList };

package/grouped-list/use-selected-items.js

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useState } from '@pionjs/pion';
+import { isGroup } from './utils';
+
+// eslint-disable-next-line max-lines-per-function
+export const useSelectedItems = ({
+	initial,
+	compareItemsFn,
+	data,
+	flatData
+}) => {
+	const [selectedItems, setSelectedItems] = useState(initial),
+		[lastSelection, setLastSelection] = useState(),
+		/**
+		 * Check if item is selected.
+		 * @param {object} item Item.
+		 * @returns {boolean} Whether item is selected.
+		 */
+		isItemSelected = useCallback(
+			item => selectedItems.includes(item),
+			[selectedItems]
+		),
+		/**
+		 * Check if group is selected.
+		 * @param {object} group Group.
+		 * @returns {boolean} Whether group is selected.
+		 */
+		isGroupSelected = useCallback(
+			group => group?.items?.every(isItemSelected),
+			[isItemSelected]
+		),
+		/**
+		 * Check if item.group is selected.
+		 * @param {object} item Item.
+		 * @returns {boolean} Whether item is selected.
+		 */
+		isSelected = useCallback(
+			item => isItemSelected(item) || isGroupSelected(item),
+			[isItemSelected, isGroupSelected]
+		),
+		/**
+		 * Add an item/group to the list of selected items.
+		 * @param {object} item Item to select.
+		 * @returns {void}
+		 */
+		select = useCallback(item => {
+			const items = item.items ?? [item];
+			setSelectedItems(selection => [
+				...selection,
+				...items.filter(i => !selection.includes(i))
+			]);
+			setLastSelection(item);
+		}, []),
+		/**
+		 * Removes an item/group from the list of selected items.
+		 * @param {object} item Item to select.
+		 * @returns {void}
+		 */
+		deselect = useCallback(item => {
+			const items = item.items ?? [item];
+			setSelectedItems(selection =>
+				selection.filter(i => !items.includes(i))
+			);
+			setLastSelection(item);
+		}, []),
+		selectOnly = useCallback(item => {
+			setSelectedItems(item.items?.slice() || [item]);
+			setLastSelection(item);
+		}, []),
+		/**
+		 * Select all items.
+		 * @returns {void}
+		 */
+		selectAll = useCallback(() => {
+			setSelectedItems(data.flatMap(item => item.items || item));
+			setLastSelection(undefined);
+		}, [data]),
+		/**
+		 * Deselect all selected items.
+		 * @returns {void}
+		 */
+		deselectAll = useCallback(() => {
+			setSelectedItems([]);
+			setLastSelection(undefined);
+		}, []),
+		/**
+		 * Toggles the selection of an item/group.
+		 * @param {object} item Item to select.
+		 * @param {boolean=} selected Select or deselect, fallback to toggling.
+		 * @returns {void}
+		 */
+		toggleSelect = useCallback(
+			(item, selected = !isSelected(item)) =>
+				selected ? select(item) : deselect(item),
+			[isSelected]
+		),
+		toggleSelectTo = useCallback(
+			(item, selected) => {
+				const last = lastSelection
+					? flatData.findIndex(i => compareItemsFn(i, lastSelection))
+					: -1;
+				if (last < 0) {
+					return toggleSelect(item, selected);
+				}
+				const [from, to] = [last, flatData.indexOf(item)].sort((a, b) => a - b);
+				flatData.slice(from, to + 1).forEach((item, i, items) => {
+					if (i > 0 && i < items.length - 1 && isGroup(item)) {
+						return;
+					}
+					toggleSelect(item, selected);
+				});
+				setLastSelection(item);
+			},
+			[flatData, compareItemsFn, toggleSelect]
+		);
+
+	// keep selected items across data updates
+	useEffect(
+		() =>
+			setSelectedItems(selectedItems =>
+				selectedItems.length > 0
+					? flatData.filter(i =>
+						selectedItems.find(item => compareItemsFn(i, item))
+					)
+					: selectedItems
+			),
+		[flatData]
+	);
+	return {
+		selectedItems,
+		isItemSelected,
+		isGroupSelected,
+		isSelected,
+		select,
+		deselect,
+		selectOnly,
+		selectAll,
+		deselectAll,
+		toggleSelect,
+		toggleSelectTo
+	};
+};

package/grouped-list/use-weak-state.js

@@ -0,0 +1,21 @@
+import { useCallback, useState } from '@pionjs/pion';
+import { callFn, getItemState } from './utils';
+
+export const useWeakState = () => {
+	const [wrapper, setState] = useState(() => [new WeakMap()]),
+		setItemState = useCallback(
+			(item, newItemState) =>
+				setState(([state]) => {
+					const itemState = getItemState(item, state);
+					Object.assign(itemState, callFn(newItemState, itemState));
+					return [state];
+				}),
+			[]
+		);
+
+	return {
+		setItemState,
+		state: wrapper[0],
+		signal: wrapper
+	};
+};

package/grouped-list/utils.js

@@ -0,0 +1,87 @@
+const symbols = {
+		group: Symbol('group')
+	},
+	getItemState = (item, itemsState) => {
+		if (!itemsState.has(item)) {
+			itemsState.set(item, {});
+		}
+
+		return itemsState.get(item);
+	},
+	isExpanded = (item, itemsState) => Boolean(getItemState(item, itemsState).expanded),
+	isFolded = (group, itemsState) => Boolean(getItemState(group, itemsState).folded),
+	isGroup = item => item ? item.items instanceof Array : false,
+	/**
+	 * Asserts that data is either all items or all groups, never mixed.
+	 * @param	 {Array} data the data
+	 * @return {void}
+	 */
+	_assertDataIsHomogeneous = data => {
+		if (!Array.isArray(data) || data.length === 0) {
+			return;
+		}
+
+		const firstItemIsAGroup = Array.isArray(data[0].items),
+			isHomogeneous = data.every(
+				group => Array.isArray(group.items) === firstItemIsAGroup
+			);
+
+		if (!isHomogeneous) {
+			throw new Error('Data must be homogeneous.');
+		}
+	},
+	/**
+	 * Prepare data.
+	 * @param {array} data Data.
+	 * @param {boolean} displayEmptyGroups Flag.
+	 * @param {WeakMap} itemsState State.
+	 * @returns {void|array} Prepared data.
+	 */
+	prepareData = (data, displayEmptyGroups, itemsState) => {
+		if (!Array.isArray(data)) {
+			return;
+		}
+
+		// data should be either all items or all grouped items, never mixed
+		_assertDataIsHomogeneous(data);
+
+		const flatData = data.reduce((acc, item) => {
+			// simple items
+			if (!item.items) {
+				return acc.concat(item);
+			}
+
+			// groups with items
+			if (item.items.length) {
+				if (getItemState(item, itemsState).folded) {
+					return acc.concat(item);
+				}
+				return acc.concat(
+					item,
+					item.items.map(i => Object.assign(i, { [symbols.group]: item }))
+				);
+			}
+
+			// groups without items
+			if (displayEmptyGroups) {
+				return acc.concat(item);
+			}
+
+			return acc;
+		}, []);
+
+		return flatData;
+	},
+	callFn = (fn, ...args) => typeof fn === 'function' ? fn(...args) : fn,
+	byReference = (a, b) => a === b;
+
+export {
+	symbols,
+	prepareData,
+	getItemState,
+	isExpanded,
+	isFolded,
+	isGroup,
+	callFn,
+	byReference
+};

package/lib/render-list.js

@@ -63,15 +63,16 @@ export const renderList = ({
 		<div class="tableContent-scroller" id="scroller" part="scroller">
 			<cosmoz-grouped-list
 				id="groupedList"
-				.data=${processedItems}
-				@selected-items-changed=${(event) =>
-					setSelectedItems(event.detail.value)}
-				.displayEmptyGroups=${
+				.data="${processedItems}"
+				@selected-items-changed="${(event) =>
+					setSelectedItems(event.detail.value)}"
+				.displayEmptyGroups="${
 					displayEmptyGroups /* TODO: check if still works */
-				}
-				.compareItemsFn=${compareItemsFn}
-				.renderItem=${renderItem}
-				.renderGroup=${renderGroup}
+				}"
+				.compareItemsFn="${compareItemsFn}"
+				.renderItem="${renderItem}"
+				.renderGroup="${renderGroup}"
 			></cosmoz-grouped-list>
+			<slot name="extraContent"></slot>
 		</div>`;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"
@@ -21,9 +21,9 @@
   },
   "files": [
     "cosmoz-*.js",
-    "get-effective-children-legacy-mixin.js",
     "ui-helpers",
-    "lib/**/*.js"
+    "lib/**/*.js",
+    "grouped-list/*.js"
   ],
   "scripts": {
     "lint": "eslint --cache --ext .js .",
@@ -59,12 +59,12 @@
     }
   },
   "dependencies": {
+    "@lit-labs/virtualizer": "^2.1.0",
     "@neovici/cosmoz-autocomplete": "^10.0.0",
     "@neovici/cosmoz-bottom-bar": "^9.0.3",
     "@neovici/cosmoz-collapse": "^1.1.0",
     "@neovici/cosmoz-datetime-input": "^4.0.1",
     "@neovici/cosmoz-dropdown": "^5.0.0",
-    "@neovici/cosmoz-grouped-list": "^8.0.0",
     "@neovici/cosmoz-i18next": "^3.1.1",
     "@neovici/cosmoz-input": "^5.0.0",
     "@neovici/cosmoz-router": "^11.0.0",
@@ -94,6 +94,6 @@
     "@semantic-release/git": "^10.0.0",
     "husky": "^9.0.0",
     "semantic-release": "^24.0.0",
-    "sinon": "^19.0.0"
+    "sinon": "^20.0.0"
   }
 }