@neovici/cosmoz-omnitable 14.14.3 → 14.15.0

package/lib/use-list.js

@@ -1,263 +0,0 @@
-import { html, useCallback, useEffect, useMemo, useRef } from '@pionjs/pion';
-import { when } from 'lit-html/directives/when.js';
-import { isEmpty } from '@neovici/cosmoz-utils/template';
-import { indexSymbol } from './utils';
-import { onItemChange as _onItemChange } from './utils-data';
-
-const arrow = html`
-	<svg
-		viewBox="0 0 24 24"
-		preserveAspectRatio="xMidYMid meet"
-		focusable="false"
-	>
-		<g>
-			<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
-		</g>
-	</svg>
-`;
-
-const _getGroupRowClasses = (folded) =>
-	folded ? 'groupRow groupRow-folded' : 'groupRow';
-
-const renderMinis =
-	({ item, index }) =>
-	(columns) =>
-		when(
-			columns?.length > 0,
-			() => html`
-				<div class="itemRow-minis" part="item-minis">
-					${columns.map(
-						(column) =>
-							html`<div
-								class="itemRow-mini"
-								part="item-mini item-mini-${column.name}"
-							>
-								${(column.renderMini ?? column.renderCell)(column, {
-									item,
-									index,
-								})}
-							</div>`,
-					)}
-				</div>
-			`,
-		);
-
-const renderItem =
-	({
-		columns,
-		collapsedColumns,
-		miniColumns,
-		onItemClick,
-		onCheckboxChange,
-		dataIsValid,
-		groupOnColumn,
-		onItemChange,
-		rowPartFn,
-	}) =>
-	(item, index, { selected, expanded, toggleCollapse }) => html`
-		<div
-			?selected=${selected}
-			part="${[
-				'itemRow',
-				`itemRow-${item[indexSymbol]}`,
-				rowPartFn?.(item, index),
-			]
-				.filter(Boolean)
-				.join(' ')}"
-			.dataIndex=${item[indexSymbol]}
-			.dataItem=${item}
-			class="itemRow"
-			@click=${onItemClick}
-		>
-			<div class="itemRow-wrapper" part="itemRow-wrapper">
-				<input
-					class="checkbox"
-					type="checkbox"
-					part="checkbox"
-					.checked=${selected}
-					.dataItem=${item}
-					@input=${onCheckboxChange}
-					?disabled=${!dataIsValid}
-				/>
-				<cosmoz-omnitable-item-row
-					part="itemRow-inner"
-					.columns=${columns}
-					.index=${index}
-					.selected=${selected}
-					.expanded=${expanded}
-					.item=${item}
-					.groupOnColumn=${groupOnColumn}
-					.onItemChange=${onItemChange}
-				>
-				</cosmoz-omnitable-item-row>
-				<button
-					class="expand"
-					?hidden="${isEmpty(collapsedColumns.length)}"
-					?aria-expanded="${expanded}"
-					@click="${toggleCollapse}"
-				>
-					${arrow}
-				</button>
-			</div>
-			${renderMinis({ item, index })(miniColumns)}
-		</div>
-		<cosmoz-omnitable-item-expand
-			.columns=${collapsedColumns}
-			.item=${item}
-			.index=${index}
-			?selected=${selected}
-			?expanded=${expanded}
-			.groupOnColumn=${groupOnColumn}
-			part="item-expand"
-		>
-		</cosmoz-omnitable-item-expand>
-	`;
-
-const renderGroup =
-	({ onCheckboxChange, dataIsValid, groupOnColumn }) =>
-	(item, index, { selected, folded, toggleFold }) =>
-		html` <div
-			class="${_getGroupRowClasses(folded)}"
-			part="groupRow groupRow-${item[indexSymbol]}"
-		>
-			<input
-				class="checkbox"
-				type="checkbox"
-				.checked=${selected}
-				.dataItem=${item}
-				@input=${onCheckboxChange}
-				?disabled=${!dataIsValid}
-			/>
-			<h3 class="groupRow-label">
-				<div><span>${groupOnColumn?.title}</span>: &nbsp;</div>
-				<cosmoz-omnitable-group-row
-					.column=${groupOnColumn}
-					.item=${item.items?.[0]}
-					.selected=${selected}
-					.folded=${folded}
-					.group=${item}
-				></cosmoz-omnitable-group-row>
-			</h3>
-			<div class="groupRow-badge">${item.items.length}</div>
-			<button class="expand" ?aria-expanded="${folded}" @click=${toggleFold}>
-				${arrow}
-			</button>
-		</div>`;
-
-export const useList = ({
-	host,
-	error,
-	dataIsValid,
-	processedItems,
-	columns,
-	collapsedColumns,
-	miniColumns,
-	sortAndGroupOptions,
-	rowPartFn,
-	...rest
-}) => {
-	const { loading = false, displayEmptyGroups = false, compareItemsFn } = host,
-		keyState = useRef({ shiftKey: false, ctrlKey: false }),
-		onCheckboxChange = useCallback((event) => {
-			const item = event.target.dataItem,
-				selected = event.target.checked;
-			if (keyState.current.shiftKey) {
-				host.shadowRoot
-					.querySelector('#groupedList')
-					.toggleSelectTo(item, selected);
-			} else if (keyState.current.ctrlKey) {
-				event.target.checked = true;
-				host.shadowRoot.querySelector('#groupedList').selectOnly(item);
-			} else {
-				host.shadowRoot
-					.querySelector('#groupedList')
-					.toggleSelect(item, selected);
-			}
-
-			event.preventDefault();
-			event.stopPropagation();
-		}, []);
-
-	useEffect(() => {
-		const handler = ({ shiftKey, ctrlKey }) => {
-			keyState.current = { shiftKey, ctrlKey };
-		};
-		window.addEventListener('keydown', handler);
-		window.addEventListener('keyup', handler);
-		return () => {
-			window.removeEventListener('keydown', handler);
-			window.removeEventListener('keyup', handler);
-		};
-	}, []);
-
-	const onItemClick = useCallback((e) => {
-		const composedPath = e.composedPath(),
-			path = composedPath.slice(0, composedPath.indexOf(e.currentTarget));
-
-		if (path.find((e) => e.matches?.('a, .checkbox, .expand'))) {
-			return;
-		}
-
-		host.dispatchEvent(
-			new window.CustomEvent('omnitable-item-click', {
-				bubbles: true,
-				composed: true,
-				detail: {
-					item: e.currentTarget.dataItem,
-					index: e.currentTarget.dataIndex,
-				},
-			}),
-		);
-	}, []);
-
-	const { groupOnColumn } = sortAndGroupOptions,
-		onItemChange = useCallback(
-			(column, item) => (value) => _onItemChange(host, column, item, value),
-			[],
-		);
-
-	return {
-		...rest,
-		processedItems,
-		dataIsValid,
-		filterIsTooStrict: dataIsValid && processedItems.length < 1,
-		loading,
-		compareItemsFn,
-		displayEmptyGroups,
-		error,
-
-		renderItem: useMemo(
-			() =>
-				renderItem({
-					columns,
-					collapsedColumns,
-					miniColumns,
-					onItemClick,
-					onCheckboxChange,
-					dataIsValid,
-					groupOnColumn,
-					onItemChange,
-					rowPartFn,
-				}),
-			[
-				columns,
-				collapsedColumns,
-				onItemClick,
-				onCheckboxChange,
-				dataIsValid,
-				groupOnColumn,
-				onItemChange,
-				rowPartFn,
-			],
-		),
-		renderGroup: useMemo(
-			() =>
-				renderGroup({
-					onCheckboxChange,
-					dataIsValid,
-					groupOnColumn,
-				}),
-			[onCheckboxChange, dataIsValid, groupOnColumn],
-		),
-	};
-};

