@vuu-ui/vuu-table 0.8.94 → 0.8.96
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/cjs/Row.css.js +1 -1
- package/cjs/Row.js +1 -1
- package/cjs/Row.js.map +1 -1
- package/cjs/Table.css.js +1 -1
- package/cjs/Table.js +113 -31
- package/cjs/Table.js.map +1 -1
- package/cjs/cell-block/CellBlock.css.js +6 -0
- package/cjs/cell-block/CellBlock.css.js.map +1 -0
- package/cjs/cell-block/CellBlock.js +41 -0
- package/cjs/cell-block/CellBlock.js.map +1 -0
- package/cjs/cell-block/cellblock-utils.js +140 -0
- package/cjs/cell-block/cellblock-utils.js.map +1 -0
- package/cjs/cell-block/useCellBlockSelection.js +232 -0
- package/cjs/cell-block/useCellBlockSelection.js.map +1 -0
- package/cjs/index.js +5 -0
- package/cjs/index.js.map +1 -1
- package/cjs/moving-window.js +21 -9
- package/cjs/moving-window.js.map +1 -1
- package/cjs/pagination/PaginationControl.css.js +6 -0
- package/cjs/pagination/PaginationControl.css.js.map +1 -0
- package/cjs/pagination/PaginationControl.js +38 -0
- package/cjs/pagination/PaginationControl.js.map +1 -0
- package/cjs/pagination/usePagination.js +38 -0
- package/cjs/pagination/usePagination.js.map +1 -0
- package/cjs/table-dom-utils.js +67 -10
- package/cjs/table-dom-utils.js.map +1 -1
- package/cjs/table-header/useTableHeader.js +1 -1
- package/cjs/table-header/useTableHeader.js.map +1 -1
- package/cjs/useCellFocus.js +56 -0
- package/cjs/useCellFocus.js.map +1 -0
- package/cjs/useControlledTableNavigation.js +3 -1
- package/cjs/useControlledTableNavigation.js.map +1 -1
- package/cjs/useDataSource.js +13 -0
- package/cjs/useDataSource.js.map +1 -1
- package/cjs/useKeyboardNavigation.js +8 -82
- package/cjs/useKeyboardNavigation.js.map +1 -1
- package/cjs/useMeasuredHeight.js +5 -5
- package/cjs/useMeasuredHeight.js.map +1 -1
- package/cjs/useTable.js +63 -16
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableContextMenu.js +2 -1
- package/cjs/useTableContextMenu.js.map +1 -1
- package/cjs/useTableScroll.js.map +1 -1
- package/cjs/useTableViewport.js +31 -13
- package/cjs/useTableViewport.js.map +1 -1
- package/esm/Row.css.js +1 -1
- package/esm/Row.js +1 -1
- package/esm/Row.js.map +1 -1
- package/esm/Table.css.js +1 -1
- package/esm/Table.js +115 -33
- package/esm/Table.js.map +1 -1
- package/esm/cell-block/CellBlock.css.js +4 -0
- package/esm/cell-block/CellBlock.css.js.map +1 -0
- package/esm/cell-block/CellBlock.js +39 -0
- package/esm/cell-block/CellBlock.js.map +1 -0
- package/esm/cell-block/cellblock-utils.js +131 -0
- package/esm/cell-block/cellblock-utils.js.map +1 -0
- package/esm/cell-block/useCellBlockSelection.js +230 -0
- package/esm/cell-block/useCellBlockSelection.js.map +1 -0
- package/esm/index.js +2 -1
- package/esm/index.js.map +1 -1
- package/esm/moving-window.js +21 -9
- package/esm/moving-window.js.map +1 -1
- package/esm/pagination/PaginationControl.css.js +4 -0
- package/esm/pagination/PaginationControl.css.js.map +1 -0
- package/esm/pagination/PaginationControl.js +36 -0
- package/esm/pagination/PaginationControl.js.map +1 -0
- package/esm/pagination/usePagination.js +36 -0
- package/esm/pagination/usePagination.js.map +1 -0
- package/esm/table-dom-utils.js +64 -10
- package/esm/table-dom-utils.js.map +1 -1
- package/esm/table-header/useTableHeader.js +1 -1
- package/esm/table-header/useTableHeader.js.map +1 -1
- package/esm/useCellFocus.js +54 -0
- package/esm/useCellFocus.js.map +1 -0
- package/esm/useControlledTableNavigation.js +3 -2
- package/esm/useControlledTableNavigation.js.map +1 -1
- package/esm/useDataSource.js +13 -0
- package/esm/useDataSource.js.map +1 -1
- package/esm/useKeyboardNavigation.js +8 -82
- package/esm/useKeyboardNavigation.js.map +1 -1
- package/esm/useMeasuredHeight.js +5 -5
- package/esm/useMeasuredHeight.js.map +1 -1
- package/esm/useTable.js +63 -16
- package/esm/useTable.js.map +1 -1
- package/esm/useTableContextMenu.js +2 -1
- package/esm/useTableContextMenu.js.map +1 -1
- package/esm/useTableScroll.js.map +1 -1
- package/esm/useTableViewport.js +31 -13
- package/esm/useTableViewport.js.map +1 -1
- package/package.json +9 -9
- package/types/Table.d.ts +40 -0
- package/types/cell-block/CellBlock.d.ts +6 -0
- package/types/cell-block/cellblock-utils.d.ts +37 -0
- package/types/cell-block/useCellBlockSelection.d.ts +16 -0
- package/types/index.d.ts +1 -0
- package/types/moving-window.d.ts +3 -1
- package/types/pagination/PaginationControl.d.ts +6 -0
- package/types/pagination/index.d.ts +1 -0
- package/types/pagination/usePagination.d.ts +9 -0
- package/types/table-dom-utils.d.ts +6 -1
- package/types/useCellFocus.d.ts +13 -0
- package/types/useControlledTableNavigation.d.ts +1 -0
- package/types/useKeyboardNavigation.d.ts +5 -5
- package/types/useMeasuredHeight.d.ts +2 -2
- package/types/useTable.d.ts +13 -11
- package/types/useTableScroll.d.ts +1 -0
- package/types/useTableViewport.d.ts +3 -2
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { queryClosest, isArrowKey } from '@vuu-ui/vuu-utils';
|
|
3
|
+
import { useState, useRef, useCallback } from 'react';
|
|
4
|
+
import { getTableCell, getTableCellPos, getNextCellPos } from '../table-dom-utils.js';
|
|
5
|
+
import { CellBlock } from './CellBlock.js';
|
|
6
|
+
import { refState, getTextFromCells, setElementBox, outsideBox, updateCellBlockClassName, getTableCellBlock, isNullCellBox } from './cellblock-utils.js';
|
|
7
|
+
|
|
8
|
+
const clone = (posTuple) => posTuple.slice();
|
|
9
|
+
const NullHandler = () => console.error("no handler installed");
|
|
10
|
+
const mouseHandlers = {
|
|
11
|
+
mouseMove: NullHandler,
|
|
12
|
+
mouseMovePreDrag: NullHandler,
|
|
13
|
+
mouseUp: NullHandler,
|
|
14
|
+
mouseUpPreDrag: NullHandler
|
|
15
|
+
};
|
|
16
|
+
const mouseType = (name) => name.startsWith("mouseMove") ? "mousemove" : "mouseup";
|
|
17
|
+
const DRAG_THRESHOLD = 5;
|
|
18
|
+
const useCellBlockSelection = ({
|
|
19
|
+
allowCellBlockSelection,
|
|
20
|
+
columnCount = 0,
|
|
21
|
+
containerRef,
|
|
22
|
+
focusCell,
|
|
23
|
+
onSelectCellBlock,
|
|
24
|
+
rowCount = 0
|
|
25
|
+
}) => {
|
|
26
|
+
const [cellBlock, setCellBlock] = useState(null);
|
|
27
|
+
const stateRef = useRef(refState);
|
|
28
|
+
const handlersRef = useRef(mouseHandlers);
|
|
29
|
+
const handleCopy = useCallback(async () => {
|
|
30
|
+
const { startCell, endCell } = stateRef.current;
|
|
31
|
+
if (startCell && endCell) {
|
|
32
|
+
const tsvText = getTextFromCells(startCell, endCell);
|
|
33
|
+
const type = "text/plain";
|
|
34
|
+
const blob = new Blob([tsvText], { type });
|
|
35
|
+
const data = [new ClipboardItem({ [type]: blob })];
|
|
36
|
+
await navigator.clipboard.write(data);
|
|
37
|
+
}
|
|
38
|
+
}, []);
|
|
39
|
+
const cellBlockRef = useCallback((el) => {
|
|
40
|
+
stateRef.current.cellBlock = el;
|
|
41
|
+
}, []);
|
|
42
|
+
const createCellBlock = useCallback(
|
|
43
|
+
(method = "mouse") => {
|
|
44
|
+
const { startBox, startCell } = stateRef.current;
|
|
45
|
+
if (startCell) {
|
|
46
|
+
const table = queryClosest(startCell, ".vuuTable");
|
|
47
|
+
if (table) {
|
|
48
|
+
table.classList.add(`vuu-cellblock-select-in-progress-${method}`);
|
|
49
|
+
}
|
|
50
|
+
setElementBox(startCell, startBox);
|
|
51
|
+
startCell.classList.add("vuu-cellblock-start");
|
|
52
|
+
setCellBlock(/* @__PURE__ */ jsx(CellBlock, { onCopy: handleCopy, ref: cellBlockRef }));
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
[cellBlockRef, handleCopy]
|
|
56
|
+
);
|
|
57
|
+
const initializeStateRef = useCallback(() => {
|
|
58
|
+
const { cellBlock: cellBlock2, cellBlockClassName, startCell, endCell } = stateRef.current;
|
|
59
|
+
if (startCell) {
|
|
60
|
+
startCell.classList.remove("vuu-cellblock-start");
|
|
61
|
+
}
|
|
62
|
+
if (endCell) {
|
|
63
|
+
endCell.classList.remove("vuu-cellblock-end");
|
|
64
|
+
}
|
|
65
|
+
if (cellBlock2?.classList.contains(cellBlockClassName)) {
|
|
66
|
+
cellBlock2.classList.remove(cellBlockClassName);
|
|
67
|
+
}
|
|
68
|
+
const { endBox, startBox } = refState;
|
|
69
|
+
stateRef.current = {
|
|
70
|
+
...refState,
|
|
71
|
+
cellBlock: cellBlock2,
|
|
72
|
+
endBox: { ...endBox },
|
|
73
|
+
endPos: [-1, -1],
|
|
74
|
+
startBox: { ...startBox },
|
|
75
|
+
startPos: [-1, -1]
|
|
76
|
+
};
|
|
77
|
+
}, []);
|
|
78
|
+
const addMouseListener = useCallback(
|
|
79
|
+
(mouseOperation, handler) => {
|
|
80
|
+
window.addEventListener(mouseType(mouseOperation), handler);
|
|
81
|
+
handlersRef.current[mouseOperation] = handler;
|
|
82
|
+
},
|
|
83
|
+
[]
|
|
84
|
+
);
|
|
85
|
+
const removeMouseListener = useCallback((name) => {
|
|
86
|
+
window.removeEventListener(mouseType(name), handlersRef.current[name]);
|
|
87
|
+
}, []);
|
|
88
|
+
handlersRef.current.mouseMove = useCallback((evt) => {
|
|
89
|
+
const { clientX: x, clientY: y } = evt;
|
|
90
|
+
const { endBox, startBox } = stateRef.current;
|
|
91
|
+
if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {
|
|
92
|
+
const cell = queryClosest(
|
|
93
|
+
evt.target,
|
|
94
|
+
".vuuTableCell, .vuuCellBlock"
|
|
95
|
+
);
|
|
96
|
+
if (cell?.classList.contains("vuuTableCell")) {
|
|
97
|
+
setElementBox(cell, endBox);
|
|
98
|
+
stateRef.current.endCell = cell;
|
|
99
|
+
updateCellBlockClassName(stateRef.current);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}, []);
|
|
103
|
+
handlersRef.current.mouseUp = useCallback(
|
|
104
|
+
(evt) => {
|
|
105
|
+
removeMouseListener("mouseMove");
|
|
106
|
+
removeMouseListener("mouseUp");
|
|
107
|
+
const { cellBlock: cellBlock2, endCell, startCell } = stateRef.current;
|
|
108
|
+
const table = queryClosest(evt.target, ".vuuTable");
|
|
109
|
+
endCell?.classList.add("vuu-cellblock-end");
|
|
110
|
+
if (table) {
|
|
111
|
+
table.classList.remove("vuu-cellblock-select-in-progress-mouse");
|
|
112
|
+
}
|
|
113
|
+
if (startCell && endCell) {
|
|
114
|
+
const tableCellBlock = getTableCellBlock(startCell, endCell);
|
|
115
|
+
onSelectCellBlock?.(tableCellBlock);
|
|
116
|
+
}
|
|
117
|
+
if (cellBlock2) {
|
|
118
|
+
cellBlock2.focus();
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
[onSelectCellBlock, removeMouseListener]
|
|
122
|
+
);
|
|
123
|
+
handlersRef.current.mouseMovePreDrag = useCallback(
|
|
124
|
+
(evt) => {
|
|
125
|
+
const { current: state } = stateRef;
|
|
126
|
+
const { mouseStartX, mouseStartY } = state;
|
|
127
|
+
const x = state.mousePosX = evt.clientX;
|
|
128
|
+
const y = state.mousePosY = evt.clientY;
|
|
129
|
+
const distance = Math.max(
|
|
130
|
+
Math.abs(x - mouseStartX),
|
|
131
|
+
Math.abs(y - mouseStartY)
|
|
132
|
+
);
|
|
133
|
+
if (distance > DRAG_THRESHOLD) {
|
|
134
|
+
createCellBlock("mouse");
|
|
135
|
+
const { mouseMove, mouseUp } = handlersRef.current;
|
|
136
|
+
removeMouseListener("mouseMovePreDrag");
|
|
137
|
+
removeMouseListener("mouseUpPreDrag");
|
|
138
|
+
addMouseListener("mouseMove", mouseMove);
|
|
139
|
+
addMouseListener("mouseUp", mouseUp);
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
[addMouseListener, createCellBlock, removeMouseListener]
|
|
143
|
+
);
|
|
144
|
+
handlersRef.current.mouseUpPreDrag = useCallback(() => {
|
|
145
|
+
removeMouseListener("mouseMovePreDrag");
|
|
146
|
+
removeMouseListener("mouseUpPreDrag");
|
|
147
|
+
}, [removeMouseListener]);
|
|
148
|
+
const handleMouseDown = useCallback(
|
|
149
|
+
(evt) => {
|
|
150
|
+
initializeStateRef();
|
|
151
|
+
const { current: state } = stateRef;
|
|
152
|
+
const cell = queryClosest(evt.target, ".vuuTableCell");
|
|
153
|
+
if (cell) {
|
|
154
|
+
state.startCell = cell;
|
|
155
|
+
state.mouseStartX = evt.clientX;
|
|
156
|
+
state.mouseStartY = evt.clientY;
|
|
157
|
+
const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;
|
|
158
|
+
addMouseListener("mouseMovePreDrag", mouseMovePreDrag);
|
|
159
|
+
addMouseListener("mouseUpPreDrag", mouseUpPreDrag);
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
[addMouseListener, initializeStateRef]
|
|
163
|
+
);
|
|
164
|
+
const nativeKeyDownHandlerRef = useRef(NullHandler);
|
|
165
|
+
const handleNativeKeyUp = useCallback((evt) => {
|
|
166
|
+
if (evt.key === "Shift") {
|
|
167
|
+
const { endCell } = stateRef.current;
|
|
168
|
+
const table = queryClosest(evt.target, ".vuuTable");
|
|
169
|
+
endCell?.classList.add("vuu-cellblock-end");
|
|
170
|
+
if (table) {
|
|
171
|
+
table.classList.remove("vuu-cellblock-select-in-progress-keyboard");
|
|
172
|
+
}
|
|
173
|
+
window.removeEventListener("keydown", nativeKeyDownHandlerRef.current, {
|
|
174
|
+
capture: true
|
|
175
|
+
});
|
|
176
|
+
window.removeEventListener("keyup", handleNativeKeyUp, {
|
|
177
|
+
capture: true
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
}, []);
|
|
181
|
+
const handleNativeKeyDown = nativeKeyDownHandlerRef.current = useCallback(
|
|
182
|
+
({ key }) => {
|
|
183
|
+
if (isArrowKey(key)) {
|
|
184
|
+
const { endBox, endPos, startBox } = stateRef.current;
|
|
185
|
+
if (isNullCellBox(startBox)) {
|
|
186
|
+
createCellBlock("keyboard");
|
|
187
|
+
}
|
|
188
|
+
const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);
|
|
189
|
+
stateRef.current.endPos = nextCell;
|
|
190
|
+
focusCell(nextCell);
|
|
191
|
+
const cell = getTableCell(containerRef, nextCell);
|
|
192
|
+
stateRef.current.endCell = cell;
|
|
193
|
+
setElementBox(cell, endBox);
|
|
194
|
+
updateCellBlockClassName(stateRef.current);
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
[columnCount, containerRef, createCellBlock, focusCell, rowCount]
|
|
198
|
+
);
|
|
199
|
+
const handleKeyDown = useCallback(
|
|
200
|
+
(evt) => {
|
|
201
|
+
if (evt.key === "Shift") {
|
|
202
|
+
initializeStateRef();
|
|
203
|
+
const cell = queryClosest(evt.target, ".vuuTableCell");
|
|
204
|
+
if (cell) {
|
|
205
|
+
const startPos = getTableCellPos(cell);
|
|
206
|
+
stateRef.current.startPos = startPos;
|
|
207
|
+
stateRef.current.endPos = clone(startPos);
|
|
208
|
+
const { current: state } = stateRef;
|
|
209
|
+
state.startCell = cell;
|
|
210
|
+
window.addEventListener("keydown", handleNativeKeyDown, {
|
|
211
|
+
capture: true
|
|
212
|
+
});
|
|
213
|
+
window.addEventListener("keyup", handleNativeKeyUp, {
|
|
214
|
+
capture: true
|
|
215
|
+
});
|
|
216
|
+
evt.preventDefault();
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
[handleNativeKeyDown, handleNativeKeyUp, initializeStateRef]
|
|
221
|
+
);
|
|
222
|
+
return {
|
|
223
|
+
cellBlock,
|
|
224
|
+
onKeyDown: allowCellBlockSelection ? handleKeyDown : void 0,
|
|
225
|
+
onMouseDown: allowCellBlockSelection ? handleMouseDown : void 0
|
|
226
|
+
};
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
export { useCellBlockSelection };
|
|
230
|
+
//# sourceMappingURL=useCellBlockSelection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCellBlockSelection.js","sources":["../../src/cell-block/useCellBlockSelection.tsx"],"sourcesContent":["import { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n RefCallback,\n RefObject,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n getNextCellPos,\n getTableCell,\n getTableCellPos,\n} from \"../table-dom-utils\";\nimport { FocusCell } from \"../useCellFocus\";\nimport { CellBlock } from \"./CellBlock\";\nimport {\n PosTuple,\n RefState,\n TableCellBlock,\n getTableCellBlock,\n getTextFromCells,\n isNullCellBox,\n outsideBox,\n refState,\n setElementBox,\n updateCellBlockClassName,\n} from \"./cellblock-utils\";\n\nconst clone = (posTuple: PosTuple) => posTuple.slice() as PosTuple;\n\ntype NativeKeyboardHandler = (evt: KeyboardEvent) => void;\ntype NativeMouseHandler = (evt: MouseEvent) => void;\ntype MouseHandlers = {\n mouseMove: NativeMouseHandler;\n mouseMovePreDrag: NativeMouseHandler;\n mouseUp: NativeMouseHandler;\n mouseUpPreDrag: NativeMouseHandler;\n};\n\nconst NullHandler = () => console.error(\"no handler installed\");\nconst mouseHandlers: MouseHandlers = {\n mouseMove: NullHandler,\n mouseMovePreDrag: NullHandler,\n mouseUp: NullHandler,\n mouseUpPreDrag: NullHandler,\n};\n\ntype MouseOperation = keyof typeof mouseHandlers;\n\nconst mouseType = (name: string) =>\n name.startsWith(\"mouseMove\") ? \"mousemove\" : \"mouseup\";\n\nconst DRAG_THRESHOLD = 5;\n\nexport interface CellblockSelectionHookProps {\n allowCellBlockSelection?: boolean;\n columnCount?: number;\n containerRef: RefObject<HTMLElement>;\n focusCell: FocusCell;\n onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n rowCount?: number;\n}\n\nexport const useCellBlockSelection = ({\n allowCellBlockSelection,\n columnCount = 0,\n containerRef,\n focusCell,\n onSelectCellBlock,\n rowCount = 0,\n}: CellblockSelectionHookProps) => {\n const [cellBlock, setCellBlock] = useState<ReactElement | null>(null);\n const stateRef = useRef<RefState>(refState);\n const handlersRef = useRef<MouseHandlers>(mouseHandlers);\n\n const handleCopy = useCallback(async () => {\n const { startCell, endCell } = stateRef.current;\n if (startCell && endCell) {\n const tsvText = getTextFromCells(startCell, endCell);\n const type = \"text/plain\";\n const blob = new Blob([tsvText], { type });\n const data = [new ClipboardItem({ [type]: blob })];\n await navigator.clipboard.write(data);\n }\n }, []);\n\n const cellBlockRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n stateRef.current.cellBlock = el;\n }, []);\n\n const createCellBlock = useCallback(\n (method: \"mouse\" | \"keyboard\" = \"mouse\") => {\n const { startBox, startCell } = stateRef.current;\n if (startCell) {\n const table = queryClosest<HTMLDivElement>(startCell, \".vuuTable\");\n if (table) {\n table.classList.add(`vuu-cellblock-select-in-progress-${method}`);\n }\n setElementBox(startCell, startBox);\n startCell.classList.add(\"vuu-cellblock-start\");\n setCellBlock(<CellBlock onCopy={handleCopy} ref={cellBlockRef} />);\n }\n },\n [cellBlockRef, handleCopy],\n );\n\n const initializeStateRef = useCallback(() => {\n const { cellBlock, cellBlockClassName, startCell, endCell } =\n stateRef.current;\n if (startCell) {\n startCell.classList.remove(\"vuu-cellblock-start\");\n }\n if (endCell) {\n endCell.classList.remove(\"vuu-cellblock-end\");\n }\n if (cellBlock?.classList.contains(cellBlockClassName)) {\n cellBlock.classList.remove(cellBlockClassName);\n }\n\n const { endBox, startBox } = refState;\n\n stateRef.current = {\n ...refState,\n cellBlock,\n endBox: { ...endBox },\n endPos: [-1, -1],\n startBox: { ...startBox },\n startPos: [-1, -1],\n };\n }, []);\n\n const addMouseListener = useCallback(\n (mouseOperation: MouseOperation, handler: NativeMouseHandler) => {\n window.addEventListener(mouseType(mouseOperation), handler);\n handlersRef.current[mouseOperation] = handler;\n },\n [],\n );\n\n const removeMouseListener = useCallback((name: MouseOperation) => {\n window.removeEventListener(mouseType(name), handlersRef.current[name]);\n }, []);\n\n handlersRef.current.mouseMove = useCallback((evt: MouseEvent) => {\n const { clientX: x, clientY: y } = evt;\n const { endBox, startBox } = stateRef.current;\n if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {\n const cell = queryClosest<HTMLDivElement>(\n evt.target,\n \".vuuTableCell, .vuuCellBlock\",\n );\n if (cell?.classList.contains(\"vuuTableCell\")) {\n setElementBox(cell, endBox);\n stateRef.current.endCell = cell;\n updateCellBlockClassName(stateRef.current);\n }\n }\n }, []);\n\n handlersRef.current.mouseUp = useCallback(\n (evt: MouseEvent) => {\n removeMouseListener(\"mouseMove\");\n removeMouseListener(\"mouseUp\");\n\n const { cellBlock, endCell, startCell } = stateRef.current;\n\n const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n endCell?.classList.add(\"vuu-cellblock-end\");\n if (table) {\n table.classList.remove(\"vuu-cellblock-select-in-progress-mouse\");\n }\n\n if (startCell && endCell) {\n const tableCellBlock = getTableCellBlock(startCell, endCell);\n onSelectCellBlock?.(tableCellBlock);\n }\n\n if (cellBlock) {\n cellBlock.focus();\n }\n },\n [onSelectCellBlock, removeMouseListener],\n );\n\n handlersRef.current.mouseMovePreDrag = useCallback(\n (evt: MouseEvent) => {\n const { current: state } = stateRef;\n const { mouseStartX, mouseStartY } = state;\n\n const x = (state.mousePosX = evt.clientX);\n const y = (state.mousePosY = evt.clientY);\n\n const distance = Math.max(\n Math.abs(x - mouseStartX),\n Math.abs(y - mouseStartY),\n );\n\n if (distance > DRAG_THRESHOLD) {\n createCellBlock(\"mouse\");\n\n const { mouseMove, mouseUp } = handlersRef.current;\n removeMouseListener(\"mouseMovePreDrag\");\n removeMouseListener(\"mouseUpPreDrag\");\n addMouseListener(\"mouseMove\", mouseMove);\n addMouseListener(\"mouseUp\", mouseUp);\n }\n },\n [addMouseListener, createCellBlock, removeMouseListener],\n );\n\n handlersRef.current.mouseUpPreDrag = useCallback(() => {\n removeMouseListener(\"mouseMovePreDrag\");\n removeMouseListener(\"mouseUpPreDrag\");\n }, [removeMouseListener]);\n\n const handleMouseDown = useCallback<MouseEventHandler>(\n (evt) => {\n initializeStateRef();\n const { current: state } = stateRef;\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n state.startCell = cell;\n state.mouseStartX = evt.clientX;\n state.mouseStartY = evt.clientY;\n\n const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;\n addMouseListener(\"mouseMovePreDrag\", mouseMovePreDrag);\n addMouseListener(\"mouseUpPreDrag\", mouseUpPreDrag);\n }\n },\n [addMouseListener, initializeStateRef],\n );\n\n const nativeKeyDownHandlerRef = useRef<NativeKeyboardHandler>(NullHandler);\n\n const handleNativeKeyUp = useCallback((evt: KeyboardEvent) => {\n if (evt.key === \"Shift\") {\n const { endCell } = stateRef.current;\n const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n endCell?.classList.add(\"vuu-cellblock-end\");\n if (table) {\n table.classList.remove(\"vuu-cellblock-select-in-progress-keyboard\");\n }\n\n window.removeEventListener(\"keydown\", nativeKeyDownHandlerRef.current, {\n capture: true,\n });\n window.removeEventListener(\"keyup\", handleNativeKeyUp, {\n capture: true,\n });\n }\n }, []);\n const handleNativeKeyDown = (nativeKeyDownHandlerRef.current = useCallback(\n ({ key }: KeyboardEvent) => {\n if (isArrowKey(key)) {\n const { endBox, endPos, startBox } = stateRef.current;\n if (isNullCellBox(startBox)) {\n createCellBlock(\"keyboard\");\n }\n const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);\n stateRef.current.endPos = nextCell;\n focusCell(nextCell);\n const cell = getTableCell(containerRef, nextCell);\n stateRef.current.endCell = cell as HTMLDivElement;\n setElementBox(cell, endBox);\n updateCellBlockClassName(stateRef.current);\n }\n },\n [columnCount, containerRef, createCellBlock, focusCell, rowCount],\n ));\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (evt) => {\n if (evt.key === \"Shift\") {\n initializeStateRef();\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n const startPos = getTableCellPos(cell);\n stateRef.current.startPos = startPos;\n stateRef.current.endPos = clone(startPos);\n const { current: state } = stateRef;\n state.startCell = cell;\n\n window.addEventListener(\"keydown\", handleNativeKeyDown, {\n capture: true,\n });\n window.addEventListener(\"keyup\", handleNativeKeyUp, {\n capture: true,\n });\n\n evt.preventDefault();\n }\n }\n },\n [handleNativeKeyDown, handleNativeKeyUp, initializeStateRef],\n );\n\n return {\n cellBlock,\n onKeyDown: allowCellBlockSelection ? handleKeyDown : undefined,\n onMouseDown: allowCellBlockSelection ? handleMouseDown : undefined,\n };\n};\n"],"names":["cellBlock"],"mappings":"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"}
|
package/esm/index.js
CHANGED
|
@@ -11,7 +11,8 @@ export { TableGroupCell } from './table-cell/TableGroupCell.js';
|
|
|
11
11
|
export { updateTableConfig } from './table-config.js';
|
|
12
12
|
export { HeaderProvider, useHeaderProps } from './table-header/HeaderProvider.js';
|
|
13
13
|
export { TableHeader } from './table-header/TableHeader.js';
|
|
14
|
-
export { useControlledTableNavigation } from './useControlledTableNavigation.js';
|
|
14
|
+
export { isRowSelectionKey, useControlledTableNavigation } from './useControlledTableNavigation.js';
|
|
15
|
+
export { isNavigationKey, isPagingKey, useKeyboardNavigation } from './useKeyboardNavigation.js';
|
|
15
16
|
export { isShowColumnSettings, isShowTableSettings, useTableModel } from './useTableModel.js';
|
|
16
17
|
export { noScrolling, useTableScroll } from './useTableScroll.js';
|
|
17
18
|
export { useTableViewport } from './useTableViewport.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
package/esm/moving-window.js
CHANGED
|
@@ -1,28 +1,36 @@
|
|
|
1
1
|
import { WindowRange, isRowSelectedLast, metadataKeys } from '@vuu-ui/vuu-utils';
|
|
2
2
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
+
var __typeError = (msg) => {
|
|
5
|
+
throw TypeError(msg);
|
|
6
|
+
};
|
|
4
7
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
5
8
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
9
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
10
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
11
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
12
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
13
|
+
var _range;
|
|
6
14
|
const { SELECTED } = metadataKeys;
|
|
7
15
|
class MovingWindow {
|
|
8
16
|
constructor({ from, to }) {
|
|
9
17
|
__publicField(this, "data");
|
|
10
18
|
__publicField(this, "rowCount", 0);
|
|
11
|
-
|
|
19
|
+
__privateAdd(this, _range);
|
|
12
20
|
__publicField(this, "setRowCount", (rowCount) => {
|
|
13
21
|
if (rowCount < this.data.length) {
|
|
14
22
|
this.data.length = rowCount;
|
|
15
23
|
}
|
|
16
24
|
this.rowCount = rowCount;
|
|
17
25
|
});
|
|
18
|
-
this
|
|
26
|
+
__privateSet(this, _range, new WindowRange(from, to));
|
|
19
27
|
this.data = new Array(Math.max(0, to - from));
|
|
20
28
|
this.rowCount = 0;
|
|
21
29
|
}
|
|
22
30
|
add(data) {
|
|
23
31
|
const [index] = data;
|
|
24
32
|
if (this.isWithinRange(index)) {
|
|
25
|
-
const internalIndex = index - this.
|
|
33
|
+
const internalIndex = index - __privateGet(this, _range).from;
|
|
26
34
|
this.data[internalIndex] = data;
|
|
27
35
|
if (data[SELECTED]) {
|
|
28
36
|
const previousRow = this.data[internalIndex - 1];
|
|
@@ -34,14 +42,14 @@ class MovingWindow {
|
|
|
34
42
|
}
|
|
35
43
|
}
|
|
36
44
|
getAtIndex(index) {
|
|
37
|
-
return this.
|
|
45
|
+
return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
|
|
38
46
|
}
|
|
39
47
|
isWithinRange(index) {
|
|
40
|
-
return this.
|
|
48
|
+
return __privateGet(this, _range).isWithin(index);
|
|
41
49
|
}
|
|
42
50
|
setRange({ from, to }) {
|
|
43
|
-
if (from !== this.
|
|
44
|
-
const [overlapFrom, overlapTo] = this.
|
|
51
|
+
if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
|
|
52
|
+
const [overlapFrom, overlapTo] = __privateGet(this, _range).overlap(from, to);
|
|
45
53
|
const newData = new Array(Math.max(0, to - from));
|
|
46
54
|
for (let i = overlapFrom; i < overlapTo; i++) {
|
|
47
55
|
const data = this.getAtIndex(i);
|
|
@@ -51,14 +59,18 @@ class MovingWindow {
|
|
|
51
59
|
}
|
|
52
60
|
}
|
|
53
61
|
this.data = newData;
|
|
54
|
-
this.
|
|
55
|
-
this.
|
|
62
|
+
__privateGet(this, _range).from = from;
|
|
63
|
+
__privateGet(this, _range).to = to;
|
|
56
64
|
}
|
|
57
65
|
}
|
|
58
66
|
getSelectedRows() {
|
|
59
67
|
return this.data.filter((row) => row[SELECTED] !== 0);
|
|
60
68
|
}
|
|
69
|
+
get range() {
|
|
70
|
+
return __privateGet(this, _range);
|
|
71
|
+
}
|
|
61
72
|
}
|
|
73
|
+
_range = new WeakMap();
|
|
62
74
|
|
|
63
75
|
export { MovingWindow };
|
|
64
76
|
//# sourceMappingURL=moving-window.js.map
|
package/esm/moving-window.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n
|
|
1
|
+
{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n #range: WindowRange;\n\n constructor({ from, to }: VuuRange) {\n this.#range = new WindowRange(from, to);\n //internal data is always 0 based, we add range.from to determine an offset\n this.data = new Array(Math.max(0, to - from));\n this.rowCount = 0;\n }\n\n setRowCount = (rowCount: number) => {\n if (rowCount < this.data.length) {\n this.data.length = rowCount;\n }\n\n this.rowCount = rowCount;\n };\n\n add(data: DataSourceRow) {\n const [index] = data;\n if (this.isWithinRange(index)) {\n const internalIndex = index - this.#range.from;\n this.data[internalIndex] = data;\n\n // Hack until we can deal with this more elegantly. When we have a block\n // select operation, first row is selected (and updated via server), then\n // remaining rows are selected when we select the block-end row. We get an\n // update for all rows except first. Because we're extending the select status\n // on the client, we have to adjust the first row selected (its still selected\n // but is no longer the 'last selected row in block')\n // Maybe answer is to apply ALL the selection status code here, not in Viewport\n if (data[SELECTED]) {\n const previousRow = this.data[internalIndex - 1];\n if (isRowSelectedLast(previousRow)) {\n this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n this.data[internalIndex - 1][SELECTED] -= 4;\n }\n }\n }\n }\n\n getAtIndex(index: number) {\n return this.#range.isWithin(index) &&\n this.data[index - this.#range.from] != null\n ? this.data[index - this.#range.from]\n : undefined;\n }\n\n isWithinRange(index: number) {\n return this.#range.isWithin(index);\n }\n\n setRange({ from, to }: VuuRange) {\n if (from !== this.#range.from || to !== this.#range.to) {\n const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n const newData = new Array(Math.max(0, to - from));\n for (let i = overlapFrom; i < overlapTo; i++) {\n const data = this.getAtIndex(i);\n if (data) {\n const index = i - from;\n newData[index] = data;\n }\n }\n this.data = newData;\n this.#range.from = from;\n this.#range.to = to;\n }\n }\n\n getSelectedRows() {\n return this.data.filter((row) => row[SELECTED] !== 0);\n }\n\n get range() {\n return this.#range;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationControl.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
|
+
import { Pagination, GoToInput, Paginator } from '@salt-ds/core';
|
|
5
|
+
import cx from 'clsx';
|
|
6
|
+
import { usePagination } from './usePagination.js';
|
|
7
|
+
import paginationControlCss from './PaginationControl.css.js';
|
|
8
|
+
import { forwardRef } from 'react';
|
|
9
|
+
|
|
10
|
+
const classBase = "vuuPaginationControl";
|
|
11
|
+
const PaginationControl = forwardRef(function PaginationControl2({ className, dataSource, ...htmlAttributes }, forwardedRef) {
|
|
12
|
+
const targetWindow = useWindow();
|
|
13
|
+
useComponentCssInjection({
|
|
14
|
+
testId: "vuu-table",
|
|
15
|
+
css: paginationControlCss,
|
|
16
|
+
window: targetWindow
|
|
17
|
+
});
|
|
18
|
+
const { onPageChange, pageCount } = usePagination({
|
|
19
|
+
dataSource
|
|
20
|
+
});
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
...htmlAttributes,
|
|
25
|
+
className: cx(classBase, className),
|
|
26
|
+
ref: forwardedRef,
|
|
27
|
+
children: /* @__PURE__ */ jsxs(Pagination, { count: pageCount, onPageChange, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(GoToInput, {}),
|
|
29
|
+
/* @__PURE__ */ jsx(Paginator, {})
|
|
30
|
+
] })
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
export { PaginationControl };
|
|
36
|
+
//# sourceMappingURL=PaginationControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n extends HtmlHTMLAttributes<HTMLDivElement> {\n dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n HTMLDivElement,\n PaginationControlProps\n>(function PaginationControl(\n { className, dataSource, ...htmlAttributes },\n forwardedRef,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: paginationControlCss,\n window: targetWindow,\n });\n\n const { onPageChange, pageCount } = usePagination({\n dataSource,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n >\n <Pagination count={pageCount} onPageChange={onPageChange}>\n <GoToInput />\n <Paginator />\n </Pagination>\n </div>\n );\n});\n"],"names":["PaginationControl"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAOL,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAA,IAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,4BACV,SAAU,EAAA,EAAA,CAAA;AAAA,OACb,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { useState, useMemo, useCallback } from 'react';
|
|
2
|
+
|
|
3
|
+
const getPageCount = (dataSource) => {
|
|
4
|
+
const { range, size } = dataSource;
|
|
5
|
+
const pageSize = range.to - range.from;
|
|
6
|
+
if (pageSize > 0) {
|
|
7
|
+
return Math.ceil(size / pageSize);
|
|
8
|
+
} else {
|
|
9
|
+
return 0;
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const usePagination = ({ dataSource }) => {
|
|
13
|
+
const [pageCount, setPageCount] = useState(getPageCount(dataSource));
|
|
14
|
+
useMemo(() => {
|
|
15
|
+
dataSource.on("page-count", (n) => setPageCount(n));
|
|
16
|
+
}, [dataSource]);
|
|
17
|
+
const handlePageChange = useCallback(
|
|
18
|
+
(_evt, page) => {
|
|
19
|
+
const { range } = dataSource;
|
|
20
|
+
const pageSize = range.to - range.from;
|
|
21
|
+
const firstRow = pageSize * (page - 1);
|
|
22
|
+
console.log(
|
|
23
|
+
`set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`
|
|
24
|
+
);
|
|
25
|
+
dataSource.range = { from: firstRow, to: firstRow + pageSize };
|
|
26
|
+
},
|
|
27
|
+
[dataSource]
|
|
28
|
+
);
|
|
29
|
+
return {
|
|
30
|
+
onPageChange: handlePageChange,
|
|
31
|
+
pageCount
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export { usePagination };
|
|
36
|
+
//# sourceMappingURL=usePagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n const { range, size } = dataSource;\n const pageSize = range.to - range.from;\n if (pageSize > 0) {\n return Math.ceil(size / pageSize);\n } else {\n return 0;\n }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n useMemo(() => {\n dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n }, [dataSource]);\n\n const handlePageChange = useCallback(\n (_evt: SyntheticEvent, page: number) => {\n const { range } = dataSource;\n const pageSize = range.to - range.from;\n const firstRow = pageSize * (page - 1);\n console.log(\n `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n );\n dataSource.range = { from: firstRow, to: firstRow + pageSize };\n },\n [dataSource],\n );\n\n return {\n onPageChange: handlePageChange,\n pageCount,\n };\n};\n"],"names":[],"mappings":";;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA,CAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAI,QAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA,CAAA;AAE3E,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA,CAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA,CAAA;AACpC,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,UAAA,EAAa,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,UAAU,EAAI,EAAA,QAAA,GAAW,QAAS,EAAC,CAAC,CAAA,CAAA;AAAA,OAC1E,CAAA;AACA,MAAA,UAAA,CAAW,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,EAAA,EAAI,WAAW,QAAS,EAAA,CAAA;AAAA,KAC/D;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
package/esm/table-dom-utils.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
1
|
+
const NULL_CELL_POS = [-1, -1];
|
|
2
|
+
const headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx + 1}']`;
|
|
3
|
+
const dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [aria-colindex='${colIdx + 1}']`;
|
|
3
4
|
const getTableCell = (containerRef, [rowIdx, colIdx]) => {
|
|
4
5
|
const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
|
|
5
6
|
const cell = containerRef.current?.querySelector(
|
|
@@ -20,17 +21,70 @@ const cellDropdownShowing = (cell) => {
|
|
|
20
21
|
return false;
|
|
21
22
|
};
|
|
22
23
|
const cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
const getIndexFromRowElement = (rowElement) => {
|
|
25
|
+
const rowIndex = rowElement?.ariaRowIndex;
|
|
26
|
+
if (rowIndex != null) {
|
|
27
|
+
const index = parseInt(rowIndex) - 1;
|
|
28
|
+
if (!isNaN(index)) {
|
|
29
|
+
return index;
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
return -1;
|
|
31
|
-
}
|
|
33
|
+
};
|
|
34
|
+
const getIndexFromCellElement = (cellElement) => {
|
|
35
|
+
const colIndex = cellElement?.ariaColIndex;
|
|
36
|
+
if (colIndex != null) {
|
|
37
|
+
const index = parseInt(colIndex) - 1;
|
|
38
|
+
if (!isNaN(index)) {
|
|
39
|
+
return index;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return -1;
|
|
43
|
+
};
|
|
44
|
+
const getTableCellPos = (tableCell) => {
|
|
45
|
+
const colIdx = getIndexFromCellElement(tableCell);
|
|
46
|
+
if (tableCell.role === "columnHeader") {
|
|
47
|
+
return [-1, colIdx];
|
|
48
|
+
} else {
|
|
49
|
+
const focusedRow = tableCell.closest("[role='row']");
|
|
50
|
+
if (focusedRow) {
|
|
51
|
+
return [getIndexFromRowElement(focusedRow), colIdx];
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return NULL_CELL_POS;
|
|
55
|
+
};
|
|
32
56
|
const closestRow = (el) => el.closest('[role="row"]');
|
|
33
|
-
const closestRowIndex = (el) =>
|
|
57
|
+
const closestRowIndex = (el) => getIndexFromRowElement(closestRow(el));
|
|
58
|
+
function getNextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
|
|
59
|
+
if (key === "ArrowUp") {
|
|
60
|
+
if (rowIdx > -1) {
|
|
61
|
+
return [rowIdx - 1, colIdx];
|
|
62
|
+
} else {
|
|
63
|
+
return [rowIdx, colIdx];
|
|
64
|
+
}
|
|
65
|
+
} else if (key === "ArrowDown") {
|
|
66
|
+
if (rowIdx === -1) {
|
|
67
|
+
return [0, colIdx];
|
|
68
|
+
} else if (rowIdx === rowCount - 1) {
|
|
69
|
+
return [rowIdx, colIdx];
|
|
70
|
+
} else {
|
|
71
|
+
return [rowIdx + 1, colIdx];
|
|
72
|
+
}
|
|
73
|
+
} else if (key === "ArrowRight") {
|
|
74
|
+
if (colIdx < columnCount - 1) {
|
|
75
|
+
return [rowIdx, colIdx + 1];
|
|
76
|
+
} else {
|
|
77
|
+
return [rowIdx, colIdx];
|
|
78
|
+
}
|
|
79
|
+
} else if (key === "ArrowLeft") {
|
|
80
|
+
if (colIdx > 0) {
|
|
81
|
+
return [rowIdx, colIdx - 1];
|
|
82
|
+
} else {
|
|
83
|
+
return [rowIdx, colIdx];
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
return [rowIdx, colIdx];
|
|
87
|
+
}
|
|
34
88
|
const NO_SCROLL_NECESSARY = [void 0, void 0];
|
|
35
89
|
const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
|
|
36
90
|
if (contentContainer) {
|
|
@@ -53,5 +107,5 @@ const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer =
|
|
|
53
107
|
}
|
|
54
108
|
};
|
|
55
109
|
|
|
56
|
-
export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery,
|
|
110
|
+
export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getIndexFromCellElement, getIndexFromRowElement, getNextCellPos, getTableCell, getTableCellPos, headerCellQuery, howFarIsRowOutsideViewport };
|
|
57
111
|
//# sourceMappingURL=table-dom-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell
|
|
1
|
+
{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx + 1}']`;\n\nexport const dataCellQuery = (rowIdx: number, colIdx: number) =>\n `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [aria-colindex='${colIdx + 1}']`;\n\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement>,\n [rowIdx, colIdx]: CellPos,\n) => {\n const cssQuery =\n rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);\n const cell = containerRef.current?.querySelector(\n cssQuery,\n ) as HTMLTableCellElement;\n\n if (cellIsEditable(cell)) {\n // Dropdown gets focus, Input does not\n const focusableContent = cell.querySelector(\"button\") as HTMLElement;\n return focusableContent || cell;\n } else {\n return cell;\n }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n if (cellIsEditable(cell)) {\n return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n }\n return false;\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getIndexFromRowElement = (rowElement: HTMLElement | null) => {\n const rowIndex = rowElement?.ariaRowIndex;\n if (rowIndex != null) {\n const index = parseInt(rowIndex) - 1;\n if (!isNaN(index)) {\n return index;\n }\n }\n return -1;\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) => {\n const colIndex = cellElement?.ariaColIndex;\n if (colIndex != null) {\n const index = parseInt(colIndex) - 1;\n if (!isNaN(index)) {\n return index;\n }\n }\n return -1;\n};\n\nexport const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n const colIdx = getIndexFromCellElement(tableCell);\n if (tableCell.role === \"columnHeader\") {\n return [-1, colIdx];\n } else {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n if (focusedRow) {\n return [getIndexFromRowElement(focusedRow), colIdx];\n }\n }\n return NULL_CELL_POS;\n};\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n getIndexFromRowElement(closestRow(el));\n\nexport function getNextCellPos(\n key: ArrowKey,\n [rowIdx, colIdx]: CellPos,\n columnCount: number,\n rowCount: number,\n): CellPos {\n if (key === \"ArrowUp\") {\n if (rowIdx > -1) {\n return [rowIdx - 1, colIdx];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowDown\") {\n if (rowIdx === -1) {\n return [0, colIdx];\n } else if (rowIdx === rowCount - 1) {\n return [rowIdx, colIdx];\n } else {\n return [rowIdx + 1, colIdx];\n }\n } else if (key === \"ArrowRight\") {\n if (colIdx < columnCount - 1) {\n return [rowIdx, colIdx + 1];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowLeft\") {\n if (colIdx > 0) {\n return [rowIdx, colIdx - 1];\n } else {\n return [rowIdx, colIdx];\n }\n }\n return [rowIdx, colIdx];\n}\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n rowEl: HTMLElement,\n totalHeaderHeight: number,\n contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n //TODO lots of scope for optimisation here\n if (contentContainer) {\n // TODO take totalHeaderHeight into consideration\n const viewport = contentContainer?.getBoundingClientRect();\n const upperBoundary = viewport.top + totalHeaderHeight;\n const row = rowEl.getBoundingClientRect();\n if (row) {\n if (row.bottom > viewport.bottom) {\n return [\"down\", row.bottom - viewport.bottom];\n } else if (row.top < upperBoundary) {\n return [\"up\", row.top - upperBoundary];\n } else {\n return NO_SCROLL_NECESSARY;\n }\n } else {\n throw Error(\"Whats going on, row not found\");\n }\n } else {\n throw Error(\"Whats going on, scrollbar container not found\");\n }\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ const useTableHeader = ({
|
|
|
14
14
|
}) => {
|
|
15
15
|
const containerRef = useRef(null);
|
|
16
16
|
const scrollingContainerRef = useRef(null);
|
|
17
|
-
const { rowRef } = useMeasuredHeight({
|
|
17
|
+
const { measuredRef: rowRef } = useMeasuredHeight({
|
|
18
18
|
onHeightMeasured
|
|
19
19
|
});
|
|
20
20
|
const setContainerRef = useCallback((el) => {
|