From b9d04f5b3fb470e2bb4102e6f6c2dda652acf456 Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Wed, 31 Jan 2024 12:51:01 +0200 Subject: [PATCH] fix: use an adopted stylesheet to render the layout --- cosmoz-omnitable.js | 1 - lib/compute-layout.js | 38 +++++++++++++++++++------------------- lib/use-fast-layout.js | 15 ++++++--------- package-lock.json | 8 ++++---- package.json | 2 +- 5 files changed, 30 insertions(+), 34 deletions(-) diff --git a/cosmoz-omnitable.js b/cosmoz-omnitable.js index 5ffbd4e2..73d3f480 100644 --- a/cosmoz-omnitable.js +++ b/cosmoz-omnitable.js @@ -36,7 +36,6 @@ const Omnitable = (host) => { -
${renderHeader(header)} diff --git a/lib/compute-layout.js b/lib/compute-layout.js index 0123e641..d6e546f2 100644 --- a/lib/compute-layout.js +++ b/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`` - : html``; + layout.length === 0 ? '.cell {display: none;}' : _toCss(layout, config); diff --git a/lib/use-fast-layout.js b/lib/use-fast-layout.js index 280d5bfa..dc1858c7 100644 --- a/lib/use-fast-layout.js +++ b/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 }; }; diff --git a/package-lock.json b/package-lock.json index 9001de86..cba88af8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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", @@ -1218,9 +1218,9 @@ } }, "node_modules/@neovici/cosmoz-utils": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@neovici/cosmoz-utils/-/cosmoz-utils-6.1.0.tgz", - "integrity": "sha512-GsAtqHrA/K/pBO4AA+99YgIXaxVPNdgchaNaN6BHnI6H/0ux8en28V3j/O0jew3tlG+GzGpzQDaskClEQxiqvg==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@neovici/cosmoz-utils/-/cosmoz-utils-6.5.0.tgz", + "integrity": "sha512-JADH1RKYhcKpH1N2MGraX53E2mmXcNqHOaqaXwa2koLvOzKMAPdH8AjmlErnkxvWfGRPEE41L6ondj3DhWIkBQ==", "dependencies": { "@pionjs/pion": "^2.0.0" } diff --git a/package.json b/package.json index ed3eb602..d8a9cff0 100644 --- a/package.json +++ b/package.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",