@neovici/cosmoz-omnitable 14.1.0 → 14.1.2

package/cosmoz-omnitable-header-row.js

@@ -22,32 +22,33 @@ const /* eslint-disable-next-line max-lines-per-function */
 		repeat(
 			columns,
 			(column) => column.name,
-			(column) =>
+			(column) => [
 				html`<div
-						class="cell ${column.headerCellClass} header-cell"
-						part="cell header-cell cell-${column.name} header-cell-${column.name}"
-						?hidden="${column === groupOnColumn}"
-						title="${column.title}"
-						name="${column.name}"
-					>
-						${column.renderHeader(
-							column,
-							filters[column.name] ?? {},
-							(state) => setFilterState(column.name, state),
-							column.source(column, data),
-						)}
-						${render({
-							on,
-							setOn,
-							descending,
-							setDescending,
-							column,
-						})}
-					</div>
-					<cosmoz-omnitable-resize-nub
-						.column="${column}"
-						name="${column.name}"
-					></cosmoz-omnitable-resize-nub>`,
+					class="cell ${column.headerCellClass} header-cell"
+					part="cell header-cell cell-${column.name} header-cell-${column.name}"
+					?hidden="${column === groupOnColumn}"
+					title="${column.title}"
+					name="${column.name}"
+				>
+					${column.renderHeader(
+						column,
+						filters[column.name] ?? {},
+						(state) => setFilterState(column.name, state),
+						column.source(column, data),
+					)}
+					${render({
+						on,
+						setOn,
+						descending,
+						setDescending,
+						column,
+					})}
+				</div>`,
+				html`<cosmoz-omnitable-resize-nub
+					.column="${column}"
+					name="${column.name}"
+				></cosmoz-omnitable-resize-nub>`,
+			],
 		);
 
 const HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => {

package/lib/use-fast-layout.js

@@ -1,11 +1,24 @@
-import { useMemo } from '@pionjs/pion';
+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 { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 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,
@@ -28,11 +41,7 @@ export const useFastLayout = ({
 			miniColumn,
 			config: settings.columns,
 		}),
-		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(
-			() => toCss(tweenedlayout, settings.columns),
-			[tweenedlayout, settings.columns],
-		),
+		styleSheet = useAdoptedStyleSheet(host),
 		collapsedColumns = useMemo(
 			() =>
 				settings.columns.reduce(
@@ -47,6 +56,12 @@ export const useFastLayout = ({
 			[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,
@@ -54,7 +69,5 @@ export const useFastLayout = ({
 		setSettings: (update) => setSettings(update(settings)),
 	});
 
-	useStyleSheet(layoutCss);
-
 	return { isMini, collapsedColumns, miniColumns };
 };

package/lib/use-tween-array.js

@@ -1,55 +1,61 @@
-import { useCallback, useEffect, useRef, useState } from '@pionjs/pion';
+import { useCallback, useEffect, useMemo } from '@pionjs/pion';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+import { noop } from '@neovici/cosmoz-utils/function';
+
+const useAnimationLoop = (animate, trigger) => {
+	const animationLoop = useMemo(() => {
+		let running = false,
+			af;
+
+		const animationLoop = () => {
+			if (!running) return;
+			af = requestAnimationFrame(animationLoop);
+			const stop = animate();
+			if (stop) running = false;
+		};
+
+		return {
+			start: () => {
+				running = true;
+				cancelAnimationFrame(af);
+				af = requestAnimationFrame(animationLoop);
+			},
+			stop: () => {
+				running = false;
+				cancelAnimationFrame(af);
+			},
+		};
+	}, []);
+
+	useEffect(() => {
+		animationLoop.start();
+	}, trigger);
+
+	useEffect(() => () => animationLoop.stop(), []);
+};
 
 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 state = useRef({
-				request: undefined,
-				target,
-				running: false,
-			}),
-			[tween, setTween] = useState(target),
+	useTweenArray = (target, speedFactor = 1.9, callback = noop) => {
+		const state = useMeta({ target }),
+			// [tween, setTween] = useState(target),
 			animate = useCallback(() => {
-				if (!state.current.running) {
-					return;
-				}
-
-				state.current.request = requestAnimationFrame(animate);
+				if (!state.tween) state.tween = state.target;
 
-				setTween((tween) => {
-					const target = state.current.target;
+				if (state.target.every((t, idx) => state.tween[idx] === t)) {
+					callback(state.tween);
+					return true;
+				}
 
-					if (target.every((t, idx) => tween[idx] === t)) {
-						state.current.running = false;
-						return tween;
-					}
+				state.tween = state.target.map((t, idx) =>
+					isCloseEnough(state.tween[idx], t)
+						? t
+						: (state.tween[idx] ?? 0) +
+								((t ?? 0) - (state.tween[idx] ?? 0)) / speedFactor || 0,
+				);
 
-					return target.map((t, idx) =>
-						isCloseEnough(tween[idx], t)
-							? t
-							: (tween[idx] ?? 0) +
-									((t ?? 0) - (tween[idx] ?? 0)) / speedFactor || 0,
-					);
-				});
+				callback(state.tween);
 			}, []);
 
-		useEffect(() => {
-			state.current.request = requestAnimationFrame(animate);
-			return () => cancelAnimationFrame(state.current.request);
-		}, []);
-
-		useEffect(() => {
-			if (state.current.target.length === 0 && target.length > 0) {
-				setTween(target);
-			}
-
-			state.current.target = target;
-
-			if (state.current.running) return;
-
-			state.current.running = true;
-			state.current.request = requestAnimationFrame(animate);
-		}, [target]);
-
-		return tween;
+		useAnimationLoop(animate, [target]);
 	};

package/package.json

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