@neovici/cosmoz-omnitable 8.12.0 → 8.13.0

package/README.md

@@ -2,6 +2,5 @@ cosmoz-omnitable
 =================
 
 [![Build Status](https://github.com/Neovici/cosmoz-omnitable/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-omnitable/actions?workflow=Github+CI)
-[![Maintainability](https://api.codeclimate.com/v1/badges/6b16292868f47977eee2/maintainability)](https://codeclimate.com/github/Neovici/cosmoz-omnitable/maintainability)
 [![codecov](https://codecov.io/gh/Neovici/cosmoz-omnitable/branch/master/graph/badge.svg?token=j46iVMxjcs)](https://codecov.io/gh/Neovici/cosmoz-omnitable)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

package/cosmoz-omnitable.js

@@ -50,7 +50,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 				<input class="checkbox all" type="checkbox" checked="[[ _allSelected ]]" on-input="_onAllCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
 				<cosmoz-omnitable-header-row
 					data="[[ data ]]"
-					columns="[[ normalizedColumns ]]"
+					columns="[[ columns ]]"
 					filters="[[ filters ]]"
 					group-on-column="[[ groupOnColumn ]]"
 					set-filter-state="[[ setFilterState ]]"
@@ -98,7 +98,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 							<div class="item-row-wrapper">
 								<div selected$="[[ selected ]]" class="itemRow">
 									<input class="checkbox" type="checkbox" checked="[[ selected ]]" on-input="_onCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
-									<cosmoz-omnitable-item-row columns="[[ normalizedColumns ]]"
+									<cosmoz-omnitable-item-row columns="[[ columns ]]"
 										selected="[[ selected ]]" expanded="{{ expanded }}" item="[[ item ]]" group-on-column="[[ groupOnColumn ]]"
 										on-item-change="[[ onItemChange ]]">
 									</cosmoz-omnitable-item-row>

package/lib/settings/cosmoz-omnitable-settings.js

@@ -85,7 +85,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 						${_('Columns')} ${arrow}
 					</div>
 					<cosmoz-collapse ?opened=${opened.columns}>
-						<div class="list">${settings?.map(renderItem(thru))}</div>
+						<div class="list">${settings.columns?.map(renderItem(thru))}</div>
 					</cosmoz-collapse>
 
 					<div

package/lib/settings/normalize.js

@@ -1,6 +1,15 @@
+/* eslint-disable import/group-exports */
+import { props } from '@neovici/cosmoz-utils/lib/object';
+
+export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOn'];
+
 const byName = (name) => (item) => item.name === name;
 
-export default (columns = [], settings = [], savedSettings = []) => {
+export const normalizeColumns = (
+	columns = [],
+	settings = [],
+	savedSettings = []
+) => {
 	const cols = columns.filter(
 			(column) =>
 				!settings.some(byName(column.name)) &&
@@ -38,3 +47,28 @@ export default (columns = [], settings = [], savedSettings = []) => {
 		}),
 	];
 };
+
+export const normalizeStore = (settings, current) => ({
+	...current,
+	...props(sgProps)(settings),
+	columns: settings.columns?.map(
+		props(['name', 'priority', 'width', 'flex', 'disabled'])
+	),
+});
+
+export default ({ columns, settings, savedSettings, initial }) => {
+	const init = Object.fromEntries(
+		sgProps.flatMap((k) => (initial[k] != null ? [[k, initial[k]]] : []))
+	);
+
+	return {
+		...init,
+		...props(sgProps)(savedSettings),
+		...settings,
+		columns: normalizeColumns(
+			columns,
+			settings?.columns,
+			savedSettings?.columns
+		),
+	};
+};

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

@@ -1,22 +1,21 @@
 import { useCallback, useMemo, useState } from 'haunted';
-import { props } from '@neovici/cosmoz-utils/lib/object';
-
-const storagePrefix = 'omnitable-';
-
+import { normalizeStore } from './normalize';
+
+const storagePrefix = 'omnitable-',
+	read = (settingsId) => {
+		if (!settingsId) {
+			return [];
+		}
+		try {
+			return JSON.parse(localStorage.getItem(storagePrefix + settingsId)) ?? [];
+		} catch (e) {
+			return [];
+		}
+	};
+// eslint-disable-next-line max-lines-per-function
 export default (settingsId, settings, setSettings) => {
-	const
-		[counter, setCounter] = useState(0),
-		savedSettings = useMemo(() => {
-			if (!settingsId) {
-				return [];
-			}
-
-			try {
-				return JSON.parse(localStorage.getItem(storagePrefix + settingsId)) ?? [];
-			} catch (e) {
-				return [];
-			}
-		}, [settingsId, counter]);
+	const [counter, setCounter] = useState(0),
+		savedSettings = useMemo(() => read(settingsId), [settingsId, counter]);
 
 	return {
 		settingsId,
@@ -28,28 +27,32 @@ export default (settingsId, settings, setSettings) => {
 			}
 
 			try {
-				localStorage.setItem(storagePrefix + settingsId, JSON.stringify(settings.map(props(['name', 'priority', 'width', 'flex', 'disabled']))));
-				setSettings([]);
-				setCounter(counter => counter + 1);
+				const current = read(settingsId);
+				localStorage.setItem(
+					storagePrefix + settingsId,
+					JSON.stringify(normalizeStore(settings, current))
+				);
+				setSettings();
+				setCounter((counter) => counter + 1);
 			} catch (e) {
 				// eslint-disable-next-line no-console
 				console.error(e);
 			}
 		}, [settings]),
 
-		onReset: e => {
-			setSettings([]);
+		onReset: (e) => {
+			setSettings();
 
 			if (e.shiftKey) {
 				try {
 					localStorage.removeItem(storagePrefix + settingsId);
-					setCounter(counter => counter + 1);
+					setCounter((counter) => counter + 1);
 				} catch (err) {
 					// ignore error
 				}
 			}
 		},
 
-		hasChanges: settings.length !== 0
+		hasChanges: settings != null,
 	};
 };

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

@@ -10,7 +10,17 @@ const parseIndex = (str) => {
 export default (host) => {
 	const { config } = host,
 		{ settings, setSettings } = config,
-		meta = useMeta({ settings, setSettings });
+		meta = useMeta({
+			settings: settings.columns,
+			setSettings: useCallback(
+				(columns) =>
+					setSettings((cfg) => ({
+						...cfg,
+						columns,
+					})),
+				[setSettings]
+			),
+		});
 
 	return {
 		...config,

package/lib/settings/use-settings.js

@@ -3,30 +3,38 @@ import { useMemo, useState } from 'haunted';
 import useSavedSettings from './use-saved-settings';
 import normalize from './normalize';
 
-export default ({ settingsId, columns }) => {
-	const [settings, setSettings] = useState([]),
+export default ({ settingsId, ...thru }) => {
+	const [settings, setSettings] = useState(),
 		[opened, setOpened] = useState({ columns: true, sort: true }),
-		{ savedSettings, ...thru } = useSavedSettings(
+		{ savedSettings, ...rest } = useSavedSettings(
 			settingsId,
 			settings,
 			setSettings
 		),
+		{ columns } = thru,
 		normalizedSettings = useMemo(
-			() => normalize(columns, settings, savedSettings),
-			[columns, settings, savedSettings]
+			() =>
+				normalize({
+					settings,
+					savedSettings,
+					...thru,
+				}),
+			[settings, savedSettings, ...Object.values(thru)]
 		),
 		normalizedColumns = useMemo(
-			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
-			[columns, ...normalizedSettings.map(s => s.name)]
+			() =>
+				normalizedSettings.columns.map((s) =>
+					columns.find((c) => c.name === s.name)
+				),
+			[columns, ...normalizedSettings.columns.map((s) => s.name)]
 		);
 
 	return {
-		...thru,
+		...rest,
 		opened,
 		setOpened,
 		settings: normalizedSettings,
-		normalizedColumns,
+		columns: normalizedColumns,
 		setSettings,
 	};
 };
-

package/lib/use-fast-layout.js

@@ -9,9 +9,9 @@ import { render } from 'lit-html';
 export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
 	const
 		canvasWidth = useCanvasWidth(host),
-		layout = useLayout({ canvasWidth, groupOnColumn, config: settings }),
+		layout = useLayout({ canvasWidth, groupOnColumn, config: settings.columns }),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(() => toCss(tweenedlayout, settings), [tweenedlayout]);
+		layoutCss = useMemo(() => toCss(tweenedlayout, settings.columns), [tweenedlayout]);
 
 	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
 

package/lib/use-omnitable.js

@@ -8,12 +8,14 @@ import { onItemChange } from './utils-data';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = (host) => {
-	const { enabledColumns, hashParam } = host,
-		columns = useDOMColumns(host, { enabledColumns }),
-		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, 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),
 		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
 			sortAndGroupOptions,
-		{ data, resizeSpeedFactor, settingsId } = host,
+		{ data, resizeSpeedFactor } = host,
 		// TODO: drop filterFunctions
 		{
 			processedItems,
@@ -31,8 +33,6 @@ export const useOmnitable = (host) => {
 			descending,
 			hashParam,
 		}),
-		settingsOpts = useSettings({ settingsId, columns }),
-		{ settings, setSettings, normalizedColumns } = settingsOpts,
 		layout = useFastLayout({
 			host,
 			settings,
@@ -42,7 +42,7 @@ export const useOmnitable = (host) => {
 		}),
 		collapsedColumns = useMemo(
 			() =>
-				settings.reduce(
+				settings.columns.reduce(
 					(acc, column, index) =>
 						layout[index] != null ||
 						column.name === groupOnColumn?.name ||
@@ -58,7 +58,7 @@ export const useOmnitable = (host) => {
 				[
 					groupOnColumn,
 					...collapsedColumns,
-					...settings.filter((s) => s.disabled),
+					...settings.columns.filter((s) => s.disabled),
 				].some(
 					(column) =>
 						column && Object.keys(filterFunctions).includes(column.name)
@@ -67,12 +67,12 @@ export const useOmnitable = (host) => {
 		),
 		settingsConfig = useMemo(
 			() => ({
-				...settingsOpts,
+				...settingS,
 				collapsed: collapsedColumns,
 				badge: hasHiddenFilter,
 				filters,
 			}),
-			[settingsOpts, collapsedColumns, hasHiddenFilter, filters]
+			[settingS, collapsedColumns, hasHiddenFilter, filters]
 		);
 
 	useEffect(() => {
@@ -103,7 +103,6 @@ export const useOmnitable = (host) => {
 		...sortAndGroupOptions,
 
 		columns,
-		normalizedColumns,
 		collapsedColumns,
 
 		settingsConfig,

package/lib/use-resizable-columns.js

@@ -1,49 +1,62 @@
 import { useEffect, useRef } from 'haunted';
 
-export const useResizableColumns = ({ host, canvasWidth, layout, setSettings }) => {
+export const useResizableColumns = ({
+	host,
+	canvasWidth,
+	layout,
+	setSettings,
+}) => {
 	const onColumnResizeRef = useRef();
 
-	onColumnResizeRef.current = ev => setSettings(config => {
-		const
-			{ detail: { newWidth, column }} = ev,
-			columnIndex = config.findIndex(c => c.name === column.name),
-			newConfig = [],
-			maxPriority = config.reduce((p, c) => Math.max(p, c.priority), -Infinity);
-
-		for (let i = 0; i < layout.length; i++) {
-			newConfig[i] = { ...config[i] };
-
-			// for visible columns to the left of the resized column
-			if (i < columnIndex && layout[i]) {
-				// save the current width
-				newConfig[i].width = layout[i];
-				// make them fixed width
-				newConfig[i].flex = 0;
-				// keep them visible
-				newConfig[i].priority = maxPriority;
-			}
-
-			// update the width of the resized column
-			if (i === columnIndex) {
-				const
-					maxNewSize = layout.reduce((acc, cur, i) => {
+	onColumnResizeRef.current = (ev) =>
+		setSettings((settings) => {
+			const config = settings.columns,
+				{
+					detail: { newWidth, column },
+				} = ev,
+				columnIndex = config.findIndex((c) => c.name === column.name),
+				newConfig = [],
+				maxPriority = config.reduce(
+					(p, c) => Math.max(p, c.priority),
+					-Infinity
+				);
+
+			for (let i = 0; i < layout.length; i++) {
+				newConfig[i] = { ...config[i] };
+
+				// for visible columns to the left of the resized column
+				if (i < columnIndex && layout[i]) {
+					// save the current width
+					newConfig[i].width = layout[i];
+					// make them fixed width
+					newConfig[i].flex = 0;
+					// keep them visible
+					newConfig[i].priority = maxPriority;
+				}
+
+				// update the width of the resized column
+				if (i === columnIndex) {
+					const maxNewSize = layout.reduce((acc, cur, i) => {
 						if (i < columnIndex) {
 							return cur ? acc - cur : acc;
 						}
 						return acc;
 					}, canvasWidth);
 
-				newConfig[i].width = Math.min(maxNewSize, Math.max(newWidth, config[i].minWidth));
-				newConfig[i].flex = 0;
-				newConfig[i].priority = maxPriority;
+					newConfig[i].width = Math.min(
+						maxNewSize,
+						Math.max(newWidth, config[i].minWidth)
+					);
+					newConfig[i].flex = 0;
+					newConfig[i].priority = maxPriority;
+				}
 			}
-		}
 
-		return newConfig;
-	});
+			return { ...settings, columns: newConfig };
+		});
 
 	useEffect(() => {
-		const handler = ev => onColumnResizeRef.current(ev);
+		const handler = (ev) => onColumnResizeRef.current(ev);
 		host.addEventListener('column-resize', handler);
 		return () => host.removeEventListener('column-resize', handler);
 	}, []);

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

@@ -1,26 +1,46 @@
-import { useMemo, createContext, component, useContext } from 'haunted';
+import {
+	useMemo,
+	createContext,
+	component,
+	useContext,
+	useCallback,
+} from 'haunted';
 import { useHashState } from './use-hash-state';
 
 const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
-	boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p));
+	boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p)),
+	useSettingsState = (setter, name, setSettings) =>
+		useCallback(
+			(value) => {
+				setter(value);
+				setSettings((s) => ({ ...s, [name]: value }));
+			},
+			[setter, name, setSettings]
+		);
 
-export const useSortAndGroupOptions = (columns, hashParam, initial) => {
-		const [sortOn, setSortOn] = useHashState(initial.sortOn, hashParam, {
+// eslint-disable-next-line max-lines-per-function
+export const useSortAndGroupOptions = (
+		columns,
+		hashParam,
+		settings,
+		setSettings
+	) => {
+		const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
 				suffix: '-sortOn',
 			}),
 			[descending, setDescending] = useHashState(
-				initial.descending,
+				settings.descending,
 				hashParam,
 				{
 					suffix: '-descending',
 					read: boolParam,
 				}
 			),
-			[groupOn, setGroupOn] = useHashState(initial.groupOn, hashParam, {
+			[groupOn, setGroupOn] = useHashState(settings.groupOn, hashParam, {
 				suffix: '-groupOn',
 			}),
 			[groupOnDescending, setGroupOnDescending] = useHashState(
-				initial.groupOnDescending,
+				settings.groupOnDescending,
 				hashParam,
 				{ suffix: '-groupOnDescending', read: boolParam }
 			),
@@ -34,14 +54,22 @@ export const useSortAndGroupOptions = (columns, hashParam, initial) => {
 			),
 			sortAndGroup_ = {
 				groupOn,
-				setGroupOn,
+				setGroupOn: useSettingsState(setGroupOn, 'groupOn', setSettings),
 				groupOnDescending,
-				setGroupOnDescending,
+				setGroupOnDescending: useSettingsState(
+					setGroupOnDescending,
+					'groupOnDescending',
+					setSettings
+				),
 
 				sortOn,
-				setSortOn,
+				setSortOn: useSettingsState(setSortOn, 'sortOn', setSettings),
 				descending,
-				setDescending,
+				setDescending: useSettingsState(
+					setDescending,
+					'descending',
+					setSettings
+				),
 
 				columns,
 			},
@@ -56,6 +84,7 @@ export const useSortAndGroupOptions = (columns, hashParam, initial) => {
 	},
 	SortAndGroupContext = createContext();
 
+
 customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
 customElements.define(
 	'sort-and-group-consumer',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.12.0",
+	"version": "8.13.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"