@neovici/cosmoz-omnitable 8.14.3 → 9.1.0

package/lib/settings/normalize.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/group-exports */
 import { props } from '@neovici/cosmoz-utils/lib/object';
 
-export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOn'];
+export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOnDescending'];
 
 const byName = (name) => (item) => item.name === name;
 

package/lib/settings/use-saved-settings.js

@@ -13,7 +13,7 @@ const storagePrefix = 'omnitable-',
 		}
 	};
 // eslint-disable-next-line max-lines-per-function
-export default (settingsId, settings, setSettings) => {
+export default (settingsId, settings, setSettings, onReset) => {
 	const [counter, setCounter] = useState(0),
 		savedSettings = useMemo(() => read(settingsId), [settingsId, counter]);
 
@@ -40,18 +40,22 @@ export default (settingsId, settings, setSettings) => {
 			}
 		}, [settings]),
 
-		onReset: (e) => {
-			setSettings();
+		onReset: useCallback(
+			(e) => {
+				setSettings();
 
-			if (e.shiftKey) {
-				try {
-					localStorage.removeItem(storagePrefix + settingsId);
-					setCounter((counter) => counter + 1);
-				} catch (err) {
-					// ignore error
+				if (e.shiftKey) {
+					try {
+						localStorage.removeItem(storagePrefix + settingsId);
+						setCounter((counter) => counter + 1);
+					} catch (err) {
+						// ignore error
+					}
 				}
-			}
-		},
+				onReset?.();
+			},
+			[onReset]
+		),
 
 		hasChanges: settings != null,
 	};

package/lib/settings/use-settings.js

@@ -1,15 +1,24 @@
-import { useMemo, useState } from 'haunted';
+import { useMemo, useState, useRef, useCallback } from 'haunted';
 
 import useSavedSettings from './use-saved-settings';
-import normalize from './normalize';
+import normalize, { sgProps } from './normalize';
 
