@neovici/cosmoz-omnitable 12.0.1 → 12.1.0

package/lib/use-omnitable.js

@@ -1,17 +1,17 @@
-import { useCallback, useMemo, useEffect } from 'haunted';
+import { useState } from 'haunted';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
 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/hooks/use-notify-property';
+import { usePublicInterface } from './use-public-interface';
+import { useHeader } from './use-header';
+import { useList } from './use-list';
+import { useFooter } from './use-footer';
 
 // 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 }),
+	const { hashParam, settingsId, data, resizeSpeedFactor } = host,
+		settingS = useSettings({ settingsId, host }),
 		{ settings, setSettings, columns, resetRef } = settingS,
 		sortAndGroupOptions = useSortAndGroupOptions(
 			columns,
@@ -20,111 +20,69 @@ export const useOmnitable = (host) => {
 			setSettings,
 			resetRef
 		),
-		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
-			sortAndGroupOptions,
-		{ data, resizeSpeedFactor } = host,
 		// TODO: drop filterFunctions
 		{
 			processedItems,
 			visibleData,
 			filters,
 			setFilterState,
-			numProcessedItems,
 			filterFunctions,
-			groupsCount,
 		} = useProcessedItems({
 			data,
 			columns,
-			groupOnColumn,
-			groupOnDescending,
-			sortOnColumn,
-			descending,
 			hashParam,
+			sortAndGroupOptions,
 		}),
-		layout = useFastLayout({
+		{ collapsedColumns } = useFastLayout({
 			host,
+			columns,
 			settings,
 			setSettings,
-			groupOnColumn,
 			resizeSpeedFactor,
+			sortAndGroupOptions,
 		}),
-		collapsedColumns = useMemo(
-			() =>
-				settings.columns.reduce(
-					(acc, column, index) =>
-						layout[index] != null ||
-						column.name === groupOnColumn?.name ||
-						column.disabled
-							? acc
-							: [...acc, columns.find((c) => c.name === column.name)],
-					[]
-				),
-			[columns, settings, layout]
-		),
-		hasHiddenFilter = useMemo(
-			() =>
-				[
-					groupOnColumn,
-					...collapsedColumns,
-					...settings.columns.filter((s) => s.disabled),
-				].some(
-					(column) =>
-						column && Object.keys(filterFunctions).includes(column.name)
-				),
-			[filterFunctions, settings, collapsedColumns]
-		),
-		settingsConfig = useMemo(
-			() => ({
-				...settingS,
-				collapsed: collapsedColumns,
-				badge: hasHiddenFilter,
-				filters,
-			}),
-			[settingS, collapsedColumns, hasHiddenFilter, filters]
-		);
-
-	useEffect(() => {
-		const handler = (ev) =>
-			setFilterState(ev.detail.name, (state) => ({
-				...state,
-				...ev.detail.state,
-			}));
-		host.addEventListener('legacy-filter-changed', handler);
-		return () => host.removeEventListener('legacy-filter-changed', handler);
-	}, []);
-
-	useEffect(() => {
-		const el = host.shadowRoot.querySelector('#tableContent'),
-			observer = new ResizeObserver((entries) =>
-				requestAnimationFrame(() => {
-					host.style.setProperty(
-						'--ot-height',
-						entries[0]?.contentRect.height + 'px'
-					);
-				})
-			);
-		observer.observe(el);
-		return () => observer.unobserve(el);
-	}, []);
-
-	useNotifyProperty('visibleData', visibleData);
-
-	return {
-		...sortAndGroupOptions,
+		dataIsValid = data && Array.isArray(data) && data.length > 0,
+		[selectedItems, setSelectedItems] = useState([]);
 
+	usePublicInterface({
+		host,
+		visibleData,
+		sortedFilteredGroupedItems: processedItems,
 		columns,
-		collapsedColumns,
-
-		settingsConfig,
-
 		filters,
 		setFilterState,
-		onItemChange: useCallback(
-			(column, item) => (value) => onItemChange(host, column, item, value),
-			[]
-		),
-		numProcessedItems,
-		groupsCount,
-		sortedFilteredGroupedItems: processedItems,
+		selectedItems,
+		...sortAndGroupOptions,
+	});
+
+	return {
+		header: useHeader({
+			host,
+			selectedItems,
+			sortAndGroupOptions,
+			dataIsValid,
+			data,
+			columns,
+			filters,
+			collapsedColumns,
+			settings,
+			filterFunctions,
+			settingS,
+			setFilterState,
+		}),
+		list: useList({
+			host,
+			dataIsValid,
+			processedItems,
+			setSelectedItems,
+			columns,
+			collapsedColumns,
+			sortAndGroupOptions,
+		}),
+		footer: useFooter({
+			host,
+			selectedItems,
+			columns,
+		}),
 	};
 };

package/lib/use-processed-items.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'haunted';
+import { useCallback, useEffect, useMemo } from 'haunted';
 import { genericSorter } from './generic-sorter';
 import { invoke } from './invoke';
 import { columnSymbol } from './use-dom-columns';
@@ -26,19 +26,19 @@ const sortBy = (valueFn, descending) => (a, b) =>
 			);
 		});
 	},
