@neovici/cosmoz-omnitable 14.14.2 → 14.15.0

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

@@ -1,125 +0,0 @@
-import { useCallback } from '@pionjs/pion';
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-
-const parseIndex = (str) => {
-	const idx = parseInt(str, 10);
-	return isFinite(idx) ? idx : undefined;
-};
-
-export default (host) => {
-	const { config } = host,
-		{ settings, setSettings, collapsed } = config,
-		meta = useMeta({
-			collapsed,
-			settings: settings.columns,
-			setSettings: useCallback(
-				(columns) => setSettings((cfg) => ({ ...cfg, columns })),
-				[setSettings],
-			),
-		});
-
-	return {
-		...config,
-		onDown: useCallback(
-			(e) => {
-				if (!e.target.closest('.pull')) {
-					return;
-				}
-
-				meta.handle = e.currentTarget;
-			},
-			[meta],
-		),
-
-		onDragStart: useCallback(
-			(e) => {
-				const { target } = e,
-					index = parseIndex(target.dataset.index);
-
-				if (!meta.handle?.contains(target) || index == null) {
-					return e.preventDefault();
-				}
-
-				meta.handle = null;
-				e.dataTransfer.effectAllowed = 'move';
-				e.dataTransfer.setData('omnitable/sort-index', index);
-				e.dataTransfer.setData('text/plain', index);
-				setTimeout(() => target.classList.add('drag'), 0);
-				target.addEventListener(
-					'dragend',
-					(e) => e.target.classList.remove('drag'),
-					{ once: true },
-				);
-			},
-			[meta],
-		),
-
-		onDragEnter: useCallback((e) => {
-			const ctg = e.currentTarget;
-			if (ctg !== e.target) {
-				return;
-			}
-
-			e.preventDefault();
-			e.dataTransfer.dropEffect = 'move';
-			ctg.classList.add('dragover');
-		}, []),
-
-		onDragOver: useCallback((e) => {
-			e.preventDefault();
-			e.currentTarget.classList.add('dragover');
-		}, []),
-
-		onDragLeave: useCallback((e) => {
-			const ctg = e.currentTarget;
-			if (ctg.contains(e.relatedTarget)) {
-				return;
-			}
-
-			ctg.classList.remove('dragover');
-		}, []),
-
-		onDrop: useCallback(
-			(e) => {
-				const from = parseIndex(e.dataTransfer.getData('omnitable/sort-index')),
-					to = parseIndex(e.currentTarget.dataset.index),
-					{ settings, setSettings } = meta;
-
-				e.currentTarget.classList.remove('dragover');
-				e.preventDefault();
-
-				const newSettings = settings.slice();
-				newSettings.splice(
-					to + (from >= to ? 0 : -1),
-					0,
-					newSettings.splice(from, 1)[0],
-				);
-				setSettings(newSettings);
-			},
-			[meta],
-		),
-
-		onToggle: useCallback(
-			(e) => {
-				const { settings, setSettings } = meta,
-					newSettings = settings.map((column) => ({
-						...column,
-						disabled:
-							column.disabled ||
-							meta.collapsed?.some((c) => c.name === column.name),
-					})),
-					idx = parseIndex(e.target.closest('[data-index]')?.dataset.index);
-
-				newSettings.splice(idx, 1, {
-					...settings[idx],
-					disabled: !e.target.checked,
-					priority: e.target.checked
-						? settings.reduce((acc, s) => Math.max(acc, s.priority), 0) + 1
-						: settings[idx].priority,
-				});
-				setSettings(newSettings);
-			},
-			[meta],
-		),
-	};
-};

package/lib/settings/use-settings.js

