@1771technologies/lytenyte-pro 1.0.12-dev.0 → 1.0.12-dev.2
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.
|
@@ -10,8 +10,6 @@ const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerAs, resizer
|
|
|
10
10
|
const grid = useGridRoot().grid;
|
|
11
11
|
const ctx = grid.state;
|
|
12
12
|
const xPositions = ctx.xPositions.useValue();
|
|
13
|
-
const viewport = ctx.viewportWidthInner.useValue();
|
|
14
|
-
const rtl = ctx.rtl.useValue();
|
|
15
13
|
const base = ctx.columnBase.useValue();
|
|
16
14
|
const Renderer = useHeaderCellRenderer(cell);
|
|
17
15
|
const resizable = cell.id === COLUMN_MARKER_ID
|
|
@@ -19,6 +17,6 @@ const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerAs, resizer
|
|
|
19
17
|
: (cell.column.uiHints?.resizable ?? base.uiHints?.resizable ?? false);
|
|
20
18
|
const { ref, ...dragProps } = useDragMove(grid, cell, props.onDragStart);
|
|
21
19
|
const combined = useCombinedRefs(forwarded, ref);
|
|
22
|
-
return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id,
|
|
20
|
+
return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id, isFloating: cell.kind === "floating", xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, as: resizerAs, className: resizerClassName, style: resizerStyle }))] }));
|
|
23
21
|
});
|
|
24
22
|
export const HeaderCell = fastDeepMemo(HeaderCellImpl);
|
|
@@ -11,6 +11,6 @@ const HeaderGroupCellImpl = forwardRef(function HeaderCell({ cell, children, ...
|
|
|
11
11
|
const combined = useCombinedRefs(ref, forwarded);
|
|
12
12
|
const isExpanded = grid.state.columnGroupExpansions.useValue()[cell.id] ??
|
|
13
13
|
grid.state.columnGroupDefaultExpansion.get();
|
|
14
|
-
return (_jsx(HeaderGroupCellReact, { ...props, ...dragProps, ref: combined, cell: cell, cellId: cell.id, height: ctx.headerGroupHeight.useValue(),
|
|
14
|
+
return (_jsx(HeaderGroupCellReact, { ...props, ...dragProps, ref: combined, cell: cell, cellId: cell.id, height: ctx.headerGroupHeight.useValue(), xPositions: ctx.xPositions.useValue(), isHiddenMove: cell.isHiddenMove ?? false, "data-ln-collapsible": cell.isCollapsible, "data-ln-collapsed": !isExpanded, children: children == undefined ? cell.id : children }));
|
|
15
15
|
});
|
|
16
16
|
export const HeaderGroupCell = fastDeepMemo(HeaderGroupCellImpl);
|
package/dist/header/header.js
CHANGED
|
@@ -5,6 +5,8 @@ import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
|
|
|
5
5
|
import { HeaderReact } from "@1771technologies/lytenyte-shared";
|
|
6
6
|
const HeaderImpl = forwardRef(function Header(props, forwarded) {
|
|
7
7
|
const grid = useGridRoot().grid;
|
|
8
|
-
|
|
8
|
+
const xPositions = grid.state.xPositions.useValue();
|
|
9
|
+
const columnVisible = grid.state.columnMeta.useValue();
|
|
10
|
+
return (_jsx(HeaderReact, { ...props, ref: forwarded, floatingRowEnabled: grid.state.floatingRowEnabled.useValue(), floatingRowHeight: grid.state.floatingRowHeight.useValue(), headerGroupHeight: grid.state.headerGroupHeight.useValue(), headerHeight: grid.state.headerHeight.useValue(), rows: grid.internal.headerRows.useValue(), xPositions: xPositions, countBeforeEnd: columnVisible.columnVisibleCenterCount + columnVisible.columnVisibleStartCount, width: grid.state.widthTotal.useValue() }));
|
|
9
11
|
});
|
|
10
12
|
export const Header = fastDeepMemo(HeaderImpl);
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useSlot } from "@1771technologies/lytenyte-react-hooks";
|
|
3
3
|
import {} from "react";
|
|
4
|
-
import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN,
|
|
4
|
+
import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
|
|
5
5
|
import { useGridRoot } from "../context.js";
|
|
6
|
-
import { getComputedStyle
|
|
6
|
+
import { getComputedStyle } from "@1771technologies/lytenyte-dom-utils";
|
|
7
7
|
import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
|
|
8
8
|
export function ResizeHandler({ as, cell, xPositions, style, className, }) {
|
|
9
9
|
const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
|
|
@@ -54,60 +54,57 @@ export function ResizeHandler({ as, cell, xPositions, style, className, }) {
|
|
|
54
54
|
if (anim)
|
|
55
55
|
return;
|
|
56
56
|
anim = requestAnimationFrame(() => {
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
const
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
if (
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
else {
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
after.forEach((c) => {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
const transform = xPositions[colindex] + deltaRef.current;
|
|
109
|
-
c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
|
|
110
|
-
});
|
|
57
|
+
const newWidth = width + deltaRef.current;
|
|
58
|
+
sx.api.columnResize({ [cell.id]: newWidth });
|
|
59
|
+
// TODO @Mike: the below method is a much faster, but potentially much tricky way to get resizing done. We should investigate
|
|
60
|
+
// the best approach to lever this. The main issues are around resizing group headers and ensuring column cells pinned to the
|
|
61
|
+
// end of the grid do not get shifted.
|
|
62
|
+
// const id = sx.state.gridId.get();
|
|
63
|
+
// const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
|
|
64
|
+
// const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
|
|
65
|
+
// const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
|
|
66
|
+
// const header = vp.querySelector(headerQuery) as HTMLElement;
|
|
67
|
+
// const floating = vp.querySelector(floatingQuery) as HTMLElement | undefined;
|
|
68
|
+
// if (!header) return;
|
|
69
|
+
// const pin = header.getAttribute("data-ln-pin");
|
|
70
|
+
// const cells = Array.from(vp.querySelectorAll(query)) as HTMLElement[];
|
|
71
|
+
// const headers = [header];
|
|
72
|
+
// if (floating) headers.push(floating);
|
|
73
|
+
// headers.forEach((c) => {
|
|
74
|
+
// if (!isHTMLElement(c)) return;
|
|
75
|
+
// c.style.removeProperty("min-width");
|
|
76
|
+
// c.style.removeProperty("max-width");
|
|
77
|
+
// c.style.width = `${width + deltaRef.current}px`;
|
|
78
|
+
// if (pin === "end") {
|
|
79
|
+
// const viewportWidth = sx.state.viewportWidthInner.get();
|
|
80
|
+
// const spaceLeft = xPositions.at(-1)! - xPositions[cell.colStart];
|
|
81
|
+
// const x = viewportWidth - spaceLeft - deltaRef.current;
|
|
82
|
+
// c.style.transform = getTranslate(isRtl ? -x : x, 0);
|
|
83
|
+
// }
|
|
84
|
+
// });
|
|
85
|
+
// const widthPx = `${width + deltaRef.current}px`;
|
|
86
|
+
// cells.forEach((c) => {
|
|
87
|
+
// if (!isHTMLElement(c)) return;
|
|
88
|
+
// c.style.minWidth = widthPx;
|
|
89
|
+
// c.style.maxWidth = widthPx;
|
|
90
|
+
// c.style.width = widthPx;
|
|
91
|
+
// });
|
|
92
|
+
// const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
|
|
93
|
+
// let after: HTMLElement[];
|
|
94
|
+
// if (pin !== "end") {
|
|
95
|
+
// after = Array.from(vp.querySelectorAll(headerAfterQuery)) as HTMLElement[];
|
|
96
|
+
// } else {
|
|
97
|
+
// after = [];
|
|
98
|
+
// }
|
|
99
|
+
// after.forEach((c) => {
|
|
100
|
+
// if (!isHTMLElement(c)) return;
|
|
101
|
+
// const thisPin = c.getAttribute("data-ln-pin");
|
|
102
|
+
// if (pin === "end" && thisPin === "end") return;
|
|
103
|
+
// if (pin !== "end" && thisPin === "end") return;
|
|
104
|
+
// const colindex = getColIndexFromEl(c);
|
|
105
|
+
// const transform = xPositions[colindex] + deltaRef.current;
|
|
106
|
+
// c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
|
|
107
|
+
// });
|
|
111
108
|
anim = null;
|
|
112
109
|
});
|
|
113
110
|
}, { signal: controller.signal });
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@1771technologies/lytenyte-pro",
|
|
3
3
|
"description": "Blazingly fast headless React data grid with 100s of features.",
|
|
4
|
-
"version": "1.0.12-dev.
|
|
4
|
+
"version": "1.0.12-dev.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "COMMERCIAL",
|
|
7
7
|
"files": [
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@1771technologies/atom": "^1.0.2",
|
|
52
|
-
"@1771technologies/lytenyte-
|
|
53
|
-
"@1771technologies/lytenyte-
|
|
54
|
-
"@1771technologies/lytenyte-
|
|
55
|
-
"@1771technologies/lytenyte-
|
|
56
|
-
"@1771technologies/lytenyte-
|
|
57
|
-
"@1771technologies/lytenyte-react-hooks": "1.0.12-dev.
|
|
52
|
+
"@1771technologies/lytenyte-core": "1.0.12-dev.2",
|
|
53
|
+
"@1771technologies/lytenyte-dragon": "1.0.12-dev.2",
|
|
54
|
+
"@1771technologies/lytenyte-shared": "1.0.12-dev.2",
|
|
55
|
+
"@1771technologies/lytenyte-dom-utils": "1.0.12-dev.2",
|
|
56
|
+
"@1771technologies/lytenyte-js-utils": "1.0.12-dev.2",
|
|
57
|
+
"@1771technologies/lytenyte-react-hooks": "1.0.12-dev.2"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"react": "^18.0.0 || ^19.0.0",
|