@rowsncolumns/grid 9.0.4 → 13.2.33
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/LICENSE.md +100 -0
- package/Readme.md +53 -59
- package/dist/cjs/Cell.d.ts +35 -0
- package/dist/cjs/Cell.d.ts.map +1 -0
- package/dist/cjs/Cell.js +29 -0
- package/dist/{CellOverlay.d.ts → cjs/CellOverlay.d.ts} +5 -5
- package/dist/cjs/CellOverlay.d.ts.map +1 -0
- package/dist/cjs/CellOverlay.js +126 -0
- package/dist/cjs/Context.d.ts +8 -0
- package/dist/cjs/Context.d.ts.map +1 -0
- package/dist/cjs/Context.js +13 -0
- package/dist/{FillHandle.d.ts → cjs/FillHandle.d.ts} +2 -1
- package/dist/cjs/FillHandle.d.ts.map +1 -0
- package/dist/cjs/FillHandle.js +26 -0
- package/dist/cjs/Grid.d.ts +558 -0
- package/dist/cjs/Grid.d.ts.map +1 -0
- package/dist/cjs/Grid.js +2446 -0
- package/dist/{GridLine.d.ts → cjs/GridLine.d.ts} +2 -1
- package/dist/cjs/GridLine.d.ts.map +1 -0
- package/dist/cjs/GridLine.js +10 -0
- package/dist/cjs/Image.d.ts +11 -0
- package/dist/cjs/Image.d.ts.map +1 -0
- package/dist/cjs/Image.js +57 -0
- package/dist/cjs/MemoizedGrid.d.ts +49 -0
- package/dist/cjs/MemoizedGrid.d.ts.map +1 -0
- package/dist/cjs/MemoizedGrid.js +105 -0
- package/dist/cjs/Selection.d.ts +5 -0
- package/dist/cjs/Selection.d.ts.map +1 -0
- package/dist/cjs/Selection.js +10 -0
- package/dist/{helpers.d.ts → cjs/helpers.d.ts} +59 -39
- package/dist/cjs/helpers.d.ts.map +1 -0
- package/dist/cjs/helpers.js +1409 -0
- package/dist/{hooks → cjs/hooks}/useCopyPaste.d.ts +3 -2
- package/dist/cjs/hooks/useCopyPaste.d.ts.map +1 -0
- package/dist/cjs/hooks/useCopyPaste.js +230 -0
- package/dist/{hooks → cjs/hooks}/useEditable.d.ts +21 -8
- package/dist/cjs/hooks/useEditable.d.ts.map +1 -0
- package/dist/cjs/hooks/useEditable.js +491 -0
- package/dist/{hooks → cjs/hooks}/useFilter.d.ts +3 -2
- package/dist/cjs/hooks/useFilter.d.ts.map +1 -0
- package/dist/cjs/hooks/useFilter.js +97 -0
- package/dist/{hooks → cjs/hooks}/useImage.d.ts +1 -0
- package/dist/cjs/hooks/useImage.d.ts.map +1 -0
- package/dist/cjs/hooks/useImage.js +80 -0
- package/dist/{hooks → cjs/hooks}/usePagination.d.ts +3 -2
- package/dist/cjs/hooks/usePagination.d.ts.map +1 -0
- package/dist/cjs/hooks/usePagination.js +53 -0
- package/dist/{hooks → cjs/hooks}/useSizer.d.ts +28 -29
- package/dist/cjs/hooks/useSizer.d.ts.map +1 -0
- package/dist/cjs/hooks/useSizer.js +176 -0
- package/dist/{hooks → cjs/hooks}/useTooltip.d.ts +2 -1
- package/dist/cjs/hooks/useTooltip.d.ts.map +1 -0
- package/dist/cjs/hooks/useTooltip.js +82 -0
- package/dist/{hooks → cjs/hooks}/useUndo.d.ts +2 -1
- package/dist/cjs/hooks/useUndo.d.ts.map +1 -0
- package/dist/cjs/hooks/useUndo.js +87 -0
- package/dist/cjs/index.d.ts +19 -0
- package/dist/cjs/index.d.ts.map +1 -0
- package/dist/cjs/index.js +29 -0
- package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -0
- package/dist/{types.d.ts → cjs/types.d.ts} +8 -3
- package/dist/cjs/types.d.ts.map +1 -0
- package/dist/{types.js → cjs/types.js} +7 -8
- package/dist/cjs/utils.d.ts +9 -0
- package/dist/cjs/utils.d.ts.map +1 -0
- package/dist/cjs/utils.js +58 -0
- package/dist/cjs/vitest.config.d.ts +3 -0
- package/dist/cjs/vitest.config.d.ts.map +1 -0
- package/dist/cjs/vitest.config.js +24 -0
- package/dist/esm/Cell.d.ts +35 -0
- package/dist/esm/Cell.d.ts.map +1 -0
- package/dist/esm/Cell.js +24 -0
- package/dist/esm/CellOverlay.d.ts +21 -0
- package/dist/esm/CellOverlay.d.ts.map +1 -0
- package/dist/esm/CellOverlay.js +120 -0
- package/dist/esm/Context.d.ts +8 -0
- package/dist/esm/Context.d.ts.map +1 -0
- package/dist/esm/Context.js +9 -0
- package/dist/esm/FillHandle.d.ts +8 -0
- package/dist/esm/FillHandle.d.ts.map +1 -0
- package/dist/{FillHandle.js → esm/FillHandle.js} +5 -11
- package/dist/esm/Grid.d.ts +558 -0
- package/dist/esm/Grid.d.ts.map +1 -0
- package/dist/esm/Grid.js +2451 -0
- package/dist/esm/GridLine.d.ts +5 -0
- package/dist/esm/GridLine.d.ts.map +1 -0
- package/dist/esm/GridLine.js +7 -0
- package/dist/esm/Image.d.ts +11 -0
- package/dist/esm/Image.d.ts.map +1 -0
- package/dist/esm/Image.js +53 -0
- package/dist/esm/MemoizedGrid.d.ts +49 -0
- package/dist/esm/MemoizedGrid.d.ts.map +1 -0
- package/dist/esm/MemoizedGrid.js +98 -0
- package/dist/esm/Selection.d.ts +5 -0
- package/dist/esm/Selection.d.ts.map +1 -0
- package/dist/esm/Selection.js +7 -0
- package/dist/esm/helpers.d.ts +281 -0
- package/dist/esm/helpers.d.ts.map +1 -0
- package/dist/esm/helpers.js +1260 -0
- package/dist/esm/hooks/useCopyPaste.d.ts +53 -0
- package/dist/esm/hooks/useCopyPaste.d.ts.map +1 -0
- package/dist/{hooks → esm/hooks}/useCopyPaste.js +40 -46
- package/dist/esm/hooks/useEditable.d.ts +253 -0
- package/dist/esm/hooks/useEditable.d.ts.map +1 -0
- package/dist/esm/hooks/useEditable.js +482 -0
- package/dist/esm/hooks/useFilter.d.ts +69 -0
- package/dist/esm/hooks/useFilter.d.ts.map +1 -0
- package/dist/{hooks → esm/hooks}/useFilter.js +22 -42
- package/dist/esm/hooks/useImage.d.ts +13 -0
- package/dist/esm/hooks/useImage.d.ts.map +1 -0
- package/dist/esm/hooks/useImage.js +76 -0
- package/dist/esm/hooks/usePagination.d.ts +69 -0
- package/dist/esm/hooks/usePagination.d.ts.map +1 -0
- package/dist/esm/hooks/usePagination.js +47 -0
- package/dist/esm/hooks/useSizer.d.ts +114 -0
- package/dist/esm/hooks/useSizer.d.ts.map +1 -0
- package/dist/esm/hooks/useSizer.js +176 -0
- package/dist/esm/hooks/useTooltip.d.ts +43 -0
- package/dist/esm/hooks/useTooltip.d.ts.map +1 -0
- package/dist/esm/hooks/useTooltip.js +80 -0
- package/dist/esm/hooks/useUndo.d.ts +36 -0
- package/dist/esm/hooks/useUndo.d.ts.map +1 -0
- package/dist/{hooks → esm/hooks}/useUndo.js +16 -25
- package/dist/esm/index.d.ts +19 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +17 -0
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -0
- package/dist/esm/types.d.ts +70 -0
- package/dist/esm/types.d.ts.map +1 -0
- package/dist/esm/types.js +68 -0
- package/dist/esm/utils.d.ts +9 -0
- package/dist/esm/utils.d.ts.map +1 -0
- package/dist/esm/utils.js +104 -0
- package/dist/esm/vitest.config.d.ts +3 -0
- package/dist/esm/vitest.config.d.ts.map +1 -0
- package/dist/esm/vitest.config.js +22 -0
- package/package.json +28 -29
- package/dist/Cell.d.ts +0 -23
- package/dist/Cell.js +0 -55
- package/dist/Cell.js.map +0 -1
- package/dist/CellOverlay.js +0 -116
- package/dist/CellOverlay.js.map +0 -1
- package/dist/FillHandle.js.map +0 -1
- package/dist/Grid.d.ts +0 -385
- package/dist/Grid.js +0 -1684
- package/dist/Grid.js.map +0 -1
- package/dist/GridLine.js +0 -13
- package/dist/GridLine.js.map +0 -1
- package/dist/Image.d.ts +0 -8
- package/dist/Image.js +0 -50
- package/dist/Image.js.map +0 -1
- package/dist/Selection.d.ts +0 -4
- package/dist/Selection.js +0 -9
- package/dist/Selection.js.map +0 -1
- package/dist/helpers.js +0 -1033
- package/dist/helpers.js.map +0 -1
- package/dist/hooks/useCopyPaste.js.map +0 -1
- package/dist/hooks/useEditable.js +0 -477
- package/dist/hooks/useEditable.js.map +0 -1
- package/dist/hooks/useFilter.js.map +0 -1
- package/dist/hooks/useImage.js +0 -42
- package/dist/hooks/useImage.js.map +0 -1
- package/dist/hooks/usePagination.js +0 -73
- package/dist/hooks/usePagination.js.map +0 -1
- package/dist/hooks/useSelection.d.ts +0 -175
- package/dist/hooks/useSelection.js +0 -982
- package/dist/hooks/useSelection.js.map +0 -1
- package/dist/hooks/useSizer.js +0 -150
- package/dist/hooks/useSizer.js.map +0 -1
- package/dist/hooks/useTooltip.js +0 -106
- package/dist/hooks/useTooltip.js.map +0 -1
- package/dist/hooks/useTouch.d.ts +0 -21
- package/dist/hooks/useTouch.js +0 -73
- package/dist/hooks/useTouch.js.map +0 -1
- package/dist/hooks/useUndo.js.map +0 -1
- package/dist/index.d.ts +0 -25
- package/dist/index.js +0 -61
- package/dist/index.js.map +0 -1
- package/dist/types.js.map +0 -1
- package/dist/utils.d.ts +0 -8
- package/dist/utils.js +0 -153
- package/dist/utils.js.map +0 -1
- package/src/Cell.tsx +0 -100
- package/src/CellOverlay.tsx +0 -191
- package/src/FillHandle.tsx +0 -37
- package/src/Grid.tsx +0 -2677
- package/src/GridLine.tsx +0 -23
- package/src/Image.tsx +0 -43
- package/src/Selection.tsx +0 -9
- package/src/helpers.ts +0 -1455
- package/src/hooks/useCopyPaste.ts +0 -265
- package/src/hooks/useEditable.tsx +0 -945
- package/src/hooks/useFilter.tsx +0 -233
- package/src/hooks/useImage.ts +0 -57
- package/src/hooks/usePagination.tsx +0 -153
- package/src/hooks/useSelection.ts +0 -1440
- package/src/hooks/useSizer.ts +0 -312
- package/src/hooks/useTooltip.tsx +0 -172
- package/src/hooks/useTouch.ts +0 -116
- package/src/hooks/useUndo.ts +0 -134
- package/src/index.tsx +0 -46
- package/src/tests/Grid.spec.tsx +0 -47
- package/src/tests/helpers.test.ts +0 -292
- package/src/tests/usePagination.test.ts +0 -28
- package/src/tests/useSelection.test.ts +0 -27
- package/src/tests/useUndo.test.ts +0 -73
- package/src/types.ts +0 -69
- package/src/utils.tsx +0 -287
|
@@ -1,982 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const react_1 = require("react");
|
|
4
|
-
const helpers_1 = require("./../helpers");
|
|
5
|
-
const types_1 = require("./../types");
|
|
6
|
-
const EMPTY_SELECTION = [];
|
|
7
|
-
const defaultIsHidden = (i) => false;
|
|
8
|
-
const defaultSelectionSpan = () => true;
|
|
9
|
-
/**
|
|
10
|
-
* Hook to enable selection in datagrid
|
|
11
|
-
* @param initialSelection
|
|
12
|
-
*/
|
|
13
|
-
const useSelection = ({ gridRef, initialActiveCell = null, initialSelections = EMPTY_SELECTION, columnCount = 0, rowCount = 0, selectionPolicy = "multiple", newSelectionMode = "clear", allowDeselectSelection = true, onFill, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, alwaysScrollToActiveCell = true, selectionTopBound = 0, selectionBottomBound = rowCount - 1, selectionLeftBound = 0, selectionRightBound = columnCount - 1, mouseDownInterceptor, mouseMoveInterceptor, mergedCells = [], canSelectionSpanMergedCells = defaultSelectionSpan, getValue, onSelectionMove, }) => {
|
|
14
|
-
const [activeCell, setActiveCell] = (0, react_1.useState)(initialActiveCell);
|
|
15
|
-
const [selections, setSelections] = (0, react_1.useState)(initialSelections);
|
|
16
|
-
const [fillSelection, setFillSelection] = (0, react_1.useState)();
|
|
17
|
-
const selectionStart = (0, react_1.useRef)(null);
|
|
18
|
-
const selectionEnd = (0, react_1.useRef)(null);
|
|
19
|
-
const isSelecting = (0, react_1.useRef)(false);
|
|
20
|
-
const isFilling = (0, react_1.useRef)(false);
|
|
21
|
-
const firstActiveCell = (0, react_1.useRef)(null);
|
|
22
|
-
const fillSelectionRef = (0, react_1.useRef)();
|
|
23
|
-
/* Drag drop selection */
|
|
24
|
-
const [_, forceRender] = (0, react_1.useReducer)((s) => s + 1, 0);
|
|
25
|
-
const isDragging = (0, react_1.useRef)(false);
|
|
26
|
-
const hasUserMovedSelection = (0, react_1.useRef)(false);
|
|
27
|
-
const initialDraggedSelection = (0, react_1.useRef)();
|
|
28
|
-
const initialDraggedCell = (0, react_1.useRef)();
|
|
29
|
-
const draggedSelection = (0, react_1.useRef)();
|
|
30
|
-
const draggedSelectionIndex = (0, react_1.useRef)();
|
|
31
|
-
/**
|
|
32
|
-
* Need to store in ref because on mousemove and mouseup event that are
|
|
33
|
-
* registered in document
|
|
34
|
-
*/
|
|
35
|
-
const activeCellRef = (0, react_1.useRef)(activeCell);
|
|
36
|
-
const activeSelectionsRef = (0, react_1.useRef)(selections);
|
|
37
|
-
const mergedCellsRef = (0, react_1.useRef)(mergedCells);
|
|
38
|
-
(0, react_1.useEffect)(() => {
|
|
39
|
-
activeCellRef.current = activeCell;
|
|
40
|
-
}, [activeCell]);
|
|
41
|
-
(0, react_1.useEffect)(() => {
|
|
42
|
-
activeSelectionsRef.current = selections;
|
|
43
|
-
}, [selections]);
|
|
44
|
-
(0, react_1.useEffect)(() => {
|
|
45
|
-
mergedCellsRef.current = mergedCells;
|
|
46
|
-
}, [mergedCells]);
|
|
47
|
-
(0, react_1.useEffect)(() => {
|
|
48
|
-
fillSelectionRef.current = fillSelection;
|
|
49
|
-
}, [fillSelection]);
|
|
50
|
-
/* Check if cell is out of bounds */
|
|
51
|
-
const isCellOutOfBounds = (0, react_1.useCallback)((cell) => {
|
|
52
|
-
return (cell.rowIndex < selectionTopBound ||
|
|
53
|
-
cell.columnIndex < selectionLeftBound);
|
|
54
|
-
}, [selectionTopBound, selectionLeftBound]);
|
|
55
|
-
/* New selection */
|
|
56
|
-
const newSelection = (start, end = start) => {
|
|
57
|
-
/* Validate bounds */
|
|
58
|
-
if (isCellOutOfBounds(start)) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
selectionStart.current = start;
|
|
62
|
-
selectionEnd.current = end;
|
|
63
|
-
const bounds = selectionFromStartEnd(start, end);
|
|
64
|
-
if (!bounds)
|
|
65
|
-
return;
|
|
66
|
-
const coords = { rowIndex: bounds.top, columnIndex: bounds.left };
|
|
67
|
-
/* Keep track of first cell that was selected by user */
|
|
68
|
-
setActiveCell(coords);
|
|
69
|
-
if (newSelectionMode === "clear") {
|
|
70
|
-
firstActiveCell.current = coords;
|
|
71
|
-
clearSelections();
|
|
72
|
-
}
|
|
73
|
-
else if (newSelectionMode === "modify") {
|
|
74
|
-
modifySelection(coords);
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
appendSelection(coords);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* selection object from start, end
|
|
82
|
-
* @param start
|
|
83
|
-
* @param end
|
|
84
|
-
*/
|
|
85
|
-
const selectionFromStartEnd = (start, end) => {
|
|
86
|
-
if (!(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
87
|
-
return null;
|
|
88
|
-
const spanMerges = canSelectionSpanMergedCells === null || canSelectionSpanMergedCells === void 0 ? void 0 : canSelectionSpanMergedCells(start, end);
|
|
89
|
-
return (0, helpers_1.cellRangeToBounds)(start, end, spanMerges, gridRef.current.getCellBounds);
|
|
90
|
-
};
|
|
91
|
-
/* Modify current selection */
|
|
92
|
-
const modifySelection = (coords, setInProgress) => {
|
|
93
|
-
if (selectionPolicy === "single") {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
if (!selectionStart.current)
|
|
97
|
-
return;
|
|
98
|
-
if (isCellOutOfBounds(coords)) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
selectionEnd.current = coords;
|
|
102
|
-
const bounds = selectionFromStartEnd(selectionStart.current, coords);
|
|
103
|
-
if (!bounds)
|
|
104
|
-
return;
|
|
105
|
-
/**
|
|
106
|
-
* 1. Multiple selections on mousedown/mousemove
|
|
107
|
-
* 2. Move the activeCell to newly selection. Done by appendSelection
|
|
108
|
-
*/
|
|
109
|
-
setSelections((prevSelection) => {
|
|
110
|
-
const len = prevSelection.length;
|
|
111
|
-
if (!len) {
|
|
112
|
-
return [{ bounds, inProgress: setInProgress ? true : false }];
|
|
113
|
-
}
|
|
114
|
-
return prevSelection.map((sel, i) => {
|
|
115
|
-
if (len - 1 === i) {
|
|
116
|
-
return {
|
|
117
|
-
...sel,
|
|
118
|
-
bounds,
|
|
119
|
-
inProgress: setInProgress ? true : false,
|
|
120
|
-
};
|
|
121
|
-
}
|
|
122
|
-
return sel;
|
|
123
|
-
});
|
|
124
|
-
});
|
|
125
|
-
};
|
|
126
|
-
/* Adds a new selection, CMD key */
|
|
127
|
-
const appendSelection = (start, end = start) => {
|
|
128
|
-
if (selectionPolicy !== "multiple") {
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
if (!start)
|
|
132
|
-
return;
|
|
133
|
-
/* Validate bounds */
|
|
134
|
-
if (isCellOutOfBounds(start)) {
|
|
135
|
-
return;
|
|
136
|
-
}
|
|
137
|
-
selectionStart.current = start;
|
|
138
|
-
selectionEnd.current = end;
|
|
139
|
-
const bounds = selectionFromStartEnd(start, end);
|
|
140
|
-
if (!bounds)
|
|
141
|
-
return;
|
|
142
|
-
setActiveCell({ rowIndex: bounds.top, columnIndex: bounds.left });
|
|
143
|
-
setSelections((prev) => [...prev, { bounds }]);
|
|
144
|
-
};
|
|
145
|
-
const removeSelectionByIndex = (0, react_1.useCallback)((index) => {
|
|
146
|
-
const newSelection = selections.filter((_, idx) => idx !== index);
|
|
147
|
-
setSelections(newSelection);
|
|
148
|
-
return newSelection;
|
|
149
|
-
}, [selections]);
|
|
150
|
-
const clearSelections = () => {
|
|
151
|
-
setSelections(EMPTY_SELECTION);
|
|
152
|
-
};
|
|
153
|
-
const getPossibleActiveCellFromSelections = (selections) => {
|
|
154
|
-
if (!selections.length)
|
|
155
|
-
return null;
|
|
156
|
-
const { bounds } = selections[selections.length - 1];
|
|
157
|
-
return {
|
|
158
|
-
rowIndex: bounds.top,
|
|
159
|
-
columnIndex: bounds.left,
|
|
160
|
-
};
|
|
161
|
-
};
|
|
162
|
-
const cellIndexInSelection = (cell, selections) => {
|
|
163
|
-
const id = (0, helpers_1.cellIdentifier)(Math.max(selectionTopBound, cell.rowIndex), Math.max(selectionLeftBound, cell.columnIndex));
|
|
164
|
-
return selections.findIndex((sel) => {
|
|
165
|
-
const boundedCells = (0, helpers_1.getBoundedCells)(sel.bounds);
|
|
166
|
-
return boundedCells.has(id);
|
|
167
|
-
});
|
|
168
|
-
};
|
|
169
|
-
const cellEqualsSelection = (cell, selections) => {
|
|
170
|
-
if (cell === null)
|
|
171
|
-
return false;
|
|
172
|
-
return selections.some((sel) => {
|
|
173
|
-
return (sel.bounds.left === cell.columnIndex &&
|
|
174
|
-
sel.bounds.top === cell.rowIndex &&
|
|
175
|
-
sel.bounds.right === cell.columnIndex &&
|
|
176
|
-
sel.bounds.bottom === cell.rowIndex);
|
|
177
|
-
});
|
|
178
|
-
};
|
|
179
|
-
const boundsSubsetOfSelection = (bounds, selection) => {
|
|
180
|
-
return (bounds.top >= selection.top &&
|
|
181
|
-
bounds.bottom <= selection.bottom &&
|
|
182
|
-
bounds.left >= selection.left &&
|
|
183
|
-
bounds.right <= selection.right);
|
|
184
|
-
};
|
|
185
|
-
/**
|
|
186
|
-
* Triggers a new selection start
|
|
187
|
-
*/
|
|
188
|
-
const handleMouseDown = (0, react_1.useCallback)((e) => {
|
|
189
|
-
var _a;
|
|
190
|
-
/* Exit early if grid is not initialized */
|
|
191
|
-
if (!gridRef || !gridRef.current)
|
|
192
|
-
return;
|
|
193
|
-
const coords = gridRef.current.getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
|
|
194
|
-
if (!coords)
|
|
195
|
-
return;
|
|
196
|
-
/* Check if its context menu click */
|
|
197
|
-
const isContextMenuClick = e.nativeEvent.which === types_1.MouseButtonCodes.right;
|
|
198
|
-
if (isContextMenuClick) {
|
|
199
|
-
const cellIndex = cellIndexInSelection(coords, selections);
|
|
200
|
-
if (cellIndex !== -1)
|
|
201
|
-
return;
|
|
202
|
-
}
|
|
203
|
-
const isShiftKey = e.nativeEvent.shiftKey;
|
|
204
|
-
const isMetaKey = e.nativeEvent.ctrlKey || e.nativeEvent.metaKey;
|
|
205
|
-
const allowMultiple = isMetaKey;
|
|
206
|
-
const allowDeselect = allowDeselectSelection;
|
|
207
|
-
const hasSelections = selections.length > 0;
|
|
208
|
-
const isDeselecting = isMetaKey && allowDeselect;
|
|
209
|
-
if (!isContextMenuClick && selectionPolicy !== "single") {
|
|
210
|
-
document.addEventListener("mouseup", handleMouseUp);
|
|
211
|
-
document.addEventListener("mousemove", handleMouseMove);
|
|
212
|
-
}
|
|
213
|
-
/* Activate selection mode */
|
|
214
|
-
isSelecting.current = true;
|
|
215
|
-
if ((mouseDownInterceptor === null || mouseDownInterceptor === void 0 ? void 0 : mouseDownInterceptor(e, coords, selectionStart, selectionEnd)) ===
|
|
216
|
-
false) {
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
219
|
-
/* Shift key */
|
|
220
|
-
if (isShiftKey) {
|
|
221
|
-
modifySelection(coords);
|
|
222
|
-
return;
|
|
223
|
-
}
|
|
224
|
-
/* Is the current cell same as active cell */
|
|
225
|
-
const isSameAsActiveCell = (0, helpers_1.isEqualCells)(coords, activeCell);
|
|
226
|
-
/* Command or Control key */
|
|
227
|
-
if (activeCell && allowMultiple) {
|
|
228
|
-
/**
|
|
229
|
-
* User is adding activeCell to selection
|
|
230
|
-
*
|
|
231
|
-
* 1. User is selecting and not de-selecting
|
|
232
|
-
* 2. User has not made any selection
|
|
233
|
-
* 3. Trying to add active cell to selection
|
|
234
|
-
*/
|
|
235
|
-
if (isSameAsActiveCell && (!isDeselecting || !hasSelections)) {
|
|
236
|
-
return;
|
|
237
|
-
}
|
|
238
|
-
/**
|
|
239
|
-
* User is manually trying to select multiple selections,
|
|
240
|
-
* So add the current active cell to the list
|
|
241
|
-
*/
|
|
242
|
-
if (isMetaKey && !hasSelections) {
|
|
243
|
-
appendSelection(activeCell);
|
|
244
|
-
}
|
|
245
|
-
/**
|
|
246
|
-
* Check if this cell has already been selected (only for manual deselect)
|
|
247
|
-
* Remove it from selection
|
|
248
|
-
*
|
|
249
|
-
* Future enhancements -> Split selection, so that 1 cell can be removed from range
|
|
250
|
-
*/
|
|
251
|
-
if (isMetaKey && allowDeselect) {
|
|
252
|
-
const cellIndex = cellIndexInSelection(coords, selections);
|
|
253
|
-
if (cellIndex !== -1) {
|
|
254
|
-
const newSelection = removeSelectionByIndex(cellIndex);
|
|
255
|
-
const nextActiveCell = getPossibleActiveCellFromSelections(newSelection);
|
|
256
|
-
if (nextActiveCell !== null) {
|
|
257
|
-
setActiveCell(nextActiveCell);
|
|
258
|
-
}
|
|
259
|
-
if (newSelection.length === 1 &&
|
|
260
|
-
cellEqualsSelection(nextActiveCell, newSelection)) {
|
|
261
|
-
/* Since we only have 1 cell, lets clear the selections and only keep activeCell */
|
|
262
|
-
clearSelections();
|
|
263
|
-
}
|
|
264
|
-
return;
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
/**
|
|
268
|
-
* TODO
|
|
269
|
-
* 1. Ability to remove selection
|
|
270
|
-
* 2. Ability to remove from selection area
|
|
271
|
-
* 3. Ability to switch activeCell if its part of removed selection
|
|
272
|
-
*/
|
|
273
|
-
appendSelection(coords);
|
|
274
|
-
return;
|
|
275
|
-
}
|
|
276
|
-
/**
|
|
277
|
-
* Scroll to the selected cell
|
|
278
|
-
*/
|
|
279
|
-
if (alwaysScrollToActiveCell) {
|
|
280
|
-
(_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(coords);
|
|
281
|
-
}
|
|
282
|
-
/**
|
|
283
|
-
* If user is selecting the same same,
|
|
284
|
-
* let not trigger another state change
|
|
285
|
-
*/
|
|
286
|
-
if (isSameAsActiveCell)
|
|
287
|
-
return;
|
|
288
|
-
/* Trigger new selection */
|
|
289
|
-
newSelection(coords);
|
|
290
|
-
}, [
|
|
291
|
-
activeCell,
|
|
292
|
-
selections,
|
|
293
|
-
selectionPolicy,
|
|
294
|
-
allowDeselectSelection,
|
|
295
|
-
alwaysScrollToActiveCell,
|
|
296
|
-
rowCount,
|
|
297
|
-
columnCount,
|
|
298
|
-
newSelectionMode,
|
|
299
|
-
]);
|
|
300
|
-
/**
|
|
301
|
-
* Mousemove handler
|
|
302
|
-
*/
|
|
303
|
-
const handleMouseMove = (0, react_1.useCallback)((e) => {
|
|
304
|
-
var _a;
|
|
305
|
-
/* Exit if user is not in selection mode */
|
|
306
|
-
if (!isSelecting.current || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
307
|
-
return;
|
|
308
|
-
const coords = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
|
|
309
|
-
if (!coords)
|
|
310
|
-
return;
|
|
311
|
-
if ((mouseMoveInterceptor === null || mouseMoveInterceptor === void 0 ? void 0 : mouseMoveInterceptor(e, coords, selectionStart, selectionEnd)) === false) {
|
|
312
|
-
return;
|
|
313
|
-
}
|
|
314
|
-
if ((0, helpers_1.isEqualCells)(firstActiveCell.current, coords)) {
|
|
315
|
-
return clearSelections();
|
|
316
|
-
}
|
|
317
|
-
modifySelection(coords, true);
|
|
318
|
-
(_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(coords);
|
|
319
|
-
}, []);
|
|
320
|
-
/**
|
|
321
|
-
* Mouse up handler
|
|
322
|
-
*/
|
|
323
|
-
const handleMouseUp = (0, react_1.useCallback)(() => {
|
|
324
|
-
/* Reset selection mode */
|
|
325
|
-
isSelecting.current = false;
|
|
326
|
-
/* Remove listener */
|
|
327
|
-
document.removeEventListener("mousemove", handleMouseMove);
|
|
328
|
-
document.removeEventListener("mouseup", handleMouseUp);
|
|
329
|
-
/* Update last selection */
|
|
330
|
-
setSelections((prevSelection) => {
|
|
331
|
-
const len = prevSelection.length;
|
|
332
|
-
if (!len)
|
|
333
|
-
return EMPTY_SELECTION;
|
|
334
|
-
return prevSelection.map((sel, i) => {
|
|
335
|
-
if (len - 1 === i) {
|
|
336
|
-
return {
|
|
337
|
-
...sel,
|
|
338
|
-
inProgress: false,
|
|
339
|
-
};
|
|
340
|
-
}
|
|
341
|
-
return sel;
|
|
342
|
-
});
|
|
343
|
-
});
|
|
344
|
-
}, []);
|
|
345
|
-
/**
|
|
346
|
-
* Navigate selection using keyboard
|
|
347
|
-
* @param direction
|
|
348
|
-
* @param modify
|
|
349
|
-
*/
|
|
350
|
-
const keyNavigate = (0, react_1.useCallback)((direction, modify, metaKeyPressed) => {
|
|
351
|
-
if (!selectionStart.current ||
|
|
352
|
-
!selectionEnd.current ||
|
|
353
|
-
!(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) ||
|
|
354
|
-
!activeCell)
|
|
355
|
-
return;
|
|
356
|
-
const currentCell = modify ? selectionEnd.current : activeCell;
|
|
357
|
-
var { rowIndex, columnIndex } = currentCell;
|
|
358
|
-
const isMergedCell = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.isMergedCell({
|
|
359
|
-
rowIndex,
|
|
360
|
-
columnIndex,
|
|
361
|
-
});
|
|
362
|
-
const currentBounds = gridRef.current.getCellBounds({
|
|
363
|
-
rowIndex,
|
|
364
|
-
columnIndex,
|
|
365
|
-
});
|
|
366
|
-
switch (direction) {
|
|
367
|
-
case types_1.Direction.Up:
|
|
368
|
-
if (isMergedCell)
|
|
369
|
-
rowIndex = currentBounds.top;
|
|
370
|
-
rowIndex = (0, helpers_1.clampIndex)(Math.max(rowIndex - 1, selectionTopBound), isHiddenRow, direction);
|
|
371
|
-
// Shift + Ctrl/Commmand
|
|
372
|
-
// TODO: Scroll to last contentful cell
|
|
373
|
-
if (metaKeyPressed) {
|
|
374
|
-
const startCell = {
|
|
375
|
-
...currentCell,
|
|
376
|
-
// Expand from the starting cell
|
|
377
|
-
columnIndex: selectionStart.current.columnIndex,
|
|
378
|
-
};
|
|
379
|
-
rowIndex = (0, helpers_1.findNextCellInDataRegion)(startCell, getValue, isHiddenRow, direction, selectionTopBound);
|
|
380
|
-
}
|
|
381
|
-
break;
|
|
382
|
-
case types_1.Direction.Down:
|
|
383
|
-
if (isMergedCell)
|
|
384
|
-
rowIndex = currentBounds.bottom;
|
|
385
|
-
rowIndex = (0, helpers_1.clampIndex)(Math.min(rowIndex + 1, selectionBottomBound), isHiddenRow, direction);
|
|
386
|
-
// Shift + Ctrl/Commmand
|
|
387
|
-
if (metaKeyPressed) {
|
|
388
|
-
const startCell = {
|
|
389
|
-
...currentCell,
|
|
390
|
-
// Expand from the starting cell
|
|
391
|
-
columnIndex: selectionStart.current.columnIndex,
|
|
392
|
-
};
|
|
393
|
-
rowIndex = (0, helpers_1.findNextCellInDataRegion)(startCell, getValue, isHiddenRow, direction, selectionBottomBound);
|
|
394
|
-
}
|
|
395
|
-
break;
|
|
396
|
-
case types_1.Direction.Left:
|
|
397
|
-
if (isMergedCell)
|
|
398
|
-
columnIndex = currentBounds.left;
|
|
399
|
-
columnIndex = (0, helpers_1.clampIndex)(Math.max(columnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
|
|
400
|
-
// Shift + Ctrl/Commmand
|
|
401
|
-
if (metaKeyPressed) {
|
|
402
|
-
const startCell = {
|
|
403
|
-
...currentCell,
|
|
404
|
-
// Expand from the starting cell
|
|
405
|
-
rowIndex: selectionStart.current.rowIndex,
|
|
406
|
-
};
|
|
407
|
-
columnIndex = (0, helpers_1.findNextCellInDataRegion)(startCell, getValue, isHiddenColumn, direction, selectionLeftBound);
|
|
408
|
-
}
|
|
409
|
-
break;
|
|
410
|
-
case types_1.Direction.Right:
|
|
411
|
-
if (isMergedCell)
|
|
412
|
-
columnIndex = currentBounds.right;
|
|
413
|
-
columnIndex = (0, helpers_1.clampIndex)(Math.min(columnIndex + 1, selectionRightBound), isHiddenColumn, direction);
|
|
414
|
-
// Shift + Ctrl/Commmand
|
|
415
|
-
if (metaKeyPressed) {
|
|
416
|
-
const startCell = {
|
|
417
|
-
...currentCell,
|
|
418
|
-
// Expand from the starting cell
|
|
419
|
-
rowIndex: selectionStart.current.rowIndex,
|
|
420
|
-
};
|
|
421
|
-
columnIndex = (0, helpers_1.findNextCellInDataRegion)(startCell, getValue, isHiddenColumn, direction, selectionRightBound);
|
|
422
|
-
}
|
|
423
|
-
break;
|
|
424
|
-
}
|
|
425
|
-
const newBounds = gridRef.current.getCellBounds({
|
|
426
|
-
rowIndex,
|
|
427
|
-
columnIndex,
|
|
428
|
-
});
|
|
429
|
-
const coords = { rowIndex: newBounds.top, columnIndex: newBounds.left };
|
|
430
|
-
const scrollToCell = modify
|
|
431
|
-
? selectionEnd.current.rowIndex === coords.rowIndex
|
|
432
|
-
? // Scroll to a column
|
|
433
|
-
{ columnIndex: coords.columnIndex }
|
|
434
|
-
: // Scroll to row
|
|
435
|
-
{ rowIndex: coords.rowIndex }
|
|
436
|
-
: // Scroll to cell
|
|
437
|
-
{ rowIndex, columnIndex };
|
|
438
|
-
const isUserNavigatingToActiveCell = (0, helpers_1.isEqualCells)(firstActiveCell.current, coords);
|
|
439
|
-
if (modify && !isUserNavigatingToActiveCell) {
|
|
440
|
-
modifySelection(coords);
|
|
441
|
-
}
|
|
442
|
-
else {
|
|
443
|
-
newSelection(coords);
|
|
444
|
-
}
|
|
445
|
-
/* Keep the item in view */
|
|
446
|
-
gridRef.current.scrollToItem(scrollToCell);
|
|
447
|
-
}, [
|
|
448
|
-
activeCell,
|
|
449
|
-
isHiddenRow,
|
|
450
|
-
isHiddenColumn,
|
|
451
|
-
selectionLeftBound,
|
|
452
|
-
selectionTopBound,
|
|
453
|
-
selectionPolicy,
|
|
454
|
-
newSelectionMode,
|
|
455
|
-
]);
|
|
456
|
-
// ⌘A or ⌘+Shift+Space
|
|
457
|
-
const selectAll = () => {
|
|
458
|
-
selectionStart.current = {
|
|
459
|
-
rowIndex: selectionTopBound,
|
|
460
|
-
columnIndex: selectionLeftBound,
|
|
461
|
-
};
|
|
462
|
-
modifySelection({
|
|
463
|
-
rowIndex: selectionBottomBound,
|
|
464
|
-
columnIndex: selectionRightBound,
|
|
465
|
-
});
|
|
466
|
-
};
|
|
467
|
-
// Ctrl+Space
|
|
468
|
-
const selectColumn = (0, react_1.useCallback)(() => {
|
|
469
|
-
if (!selectionEnd.current || !selectionStart.current)
|
|
470
|
-
return;
|
|
471
|
-
selectionStart.current = {
|
|
472
|
-
rowIndex: selectionTopBound,
|
|
473
|
-
columnIndex: selectionStart.current.columnIndex,
|
|
474
|
-
};
|
|
475
|
-
modifySelection({
|
|
476
|
-
rowIndex: rowCount - 1,
|
|
477
|
-
columnIndex: selectionEnd.current.columnIndex,
|
|
478
|
-
});
|
|
479
|
-
}, [selectionTopBound]);
|
|
480
|
-
// Shift+Space
|
|
481
|
-
const selectRow = (0, react_1.useCallback)(() => {
|
|
482
|
-
if (!selectionEnd.current || !selectionStart.current)
|
|
483
|
-
return;
|
|
484
|
-
selectionStart.current = {
|
|
485
|
-
rowIndex: selectionStart.current.rowIndex,
|
|
486
|
-
columnIndex: selectionLeftBound,
|
|
487
|
-
};
|
|
488
|
-
modifySelection({
|
|
489
|
-
rowIndex: selectionEnd.current.rowIndex,
|
|
490
|
-
columnIndex: selectionRightBound,
|
|
491
|
-
});
|
|
492
|
-
}, [selectionLeftBound]);
|
|
493
|
-
// Home
|
|
494
|
-
const selectFirstCellInRow = () => {
|
|
495
|
-
if (!selectionStart.current || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
496
|
-
return;
|
|
497
|
-
const cell = {
|
|
498
|
-
rowIndex: selectionStart.current.rowIndex,
|
|
499
|
-
columnIndex: selectionLeftBound,
|
|
500
|
-
};
|
|
501
|
-
newSelection(cell);
|
|
502
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem(cell);
|
|
503
|
-
};
|
|
504
|
-
// End
|
|
505
|
-
const selectLastCellInRow = () => {
|
|
506
|
-
if (!selectionStart.current || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
507
|
-
return;
|
|
508
|
-
const cell = {
|
|
509
|
-
rowIndex: selectionStart.current.rowIndex,
|
|
510
|
-
columnIndex: selectionRightBound,
|
|
511
|
-
};
|
|
512
|
-
newSelection(cell);
|
|
513
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem(cell);
|
|
514
|
-
};
|
|
515
|
-
// ⌘+Home
|
|
516
|
-
const selectFirstCellInColumn = () => {
|
|
517
|
-
if (!selectionStart.current || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
518
|
-
return;
|
|
519
|
-
const cell = {
|
|
520
|
-
rowIndex: selectionTopBound,
|
|
521
|
-
columnIndex: selectionStart.current.columnIndex,
|
|
522
|
-
};
|
|
523
|
-
newSelection(cell);
|
|
524
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem(cell);
|
|
525
|
-
};
|
|
526
|
-
// ⌘+End
|
|
527
|
-
const selectLastCellInColumn = () => {
|
|
528
|
-
if (!selectionStart.current || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
529
|
-
return;
|
|
530
|
-
const cell = {
|
|
531
|
-
rowIndex: rowCount - 1,
|
|
532
|
-
columnIndex: selectionStart.current.columnIndex,
|
|
533
|
-
};
|
|
534
|
-
newSelection(cell);
|
|
535
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem(cell);
|
|
536
|
-
};
|
|
537
|
-
// ⌘+Backspace
|
|
538
|
-
const scrollToActiveCell = () => {
|
|
539
|
-
if (!activeCell || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
540
|
-
return;
|
|
541
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem(activeCell, helpers_1.Align.smart);
|
|
542
|
-
};
|
|
543
|
-
// Page down
|
|
544
|
-
const pageDown = () => {
|
|
545
|
-
if (!activeCell || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
546
|
-
return;
|
|
547
|
-
const { visibleRowStartIndex, visibleRowStopIndex } = gridRef.current.getViewPort();
|
|
548
|
-
const pageSize = visibleRowStopIndex - visibleRowStartIndex;
|
|
549
|
-
const rowIndex = Math.min(activeCell.rowIndex + pageSize, rowCount - 1);
|
|
550
|
-
const newActiveCell = {
|
|
551
|
-
rowIndex,
|
|
552
|
-
columnIndex: activeCell.columnIndex,
|
|
553
|
-
};
|
|
554
|
-
handleSetActiveCell(newActiveCell, false);
|
|
555
|
-
/* Scroll to the new row */
|
|
556
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem({ rowIndex }, helpers_1.Align.end);
|
|
557
|
-
};
|
|
558
|
-
// Page up
|
|
559
|
-
const pageUp = () => {
|
|
560
|
-
if (!activeCell || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
561
|
-
return;
|
|
562
|
-
const { visibleRowStartIndex, visibleRowStopIndex } = gridRef.current.getViewPort();
|
|
563
|
-
const pageSize = visibleRowStopIndex - visibleRowStartIndex;
|
|
564
|
-
const rowIndex = Math.max(activeCell.rowIndex - pageSize, selectionTopBound);
|
|
565
|
-
const newActiveCell = {
|
|
566
|
-
rowIndex,
|
|
567
|
-
columnIndex: activeCell.columnIndex,
|
|
568
|
-
};
|
|
569
|
-
handleSetActiveCell(newActiveCell, false);
|
|
570
|
-
/* Scroll to the new row */
|
|
571
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem({ rowIndex }, helpers_1.Align.end);
|
|
572
|
-
};
|
|
573
|
-
// Page right
|
|
574
|
-
const pageRight = () => {
|
|
575
|
-
if (!activeCell || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
576
|
-
return;
|
|
577
|
-
const { visibleColumnStartIndex, visibleColumnStopIndex } = gridRef.current.getViewPort();
|
|
578
|
-
const pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
|
|
579
|
-
const columnIndex = Math.min(activeCell.columnIndex + pageSize, selectionRightBound);
|
|
580
|
-
const newActiveCell = {
|
|
581
|
-
columnIndex,
|
|
582
|
-
rowIndex: activeCell.rowIndex,
|
|
583
|
-
};
|
|
584
|
-
handleSetActiveCell(newActiveCell, false);
|
|
585
|
-
/* Scroll to the new row */
|
|
586
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem({ columnIndex }, helpers_1.Align.end);
|
|
587
|
-
};
|
|
588
|
-
// Page left
|
|
589
|
-
const pageLeft = () => {
|
|
590
|
-
if (!activeCell || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
591
|
-
return;
|
|
592
|
-
const { visibleColumnStartIndex, visibleColumnStopIndex } = gridRef.current.getViewPort();
|
|
593
|
-
const pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
|
|
594
|
-
const columnIndex = Math.max(activeCell.columnIndex - pageSize, selectionLeftBound);
|
|
595
|
-
const newActiveCell = {
|
|
596
|
-
columnIndex,
|
|
597
|
-
rowIndex: activeCell.rowIndex,
|
|
598
|
-
};
|
|
599
|
-
handleSetActiveCell(newActiveCell, false);
|
|
600
|
-
/* Scroll to the new row */
|
|
601
|
-
gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.scrollToItem({ columnIndex }, helpers_1.Align.end);
|
|
602
|
-
};
|
|
603
|
-
const handleKeyDown = (0, react_1.useCallback)((e) => {
|
|
604
|
-
if (!(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
605
|
-
return;
|
|
606
|
-
const isShiftKey = e.nativeEvent.shiftKey;
|
|
607
|
-
const isAltKey = e.nativeEvent.altKey;
|
|
608
|
-
const isMetaKey = e.nativeEvent.ctrlKey || e.nativeEvent.metaKey;
|
|
609
|
-
switch (e.nativeEvent.which) {
|
|
610
|
-
case types_1.KeyCodes.Right:
|
|
611
|
-
keyNavigate(types_1.Direction.Right, isShiftKey, isMetaKey);
|
|
612
|
-
e.preventDefault();
|
|
613
|
-
break;
|
|
614
|
-
case types_1.KeyCodes.Left:
|
|
615
|
-
keyNavigate(types_1.Direction.Left, isShiftKey, isMetaKey);
|
|
616
|
-
e.preventDefault();
|
|
617
|
-
break;
|
|
618
|
-
// Up
|
|
619
|
-
case types_1.KeyCodes.Up:
|
|
620
|
-
keyNavigate(types_1.Direction.Up, isShiftKey, isMetaKey);
|
|
621
|
-
e.preventDefault();
|
|
622
|
-
break;
|
|
623
|
-
case types_1.KeyCodes.Down:
|
|
624
|
-
keyNavigate(types_1.Direction.Down, isShiftKey, isMetaKey);
|
|
625
|
-
e.preventDefault();
|
|
626
|
-
break;
|
|
627
|
-
case types_1.KeyCodes.A:
|
|
628
|
-
if (isMetaKey) {
|
|
629
|
-
selectAll();
|
|
630
|
-
}
|
|
631
|
-
e.preventDefault();
|
|
632
|
-
break;
|
|
633
|
-
case types_1.KeyCodes.Home:
|
|
634
|
-
if (isMetaKey) {
|
|
635
|
-
selectFirstCellInColumn();
|
|
636
|
-
}
|
|
637
|
-
else {
|
|
638
|
-
selectFirstCellInRow();
|
|
639
|
-
}
|
|
640
|
-
break;
|
|
641
|
-
case types_1.KeyCodes.End:
|
|
642
|
-
if (isMetaKey) {
|
|
643
|
-
selectLastCellInColumn();
|
|
644
|
-
}
|
|
645
|
-
else {
|
|
646
|
-
selectLastCellInRow();
|
|
647
|
-
}
|
|
648
|
-
break;
|
|
649
|
-
case types_1.KeyCodes.BackSpace:
|
|
650
|
-
if (isMetaKey)
|
|
651
|
-
scrollToActiveCell();
|
|
652
|
-
break;
|
|
653
|
-
case types_1.KeyCodes.SPACE:
|
|
654
|
-
if (isMetaKey && isShiftKey) {
|
|
655
|
-
selectAll();
|
|
656
|
-
}
|
|
657
|
-
else if (isMetaKey) {
|
|
658
|
-
selectColumn();
|
|
659
|
-
}
|
|
660
|
-
else if (isShiftKey) {
|
|
661
|
-
selectRow();
|
|
662
|
-
}
|
|
663
|
-
break;
|
|
664
|
-
case types_1.KeyCodes.Tab:
|
|
665
|
-
/* Cycle through the selections if selections.length > 0 */
|
|
666
|
-
if (selections.length && activeCell && gridRef) {
|
|
667
|
-
const { bounds } = selections[selections.length - 1];
|
|
668
|
-
const activeCellBounds = gridRef.current.getCellBounds(activeCell);
|
|
669
|
-
const direction = isShiftKey ? types_1.Direction.Left : types_1.Direction.Right;
|
|
670
|
-
const nextCell = (0, helpers_1.findNextCellWithinBounds)(activeCellBounds, bounds, direction);
|
|
671
|
-
if (nextCell) {
|
|
672
|
-
setActiveCell(nextCell);
|
|
673
|
-
if (gridRef.current)
|
|
674
|
-
gridRef.current.scrollToItem(nextCell);
|
|
675
|
-
}
|
|
676
|
-
}
|
|
677
|
-
else {
|
|
678
|
-
if (isShiftKey) {
|
|
679
|
-
keyNavigate(types_1.Direction.Left);
|
|
680
|
-
}
|
|
681
|
-
else {
|
|
682
|
-
keyNavigate(types_1.Direction.Right);
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
e.preventDefault();
|
|
686
|
-
break;
|
|
687
|
-
case types_1.KeyCodes.PageDown:
|
|
688
|
-
if (isAltKey) {
|
|
689
|
-
pageRight();
|
|
690
|
-
}
|
|
691
|
-
else
|
|
692
|
-
pageDown();
|
|
693
|
-
break;
|
|
694
|
-
case types_1.KeyCodes.PageUp:
|
|
695
|
-
if (isAltKey) {
|
|
696
|
-
pageLeft();
|
|
697
|
-
}
|
|
698
|
-
else
|
|
699
|
-
pageUp();
|
|
700
|
-
break;
|
|
701
|
-
}
|
|
702
|
-
}, [
|
|
703
|
-
rowCount,
|
|
704
|
-
columnCount,
|
|
705
|
-
activeCell,
|
|
706
|
-
selections,
|
|
707
|
-
selectionPolicy,
|
|
708
|
-
newSelectionMode,
|
|
709
|
-
]);
|
|
710
|
-
/**
|
|
711
|
-
* User modified active cell deliberately
|
|
712
|
-
*/
|
|
713
|
-
const handleSetActiveCell = (0, react_1.useCallback)((coords, shouldScroll = true) => {
|
|
714
|
-
selectionStart.current = coords;
|
|
715
|
-
firstActiveCell.current = coords;
|
|
716
|
-
selectionEnd.current = coords;
|
|
717
|
-
setActiveCell(coords);
|
|
718
|
-
/* Scroll to the cell */
|
|
719
|
-
if (shouldScroll && coords && (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current)) {
|
|
720
|
-
gridRef.current.scrollToItem(coords);
|
|
721
|
-
}
|
|
722
|
-
}, []);
|
|
723
|
-
/**
|
|
724
|
-
* TODO
|
|
725
|
-
* 1. Fill does not extend to merged cells
|
|
726
|
-
*/
|
|
727
|
-
const handleFillHandleMouseMove = (0, react_1.useCallback)((e) => {
|
|
728
|
-
/* Exit if user is not in selection mode */
|
|
729
|
-
if (!isFilling.current || !(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) || !activeCellRef.current)
|
|
730
|
-
return;
|
|
731
|
-
const coords = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY, false);
|
|
732
|
-
if (!coords)
|
|
733
|
-
return;
|
|
734
|
-
const selections = activeSelectionsRef.current;
|
|
735
|
-
let bounds = selectionFromStartEnd(activeCellRef.current, coords);
|
|
736
|
-
const hasSelections = selections.length > 0;
|
|
737
|
-
const activeCellBounds = hasSelections
|
|
738
|
-
? selections[selections.length - 1].bounds
|
|
739
|
-
: gridRef.current.getCellBounds(activeCellRef.current);
|
|
740
|
-
if (!bounds)
|
|
741
|
-
return;
|
|
742
|
-
const direction = bounds.top < activeCellBounds.top
|
|
743
|
-
? types_1.Direction.Up
|
|
744
|
-
: bounds.bottom > activeCellBounds.bottom
|
|
745
|
-
? types_1.Direction.Down
|
|
746
|
-
: bounds.right > activeCellBounds.right
|
|
747
|
-
? types_1.Direction.Right
|
|
748
|
-
: types_1.Direction.Left;
|
|
749
|
-
if (direction === types_1.Direction.Right) {
|
|
750
|
-
bounds = {
|
|
751
|
-
...activeCellBounds,
|
|
752
|
-
right: Math.min(selectionRightBound, bounds.right),
|
|
753
|
-
};
|
|
754
|
-
}
|
|
755
|
-
if (direction === types_1.Direction.Up) {
|
|
756
|
-
bounds = {
|
|
757
|
-
...activeCellBounds,
|
|
758
|
-
top: Math.max(selectionTopBound, bounds.top),
|
|
759
|
-
};
|
|
760
|
-
}
|
|
761
|
-
if (direction === types_1.Direction.Left) {
|
|
762
|
-
bounds = {
|
|
763
|
-
...activeCellBounds,
|
|
764
|
-
left: Math.max(selectionLeftBound, bounds.left),
|
|
765
|
-
};
|
|
766
|
-
}
|
|
767
|
-
if (direction === types_1.Direction.Down) {
|
|
768
|
-
bounds = {
|
|
769
|
-
...activeCellBounds,
|
|
770
|
-
bottom: Math.min(selectionBottomBound, bounds.bottom),
|
|
771
|
-
};
|
|
772
|
-
}
|
|
773
|
-
/**
|
|
774
|
-
* If user moves back to the same selection, clear
|
|
775
|
-
*/
|
|
776
|
-
if (hasSelections &&
|
|
777
|
-
boundsSubsetOfSelection(bounds, selections[0].bounds)) {
|
|
778
|
-
setFillSelection(undefined);
|
|
779
|
-
return;
|
|
780
|
-
}
|
|
781
|
-
setFillSelection({ bounds });
|
|
782
|
-
gridRef.current.scrollToItem(coords);
|
|
783
|
-
}, []);
|
|
784
|
-
/**
|
|
785
|
-
* When user releases mouse on the fill handle
|
|
786
|
-
*/
|
|
787
|
-
const handleFillHandleMouseUp = (0, react_1.useCallback)((e) => {
|
|
788
|
-
var _a;
|
|
789
|
-
isFilling.current = false;
|
|
790
|
-
/* Remove listener */
|
|
791
|
-
document.removeEventListener("mousemove", handleFillHandleMouseMove);
|
|
792
|
-
document.removeEventListener("mouseup", handleFillHandleMouseUp);
|
|
793
|
-
/* Exit early */
|
|
794
|
-
if (!gridRef || !activeCellRef.current)
|
|
795
|
-
return;
|
|
796
|
-
/* Update last selection */
|
|
797
|
-
let fillSelection = fillSelectionRef.current;
|
|
798
|
-
/* Update last selection */
|
|
799
|
-
setFillSelection(undefined);
|
|
800
|
-
/* Use ref, as we are binding to document */
|
|
801
|
-
const selections = activeSelectionsRef.current;
|
|
802
|
-
const activeCell = activeCellRef.current;
|
|
803
|
-
if (!activeCell || !fillSelection)
|
|
804
|
-
return;
|
|
805
|
-
const newBounds = fillSelection === null || fillSelection === void 0 ? void 0 : fillSelection.bounds;
|
|
806
|
-
if (!newBounds)
|
|
807
|
-
return;
|
|
808
|
-
/* Focus on the grid */
|
|
809
|
-
(_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
810
|
-
/* Callback */
|
|
811
|
-
onFill && onFill(activeCell, fillSelection, selections);
|
|
812
|
-
/* Modify last selection */
|
|
813
|
-
setSelections((prevSelection) => {
|
|
814
|
-
const len = prevSelection.length;
|
|
815
|
-
if (!len) {
|
|
816
|
-
return [{ bounds: newBounds }];
|
|
817
|
-
}
|
|
818
|
-
return prevSelection.map((sel, i) => {
|
|
819
|
-
if (len - 1 === i) {
|
|
820
|
-
return {
|
|
821
|
-
...sel,
|
|
822
|
-
bounds: newBounds,
|
|
823
|
-
};
|
|
824
|
-
}
|
|
825
|
-
return sel;
|
|
826
|
-
});
|
|
827
|
-
});
|
|
828
|
-
}, [onFill]);
|
|
829
|
-
const handleFillHandleMouseDown = (0, react_1.useCallback)((e) => {
|
|
830
|
-
e.stopPropagation();
|
|
831
|
-
isFilling.current = true;
|
|
832
|
-
document.addEventListener("mousemove", handleFillHandleMouseMove);
|
|
833
|
-
document.addEventListener("mouseup", handleFillHandleMouseUp);
|
|
834
|
-
}, [handleFillHandleMouseMove, handleFillHandleMouseUp]);
|
|
835
|
-
/**
|
|
836
|
-
* Remove the last selection from state
|
|
837
|
-
*/
|
|
838
|
-
const handleClearLastSelection = (0, react_1.useCallback)(() => {
|
|
839
|
-
setSelections((prev) => prev.slice(0, -1));
|
|
840
|
-
}, []);
|
|
841
|
-
const fillHandleProps = (0, react_1.useMemo)(() => {
|
|
842
|
-
return {
|
|
843
|
-
onMouseDown: handleFillHandleMouseDown,
|
|
844
|
-
};
|
|
845
|
-
}, [handleFillHandleMouseDown]);
|
|
846
|
-
/**
|
|
847
|
-
* When user mouse downs on selection
|
|
848
|
-
*/
|
|
849
|
-
const handleSelectionMouseDown = (0, react_1.useCallback)((e, activeCell, selection, index, shouldClamp = true) => {
|
|
850
|
-
if (!gridRef.current) {
|
|
851
|
-
return;
|
|
852
|
-
}
|
|
853
|
-
let coords = gridRef.current.getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY, false // Todo
|
|
854
|
-
);
|
|
855
|
-
if (!coords) {
|
|
856
|
-
return;
|
|
857
|
-
}
|
|
858
|
-
/* Initial cell that is selected by user */
|
|
859
|
-
initialDraggedCell.current = coords;
|
|
860
|
-
/* Make sure the coords do not extend selection bounds */
|
|
861
|
-
if (shouldClamp) {
|
|
862
|
-
coords = (0, helpers_1.clampCellCoords)(coords, activeCell, selection);
|
|
863
|
-
}
|
|
864
|
-
/* Set selection */
|
|
865
|
-
if (activeCell) {
|
|
866
|
-
initialDraggedSelection.current = draggedSelection.current = {
|
|
867
|
-
bounds: gridRef.current.getCellBounds(activeCell),
|
|
868
|
-
};
|
|
869
|
-
}
|
|
870
|
-
if (selection) {
|
|
871
|
-
initialDraggedSelection.current = draggedSelection.current = selection;
|
|
872
|
-
draggedSelectionIndex.current = index;
|
|
873
|
-
}
|
|
874
|
-
/* Set dragging flag */
|
|
875
|
-
isDragging.current = true;
|
|
876
|
-
/* Listen to mousemove and mousedown events */
|
|
877
|
-
document.addEventListener("mouseup", handleSelectionMouseUp);
|
|
878
|
-
document.addEventListener("mousemove", handleSelectionMouseMove);
|
|
879
|
-
/* Force a re-render */
|
|
880
|
-
forceRender();
|
|
881
|
-
}, [selectionTopBound, selectionLeftBound, rowCount, columnCount, selections]);
|
|
882
|
-
/**
|
|
883
|
-
* Ond drag move
|
|
884
|
-
*/
|
|
885
|
-
const handleSelectionMouseMove = (0, react_1.useCallback)((e) => {
|
|
886
|
-
var _a;
|
|
887
|
-
if (!(gridRef === null || gridRef === void 0 ? void 0 : gridRef.current))
|
|
888
|
-
return;
|
|
889
|
-
const coords = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
|
|
890
|
-
if (!coords) {
|
|
891
|
-
return;
|
|
892
|
-
}
|
|
893
|
-
if (!initialDraggedSelection.current || !initialDraggedCell.current) {
|
|
894
|
-
return;
|
|
895
|
-
}
|
|
896
|
-
/**
|
|
897
|
-
* Skip if user is moving the selection
|
|
898
|
-
* to the same starting position
|
|
899
|
-
*/
|
|
900
|
-
if (!hasUserMovedSelection.current &&
|
|
901
|
-
(0, helpers_1.isEqualCells)(initialDraggedCell.current, coords)) {
|
|
902
|
-
return;
|
|
903
|
-
}
|
|
904
|
-
let sel = (0, helpers_1.newSelectionFromDrag)(initialDraggedSelection.current, initialDraggedCell.current, coords, selectionTopBound, selectionLeftBound, rowCount, columnCount);
|
|
905
|
-
// Not required
|
|
906
|
-
// sel = { bounds : extendAreaToMergedCells(sel.bounds, mergedCellsRef.current) }
|
|
907
|
-
draggedSelection.current = sel;
|
|
908
|
-
// User has now moved the selection,
|
|
909
|
-
hasUserMovedSelection.current = true;
|
|
910
|
-
/* Scroll to the cell */
|
|
911
|
-
(_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(coords);
|
|
912
|
-
/* Re-render */
|
|
913
|
-
forceRender();
|
|
914
|
-
}, []);
|
|
915
|
-
/**
|
|
916
|
-
* When drag/drop is complete
|
|
917
|
-
*/
|
|
918
|
-
const handleSelectionMouseUp = (0, react_1.useCallback)(() => {
|
|
919
|
-
var _a;
|
|
920
|
-
const sel = draggedSelection.current;
|
|
921
|
-
if (sel) {
|
|
922
|
-
/* Select the first cell in the selection area */
|
|
923
|
-
const coords = { rowIndex: sel.bounds.top, columnIndex: sel.bounds.left };
|
|
924
|
-
setActiveCell(coords);
|
|
925
|
-
/* Update selection start */
|
|
926
|
-
selectionStart.current = coords;
|
|
927
|
-
if ((0, helpers_1.selectionSpansCells)(sel === null || sel === void 0 ? void 0 : sel.bounds)) {
|
|
928
|
-
setSelections((prev) => {
|
|
929
|
-
return prev.map((cur, index) => {
|
|
930
|
-
if (index === draggedSelectionIndex.current) {
|
|
931
|
-
return sel;
|
|
932
|
-
}
|
|
933
|
-
return cur;
|
|
934
|
-
});
|
|
935
|
-
});
|
|
936
|
-
/* Update selection end */
|
|
937
|
-
selectionEnd.current = {
|
|
938
|
-
rowIndex: sel.bounds.bottom,
|
|
939
|
-
columnIndex: sel.bounds.right,
|
|
940
|
-
};
|
|
941
|
-
}
|
|
942
|
-
}
|
|
943
|
-
if (initialDraggedSelection.current && sel) {
|
|
944
|
-
onSelectionMove === null || onSelectionMove === void 0 ? void 0 : onSelectionMove(initialDraggedSelection.current, sel);
|
|
945
|
-
}
|
|
946
|
-
/* Focus on the grid */
|
|
947
|
-
(_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
948
|
-
/* Reset all references */
|
|
949
|
-
isDragging.current = false;
|
|
950
|
-
draggedSelection.current = void 0;
|
|
951
|
-
draggedSelectionIndex.current = void 0;
|
|
952
|
-
hasUserMovedSelection.current = false;
|
|
953
|
-
/* Remove event handlers */
|
|
954
|
-
document.removeEventListener("mouseup", handleSelectionMouseUp);
|
|
955
|
-
document.removeEventListener("mousemove", handleSelectionMouseMove);
|
|
956
|
-
/* Force render */
|
|
957
|
-
forceRender();
|
|
958
|
-
}, []);
|
|
959
|
-
return {
|
|
960
|
-
activeCell,
|
|
961
|
-
selections,
|
|
962
|
-
isDragging: isDragging.current,
|
|
963
|
-
draggedSelection: draggedSelection.current,
|
|
964
|
-
initialDraggedSelection: initialDraggedSelection.current,
|
|
965
|
-
onSelectionMouseDown: handleSelectionMouseDown,
|
|
966
|
-
onMouseDown: handleMouseDown,
|
|
967
|
-
onKeyDown: handleKeyDown,
|
|
968
|
-
newSelection,
|
|
969
|
-
setSelections,
|
|
970
|
-
setActiveCell: handleSetActiveCell,
|
|
971
|
-
setActiveCellState: setActiveCell,
|
|
972
|
-
fillHandleProps,
|
|
973
|
-
fillSelection,
|
|
974
|
-
clearLastSelection: handleClearLastSelection,
|
|
975
|
-
modifySelection,
|
|
976
|
-
selectAll,
|
|
977
|
-
appendSelection,
|
|
978
|
-
clearSelections,
|
|
979
|
-
};
|
|
980
|
-
};
|
|
981
|
-
exports.default = useSelection;
|
|
982
|
-
//# sourceMappingURL=useSelection.js.map
|