@@ -1,53 +0,0 @@
-import { useMemo, useState, useRef, useCallback } from '@pionjs/pion';
-
-import useSavedSettings from './use-saved-settings';
-import normalize, { sgProps } from './normalize';
-import { useDOMColumns } from '../use-dom-columns';
-
-export default ({ settingsId, host }) => {
-	const initial = useMemo(
-			() => Object.fromEntries(sgProps.map((k) => [k, host[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,
-			onReset,
-		),
-		{ enabledColumns } = host,
-		columns = useDOMColumns(host, { enabledColumns }),
-		normalizedSettings = useMemo(
-			() =>
-				normalize({
-					columns,
-					settings,
-					savedSettings,
-					initial,
-				}),
-			[columns, settings, savedSettings],
-		),
-		normalizedColumns = useMemo(
-			() =>
-				normalizedSettings.columns
-					.map((s) => columns.find((c) => c.name === s.name))
-					.filter(Boolean),
-			[columns, ...normalizedSettings.columns.map((s) => s.name)],
-		);
-
-	return {
-		...rest,
-		opened,
-		setOpened,
-		settings: normalizedSettings,
-		columns: normalizedColumns,
-		setSettings,
-		resetRef,
-	};
-};

package/lib/use-canvas-width.js

@@ -1,12 +0,0 @@
-import { useState } from '@pionjs/pion';
-import { useTrackSize } from './use-track-size';
-
-export const useCanvasWidth = (host) => {
-	const [canvasWidth, setCanvasWidth] = useState(
-		() => host.getBoundingClientRect().width,
-	);
-
-	useTrackSize(host, setCanvasWidth);
-
-	return canvasWidth;
-};

package/lib/use-dom-columns.js

@@ -1,166 +0,0 @@
-import { useLayoutEffect, useState } from '@pionjs/pion';
-import { memooize } from '@neovici/cosmoz-utils/memoize';
-
-const columnSymbol = Symbol('column');
-const verifyColumnSetup = (columns) => {
-	let ok = true;
-	const columnNames = columns.map((c) => c.name);
-	// Check if column names are set
-	columns.forEach((column) => {
-		if (column.name != null) {
-			return;
-		}
-		ok = false;
-		// eslint-disable-next-line no-console
-		console.error(
-			'The name attribute needs to be set on all columns! Missing on column',
-			column,
-		);
-	});
-
-	columns.forEach((column) => {
-		if (
-			columnNames.indexOf(column.name) === columnNames.lastIndexOf(column.name)
-		) {
-			return;
-		}
-		ok = false;
-		// eslint-disable-next-line no-console
-		console.error(
-			'The name attribute needs to be unique among all columns! Not unique on column',
-			column,
-		);
-	});
-	return ok;
-};
-
-const normalizeColumn = (column) => {
-	const valuePath = column.valuePath ?? column.name;
-
-	return {
-		name: column.name,
-		title: column.title,
-
-		valuePath,
-		groupOn: column.groupOn ?? valuePath,
-		sortOn: column.sortOn ?? valuePath,
-
-		minWidth: column.minWidth,
-		width: column.width,
-		flex: column.flex,
-		priority: column.priority,
-
-		getString: column.getString,
-		getComparableValue: column.getComparableValue,
-		serializeFilter: column.serializeFilter,
-		deserializeFilter: column.deserializeFilter,
-		toXlsxValue: column.toXlsxValue,
-
-		renderHeader: column.renderHeader,
-		renderCell: column.renderCell,
-		renderEditCell: column.renderEditCell,
-		renderGroup: column.renderGroup,
-		cellTitleFn: column.cellTitleFn,
-		getFilterFn: column.getFilterFn,
-		headerCellClass: column.headerCellClass,
-		cellClass: column.cellClass,
-
-		editable: column.editable,
-
-		values: column.values,
-		source: memooize(column.computeSource),
-
-		noLocalFilter: column.noLocalFilter,
-
-		mini: column.mini,
-		renderMini: column.renderMini,
-
-		// @deprecated
-		loading: column.loading,
-		externalValues: column.externalValues,
-		computeSource: column.computeSource,
-
-		// boolean columns
-		trueLabel: column.trueLabel,
-		falseLabel: column.falseLabel,
-
-		// list columns
-		valueProperty: column.valueProperty,
-		textProperty: column.textProperty,
-		emptyLabel: column.emptyLabel,
-		emptyValue: column.emptyValue,
-
-		// range columns
-		min: column.min,
-		max: column.max,
-		locale: column.locale,
-		autoupdate: column.autoupdate,
-
-		// number columns
-		maximumFractionDigits: column.maximumFractionDigits,
-		minimumFractionDigits: column.minimumFractionDigits,
-
-		// amount columns
-		currency: column.currency,
-		rates: column.rates,
-		autodetect: column.autodetect,
-
-		// treenode columns
-		ownerTree: column.ownerTree,
-		keyProperty: column.keyProperty,
-
-		...column.getConfig?.(column),
-
-		[columnSymbol]: column,
-	};
-};
-
-const isVisibleColumn = (child) => child.isOmnitableColumn && !child.hidden;
-
-const collectDomColumns = (slot) => {
-	const domColumns = slot
-		.assignedElements({ flatten: true })
-		.filter(isVisibleColumn);
-
-	if (!verifyColumnSetup(domColumns)) return [];
-	return domColumns;
-};
-
-const normalizeColumns = (domColumns, enabledColumns) => {
-	const columns = Array.isArray(enabledColumns)
-		? domColumns.filter((column) => enabledColumns.includes(column.name))
-		: domColumns.filter((column) => !column.disabled);
-
-	return columns.map(normalizeColumn);
-};
-
-export const useDOMColumns = (host, { enabledColumns }) => {
-	const [columns, setColumns] = useState([]);
-
-	useLayoutEffect(() => {
-		let sched;
-		const slot = host.shadowRoot.querySelector('#columnsSlot');
-		const update = () => {
-			setColumns(normalizeColumns(collectDomColumns(slot), enabledColumns));
-		};
-		const scheduleUpdate = () => {
-			cancelAnimationFrame(sched);
-			sched = requestAnimationFrame(update);
-		};
-
-		scheduleUpdate();
-
-		slot.addEventListener('slotchange', scheduleUpdate);
-		host.addEventListener('cosmoz-column-prop-changed', scheduleUpdate);
-
-		return () => {
-			slot.removeEventListener('slotchange', scheduleUpdate);
-			host.removeEventListener('cosmoz-column-prop-changed', scheduleUpdate);
-			cancelAnimationFrame(sched);
-		};
-	}, [enabledColumns]);
-
-	return columns;
-};
-
-export { columnSymbol };

package/lib/use-fast-layout.js

@@ -1,73 +0,0 @@
-import { useEffect, useMemo } from '@pionjs/pion';
-import { toCss } from './compute-layout';
-import { useResizableColumns } from './use-resizable-columns';
-import { useCanvasWidth } from './use-canvas-width';
-import { useTweenArray } from './use-tween-array';
-import { useLayout } from './use-layout';
-import { useMini } from './use-mini';
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-
-const useAdoptedStyleSheet = (host) => {
-	const styleSheet = useMemo(() => new CSSStyleSheet(), []);
-
-	useEffect(() => {
-		host.shadowRoot.adoptedStyleSheets = [
-			...host.shadowRoot.adoptedStyleSheets,
-			styleSheet,
-		];
-	}, []);
-
-	return styleSheet;
-};
-
-export const useFastLayout = ({
-	host,
-	columns,
-	settings,
-	setSettings,
-	resizeSpeedFactor,
-	sortAndGroupOptions,
-}) => {
-	const canvasWidth = useCanvasWidth(host),
-		{ isMini, miniColumn, miniColumns } = useMini({
-			host,
-			canvasWidth,
-			columns,
-		}),
-		{ groupOnColumn } = sortAndGroupOptions,
-		layout = useLayout({
-			canvasWidth,
-			groupOnColumn,
-			miniColumn,
-			config: settings.columns,
-		}),
-		styleSheet = useAdoptedStyleSheet(host),
-		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],
-		);
-
-	const meta = useMeta({ columns: settings.columns });
-	useTweenArray(layout, resizeSpeedFactor, (tweenedlayout) => {
-		const layoutCss = toCss(tweenedlayout, meta.columns);
-		styleSheet.replace(layoutCss);
-	});
-
-	useResizableColumns({
-		host,
-		canvasWidth,
-		layout,
-		setSettings: (update) => setSettings(update(settings)),
-	});
-
-	return { isMini, collapsedColumns, miniColumns };
-};

package/lib/use-footer.js

@@ -1,16 +0,0 @@
-export const useFooter = ({ host, ...rest }) => {
-	const {
-		csvFilename = 'omnitable.csv',
-		xlsxFilename = 'omnitable.xlsx',
-		xlsxSheetname = 'Omnitable',
-		topPlacement = 'top-end',
-	} = host;
-
-	return {
-		csvFilename,
-		xlsxFilename,
-		xlsxSheetname,
-		topPlacement,
-		...rest,
-	};
-};

package/lib/use-hash-state.js

@@ -1,71 +0,0 @@
-import { useCallback, useState } from '@pionjs/pion';
-import { navigate } from '@neovici/cosmoz-router';
-import { identity, invoke } from '@neovici/cosmoz-utils/function';
-import {
-	hashUrl,
-	multiParse,
-	singleParse,
-} from '@neovici/cosmoz-utils/location';
-
-const makeLinker =
-		(parameterize) =>
-		(hashParam, value, codec = identity) => {
-			const url = hashUrl(),
-				searchParams = new URLSearchParams(url.hash.replace('#', ''));
-
-			// TODO: make parameterize pure
-			parameterize(hashParam, value, codec, searchParams);
-
-			return (
-				'#!' +
-				Object.assign(url, { hash: searchParams }).href.replace(
-					location.origin,
-					'',
-				)
-			);
-		},
-	isEmpty = (v) => v == null || v === '',
-	singleLink = makeLinker((hashParam, value, codec, searchParams) =>
-		!isEmpty(codec(value))
-			? searchParams.set(hashParam, codec(value))
-			: searchParams.delete(hashParam),
-	),
-	multiLink = makeLinker((hashParam, value, codec, searchParams) =>
-		Object.entries(value)
-			.map(codec)
-			.forEach(([key, value]) =>
-				!isEmpty(value)
-					? searchParams.set(hashParam + key, value)
-					: searchParams.delete(hashParam + key),
-			),
-	);
-
-export const useHashState = (
-	initial,
-	param,
-	{ suffix = '', read, write, multi } = {},
-) => {
-	const [link, parseHash] = multi
-			? [multiLink, multiParse]
-			: [singleLink, singleParse],
-		[state, _setState] = useState(() =>
-			param == null ? initial : (parseHash(param + suffix, read) ?? initial),
-		),
-		setState = useCallback(
-			(state) =>
-				_setState((oldState) => {
-					const newState = invoke(state, oldState);
-
-					if (param != null) {
-						navigate(link(param + suffix, newState, write), null, {
-							notify: false,
-						});
-					}
-
-					return newState;
-				}),
-			[param, suffix, link, write],
-		);
-
-	return [state, setState];
-};

package/lib/use-header.js

@@ -1,71 +0,0 @@
-import { useEffect, useMemo } from '@pionjs/pion';
-
-export const useHeader = ({
-	host,
-	selectedItems,
-	data,
-	sortAndGroupOptions,
-	collapsedColumns,
-	settings,
-	filterFunctions,
-	settingS,
-	filters,
-	...rest
-}) => {
-	const allSelected =
-			data && data.length > 0 && selectedItems.length === data.length,
-		onAllCheckboxChange = (event) => {
-			if (event.target.checked) {
-				host.shadowRoot.querySelector('#groupedList').selectAll();
-			} else {
-				host.shadowRoot.querySelector('#groupedList').deselectAll();
-			}
-		},
-		{ groupOnColumn } = sortAndGroupOptions,
-		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 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);
-	}, []);
-
-	return {
-		allSelected,
-		onAllCheckboxChange,
-		data,
-		settingsConfig,
-		filters,
-		groupOnColumn,
-		sortAndGroup: sortAndGroupOptions.sortAndGroup,
-		...rest,
-	};
-};

package/lib/use-layout.js

@@ -1,32 +0,0 @@
-import { useMemo } from '@pionjs/pion';
-import { computeLayout } from './compute-layout';
-
-export const useLayout = ({ canvasWidth, groupOnColumn, config, miniColumn }) =>
-	useMemo(() => {
-		if (!Array.isArray(config) || canvasWidth == null || canvasWidth === 0) {
-			return [];
-		}
-
-		const columnConfigs = config
-			.map((c, index) => ({
-				minWidth: c.minWidth,
-				width: c.width,
-				flex: c.flex,
-				priority: c.priority,
-				name: c.name,
-				index,
-				hidden: c.name === groupOnColumn?.name || c.disabled,
-			}))
-			.map((c) =>
-				miniColumn ? { ...c, hidden: miniColumn.name !== c.name } : c,
-			)
-			.sort(
-				(
-					{ index: aIndex, priority: aPriority },
-					{ index: bIndex, priority: bPriority },
-				) =>
-					aPriority === bPriority ? bIndex - aIndex : aPriority - bPriority,
-			);
-
-		return computeLayout(columnConfigs, canvasWidth, columnConfigs.length);
-	}, [canvasWidth, groupOnColumn, config]);