-export default ({ settingsId, ...thru }) => {
-	const [settings, setSettings] = useState(),
+export default ({ settingsId, initial: ini, ...thru }) => {
+	const initial = useMemo(
+			() => Object.fromEntries(sgProps.map((k) => [k, ini[k]])),
+			[]
+		),
+		resetRef = useRef(),
+		onReset = useCallback(() => {
+			resetRef.current?.(initial);
+		}, [initial]),
+		[settings, setSettings] = useState(),
 		[opened, setOpened] = useState({ columns: true, sort: true }),
 		{ savedSettings, ...rest } = useSavedSettings(
 			settingsId,
 			settings,
-			setSettings
+			setSettings,
+			onReset
 		),
 		{ columns } = thru,
 		normalizedSettings = useMemo(
@@ -17,6 +26,7 @@ export default ({ settingsId, ...thru }) => {
 				normalize({
 					settings,
 					savedSettings,
+					initial,
 					...thru,
 				}),
 			[settings, savedSettings, ...Object.values(thru)]
@@ -36,5 +46,6 @@ export default ({ settingsId, ...thru }) => {
 		settings: normalizedSettings,
 		columns: normalizedColumns,
 		setSettings,
+		resetRef,
 	};
 };

package/lib/use-dom-columns.js

@@ -120,10 +120,7 @@ const
 		useEffect(() => {
 			const
 				slot = host.shadowRoot.querySelector('#columnsSlot'),
-				handler = () => {
-					host.suppressNextScrollReset();
-					setColumns(domColumnsToConfig(host, { enabledColumns }));
-				};
+				handler = () => setColumns(domColumnsToConfig(host, { enabledColumns }));
 
 			handler();
 			slot.addEventListener('slotchange', handler);

package/lib/use-fast-layout.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo } from 'haunted';
+import { useLayoutEffect, useMemo } from 'haunted';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';
@@ -6,33 +6,33 @@ import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
 import { render } from 'lit-html';
 
-export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
-	const
-		canvasWidth = useCanvasWidth(host),
-		layout = useLayout({ canvasWidth, groupOnColumn, config: settings.columns }),
+export const useFastLayout = ({
+	host,
+	settings,
+	setSettings,
+	groupOnColumn,
+	resizeSpeedFactor,
+}) => {
+	const canvasWidth = useCanvasWidth(host),
+		layout = useLayout({
+			canvasWidth,
+			groupOnColumn,
+			config: settings.columns,
+		}),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(() => toCss(tweenedlayout, settings.columns), [tweenedlayout]);
+		layoutCss = useMemo(
+			() => toCss(tweenedlayout, settings.columns),
+			[tweenedlayout]
+		);
 
-	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
+	useResizableColumns({
+		host,
+		canvasWidth,
+		layout,
+		setSettings: (update) => setSettings(update(settings)),
+	});
 
 	useLayoutEffect(() => render(layoutCss, host.$.layoutStyle), [layoutCss]);
 
-	// force iron-list to render when the omnitable becomes visible
-	useEffect(() => {
-		let lastWidth = 0;
-
-		const
-			onResize = ([entry]) => {
-				if (lastWidth === 0) {
-					requestAnimationFrame(() => host.$.groupedList.$.list._render());
-				}
-				lastWidth = entry.contentRect?.width;
-			},
-			observer = new ResizeObserver(onResize);
-
-		observer.observe(host);
-		return () => observer.unobserve(host);
-	}, []);
-
 	return layout;
 };

package/lib/use-omnitable.js

@@ -5,20 +5,28 @@ import { useSettings } from './settings';
 import { useDOMColumns } from './use-dom-columns';
 import { useSortAndGroupOptions } from './use-sort-and-group-options';
 import { onItemChange } from './utils-data';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = (host) => {
 	const { enabledColumns, hashParam, settingsId } = host,
 		_columns = useDOMColumns(host, { enabledColumns }),
 		settingS = useSettings({ columns: _columns, settingsId, initial: host }),
-		{ settings, setSettings, columns } = settingS,
-		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, settings, setSettings),
+		{ settings, setSettings, columns, resetRef } = settingS,
+		sortAndGroupOptions = useSortAndGroupOptions(
+			columns,
+			hashParam,
+			settings,
+			setSettings,
+			resetRef
+		),
 		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
 			sortAndGroupOptions,
 		{ data, resizeSpeedFactor } = host,
 		// TODO: drop filterFunctions
 		{
 			processedItems,
+			visibleData,
 			filters,
 			setFilterState,
 			numProcessedItems,
@@ -99,6 +107,8 @@ export const useOmnitable = (host) => {
 		return () => observer.unobserve(el);
 	}, []);
 
+	useNotifyProperty('visibleData', visibleData);
+
 	return {
 		...sortAndGroupOptions,
 

package/lib/use-processed-items.js

@@ -3,10 +3,12 @@ import { genericSorter } from './generic-sorter';
 import { invoke } from './invoke';
 import { columnSymbol } from './use-dom-columns';
 import { useHashState } from './use-hash-state';
+import { indexSymbol } from './utils';
 
-const
-	sortBy = (valueFn, descending) => (a, b) => genericSorter(valueFn(a), valueFn(b)) * (descending ? -1 : 1),
-	kebab = input => input.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase(),
+const sortBy = (valueFn, descending) => (a, b) =>
+		genericSorter(valueFn(a), valueFn(b)) * (descending ? -1 : 1),
+	kebab = (input) =>
+		input.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase(),
 	notifyChanges = (column, changes) => {
 		if (!column || !changes) {
 			return;
@@ -16,55 +18,93 @@ const
 			column[columnSymbol].__ownChange = true;
 			column[columnSymbol][key] = value;
 			column[columnSymbol].__ownChange = false;
-			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, detail: { value }}));
+			column[columnSymbol].dispatchEvent(
+				new CustomEvent(`${kebab(key)}-changed`, {
+					bubbles: true,
+					detail: { value },
+				})
+			);
 		});
-	};
+	},
+	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index });
 
 // eslint-disable-next-line max-lines-per-function
