@neovici/cosmoz-omnitable 14.1.1 → 14.2.0

package/cosmoz-omnitable.js

@@ -77,8 +77,6 @@ customElements.define(
 
 const tmplt = `
 	<slot name="actions" slot="actions"></slot>
-	<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
-	<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
 `;
 
 export const actionSlots = html(Object.assign([tmplt], { raw: [tmplt] })),

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.1",
+  "version": "14.2.0",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@neovici/cosmoz-autocomplete": "^10.0.0",
-    "@neovici/cosmoz-bottom-bar": "^8.0.0",
+    "@neovici/cosmoz-bottom-bar": "^9.0.3",
     "@neovici/cosmoz-collapse": "^1.1.0",
     "@neovici/cosmoz-datetime-input": "^4.0.1",
     "@neovici/cosmoz-dropdown": "^5.0.0",