@neovici/cosmoz-omnitable 13.2.0 → 13.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cosmoz-omnitable.js +0 -1
- package/lib/compute-layout.js +19 -19
- package/lib/use-fast-layout.js +6 -9
- package/package.json +2 -2
package/cosmoz-omnitable.js
CHANGED
package/lib/compute-layout.js
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
|
-
import { html } from '@pionjs/pion';
|
|
2
1
|
import { layout } from './layout';
|
|
3
2
|
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
const _toCss = (layout, config) =>
|
|
4
|
+
config
|
|
5
|
+
.map((item, index) => {
|
|
6
|
+
const width = layout[index];
|
|
7
|
+
return width == null || width === 0
|
|
8
|
+
? `cosmoz-omnitable-resize-nub[name="${item.name}"], .cell[name="${item.name}"]{display:none}`
|
|
9
|
+
: `.cell[name="${item.name}"]{width: ${Math.floor(
|
|
10
|
+
width,
|
|
11
|
+
)}px;padding: 0 min(3px, ${width / 2}px)}`;
|
|
12
|
+
})
|
|
13
|
+
.join('\n');
|
|
14
14
|
|
|
15
|
-
export const
|
|
16
|
-
|
|
17
|
-
const columnConfigs = _columnConfigs.filter(c => !c.hidden),
|
|
15
|
+
export const computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
|
|
16
|
+
const columnConfigs = _columnConfigs.filter((c) => !c.hidden),
|
|
18
17
|
totalWidths = columnConfigs.reduce((sum, { width }) => sum + width, 0);
|
|
19
18
|
|
|
20
19
|
if (columnConfigs.length > 1 && totalWidths > canvasWidth) {
|
|
@@ -26,8 +25,11 @@ export const
|
|
|
26
25
|
// as the column configs might now be in a different order than displayed
|
|
27
26
|
// due to priority settings
|
|
28
27
|
const lastColumnIndex = columnConfigs.reduce(
|
|
29
|
-
([max, maxIndex], column, index) => [
|
|
30
|
-
|
|
28
|
+
([max, maxIndex], column, index) => [
|
|
29
|
+
Math.max(max, column.index),
|
|
30
|
+
column.index > max ? index : maxIndex,
|
|
31
|
+
],
|
|
32
|
+
[-1, -1],
|
|
31
33
|
)[1];
|
|
32
34
|
|
|
33
35
|
// force the last visible column to flex
|
|
@@ -43,6 +45,4 @@ export const
|
|
|
43
45
|
}, new Array(numColumns).fill(undefined));
|
|
44
46
|
},
|
|
45
47
|
toCss = (layout, config) =>
|
|
46
|
-
layout.length === 0
|
|
47
|
-
? html`<style>.cell {display: none;}</style>`
|
|
48
|
-
: html`<style>${ _toCss(layout, config) }</style>`;
|
|
48
|
+
layout.length === 0 ? '.cell {display: none;}' : _toCss(layout, config);
|
package/lib/use-fast-layout.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useMemo } from '@pionjs/pion';
|
|
2
2
|
import { toCss } from './compute-layout';
|
|
3
3
|
import { useResizableColumns } from './use-resizable-columns';
|
|
4
4
|
import { useCanvasWidth } from './use-canvas-width';
|
|
5
5
|
import { useTweenArray } from './use-tween-array';
|
|
6
6
|
import { useLayout } from './use-layout';
|
|
7
|
-
import {
|
|
7
|
+
import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
|
|
8
8
|
|
|
9
9
|
export const useFastLayout = ({
|
|
10
10
|
host,
|
|
@@ -24,7 +24,7 @@ export const useFastLayout = ({
|
|
|
24
24
|
tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
|
|
25
25
|
layoutCss = useMemo(
|
|
26
26
|
() => toCss(tweenedlayout, settings.columns),
|
|
27
|
-
[tweenedlayout]
|
|
27
|
+
[tweenedlayout],
|
|
28
28
|
),
|
|
29
29
|
collapsedColumns = useMemo(
|
|
30
30
|
() =>
|
|
@@ -35,9 +35,9 @@ export const useFastLayout = ({
|
|
|
35
35
|
column.disabled
|
|
36
36
|
? acc
|
|
37
37
|
: [...acc, columns.find((c) => c.name === column.name)],
|
|
38
|
-
[]
|
|
38
|
+
[],
|
|
39
39
|
),
|
|
40
|
-
[columns, settings, layout]
|
|
40
|
+
[columns, settings, layout],
|
|
41
41
|
);
|
|
42
42
|
|
|
43
43
|
useResizableColumns({
|
|
@@ -47,10 +47,7 @@ export const useFastLayout = ({
|
|
|
47
47
|
setSettings: (update) => setSettings(update(settings)),
|
|
48
48
|
});
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
() => render(layoutCss, host.shadowRoot.querySelector('#layoutStyle')),
|
|
52
|
-
[layoutCss]
|
|
53
|
-
);
|
|
50
|
+
useStyleSheet(layoutCss);
|
|
54
51
|
|
|
55
52
|
return { collapsedColumns };
|
|
56
53
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "13.2.
|
|
3
|
+
"version": "13.2.1",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@neovici/cosmoz-i18next": "^3.1.1",
|
|
69
69
|
"@neovici/cosmoz-input": "^4.0.0",
|
|
70
70
|
"@neovici/cosmoz-router": "^11.0.0",
|
|
71
|
-
"@neovici/cosmoz-utils": "^6.
|
|
71
|
+
"@neovici/cosmoz-utils": "^6.5.0",
|
|
72
72
|
"@neovici/nullxlsx": "^3.0.0",
|
|
73
73
|
"@pionjs/pion": "^2.0.0",
|
|
74
74
|
"@polymer/iron-icon": "^3.0.0",
|