fix: use an adopted stylesheet to render the layout

Author: cristinecula

cosmoz-omnitable.js

@@ -36,7 +36,6 @@ const Omnitable = (host) => {
 		<style>
 			${guard([], () => shimCSS(styles))}
 		</style>
-		<div id="layoutStyle"></div>
 
 		<div class="mainContainer">
 			${renderHeader(header)}

lib/compute-layout.js

@@ -1,20 +1,19 @@
-import { html } from '@pionjs/pion';
 import { layout } from './layout';
 
-const
-	_toCss = (layout, config) =>
-		config
-			.map((item, index) => {
-				const width = layout[index];
-				return width == null || width === 0
-					? `cosmoz-omnitable-resize-nub[name="${ item.name }"], .cell[name="${ item.name }"]{display:none}`
-					: `.cell[name="${ item.name }"]{width: ${ width }px;padding: 0 min(3px, ${ width / 2 }px)}`;
-			})
-			.join('\n');
+const _toCss = (layout, config) =>
+	config
+		.map((item, index) => {
+			const width = layout[index];
+			return width == null || width === 0
+				? `cosmoz-omnitable-resize-nub[name="${item.name}"], .cell[name="${item.name}"]{display:none}`
+				: `.cell[name="${item.name}"]{width: ${Math.floor(
+						width,
+					)}px;padding: 0 min(3px, ${width / 2}px)}`;
+		})
+		.join('\n');
 
-export const
-	computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
-		const columnConfigs = _columnConfigs.filter(c => !c.hidden),
+export const computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
+		const columnConfigs = _columnConfigs.filter((c) => !c.hidden),
 			totalWidths = columnConfigs.reduce((sum, { width }) => sum + width, 0);
 
 		if (columnConfigs.length > 1 && totalWidths > canvasWidth) {
@@ -26,8 +25,11 @@ export const
 		// as the column configs might now be in a different order than displayed
 		// due to priority settings
 		const lastColumnIndex = columnConfigs.reduce(
-			([max, maxIndex], column, index) => [Math.max(max, column.index), column.index > max ? index : maxIndex],
-			[-1, -1]
+			([max, maxIndex], column, index) => [
+				Math.max(max, column.index),
+				column.index > max ? index : maxIndex,
+			],
+			[-1, -1],
 		)[1];
 
 		// force the last visible column to flex
@@ -43,6 +45,4 @@ export const
 		}, new Array(numColumns).fill(undefined));
 	},
 	toCss = (layout, config) =>
-		layout.length === 0
-			? html`<style>.cell {display: none;}</style>`
-			: html`<style>${ _toCss(layout, config) }</style>`;
+		layout.length === 0 ? '.cell {display: none;}' : _toCss(layout, config);

lib/use-fast-layout.js

@@ -1,10 +1,10 @@
-import { useLayoutEffect, useMemo } from '@pionjs/pion';
+import { 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 { render } from 'lit-html';
+import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 
 export const useFastLayout = ({
 	host,
@@ -24,7 +24,7 @@ export const useFastLayout = ({
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
 		layoutCss = useMemo(
 			() => toCss(tweenedlayout, settings.columns),
-			[tweenedlayout]
+			[tweenedlayout],
 		),
 		collapsedColumns = useMemo(
 			() =>
@@ -35,9 +35,9 @@ export const useFastLayout = ({
 						column.disabled
 							? acc
 							: [...acc, columns.find((c) => c.name === column.name)],
-					[]
+					[],
 				),
-			[columns, settings, layout]
+			[columns, settings, layout],
 		);
 
 	useResizableColumns({
@@ -47,10 +47,7 @@ export const useFastLayout = ({
 		setSettings: (update) => setSettings(update(settings)),
 	});
 
-	useLayoutEffect(
-		() => render(layoutCss, host.shadowRoot.querySelector('#layoutStyle')),
-		[layoutCss]
-	);
+	useStyleSheet(layoutCss);
 
 	return { collapsedColumns };
 };

package-lock.json

@@ -68,7 +68,7 @@
 		"@neovici/cosmoz-i18next": "^3.1.1",
 		"@neovici/cosmoz-input": "^4.0.0",
 		"@neovici/cosmoz-router": "^11.0.0",
-		"@neovici/cosmoz-utils": "^6.0.0",
+		"@neovici/cosmoz-utils": "^6.5.0",
 		"@neovici/nullxlsx": "^3.0.0",
 		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",