package/lib/use-mini.js

@@ -1,30 +0,0 @@
-import { useMemo, useEffect } from '@pionjs/pion';
-
-export const useMini = ({ host, canvasWidth, columns: _columns }) => {
-	const breakpoint = host.miniBreakpoint ?? 480;
-	const isMiniSize = useMemo(
-		() => canvasWidth <= breakpoint,
-		[canvasWidth, breakpoint],
-	);
-	const columns = useMemo(
-			() =>
-				isMiniSize
-					? _columns
-							?.filter((c) => c.mini != null)
-							.sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
-					: [],
-			[_columns, isMiniSize],
-		),
-		[miniColumn, ...miniColumns] = columns ?? [],
-		hasMiniColumn = !!miniColumn;
-
-	useEffect(() => {
-		host.toggleAttribute('mini', hasMiniColumn);
-	}, [hasMiniColumn]);
-
-	return {
-		isMini: hasMiniColumn && isMiniSize,
-		miniColumn,
-		miniColumns,
-	};
-};

package/lib/use-omnitable.js

@@ -1,99 +0,0 @@
-import { useState } from '@pionjs/pion';
-import { useSettings } from './settings';
-import { useFastLayout } from './use-fast-layout';
-import { useFooter } from './use-footer';
-import { useHeader } from './use-header';
-import { useList } from './use-list';
-import { useProcessedItems } from './use-processed-items';
-import { usePublicInterface } from './use-public-interface';
-import { useSortAndGroupOptions } from './use-sort-and-group-options';
-
-export const useOmnitable = (host) => {
-	const {
-			hashParam,
-			settingsId,
-			data,
-			resizeSpeedFactor,
-			noLocal,
-			noLocalSort = noLocal,
-			noLocalFilter = noLocal,
-			error,
-			rowPartFn,
-		} = host,
-		settingS = useSettings({ settingsId, host }),
-		{ settings, setSettings, columns, resetRef } = settingS,
-		sortAndGroupOptions = useSortAndGroupOptions(
-			columns,
-			hashParam,
-			settings,
-			setSettings,
-			resetRef,
-		),
-		// TODO: drop filterFunctions
-		{ processedItems, visibleData, filters, setFilterState, filterFunctions } =
-			useProcessedItems({
-				data,
-				columns,
-				hashParam,
-				sortAndGroupOptions,
-				noLocalSort,
-				noLocalFilter,
-			}),
-		{ isMini, collapsedColumns, miniColumns } = useFastLayout({
-			host,
-			columns,
-			settings,
-			setSettings,
-			resizeSpeedFactor,
-			sortAndGroupOptions,
-		}),
-		dataIsValid = data && Array.isArray(data) && data.length > 0,
-		[selectedItems, setSelectedItems] = useState([]);
-
-	usePublicInterface({
-		host,
-		visibleData,
-		sortedFilteredGroupedItems: processedItems,
-		columns,
-		filters,
-		setFilterState,
-		selectedItems,
-		isMini,
-		...sortAndGroupOptions,
-	});
-
-	return {
-		header: useHeader({
-			host,
-			selectedItems,
-			sortAndGroupOptions,
-			dataIsValid,
-			data,
-			columns,
-			filters,
-			collapsedColumns,
-			settings,
-			filterFunctions,
-			settingS,
-			setFilterState,
-			hideSelectAll: host.hideSelectAll === true,
-		}),
-		list: useList({
-			host,
-			error,
-			dataIsValid,
-			processedItems,
-			setSelectedItems,
-			columns,
-			collapsedColumns,
-			miniColumns,
-			sortAndGroupOptions,
-			rowPartFn,
-		}),
-		footer: useFooter({
-			host,
-			selectedItems,
-			columns,
-		}),
-	};
-};

