@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.
Files changed (208) hide show
  1. package/LICENSE.md +100 -0
  2. package/Readme.md +53 -59
  3. package/dist/cjs/Cell.d.ts +35 -0
  4. package/dist/cjs/Cell.d.ts.map +1 -0
  5. package/dist/cjs/Cell.js +29 -0
  6. package/dist/{CellOverlay.d.ts → cjs/CellOverlay.d.ts} +5 -5
  7. package/dist/cjs/CellOverlay.d.ts.map +1 -0
  8. package/dist/cjs/CellOverlay.js +126 -0
  9. package/dist/cjs/Context.d.ts +8 -0
  10. package/dist/cjs/Context.d.ts.map +1 -0
  11. package/dist/cjs/Context.js +13 -0
  12. package/dist/{FillHandle.d.ts → cjs/FillHandle.d.ts} +2 -1
  13. package/dist/cjs/FillHandle.d.ts.map +1 -0
  14. package/dist/cjs/FillHandle.js +26 -0
  15. package/dist/cjs/Grid.d.ts +558 -0
  16. package/dist/cjs/Grid.d.ts.map +1 -0
  17. package/dist/cjs/Grid.js +2446 -0
  18. package/dist/{GridLine.d.ts → cjs/GridLine.d.ts} +2 -1
  19. package/dist/cjs/GridLine.d.ts.map +1 -0
  20. package/dist/cjs/GridLine.js +10 -0
  21. package/dist/cjs/Image.d.ts +11 -0
  22. package/dist/cjs/Image.d.ts.map +1 -0
  23. package/dist/cjs/Image.js +57 -0
  24. package/dist/cjs/MemoizedGrid.d.ts +49 -0
  25. package/dist/cjs/MemoizedGrid.d.ts.map +1 -0
  26. package/dist/cjs/MemoizedGrid.js +105 -0
  27. package/dist/cjs/Selection.d.ts +5 -0
  28. package/dist/cjs/Selection.d.ts.map +1 -0
  29. package/dist/cjs/Selection.js +10 -0
  30. package/dist/{helpers.d.ts → cjs/helpers.d.ts} +59 -39
  31. package/dist/cjs/helpers.d.ts.map +1 -0
  32. package/dist/cjs/helpers.js +1409 -0
  33. package/dist/{hooks → cjs/hooks}/useCopyPaste.d.ts +3 -2
  34. package/dist/cjs/hooks/useCopyPaste.d.ts.map +1 -0
  35. package/dist/cjs/hooks/useCopyPaste.js +230 -0
  36. package/dist/{hooks → cjs/hooks}/useEditable.d.ts +21 -8
  37. package/dist/cjs/hooks/useEditable.d.ts.map +1 -0
  38. package/dist/cjs/hooks/useEditable.js +491 -0
  39. package/dist/{hooks → cjs/hooks}/useFilter.d.ts +3 -2
  40. package/dist/cjs/hooks/useFilter.d.ts.map +1 -0
  41. package/dist/cjs/hooks/useFilter.js +97 -0
  42. package/dist/{hooks → cjs/hooks}/useImage.d.ts +1 -0
  43. package/dist/cjs/hooks/useImage.d.ts.map +1 -0
  44. package/dist/cjs/hooks/useImage.js +80 -0
  45. package/dist/{hooks → cjs/hooks}/usePagination.d.ts +3 -2
  46. package/dist/cjs/hooks/usePagination.d.ts.map +1 -0
  47. package/dist/cjs/hooks/usePagination.js +53 -0
  48. package/dist/{hooks → cjs/hooks}/useSizer.d.ts +28 -29
  49. package/dist/cjs/hooks/useSizer.d.ts.map +1 -0
  50. package/dist/cjs/hooks/useSizer.js +176 -0
  51. package/dist/{hooks → cjs/hooks}/useTooltip.d.ts +2 -1
  52. package/dist/cjs/hooks/useTooltip.d.ts.map +1 -0
  53. package/dist/cjs/hooks/useTooltip.js +82 -0
  54. package/dist/{hooks → cjs/hooks}/useUndo.d.ts +2 -1
  55. package/dist/cjs/hooks/useUndo.d.ts.map +1 -0
  56. package/dist/cjs/hooks/useUndo.js +87 -0
  57. package/dist/cjs/index.d.ts +19 -0
  58. package/dist/cjs/index.d.ts.map +1 -0
  59. package/dist/cjs/index.js +29 -0
  60. package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -0
  61. package/dist/{types.d.ts → cjs/types.d.ts} +8 -3
  62. package/dist/cjs/types.d.ts.map +1 -0
  63. package/dist/{types.js → cjs/types.js} +7 -8
  64. package/dist/cjs/utils.d.ts +9 -0
  65. package/dist/cjs/utils.d.ts.map +1 -0
  66. package/dist/cjs/utils.js +58 -0
  67. package/dist/cjs/vitest.config.d.ts +3 -0
  68. package/dist/cjs/vitest.config.d.ts.map +1 -0
  69. package/dist/cjs/vitest.config.js +24 -0
  70. package/dist/esm/Cell.d.ts +35 -0
  71. package/dist/esm/Cell.d.ts.map +1 -0
  72. package/dist/esm/Cell.js +24 -0
  73. package/dist/esm/CellOverlay.d.ts +21 -0
  74. package/dist/esm/CellOverlay.d.ts.map +1 -0
  75. package/dist/esm/CellOverlay.js +120 -0
  76. package/dist/esm/Context.d.ts +8 -0
  77. package/dist/esm/Context.d.ts.map +1 -0
  78. package/dist/esm/Context.js +9 -0
  79. package/dist/esm/FillHandle.d.ts +8 -0
  80. package/dist/esm/FillHandle.d.ts.map +1 -0
  81. package/dist/{FillHandle.js → esm/FillHandle.js} +5 -11
  82. package/dist/esm/Grid.d.ts +558 -0
  83. package/dist/esm/Grid.d.ts.map +1 -0
  84. package/dist/esm/Grid.js +2451 -0
  85. package/dist/esm/GridLine.d.ts +5 -0
  86. package/dist/esm/GridLine.d.ts.map +1 -0
  87. package/dist/esm/GridLine.js +7 -0
  88. package/dist/esm/Image.d.ts +11 -0
  89. package/dist/esm/Image.d.ts.map +1 -0
  90. package/dist/esm/Image.js +53 -0
  91. package/dist/esm/MemoizedGrid.d.ts +49 -0
  92. package/dist/esm/MemoizedGrid.d.ts.map +1 -0
  93. package/dist/esm/MemoizedGrid.js +98 -0
  94. package/dist/esm/Selection.d.ts +5 -0
  95. package/dist/esm/Selection.d.ts.map +1 -0
  96. package/dist/esm/Selection.js +7 -0
  97. package/dist/esm/helpers.d.ts +281 -0
  98. package/dist/esm/helpers.d.ts.map +1 -0
  99. package/dist/esm/helpers.js +1260 -0
  100. package/dist/esm/hooks/useCopyPaste.d.ts +53 -0
  101. package/dist/esm/hooks/useCopyPaste.d.ts.map +1 -0
  102. package/dist/{hooks → esm/hooks}/useCopyPaste.js +40 -46
  103. package/dist/esm/hooks/useEditable.d.ts +253 -0
  104. package/dist/esm/hooks/useEditable.d.ts.map +1 -0
  105. package/dist/esm/hooks/useEditable.js +482 -0
  106. package/dist/esm/hooks/useFilter.d.ts +69 -0
  107. package/dist/esm/hooks/useFilter.d.ts.map +1 -0
  108. package/dist/{hooks → esm/hooks}/useFilter.js +22 -42
  109. package/dist/esm/hooks/useImage.d.ts +13 -0
  110. package/dist/esm/hooks/useImage.d.ts.map +1 -0
  111. package/dist/esm/hooks/useImage.js +76 -0
  112. package/dist/esm/hooks/usePagination.d.ts +69 -0
  113. package/dist/esm/hooks/usePagination.d.ts.map +1 -0
  114. package/dist/esm/hooks/usePagination.js +47 -0
  115. package/dist/esm/hooks/useSizer.d.ts +114 -0
  116. package/dist/esm/hooks/useSizer.d.ts.map +1 -0
  117. package/dist/esm/hooks/useSizer.js +176 -0
  118. package/dist/esm/hooks/useTooltip.d.ts +43 -0
  119. package/dist/esm/hooks/useTooltip.d.ts.map +1 -0
  120. package/dist/esm/hooks/useTooltip.js +80 -0
  121. package/dist/esm/hooks/useUndo.d.ts +36 -0
  122. package/dist/esm/hooks/useUndo.d.ts.map +1 -0
  123. package/dist/{hooks → esm/hooks}/useUndo.js +16 -25
  124. package/dist/esm/index.d.ts +19 -0
  125. package/dist/esm/index.d.ts.map +1 -0
  126. package/dist/esm/index.js +17 -0
  127. package/dist/esm/tsconfig.esm.tsbuildinfo +1 -0
  128. package/dist/esm/types.d.ts +70 -0
  129. package/dist/esm/types.d.ts.map +1 -0
  130. package/dist/esm/types.js +68 -0
  131. package/dist/esm/utils.d.ts +9 -0
  132. package/dist/esm/utils.d.ts.map +1 -0
  133. package/dist/esm/utils.js +104 -0
  134. package/dist/esm/vitest.config.d.ts +3 -0
  135. package/dist/esm/vitest.config.d.ts.map +1 -0
  136. package/dist/esm/vitest.config.js +22 -0
  137. package/package.json +28 -29
  138. package/dist/Cell.d.ts +0 -23
  139. package/dist/Cell.js +0 -55
  140. package/dist/Cell.js.map +0 -1
  141. package/dist/CellOverlay.js +0 -116
  142. package/dist/CellOverlay.js.map +0 -1
  143. package/dist/FillHandle.js.map +0 -1
  144. package/dist/Grid.d.ts +0 -385
  145. package/dist/Grid.js +0 -1684
  146. package/dist/Grid.js.map +0 -1
  147. package/dist/GridLine.js +0 -13
  148. package/dist/GridLine.js.map +0 -1
  149. package/dist/Image.d.ts +0 -8
  150. package/dist/Image.js +0 -50
  151. package/dist/Image.js.map +0 -1
  152. package/dist/Selection.d.ts +0 -4
  153. package/dist/Selection.js +0 -9
  154. package/dist/Selection.js.map +0 -1
  155. package/dist/helpers.js +0 -1033
  156. package/dist/helpers.js.map +0 -1
  157. package/dist/hooks/useCopyPaste.js.map +0 -1
  158. package/dist/hooks/useEditable.js +0 -477
  159. package/dist/hooks/useEditable.js.map +0 -1
  160. package/dist/hooks/useFilter.js.map +0 -1
  161. package/dist/hooks/useImage.js +0 -42
  162. package/dist/hooks/useImage.js.map +0 -1
  163. package/dist/hooks/usePagination.js +0 -73
  164. package/dist/hooks/usePagination.js.map +0 -1
  165. package/dist/hooks/useSelection.d.ts +0 -175
  166. package/dist/hooks/useSelection.js +0 -982
  167. package/dist/hooks/useSelection.js.map +0 -1
  168. package/dist/hooks/useSizer.js +0 -150
  169. package/dist/hooks/useSizer.js.map +0 -1
  170. package/dist/hooks/useTooltip.js +0 -106
  171. package/dist/hooks/useTooltip.js.map +0 -1
  172. package/dist/hooks/useTouch.d.ts +0 -21
  173. package/dist/hooks/useTouch.js +0 -73
  174. package/dist/hooks/useTouch.js.map +0 -1
  175. package/dist/hooks/useUndo.js.map +0 -1
  176. package/dist/index.d.ts +0 -25
  177. package/dist/index.js +0 -61
  178. package/dist/index.js.map +0 -1
  179. package/dist/types.js.map +0 -1
  180. package/dist/utils.d.ts +0 -8
  181. package/dist/utils.js +0 -153
  182. package/dist/utils.js.map +0 -1
  183. package/src/Cell.tsx +0 -100
  184. package/src/CellOverlay.tsx +0 -191
  185. package/src/FillHandle.tsx +0 -37
  186. package/src/Grid.tsx +0 -2677
  187. package/src/GridLine.tsx +0 -23
  188. package/src/Image.tsx +0 -43
  189. package/src/Selection.tsx +0 -9
  190. package/src/helpers.ts +0 -1455
  191. package/src/hooks/useCopyPaste.ts +0 -265
  192. package/src/hooks/useEditable.tsx +0 -945
  193. package/src/hooks/useFilter.tsx +0 -233
  194. package/src/hooks/useImage.ts +0 -57
  195. package/src/hooks/usePagination.tsx +0 -153
  196. package/src/hooks/useSelection.ts +0 -1440
  197. package/src/hooks/useSizer.ts +0 -312
  198. package/src/hooks/useTooltip.tsx +0 -172
  199. package/src/hooks/useTouch.ts +0 -116
  200. package/src/hooks/useUndo.ts +0 -134
  201. package/src/index.tsx +0 -46
  202. package/src/tests/Grid.spec.tsx +0 -47
  203. package/src/tests/helpers.test.ts +0 -292
  204. package/src/tests/usePagination.test.ts +0 -28
  205. package/src/tests/useSelection.test.ts +0 -27
  206. package/src/tests/useUndo.test.ts +0 -73
  207. package/src/types.ts +0 -69
  208. 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