-	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index });
+	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index }),
+	unparsed = Symbol('unparsed');
 
 // eslint-disable-next-line max-lines-per-function
 export const useProcessedItems = ({
 	data,
 	columns,
-	groupOnColumn,
-	groupOnDescending,
-	sortOnColumn,
-	descending,
 	hashParam,
+	sortAndGroupOptions,
 }) => {
-	const write = useCallback(
+	const { groupOnColumn, groupOnDescending, sortOnColumn, descending } =
+			sortAndGroupOptions,
+		write = useCallback(
 			([filter, value]) => {
 				const column = columns.find(({ name }) => name === filter);
 				if (column == null) {
@@ -55,7 +55,7 @@ export const useProcessedItems = ({
 			([filter, value]) => {
 				const column = columns.find(({ name }) => name === filter);
 				if (column == null) {
-					return [filter, undefined];
+					return [filter, { [unparsed]: value }];
 				}
 
 				const state = { filter: column.deserializeFilter(column, value) };
@@ -211,13 +211,12 @@ export const useProcessedItems = ({
 				groupIndex = 0;
 			const result = [];
 			processedItems.forEach((item) => {
-				
-				if(Array.isArray(item.items)) {
+				if (Array.isArray(item.items)) {
 					assignIndex(item, groupIndex++);
-					item.items.forEach(groupItem => {
+					item.items.forEach((groupItem) => {
 						assignIndex(groupItem, index++);
-						result.push(groupItem);						
-					})
+						result.push(groupItem);
+					});
 					return;
 				}
 
@@ -227,13 +226,35 @@ export const useProcessedItems = ({
 			return result;
 		}, [processedItems]);
 
+	// parse un-parsed filter values
+	// filters can be left un-parsed if a column was not defined when the URL is read
+	useEffect(() => {
+		setFilters((filters) => {
+			const hasUnparsedFilters = Object.values(filters).some(
+				(value) => value[unparsed] != null
+			);
+
+			if (!hasUnparsedFilters) {
+				return filters;
+			}
+
+			return Object.fromEntries(
+				Object.entries(filters).map(([name, value]) => {
+					if (value[unparsed] == null) {
+						return [name, value];
+					}
+
+					return read([name, value[unparsed]]);
+				})
+			);
+		});
+	}, [read]);
+
 	return {
 		processedItems,
 		visibleData,
 		filters,
 		filterFunctions,
-		setFilterState,
-		numProcessedItems: filteredItems.length,
-		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0,
+		setFilterState
 	};
 };

package/lib/use-public-interface.js

@@ -0,0 +1,96 @@
+/* eslint-disable max-lines-per-function */
+import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { useEffect } from 'haunted';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+
+export const usePublicInterface = ({ host, visibleData, ...api }) => {
+	useImperativeApi(api, Object.values(api));
+
+	const removeItems = (items) => {
+			const removedItems = [];
+
+			for (let i = items.length - 1; i >= 0; i -= 1) {
+				const removed = host.removeItem(items[i]);
+				if (removed != null) {
+					removedItems.push(removed);
+				}
+			}
+			return removedItems;
+		},
+		/**
+		 * Helper method to remove an item from `data`.
+		 * @param	 {Object} item Item to remove
+		 * @return {Object} item removed
+		 */
+		removeItem = (item) => {
+			const index = host.data.indexOf(item);
+
+			if (index < 0) {
+				return null;
+			}
+
+			const removed = host.data.splice(index, 1);
+			host.data = host.data.slice();
+			if (Array.isArray(removed) && removed.length > 0) {
+				return removed[0];
+			}
+		},
+		replaceItem = (oldItem, newItem) => {
+			const itemIndex = host.data.indexOf(oldItem);
+			if (itemIndex > -1) {
+				return host.replaceItemAtIndex(itemIndex, newItem);
+			}
+		},
+		replaceItemAtIndex = (index, newItem) => {
+			host.data.splice(index, 1, newItem);
+			host.data = host.data.slice();
+		},
+		selectItem = (item) => {
+			host.shadowRoot.querySelector('#groupedList').select(item);
+		},
+		deselectItem = (item) => {
+			host.shadowRoot.querySelector('#groupedList').deselect(item);
+		},
+		isItemSelected = (item) => {
+			return host.shadowRoot.querySelector('#groupedList').isItemSelected(item);
+		},
+		{ setFilterState } = api;
+
+	useEffect(() => {
+		const handler = (ev) =>
+			setFilterState(ev.detail.name, (state) => ({
+				...state,
+				...ev.detail.state,
+			}));
+		host.addEventListener('legacy-filter-changed', handler);
+		return () => host.removeEventListener('legacy-filter-changed', handler);
+	}, []);
+
+	useNotifyProperty('visibleData', visibleData);
+	useNotifyProperty(
+		'sortedFilteredGroupedItems',
+		api.sortedFilteredGroupedItems
+	);
+	useNotifyProperty('selectedItems', api.selectedItems);
+
+	useImperativeApi(
+		{
+			removeItems,
+			removeItem,
+			replaceItem,
+			replaceItemAtIndex,
+			selectItem,
+			deselectItem,
+			isItemSelected,
+		},
+		[
+			removeItems,
+			removeItem,
+			replaceItem,
+			replaceItemAtIndex,
+			selectItem,
+			deselectItem,
+			isItemSelected,
+		]
+	);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "12.0.1",
+	"version": "12.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"
@@ -84,7 +84,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",
 		"@commitlint/config-conventional": "^17.0.0",
-		"@neovici/cfg": "^1.13.0",
+		"@neovici/cfg": "^1.18.0",
 		"@neovici/cosmoz-viewinfo": "^3.1.0",
 		"@open-wc/testing": "^3.0.0",
 		"@polymer/iron-test-helpers": "^3.0.0",