package/lib/use-processed-items.js

@@ -1,254 +0,0 @@
-import { useCallback, useEffect, useMemo } from '@pionjs/pion';
-import { invoke } from '@neovici/cosmoz-utils/function';
-import { genericSorter } from './generic-sorter';
-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(),
-	notifyChanges = (column, changes) => {
-		if (!column || !changes) {
-			return;
-		}
-
-		Object.entries(changes).forEach(([key, value]) => {
-			column[columnSymbol].__ownChange = true;
-			column[columnSymbol][key] = value;
-			column[columnSymbol].__ownChange = false;
-			column[columnSymbol].dispatchEvent(
-				new CustomEvent(`${kebab(key)}-changed`, {
-					bubbles: true,
-					detail: { value },
-				}),
-			);
-		});
-	},
-	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index }),
-	unparsed = Symbol('unparsed');
-
-export const useProcessedItems = ({
-	data,
-	columns,
-	hashParam,
-	sortAndGroupOptions,
-	noLocalSort,
-	noLocalFilter,
-}) => {
-	const { groupOnColumn, groupOnDescending, sortOnColumn, descending } =
-			sortAndGroupOptions,
-		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, { [unparsed]: value }];
-				}
-
-				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.noLocalFilter &&
-							col.getFilterFn(col, filters[col.name]?.filter),
-					])
-					.filter(([, fn]) => !!fn),
-			);
-		}, [columns, ...filterValues]),
-		filteredItems = useMemo(() => {
-			if (!Array.isArray(data) || data.length === 0) {
-				return [];
-			}
-
-			if (Object.entries(filterFunctions).length === 0 || noLocalFilter) {
-				return data.slice();
-			}
-
-			return data.filter((item) =>
-				Object.values(filterFunctions).every((filterFn) => filterFn(item)),
-			);
-		}, [data, filterFunctions, noLocalFilter]),
-		// todo: extract function
-
-		processedItems = useMemo(() => {
-			if (
-				!noLocalSort &&
-				!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,
-					);
-
-					if (gval === undefined) {
-						return acc;
-					}
-
-					let group = acc.find((g) => g.id === gval);
-
-					if (!group) {
-						group = { id: gval, name: gval, items: [item] };
-						return [...acc, group];
-					}
-
-					group.items.push(item);
-					return acc;
-				}, []);
-
-				groupedResults.sort(
-					sortBy(
-						(a) =>
-							groupOnColumn.getComparableValue(
-								{ ...groupOnColumn, valuePath: groupOnColumn.groupOn },
-								a.items[0],
-							),
-						groupOnDescending,
-					),
-				);
-
-				if (!sortOnColumn || noLocalSort) {
-					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,
-							),
-						);
-						return group;
-					});
-			}
-
-			return filteredItems;
-		}, [
-			filteredItems,
-			groupOnColumn,
-			groupOnDescending,
-			sortOnColumn,
-			descending,
-			noLocalSort,
-		]),
-		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]);
-
-	// 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,
-	};
-};