-export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescending, sortOnColumn, descending, hashParam }) => {
-	const
-		write = useCallback(([filter, value]) => {
-			const column = columns.find(({ name }) => name === filter);
-			if (column == null) {
-				return [filter, undefined];
-			}
-			return [filter, value.filter && column.serializeFilter(column, value.filter)];
-		}, [columns]),
-
-		read = useCallback(([filter, value]) => {
-			const column = columns.find(({ name }) => name === filter);
-			if (column == null) {
-				return [filter, undefined];
-			}
-
-			const state = { filter: column.deserializeFilter(column, value) };
-			notifyChanges(column, state);
-			return [filter, state];
-		}, [columns]),
-
-		[filters, setFilters] = useHashState({}, hashParam, { multi: true, suffix: '-filter--', write, read }),
-		// TODO: drop extra info from state
-		setFilterState = useCallback((name, state) => setFilters(filters => {
-			const newState = invoke(state, filters[name]);
-
-			notifyChanges(columns.find(c => c.name === name), newState);
-
-			return {
-				...filters,
-				[name]: {
-					...filters[name],
-					...newState
+export const useProcessedItems = ({
+	data,
+	columns,
+	groupOnColumn,
+	groupOnDescending,
+	sortOnColumn,
+	descending,
+	hashParam,
+}) => {
+	const write = useCallback(
+			([filter, value]) => {
+				const column = columns.find(({ name }) => name === filter);
+				if (column == null) {
+					return [filter, undefined];
+				}
+				return [
+					filter,
+					value.filter && column.serializeFilter(column, value.filter),
+				];
+			},
+			[columns]
+		),
+		read = useCallback(
+			([filter, value]) => {
+				const column = columns.find(({ name }) => name === filter);
+				if (column == null) {
+					return [filter, undefined];
 				}
-			};
-		}), [columns, setFilters]),
 
-		filterValues = useMemo(() => Object.values(filters).map(f => f.filter), [filters]),
+				const state = { filter: column.deserializeFilter(column, value) };
+				notifyChanges(column, state);
+				return [filter, state];
+			},
+			[columns]
+		),
+		[filters, setFilters] = useHashState({}, hashParam, {
+			multi: true,
+			suffix: '-filter--',
+			write,
+			read,
+		}),
+		// TODO: drop extra info from state
+		setFilterState = useCallback(
+			(name, state) =>
+				setFilters((filters) => {
+					const newState = invoke(state, filters[name]);
+
+					notifyChanges(
+						columns.find((c) => c.name === name),
+						newState
+					);
+
+					return {
+						...filters,
+						[name]: {
+							...filters[name],
+							...newState,
+						},
+					};
+				}),
+			[columns, setFilters]
+		),
+		filterValues = useMemo(
+			() => Object.values(filters).map((f) => f.filter),
+			[filters]
+		),
 		filterFunctions = useMemo(() => {
-			return Object.fromEntries(columns
-				.map(col => [col.name, col.getFilterFn(col, filters[col.name]?.filter)])
-				.filter(([, fn]) => fn !== undefined));
+			return Object.fromEntries(
+				columns
+					.map((col) => [
+						col.name,
+						col.getFilterFn(col, filters[col.name]?.filter),
+					])
+					.filter(([, fn]) => fn !== undefined)
+			);
 		}, [columns, ...filterValues]),
-
 		filteredItems = useMemo(() => {
 			if (!Array.isArray(data) || data.length === 0) {
 				return [];
@@ -74,30 +114,50 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 				return data.slice();
 			}
 
-			return data.filter(item => Object.values(filterFunctions).every(filterFn => filterFn(item)));
+			return data.filter((item) =>
+				Object.values(filterFunctions).every((filterFn) => filterFn(item))
+			);
 		}, [data, filterFunctions]),
-
 		// todo: extract function
+		// eslint-disable-next-line max-lines-per-function
 		processedItems = useMemo(() => {
-			if (!groupOnColumn && sortOnColumn != null && sortOnColumn.sortOn != null) {
-				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
+			if (
+				!groupOnColumn &&
+				sortOnColumn != null &&
+				sortOnColumn.sortOn != null
+			) {
+				return filteredItems
+					.slice()
+					.sort(
+						sortBy(
+							(a) =>
+								sortOnColumn.getComparableValue(
+									{ ...sortOnColumn, valuePath: sortOnColumn.sortOn },
+									a
+								),
+							descending
+						)
+					);
 			}
 
 			if (groupOnColumn != null && groupOnColumn.groupOn != null) {
 				const groupedResults = filteredItems.reduce((acc, item) => {
-					const gval = groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, item);
+					const gval = groupOnColumn.getComparableValue(
+						{ ...groupOnColumn, valuePath: groupOnColumn.groupOn },
+						item
+					);
 
 					if (gval === undefined) {
 						return acc;
 					}
 
-					let group = acc.find(g => g.id === gval);
+					let group = acc.find((g) => g.id === gval);
 
 					if (!group) {
 						group = {
 							id: gval,
 							name: gval,
-							items: [item]
+							items: [item],
 						};
 						return [...acc, group];
 					}
@@ -106,30 +166,74 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 					return acc;
 				}, []);
 
-				groupedResults.sort(sortBy(
-					a => groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, a.items[0]), groupOnDescending));
+				groupedResults.sort(
+					sortBy(
+						(a) =>
+							groupOnColumn.getComparableValue(
+								{ ...groupOnColumn, valuePath: groupOnColumn.groupOn },
+								a.items[0]
+							),
+						groupOnDescending
+					)
+				);
 
 				if (!sortOnColumn) {
 					return groupedResults;
 				}
 
 				return groupedResults
-					.filter(group => Array.isArray(group.items))
-					.map(group => {
-						group.items.sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
+					.filter((group) => Array.isArray(group.items))
+					.map((group) => {
+						group.items.sort(
+							sortBy(
+								(a) =>
+									sortOnColumn.getComparableValue(
+										{ ...sortOnColumn, valuePath: sortOnColumn.sortOn },
+										a
+									),
+								descending
+							)
+						);
 						return group;
 					});
 			}
 
 			return filteredItems;
-		}, [filteredItems, groupOnColumn, groupOnDescending, sortOnColumn, descending]);
+		}, [
+			filteredItems,
+			groupOnColumn,
+			groupOnDescending,
+			sortOnColumn,
+			descending,
+		]),
+		visibleData = useMemo(() => {
+			let index = 0,
+				groupIndex = 0;
+			const result = [];
+			processedItems.forEach((item) => {
+				
+				if(Array.isArray(item.items)) {
+					assignIndex(item, groupIndex++);
+					item.items.forEach(groupItem => {
+						assignIndex(groupItem, index++);
+						result.push(groupItem);						
+					})
+					return;
+				}
+
+				assignIndex(item, index++);
+				return result.push(item);
+			}, []);
+			return result;
+		}, [processedItems]);
 
 	return {
 		processedItems,
+		visibleData,
 		filters,
 		filterFunctions,
 		setFilterState,
 		numProcessedItems: filteredItems.length,
-		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0
+		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0,
 	};
 };

package/lib/use-sort-and-group-options.js

@@ -4,6 +4,7 @@ import {
 	component,
 	useContext,
 	useCallback,
+	useEffect,
 } from 'haunted';
 import { useHashState } from './use-hash-state';
 
@@ -23,7 +24,8 @@ export const useSortAndGroupOptions = (
 		columns,
 		hashParam,
 		settings,
-		setSettings
+		setSettings,
+		resetRef
 	) => {
 		const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
 				suffix: '-sortOn',
@@ -73,7 +75,16 @@ export const useSortAndGroupOptions = (
 
 				columns,
 			},
-			sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_));
+			sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_)),
+			setSG = useCallback((c) => {
+				setSortOn(c.sortOn);
+				setGroupOn(c.groupOn);
+				setDescending(c.descending);
+				setGroupOnDescending(c.groupOnDescending);
+			}, []);
+
+		// eslint-disable-next-line no-void
+		useEffect(() => void (resetRef.current = setSG), []);
 
 		return {
 			...sortAndGroup,
@@ -84,7 +95,6 @@ export const useSortAndGroupOptions = (
 	},
 	SortAndGroupContext = createContext();
 
-
 customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
 customElements.define(
 	'sort-and-group-consumer',

package/lib/use-tween-array.js

@@ -1,47 +1,49 @@
-import { useEffect, useRef, useState } from 'haunted';
+import { useCallback, useEffect, useRef, useState } from 'haunted';
 
-export const
-	isCloseEnough = (a = 0, b = 0) => Math.abs(a - b) < 0.1,
+export const isCloseEnough = (a = 0, b = 0) => Math.abs(a - b) < 0.1,
+	// eslint-disable-next-line max-lines-per-function
 	useTweenArray = (target, speedFactor = 1.9) => {
-		const
-			requestRef = useRef(),
-			targetRef = useRef(target),
-			runningRef = useRef(false),
+		const state = useRef({
+				request: undefined,
+				target,
+				running: false,
+			}),
 			[tween, setTween] = useState(target),
+			animate = useCallback(() => {
+				state.current.request = requestAnimationFrame(animate);
 
-			animate = () => {
-				requestRef.current = requestAnimationFrame(animate);
-
-				if (!runningRef.current) {
+				if (!state.current.running) {
 					return;
 				}
 
-				setTween(tween => {
-					const target = targetRef.current;
+				setTween((tween) => {
+					const target = state.current.target;
 
 					if (target.every((t, idx) => tween[idx] === t)) {
-						runningRef.current = false;
+						state.current.running = false;
 						return tween;
 					}
 
 					return target.map((t, idx) =>
 						isCloseEnough(tween[idx], t)
 							? t
-							: (tween[idx] ?? 0) + ((t ?? 0) - (tween[idx] ?? 0)) / speedFactor || 0);
+							: (tween[idx] ?? 0) +
+									((t ?? 0) - (tween[idx] ?? 0)) / speedFactor || 0
+					);
 				});
-			};
+			}, []);
 
 		useEffect(() => {
-			requestRef.current = requestAnimationFrame(animate);
-			return () => cancelAnimationFrame(requestRef.current);
+			state.current.request = requestAnimationFrame(animate);
+			return () => cancelAnimationFrame(state.current.request);
 		}, []);
 
 		useEffect(() => {
-			if (targetRef.current.length === 0 && target.length > 0) {
+			if (state.current.target.length === 0 && target.length > 0) {
 				setTween(target);
 			}
-			targetRef.current = target;
-			runningRef.current = true;
+			state.current.target = target;
+			state.current.running = true;
 		}, [target]);
 
 		return tween;

package/lib/utils.js

@@ -0,0 +1,10 @@
+const notifyResize = (target, index) =>
+	target.dispatchEvent(
+		new CustomEvent('update-item-size', {
+			bubbles: true,
+			detail: { index },
+		})
+	),
+	indexSymbol = Symbol('index');
+
+export { notifyResize, indexSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.14.3",
+	"version": "9.1.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -57,7 +57,7 @@
 		"@neovici/cosmoz-collapse": "^1.1.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
 		"@neovici/cosmoz-dropdown": "^1.5.0",
-		"@neovici/cosmoz-grouped-list": "^3.2.0",
+		"@neovici/cosmoz-grouped-list": "^4.0.7",
 		"@neovici/cosmoz-i18next": "^3.1.1",
 		"@neovici/cosmoz-page-router": "^7.0.0 || ^8.0.0",
 		"@neovici/cosmoz-utils": "^3.19.0",