@rowsncolumns/grid 8.0.8 → 9.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Cell.d.ts +1 -1
- package/dist/Cell.js +10 -6
- package/dist/Cell.js.map +1 -1
- package/dist/CellOverlay.js +17 -12
- package/dist/CellOverlay.js.map +1 -1
- package/dist/FillHandle.d.ts +1 -1
- package/dist/FillHandle.js +2 -2
- package/dist/FillHandle.js.map +1 -1
- package/dist/Grid.d.ts +17 -15
- package/dist/Grid.js +139 -133
- package/dist/Grid.js.map +1 -1
- package/dist/GridLine.d.ts +1 -1
- package/dist/GridLine.js.map +1 -1
- package/dist/Image.d.ts +2 -2
- package/dist/Image.js +13 -7
- package/dist/Image.js.map +1 -1
- package/dist/Selection.js +2 -2
- package/dist/Selection.js.map +1 -1
- package/dist/helpers.d.ts +6 -7
- package/dist/helpers.js +139 -100
- package/dist/helpers.js.map +1 -1
- package/dist/hooks/useCopyPaste.js +12 -12
- package/dist/hooks/useCopyPaste.js.map +1 -1
- package/dist/hooks/useEditable.d.ts +3 -3
- package/dist/hooks/useEditable.js +57 -52
- package/dist/hooks/useEditable.js.map +1 -1
- package/dist/hooks/useFilter.d.ts +7 -7
- package/dist/hooks/useFilter.js +17 -13
- package/dist/hooks/useFilter.js.map +1 -1
- package/dist/hooks/useImage.js +2 -2
- package/dist/hooks/useImage.js.map +1 -1
- package/dist/hooks/usePagination.d.ts +3 -3
- package/dist/hooks/usePagination.js +9 -5
- package/dist/hooks/usePagination.js.map +1 -1
- package/dist/hooks/useSelection.d.ts +2 -2
- package/dist/hooks/useSelection.js +65 -65
- package/dist/hooks/useSelection.js.map +1 -1
- package/dist/hooks/useSizer.d.ts +3 -3
- package/dist/hooks/useSizer.js +19 -19
- package/dist/hooks/useSizer.js.map +1 -1
- package/dist/hooks/useTooltip.js +22 -18
- package/dist/hooks/useTooltip.js.map +1 -1
- package/dist/hooks/useTouch.js +12 -11
- package/dist/hooks/useTouch.js.map +1 -1
- package/dist/hooks/useUndo.js +9 -9
- package/dist/hooks/useUndo.js.map +1 -1
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +25 -23
- package/dist/utils.js.map +1 -1
- package/package.json +9 -9
- package/src/Cell.tsx +1 -1
- package/src/FillHandle.tsx +2 -2
- package/src/Grid.tsx +27 -31
- package/src/GridLine.tsx +3 -3
- package/src/Image.tsx +31 -18
- package/src/helpers.ts +2 -2
- package/src/hooks/useCopyPaste.ts +2 -2
- package/src/hooks/useEditable.tsx +8 -10
- package/src/hooks/useFilter.tsx +3 -3
- package/src/hooks/usePagination.tsx +4 -4
- package/src/hooks/useSelection.ts +13 -23
- package/src/hooks/useSizer.ts +2 -2
- package/src/hooks/useTooltip.tsx +2 -3
- package/src/hooks/useTouch.ts +14 -6
- package/src/tests/Grid.spec.tsx +2 -3
- package/src/tests/usePagination.test.ts +2 -2
- package/src/tests/useSelection.test.ts +3 -1
- package/src/utils.tsx +2 -2
- package/src/.DS_Store +0 -0
- package/src/hooks/.DS_Store +0 -0
package/dist/Grid.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
3
|
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
5
9
|
}) : (function(o, m, k, k2) {
|
|
6
10
|
if (k2 === undefined) k2 = k;
|
|
7
11
|
o[k2] = m[k];
|
|
@@ -14,7 +18,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
14
18
|
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
19
|
if (mod && mod.__esModule) return mod;
|
|
16
20
|
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
22
|
__setModuleDefault(result, mod);
|
|
19
23
|
return result;
|
|
20
24
|
};
|
|
@@ -24,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
24
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
29
|
exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL = void 0;
|
|
26
30
|
const react_1 = __importStar(require("react"));
|
|
27
|
-
const
|
|
31
|
+
const react_konva_1 = require("react-konva");
|
|
28
32
|
const helpers_1 = require("./helpers");
|
|
29
33
|
const Cell_1 = require("./Cell");
|
|
30
34
|
const CellOverlay_1 = require("./CellOverlay");
|
|
@@ -41,10 +45,10 @@ const defaultShadowSettings = {
|
|
|
41
45
|
const defaultRowHeight = () => 20;
|
|
42
46
|
const defaultColumnWidth = () => 60;
|
|
43
47
|
const defaultSelectionRenderer = (props) => {
|
|
44
|
-
return react_1.default.createElement(Selection_1.default,
|
|
48
|
+
return react_1.default.createElement(Selection_1.default, { ...props });
|
|
45
49
|
};
|
|
46
50
|
const defaultGridLineRenderer = (props) => {
|
|
47
|
-
return react_1.default.createElement(GridLine_1.default,
|
|
51
|
+
return react_1.default.createElement(GridLine_1.default, { ...props });
|
|
48
52
|
};
|
|
49
53
|
exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL = 150;
|
|
50
54
|
/* Placeholder for empty array -> Prevents re-render */
|
|
@@ -55,11 +59,11 @@ const EMPTY_ARRAY = [];
|
|
|
55
59
|
*
|
|
56
60
|
* TODO: Fix bug with snapping, since onWheel is a global handler, rowCount, columnCount becomes state
|
|
57
61
|
*/
|
|
58
|
-
const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
62
|
+
const Grid = (0, react_1.memo)((0, react_1.forwardRef)((props, forwardedRef) => {
|
|
59
63
|
const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, onImmediateScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = EMPTY_ARRAY, frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, enableCellOverlay = false, overlayRenderer = CellOverlay_1.CellRenderer, mergedCells = EMPTY_ARRAY, snap = false, scrollThrottleTimeout = 80, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = false, shadowSettings = defaultShadowSettings, borderStyles = EMPTY_ARRAY, children, stageProps, wrapper = (children) => children, cellAreas = EMPTY_ARRAY, showFillHandle = false, fillSelection, overscanCount = 1, fillHandleProps, fillhandleBorderColor = "white", showGridLines = false, gridLineColor = "#E3E2E2", gridLineWidth = 1, gridLineRenderer = defaultGridLineRenderer, isHiddenRow, isHiddenColumn, isHiddenCell, scale = 1, enableSelectionDrag = false, isDraggingSelection = false, ...rest } = props;
|
|
60
|
-
tiny_invariant_1.default(!(children && typeof children !== "function"), "Children should be a function");
|
|
64
|
+
(0, tiny_invariant_1.default)(!(children && typeof children !== "function"), "Children should be a function");
|
|
61
65
|
/* Expose some methods in ref */
|
|
62
|
-
react_1.useImperativeHandle(forwardedRef, () => {
|
|
66
|
+
(0, react_1.useImperativeHandle)(forwardedRef, () => {
|
|
63
67
|
return {
|
|
64
68
|
scrollTo,
|
|
65
69
|
scrollBy,
|
|
@@ -85,7 +89,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
85
89
|
getColumnOffset,
|
|
86
90
|
};
|
|
87
91
|
});
|
|
88
|
-
const instanceProps = react_1.useRef({
|
|
92
|
+
const instanceProps = (0, react_1.useRef)({
|
|
89
93
|
columnMetadataMap: {},
|
|
90
94
|
rowMetadataMap: {},
|
|
91
95
|
lastMeasuredColumnIndex: -1,
|
|
@@ -95,25 +99,25 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
95
99
|
recalcColumnIndices: [],
|
|
96
100
|
recalcRowIndices: [],
|
|
97
101
|
});
|
|
98
|
-
const stageRef = react_1.useRef(null);
|
|
99
|
-
const containerRef = react_1.useRef(null);
|
|
100
|
-
const scrollContainerRef = react_1.useRef(null);
|
|
101
|
-
const verticalScrollRef = react_1.useRef(null);
|
|
102
|
-
const wheelingRef = react_1.useRef(null);
|
|
103
|
-
const horizontalScrollRef = react_1.useRef(null);
|
|
104
|
-
const [_, forceRender] = react_1.useReducer((s) => s + 1, 0);
|
|
105
|
-
const [scrollState, setScrollState] = react_1.useState({
|
|
102
|
+
const stageRef = (0, react_1.useRef)(null);
|
|
103
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
104
|
+
const scrollContainerRef = (0, react_1.useRef)(null);
|
|
105
|
+
const verticalScrollRef = (0, react_1.useRef)(null);
|
|
106
|
+
const wheelingRef = (0, react_1.useRef)(null);
|
|
107
|
+
const horizontalScrollRef = (0, react_1.useRef)(null);
|
|
108
|
+
const [_, forceRender] = (0, react_1.useReducer)((s) => s + 1, 0);
|
|
109
|
+
const [scrollState, setScrollState] = (0, react_1.useState)({
|
|
106
110
|
scrollTop: 0,
|
|
107
111
|
scrollLeft: 0,
|
|
108
112
|
isScrolling: false,
|
|
109
113
|
verticalScrollDirection: types_1.Direction.Down,
|
|
110
114
|
horizontalScrollDirection: types_1.Direction.Right,
|
|
111
115
|
});
|
|
112
|
-
const scrollSnapRefs = react_1.useRef(null);
|
|
116
|
+
const scrollSnapRefs = (0, react_1.useRef)(null);
|
|
113
117
|
const { scrollTop, scrollLeft, isScrolling, verticalScrollDirection, horizontalScrollDirection, } = scrollState;
|
|
114
|
-
const isMounted = react_1.useRef(false);
|
|
118
|
+
const isMounted = (0, react_1.useRef)(false);
|
|
115
119
|
/* Focus container */
|
|
116
|
-
const focusContainer = react_1.useCallback(() => {
|
|
120
|
+
const focusContainer = (0, react_1.useCallback)(() => {
|
|
117
121
|
var _a;
|
|
118
122
|
if (helpers_1.canUseDOM && document.activeElement !== containerRef.current) {
|
|
119
123
|
return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -122,8 +126,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
122
126
|
/**
|
|
123
127
|
* Get top offset of rowIndex
|
|
124
128
|
*/
|
|
125
|
-
const getRowOffset = react_1.useCallback((index) => {
|
|
126
|
-
return helpers_1.getRowOffset({
|
|
129
|
+
const getRowOffset = (0, react_1.useCallback)((index) => {
|
|
130
|
+
return (0, helpers_1.getRowOffset)({
|
|
127
131
|
index,
|
|
128
132
|
rowHeight,
|
|
129
133
|
columnWidth,
|
|
@@ -134,8 +138,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
134
138
|
/**
|
|
135
139
|
* Get lefft offset of columnIndex
|
|
136
140
|
*/
|
|
137
|
-
const getColumnOffset = react_1.useCallback((index) => {
|
|
138
|
-
return helpers_1.getColumnOffset({
|
|
141
|
+
const getColumnOffset = (0, react_1.useCallback)((index) => {
|
|
142
|
+
return (0, helpers_1.getColumnOffset)({
|
|
139
143
|
index,
|
|
140
144
|
rowHeight,
|
|
141
145
|
columnWidth,
|
|
@@ -146,19 +150,19 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
146
150
|
/**
|
|
147
151
|
* Get height of rowIndex
|
|
148
152
|
*/
|
|
149
|
-
const getRowHeight = react_1.useCallback((index) => {
|
|
150
|
-
return helpers_1.getRowHeight(index, instanceProps.current);
|
|
153
|
+
const getRowHeight = (0, react_1.useCallback)((index) => {
|
|
154
|
+
return (0, helpers_1.getRowHeight)(index, instanceProps.current);
|
|
151
155
|
}, [instanceProps.current]);
|
|
152
156
|
/**
|
|
153
157
|
* Get height of columNiondex
|
|
154
158
|
*/
|
|
155
|
-
const getColumnWidth = react_1.useCallback((index) => {
|
|
156
|
-
return helpers_1.getColumnWidth(index, instanceProps.current);
|
|
159
|
+
const getColumnWidth = (0, react_1.useCallback)((index) => {
|
|
160
|
+
return (0, helpers_1.getColumnWidth)(index, instanceProps.current);
|
|
157
161
|
}, [instanceProps.current]);
|
|
158
162
|
/**
|
|
159
163
|
* onScroll callback
|
|
160
164
|
*/
|
|
161
|
-
react_1.useEffect(() => {
|
|
165
|
+
(0, react_1.useEffect)(() => {
|
|
162
166
|
if (!isMounted.current)
|
|
163
167
|
return;
|
|
164
168
|
onScroll === null || onScroll === void 0 ? void 0 : onScroll({ scrollTop, scrollLeft });
|
|
@@ -166,7 +170,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
166
170
|
/**
|
|
167
171
|
* Handle mouse wheeel
|
|
168
172
|
*/
|
|
169
|
-
react_1.useEffect(() => {
|
|
173
|
+
(0, react_1.useEffect)(() => {
|
|
170
174
|
var _a;
|
|
171
175
|
(_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("wheel", handleWheel, {
|
|
172
176
|
passive: false,
|
|
@@ -180,14 +184,14 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
180
184
|
/**
|
|
181
185
|
* Imperatively get the current scroll position
|
|
182
186
|
*/
|
|
183
|
-
const getScrollPosition = react_1.useCallback(() => {
|
|
187
|
+
const getScrollPosition = (0, react_1.useCallback)(() => {
|
|
184
188
|
return {
|
|
185
189
|
scrollTop,
|
|
186
190
|
scrollLeft,
|
|
187
191
|
};
|
|
188
192
|
}, [scrollTop, scrollLeft]);
|
|
189
193
|
/* Redraw grid imperatively */
|
|
190
|
-
const resetAfterIndices = react_1.useCallback(({ columnIndex, rowIndex }, shouldForceUpdate = true) => {
|
|
194
|
+
const resetAfterIndices = (0, react_1.useCallback)(({ columnIndex, rowIndex }, shouldForceUpdate = true) => {
|
|
191
195
|
if (typeof columnIndex === "number") {
|
|
192
196
|
instanceProps.current.recalcColumnIndices = [];
|
|
193
197
|
instanceProps.current.lastMeasuredColumnIndex = Math.min(instanceProps.current.lastMeasuredColumnIndex, columnIndex - 1);
|
|
@@ -203,26 +207,26 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
203
207
|
* Create a map of merged cells
|
|
204
208
|
* [rowIndex, columnindex] => [parentRowIndex, parentColumnIndex]
|
|
205
209
|
*/
|
|
206
|
-
const mergedCellMap = react_1.useMemo(() => {
|
|
210
|
+
const mergedCellMap = (0, react_1.useMemo)(() => {
|
|
207
211
|
const mergedCellMap = new Map();
|
|
208
212
|
for (let i = 0; i < mergedCells.length; i++) {
|
|
209
213
|
const bounds = mergedCells[i];
|
|
210
|
-
for (const cell of helpers_1.getBoundedCells(bounds)) {
|
|
214
|
+
for (const cell of (0, helpers_1.getBoundedCells)(bounds)) {
|
|
211
215
|
mergedCellMap.set(cell, bounds);
|
|
212
216
|
}
|
|
213
217
|
}
|
|
214
218
|
return mergedCellMap;
|
|
215
219
|
}, [mergedCells]);
|
|
216
220
|
/* Check if a cell is part of a merged cell */
|
|
217
|
-
const isMergedCell = react_1.useCallback(({ rowIndex, columnIndex }) => {
|
|
218
|
-
return mergedCellMap.has(helpers_1.cellIdentifier(rowIndex, columnIndex));
|
|
221
|
+
const isMergedCell = (0, react_1.useCallback)(({ rowIndex, columnIndex }) => {
|
|
222
|
+
return mergedCellMap.has((0, helpers_1.cellIdentifier)(rowIndex, columnIndex));
|
|
219
223
|
}, [mergedCells]);
|
|
220
224
|
/* Get top, left bounds of a cell */
|
|
221
|
-
const getCellBounds = react_1.useCallback(({ rowIndex, columnIndex }, spanMerges = true) => {
|
|
225
|
+
const getCellBounds = (0, react_1.useCallback)(({ rowIndex, columnIndex }, spanMerges = true) => {
|
|
222
226
|
if (spanMerges) {
|
|
223
227
|
const isMerged = isMergedCell({ rowIndex, columnIndex });
|
|
224
228
|
if (isMerged)
|
|
225
|
-
return mergedCellMap.get(helpers_1.cellIdentifier(rowIndex, columnIndex));
|
|
229
|
+
return mergedCellMap.get((0, helpers_1.cellIdentifier)(rowIndex, columnIndex));
|
|
226
230
|
}
|
|
227
231
|
return {
|
|
228
232
|
top: rowIndex,
|
|
@@ -232,10 +236,10 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
232
236
|
};
|
|
233
237
|
}, [mergedCellMap]);
|
|
234
238
|
/* Get top, left bounds of a cell */
|
|
235
|
-
const getActualCellCoords = react_1.useCallback(({ rowIndex, columnIndex }) => {
|
|
239
|
+
const getActualCellCoords = (0, react_1.useCallback)(({ rowIndex, columnIndex }) => {
|
|
236
240
|
const isMerged = isMergedCell({ rowIndex, columnIndex });
|
|
237
241
|
if (isMerged) {
|
|
238
|
-
const cell = mergedCellMap.get(helpers_1.cellIdentifier(rowIndex, columnIndex));
|
|
242
|
+
const cell = mergedCellMap.get((0, helpers_1.cellIdentifier)(rowIndex, columnIndex));
|
|
239
243
|
return {
|
|
240
244
|
rowIndex: cell === null || cell === void 0 ? void 0 : cell.top,
|
|
241
245
|
columnIndex: cell === null || cell === void 0 ? void 0 : cell.left,
|
|
@@ -248,8 +252,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
248
252
|
}, [mergedCellMap]);
|
|
249
253
|
const frozenColumnWidth = getColumnOffset(frozenColumns);
|
|
250
254
|
const frozenRowHeight = getRowOffset(frozenRows);
|
|
251
|
-
const [rowStartIndex, rowStopIndex, visibleRowStartIndex, visibleRowStopIndex,] = react_1.useMemo(() => {
|
|
252
|
-
const startIndex = helpers_1.getRowStartIndexForOffset({
|
|
255
|
+
const [rowStartIndex, rowStopIndex, visibleRowStartIndex, visibleRowStopIndex,] = (0, react_1.useMemo)(() => {
|
|
256
|
+
const startIndex = (0, helpers_1.getRowStartIndexForOffset)({
|
|
253
257
|
rowHeight,
|
|
254
258
|
columnWidth,
|
|
255
259
|
rowCount,
|
|
@@ -258,7 +262,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
258
262
|
offset: scrollTop + frozenRowHeight,
|
|
259
263
|
scale,
|
|
260
264
|
});
|
|
261
|
-
const stopIndex = helpers_1.getRowStopIndexForStartIndex({
|
|
265
|
+
const stopIndex = (0, helpers_1.getRowStopIndexForStartIndex)({
|
|
262
266
|
startIndex,
|
|
263
267
|
rowCount,
|
|
264
268
|
rowHeight,
|
|
@@ -294,8 +298,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
294
298
|
overscanCount,
|
|
295
299
|
frozenRowHeight,
|
|
296
300
|
]);
|
|
297
|
-
const [columnStartIndex, columnStopIndex, visibleColumnStartIndex, visibleColumnStopIndex,] = react_1.useMemo(() => {
|
|
298
|
-
const startIndex = helpers_1.getColumnStartIndexForOffset({
|
|
301
|
+
const [columnStartIndex, columnStopIndex, visibleColumnStartIndex, visibleColumnStopIndex,] = (0, react_1.useMemo)(() => {
|
|
302
|
+
const startIndex = (0, helpers_1.getColumnStartIndexForOffset)({
|
|
299
303
|
rowHeight,
|
|
300
304
|
columnWidth,
|
|
301
305
|
rowCount,
|
|
@@ -304,7 +308,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
304
308
|
offset: scrollLeft + frozenColumnWidth,
|
|
305
309
|
scale,
|
|
306
310
|
});
|
|
307
|
-
const stopIndex = helpers_1.getColumnStopIndexForStartIndex({
|
|
311
|
+
const stopIndex = (0, helpers_1.getColumnStopIndexForStartIndex)({
|
|
308
312
|
startIndex,
|
|
309
313
|
columnCount,
|
|
310
314
|
rowHeight,
|
|
@@ -339,10 +343,10 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
339
343
|
scrollLeft,
|
|
340
344
|
frozenColumnWidth,
|
|
341
345
|
]);
|
|
342
|
-
const estimatedTotalHeight = helpers_1.getEstimatedTotalHeight(rowCount, instanceProps.current);
|
|
343
|
-
const estimatedTotalWidth = helpers_1.getEstimatedTotalWidth(columnCount, instanceProps.current);
|
|
346
|
+
const estimatedTotalHeight = (0, helpers_1.getEstimatedTotalHeight)(rowCount, instanceProps.current);
|
|
347
|
+
const estimatedTotalWidth = (0, helpers_1.getEstimatedTotalWidth)(columnCount, instanceProps.current);
|
|
344
348
|
/* Method to get dimensions of the grid */
|
|
345
|
-
const getDimensions = react_1.useCallback(() => {
|
|
349
|
+
const getDimensions = (0, react_1.useCallback)(() => {
|
|
346
350
|
return {
|
|
347
351
|
containerWidth,
|
|
348
352
|
containerHeight,
|
|
@@ -360,7 +364,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
360
364
|
* We need this because we are binding `onwheel` event to document
|
|
361
365
|
* So props go stale
|
|
362
366
|
*/
|
|
363
|
-
react_1.useEffect(() => {
|
|
367
|
+
(0, react_1.useEffect)(() => {
|
|
364
368
|
if (snap) {
|
|
365
369
|
scrollSnapRefs.current = {
|
|
366
370
|
visibleRowStartIndex,
|
|
@@ -387,18 +391,18 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
387
391
|
/**
|
|
388
392
|
* Snaps vertical scrollbar to the next/prev visible row
|
|
389
393
|
*/
|
|
390
|
-
const snapToRowFn = react_1.useCallback(({ deltaY }) => {
|
|
394
|
+
const snapToRowFn = (0, react_1.useCallback)(({ deltaY }) => {
|
|
391
395
|
if (!verticalScrollRef.current || !scrollSnapRefs.current)
|
|
392
396
|
return;
|
|
393
397
|
if (deltaY !== 0) {
|
|
394
398
|
const direction = deltaY < 0 ? types_1.Direction.Up : types_1.Direction.Down;
|
|
395
|
-
const { visibleRowStartIndex, rowCount, isHiddenRow
|
|
399
|
+
const { visibleRowStartIndex, rowCount, isHiddenRow } = scrollSnapRefs.current;
|
|
396
400
|
let nextRowIndex = direction === types_1.Direction.Up
|
|
397
401
|
? // User is scrolling up
|
|
398
402
|
Math.max(0, visibleRowStartIndex - 1)
|
|
399
403
|
: Math.min(visibleRowStartIndex, rowCount - 1);
|
|
400
404
|
/* Ignore hidden row */
|
|
401
|
-
nextRowIndex = helpers_1.clampIndex(nextRowIndex, isHiddenRow, direction);
|
|
405
|
+
nextRowIndex = (0, helpers_1.clampIndex)(nextRowIndex, isHiddenRow, direction);
|
|
402
406
|
const rowHeight = getRowHeight(nextRowIndex);
|
|
403
407
|
verticalScrollRef.current.scrollTop +=
|
|
404
408
|
(direction === types_1.Direction.Up ? -1 : 1) * rowHeight;
|
|
@@ -407,31 +411,31 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
407
411
|
/**
|
|
408
412
|
* Snaps horizontal scrollbar to the next/prev visible column
|
|
409
413
|
*/
|
|
410
|
-
const snapToColumnFn = react_1.useCallback(({ deltaX }) => {
|
|
414
|
+
const snapToColumnFn = (0, react_1.useCallback)(({ deltaX }) => {
|
|
411
415
|
if (!horizontalScrollRef.current || !scrollSnapRefs.current)
|
|
412
416
|
return;
|
|
413
417
|
if (deltaX !== 0) {
|
|
414
|
-
const { visibleColumnStartIndex, columnCount, isHiddenColumn
|
|
418
|
+
const { visibleColumnStartIndex, columnCount, isHiddenColumn } = scrollSnapRefs.current;
|
|
415
419
|
const direction = deltaX < 0 ? types_1.Direction.Left : types_1.Direction.Right;
|
|
416
420
|
let nextColumnIndex = direction === types_1.Direction.Left
|
|
417
421
|
? Math.max(0, visibleColumnStartIndex - 1)
|
|
418
422
|
: Math.min(visibleColumnStartIndex, columnCount - 1);
|
|
419
423
|
/* Ignore hidden column */
|
|
420
|
-
nextColumnIndex = helpers_1.clampIndex(nextColumnIndex, isHiddenColumn, direction);
|
|
424
|
+
nextColumnIndex = (0, helpers_1.clampIndex)(nextColumnIndex, isHiddenColumn, direction);
|
|
421
425
|
const columnWidth = getColumnWidth(nextColumnIndex);
|
|
422
426
|
horizontalScrollRef.current.scrollLeft +=
|
|
423
427
|
(direction === types_1.Direction.Left ? -1 : 1) * columnWidth;
|
|
424
428
|
}
|
|
425
429
|
}, []);
|
|
426
|
-
const snapToRowThrottler = react_1.useRef();
|
|
427
|
-
const snapToColumnThrottler = react_1.useRef();
|
|
430
|
+
const snapToRowThrottler = (0, react_1.useRef)();
|
|
431
|
+
const snapToColumnThrottler = (0, react_1.useRef)();
|
|
428
432
|
/**
|
|
429
433
|
* Register snap throttlers
|
|
430
434
|
*/
|
|
431
|
-
react_1.useEffect(() => {
|
|
435
|
+
(0, react_1.useEffect)(() => {
|
|
432
436
|
if (snap) {
|
|
433
|
-
snapToRowThrottler.current = helpers_1.throttle(snapToRowFn, scrollThrottleTimeout);
|
|
434
|
-
snapToColumnThrottler.current = helpers_1.throttle(snapToColumnFn, scrollThrottleTimeout);
|
|
437
|
+
snapToRowThrottler.current = (0, helpers_1.throttle)(snapToRowFn, scrollThrottleTimeout);
|
|
438
|
+
snapToColumnThrottler.current = (0, helpers_1.throttle)(snapToColumnFn, scrollThrottleTimeout);
|
|
435
439
|
}
|
|
436
440
|
return () => {
|
|
437
441
|
snapToRowThrottler.current = undefined;
|
|
@@ -439,19 +443,19 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
439
443
|
};
|
|
440
444
|
}, [snap]);
|
|
441
445
|
/* Find frozen column boundary */
|
|
442
|
-
const isWithinFrozenColumnBoundary = react_1.useCallback((x) => {
|
|
446
|
+
const isWithinFrozenColumnBoundary = (0, react_1.useCallback)((x) => {
|
|
443
447
|
return frozenColumns > 0 && x < frozenColumnWidth;
|
|
444
448
|
}, [frozenColumns, frozenColumnWidth]);
|
|
445
449
|
/* Find frozen row boundary */
|
|
446
|
-
const isWithinFrozenRowBoundary = react_1.useCallback((y) => {
|
|
450
|
+
const isWithinFrozenRowBoundary = (0, react_1.useCallback)((y) => {
|
|
447
451
|
return frozenRows > 0 && y < frozenRowHeight;
|
|
448
452
|
}, [frozenRows, frozenRowHeight]);
|
|
449
453
|
/**
|
|
450
454
|
* Get relative mouse position
|
|
451
455
|
*/
|
|
452
|
-
const getRelativePositionFromOffset = react_1.useCallback((left, top) => {
|
|
456
|
+
const getRelativePositionFromOffset = (0, react_1.useCallback)((left, top) => {
|
|
453
457
|
var _a;
|
|
454
|
-
tiny_invariant_1.default(typeof left === "number" && typeof top === "number", "Top and left should be a number");
|
|
458
|
+
(0, tiny_invariant_1.default)(typeof left === "number" && typeof top === "number", "Top and left should be a number");
|
|
455
459
|
if (!stageRef.current)
|
|
456
460
|
return null;
|
|
457
461
|
const stage = stageRef.current.getStage();
|
|
@@ -470,7 +474,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
470
474
|
/**
|
|
471
475
|
* Get cell cordinates from current mouse x/y positions
|
|
472
476
|
*/
|
|
473
|
-
const getCellCoordsFromOffset = react_1.useCallback((left, top, includeFrozen = true) => {
|
|
477
|
+
const getCellCoordsFromOffset = (0, react_1.useCallback)((left, top, includeFrozen = true) => {
|
|
474
478
|
const pos = getRelativePositionFromOffset(left, top);
|
|
475
479
|
if (!pos)
|
|
476
480
|
return null;
|
|
@@ -481,7 +485,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
481
485
|
columnOffset > estimatedTotalWidth) {
|
|
482
486
|
return null;
|
|
483
487
|
}
|
|
484
|
-
const rowIndex = helpers_1.getRowStartIndexForOffset({
|
|
488
|
+
const rowIndex = (0, helpers_1.getRowStartIndexForOffset)({
|
|
485
489
|
rowHeight,
|
|
486
490
|
columnWidth,
|
|
487
491
|
rowCount,
|
|
@@ -490,7 +494,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
490
494
|
offset: rowOffset,
|
|
491
495
|
scale,
|
|
492
496
|
});
|
|
493
|
-
const columnIndex = helpers_1.getColumnStartIndexForOffset({
|
|
497
|
+
const columnIndex = (0, helpers_1.getColumnStartIndexForOffset)({
|
|
494
498
|
rowHeight,
|
|
495
499
|
columnWidth,
|
|
496
500
|
rowCount,
|
|
@@ -516,7 +520,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
516
520
|
/**
|
|
517
521
|
* Get cell offset position from rowIndex, columnIndex
|
|
518
522
|
*/
|
|
519
|
-
const getCellOffsetFromCoords = react_1.useCallback((cell) => {
|
|
523
|
+
const getCellOffsetFromCoords = (0, react_1.useCallback)((cell) => {
|
|
520
524
|
const { top: rowIndex, left: columnIndex, right, bottom, } = getCellBounds(cell);
|
|
521
525
|
const x = getColumnOffset(columnIndex);
|
|
522
526
|
const y = getRowOffset(rowIndex);
|
|
@@ -532,7 +536,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
532
536
|
/**
|
|
533
537
|
* Resize one or more columns
|
|
534
538
|
*/
|
|
535
|
-
const resizeColumns = react_1.useCallback((indices) => {
|
|
539
|
+
const resizeColumns = (0, react_1.useCallback)((indices) => {
|
|
536
540
|
const leftMost = Math.min(...indices);
|
|
537
541
|
instanceProps.current.recalcColumnIndices = indices;
|
|
538
542
|
resetAfterIndices({ columnIndex: leftMost }, false);
|
|
@@ -541,14 +545,14 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
541
545
|
/**
|
|
542
546
|
* Resize one or more rows
|
|
543
547
|
*/
|
|
544
|
-
const resizeRows = react_1.useCallback((indices) => {
|
|
548
|
+
const resizeRows = (0, react_1.useCallback)((indices) => {
|
|
545
549
|
const topMost = Math.min(...indices);
|
|
546
550
|
instanceProps.current.recalcRowIndices = indices;
|
|
547
551
|
resetAfterIndices({ rowIndex: topMost }, false);
|
|
548
552
|
forceRender();
|
|
549
553
|
}, []);
|
|
550
554
|
/* Always if the viewport changes */
|
|
551
|
-
react_1.useEffect(() => {
|
|
555
|
+
(0, react_1.useEffect)(() => {
|
|
552
556
|
if (instanceProps.current.recalcColumnIndices.length) {
|
|
553
557
|
instanceProps.current.recalcColumnIndices.length = 0;
|
|
554
558
|
}
|
|
@@ -557,7 +561,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
557
561
|
}
|
|
558
562
|
}, [rowStopIndex, columnStopIndex, scale]);
|
|
559
563
|
/* Get current view port of the grid */
|
|
560
|
-
const getViewPort = react_1.useCallback(() => {
|
|
564
|
+
const getViewPort = (0, react_1.useCallback)(() => {
|
|
561
565
|
return {
|
|
562
566
|
rowStartIndex,
|
|
563
567
|
rowStopIndex,
|
|
@@ -583,15 +587,15 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
583
587
|
* 1. Stage does not listen to any mouse events
|
|
584
588
|
* 2. Div container does not listen to pointer events
|
|
585
589
|
*/
|
|
586
|
-
const resetIsScrollingTimeoutID = react_1.useRef(null);
|
|
587
|
-
const resetIsScrollingDebounced = react_1.useCallback(() => {
|
|
590
|
+
const resetIsScrollingTimeoutID = (0, react_1.useRef)(null);
|
|
591
|
+
const resetIsScrollingDebounced = (0, react_1.useCallback)(() => {
|
|
588
592
|
if (resetIsScrollingTimeoutID.current !== null) {
|
|
589
|
-
helpers_1.cancelTimeout(resetIsScrollingTimeoutID.current);
|
|
593
|
+
(0, helpers_1.cancelTimeout)(resetIsScrollingTimeoutID.current);
|
|
590
594
|
}
|
|
591
|
-
resetIsScrollingTimeoutID.current = helpers_1.requestTimeout(resetIsScrolling, exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL);
|
|
595
|
+
resetIsScrollingTimeoutID.current = (0, helpers_1.requestTimeout)(resetIsScrolling, exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL);
|
|
592
596
|
}, []);
|
|
593
597
|
/* Reset isScrolling */
|
|
594
|
-
const resetIsScrolling = react_1.useCallback(() => {
|
|
598
|
+
const resetIsScrolling = (0, react_1.useCallback)(() => {
|
|
595
599
|
resetIsScrollingTimeoutID.current = null;
|
|
596
600
|
setScrollState((prev) => {
|
|
597
601
|
return {
|
|
@@ -601,8 +605,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
601
605
|
});
|
|
602
606
|
}, []);
|
|
603
607
|
/* Handle vertical scroll */
|
|
604
|
-
const handleScroll = react_1.useCallback((e) => {
|
|
605
|
-
const { scrollTop } = e.
|
|
608
|
+
const handleScroll = (0, react_1.useCallback)((e) => {
|
|
609
|
+
const { scrollTop } = e.currentTarget;
|
|
606
610
|
setScrollState((prev) => ({
|
|
607
611
|
...prev,
|
|
608
612
|
isScrolling: true,
|
|
@@ -615,8 +619,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
615
619
|
resetIsScrollingDebounced();
|
|
616
620
|
}, [scrollLeft]);
|
|
617
621
|
/* Handle horizontal scroll */
|
|
618
|
-
const handleScrollLeft = react_1.useCallback((e) => {
|
|
619
|
-
const { scrollLeft } = e.
|
|
622
|
+
const handleScrollLeft = (0, react_1.useCallback)((e) => {
|
|
623
|
+
const { scrollLeft } = e.currentTarget;
|
|
620
624
|
setScrollState((prev) => ({
|
|
621
625
|
...prev,
|
|
622
626
|
isScrolling: true,
|
|
@@ -629,7 +633,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
629
633
|
resetIsScrollingDebounced();
|
|
630
634
|
}, [scrollTop]);
|
|
631
635
|
/* Scroll based on left, top position */
|
|
632
|
-
const scrollTo = react_1.useCallback(({ scrollTop, scrollLeft }) => {
|
|
636
|
+
const scrollTo = (0, react_1.useCallback)(({ scrollTop, scrollLeft }) => {
|
|
633
637
|
/* If scrollbar is visible, lets update it which triggers a state change */
|
|
634
638
|
if (showScrollbar) {
|
|
635
639
|
if (horizontalScrollRef.current && scrollLeft !== void 0)
|
|
@@ -648,17 +652,17 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
648
652
|
}
|
|
649
653
|
}, [showScrollbar]);
|
|
650
654
|
/* Scroll grid to top */
|
|
651
|
-
const scrollToTop = react_1.useCallback(() => {
|
|
655
|
+
const scrollToTop = (0, react_1.useCallback)(() => {
|
|
652
656
|
scrollTo({ scrollTop: 0, scrollLeft: 0 });
|
|
653
657
|
}, []);
|
|
654
658
|
/* Scroll grid to bottom */
|
|
655
|
-
const scrollToBottom = react_1.useCallback(() => {
|
|
659
|
+
const scrollToBottom = (0, react_1.useCallback)(() => {
|
|
656
660
|
scrollTo({ scrollTop: estimatedTotalHeight - containerHeight });
|
|
657
661
|
}, [estimatedTotalHeight, containerHeight]);
|
|
658
662
|
/**
|
|
659
663
|
* Scrollby utility
|
|
660
664
|
*/
|
|
661
|
-
const scrollBy = react_1.useCallback(({ x, y }) => {
|
|
665
|
+
const scrollBy = (0, react_1.useCallback)(({ x, y }) => {
|
|
662
666
|
if (showScrollbar) {
|
|
663
667
|
if (horizontalScrollRef.current && x !== void 0)
|
|
664
668
|
horizontalScrollRef.current.scrollLeft += x;
|
|
@@ -679,7 +683,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
679
683
|
* Scrolls to cell
|
|
680
684
|
* Respects frozen rows and columns
|
|
681
685
|
*/
|
|
682
|
-
const scrollToItem = react_1.useCallback(({ rowIndex, columnIndex }, align = helpers_1.Align.smart) => {
|
|
686
|
+
const scrollToItem = (0, react_1.useCallback)(({ rowIndex, columnIndex }, align = helpers_1.Align.smart) => {
|
|
683
687
|
const isFrozenRow = rowIndex !== void 0 && rowIndex < frozenRows;
|
|
684
688
|
const isFrozenColumn = columnIndex !== void 0 && columnIndex < frozenColumns;
|
|
685
689
|
const frozenColumnOffset = getColumnOffset(frozenColumns);
|
|
@@ -692,7 +696,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
692
696
|
const columnAlign = width > containerWidth ? helpers_1.Align.start : align;
|
|
693
697
|
const rowAlign = height > containerHeight ? helpers_1.Align.start : align;
|
|
694
698
|
const newScrollLeft = columnIndex !== void 0 && !isFrozenColumn
|
|
695
|
-
? helpers_1.getOffsetForColumnAndAlignment({
|
|
699
|
+
? (0, helpers_1.getOffsetForColumnAndAlignment)({
|
|
696
700
|
index: columnIndex,
|
|
697
701
|
containerHeight,
|
|
698
702
|
containerWidth,
|
|
@@ -712,7 +716,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
712
716
|
: void 0;
|
|
713
717
|
const frozenRowOffset = getRowOffset(frozenRows);
|
|
714
718
|
const newScrollTop = rowIndex !== void 0 && !isFrozenRow
|
|
715
|
-
? helpers_1.getOffsetForRowAndAlignment({
|
|
719
|
+
? (0, helpers_1.getOffsetForRowAndAlignment)({
|
|
716
720
|
index: rowIndex,
|
|
717
721
|
containerHeight,
|
|
718
722
|
containerWidth,
|
|
@@ -763,7 +767,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
763
767
|
/**
|
|
764
768
|
* Fired when user tries to scroll the canvas
|
|
765
769
|
*/
|
|
766
|
-
const handleWheel = react_1.useCallback((event) => {
|
|
770
|
+
const handleWheel = (0, react_1.useCallback)((event) => {
|
|
767
771
|
var _a, _b, _c, _d;
|
|
768
772
|
/* If user presses shift key, scroll horizontally */
|
|
769
773
|
const isScrollingHorizontally = event.shiftKey;
|
|
@@ -797,7 +801,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
797
801
|
if (!horizontalScrollRef.current || !verticalScrollRef.current)
|
|
798
802
|
return;
|
|
799
803
|
const currentScroll = isHorizontal
|
|
800
|
-
? (_c = horizontalScrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft
|
|
804
|
+
? (_c = horizontalScrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft
|
|
805
|
+
: (_d = verticalScrollRef.current) === null || _d === void 0 ? void 0 : _d.scrollTop;
|
|
801
806
|
wheelingRef.current = window.requestAnimationFrame(() => {
|
|
802
807
|
wheelingRef.current = null;
|
|
803
808
|
if (isHorizontal) {
|
|
@@ -811,7 +816,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
811
816
|
});
|
|
812
817
|
}, []);
|
|
813
818
|
/* Callback when visible rows or columns have changed */
|
|
814
|
-
react_1.useEffect(() => {
|
|
819
|
+
(0, react_1.useEffect)(() => {
|
|
815
820
|
onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange({
|
|
816
821
|
rowStartIndex,
|
|
817
822
|
rowStopIndex,
|
|
@@ -852,14 +857,14 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
852
857
|
stroke: gridLineColor,
|
|
853
858
|
strokeWidth: gridLineWidth,
|
|
854
859
|
offsetY: -0.5,
|
|
855
|
-
key: helpers_1.itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
860
|
+
key: (0, helpers_1.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
856
861
|
}));
|
|
857
862
|
gridLinesFrozenColumn.push(gridLineRenderer({
|
|
858
863
|
points: [0, y1, x2, y2],
|
|
859
864
|
stroke: gridLineColor,
|
|
860
865
|
strokeWidth: gridLineWidth,
|
|
861
866
|
offsetY: -0.5,
|
|
862
|
-
key: helpers_1.itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
867
|
+
key: (0, helpers_1.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
863
868
|
}));
|
|
864
869
|
}
|
|
865
870
|
// Vertical
|
|
@@ -873,14 +878,14 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
873
878
|
stroke: gridLineColor,
|
|
874
879
|
strokeWidth: gridLineWidth,
|
|
875
880
|
offsetX: -0.5,
|
|
876
|
-
key: helpers_1.itemKey({ rowIndex: x1, columnIndex: columnIndex }),
|
|
881
|
+
key: (0, helpers_1.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
|
|
877
882
|
}));
|
|
878
883
|
gridLinesFrozenRow.push(gridLineRenderer({
|
|
879
884
|
points: [x1, 0, x2, y2],
|
|
880
885
|
stroke: gridLineColor,
|
|
881
886
|
strokeWidth: gridLineWidth,
|
|
882
887
|
offsetX: -0.5,
|
|
883
|
-
key: helpers_1.itemKey({ rowIndex: x1, columnIndex: columnIndex }),
|
|
888
|
+
key: (0, helpers_1.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
|
|
884
889
|
}));
|
|
885
890
|
}
|
|
886
891
|
for (let rowIndex = 0; rowIndex < Math.min(columnStopIndex, frozenRows); rowIndex++) {
|
|
@@ -895,14 +900,14 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
895
900
|
stroke: gridLineColor,
|
|
896
901
|
strokeWidth: gridLineWidth,
|
|
897
902
|
offsetY: -0.5,
|
|
898
|
-
key: helpers_1.itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
903
|
+
key: (0, helpers_1.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
899
904
|
}));
|
|
900
905
|
gridLinesFrozenIntersection.push(gridLineRenderer({
|
|
901
906
|
points: [x1, y1, x2, y2],
|
|
902
907
|
stroke: gridLineColor,
|
|
903
908
|
strokeWidth: gridLineWidth,
|
|
904
909
|
offsetY: -0.5,
|
|
905
|
-
key: helpers_1.itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
910
|
+
key: (0, helpers_1.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
|
|
906
911
|
}));
|
|
907
912
|
}
|
|
908
913
|
for (let columnIndex = 0; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
|
|
@@ -915,14 +920,14 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
915
920
|
stroke: gridLineColor,
|
|
916
921
|
strokeWidth: gridLineWidth,
|
|
917
922
|
offsetX: -0.5,
|
|
918
|
-
key: helpers_1.itemKey({ rowIndex: x1, columnIndex: columnIndex }),
|
|
923
|
+
key: (0, helpers_1.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
|
|
919
924
|
}));
|
|
920
925
|
gridLinesFrozenIntersection.push(gridLineRenderer({
|
|
921
926
|
points: [x1, y1, x2, y2],
|
|
922
927
|
stroke: gridLineColor,
|
|
923
928
|
strokeWidth: gridLineWidth,
|
|
924
929
|
offsetX: -0.5,
|
|
925
|
-
key: helpers_1.itemKey({ rowIndex: x1, columnIndex: columnIndex }),
|
|
930
|
+
key: (0, helpers_1.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
|
|
926
931
|
}));
|
|
927
932
|
}
|
|
928
933
|
}
|
|
@@ -962,7 +967,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
962
967
|
continue;
|
|
963
968
|
}
|
|
964
969
|
if (isMerged) {
|
|
965
|
-
const cellId = helpers_1.cellIdentifier(bounds.top, bounds.left);
|
|
970
|
+
const cellId = (0, helpers_1.cellIdentifier)(bounds.top, bounds.left);
|
|
966
971
|
if (mergedCellRenderMap.has(cellId)) {
|
|
967
972
|
continue;
|
|
968
973
|
}
|
|
@@ -980,7 +985,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
980
985
|
rowIndex: actualRowIndex,
|
|
981
986
|
columnIndex: actualColumnIndex,
|
|
982
987
|
isMergedCell: isMerged,
|
|
983
|
-
key: helpers_1.itemKey({
|
|
988
|
+
key: (0, helpers_1.itemKey)({
|
|
984
989
|
rowIndex: actualRowIndex,
|
|
985
990
|
columnIndex: actualColumnIndex,
|
|
986
991
|
}),
|
|
@@ -994,7 +999,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
994
999
|
rowIndex: actualRowIndex,
|
|
995
1000
|
columnIndex: actualColumnIndex,
|
|
996
1001
|
isMergedCell: isMerged,
|
|
997
|
-
key: helpers_1.itemKey({
|
|
1002
|
+
key: (0, helpers_1.itemKey)({
|
|
998
1003
|
rowIndex: actualRowIndex,
|
|
999
1004
|
columnIndex: actualColumnIndex,
|
|
1000
1005
|
}),
|
|
@@ -1013,7 +1018,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1013
1018
|
/* Skip merged cells, Merged cell cannot be extended */
|
|
1014
1019
|
if (rowIndex < frozenRows ||
|
|
1015
1020
|
columnIndex < frozenColumns ||
|
|
1016
|
-
isMergedCell({ rowIndex, columnIndex }) ||
|
|
1021
|
+
isMergedCell({ rowIndex, columnIndex }) ||
|
|
1022
|
+
(isHiddenCell === null || isHiddenCell === void 0 ? void 0 : isHiddenCell(rowIndex, columnIndex))) {
|
|
1017
1023
|
continue;
|
|
1018
1024
|
}
|
|
1019
1025
|
const x = getColumnOffset(columnIndex);
|
|
@@ -1030,7 +1036,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1030
1036
|
height,
|
|
1031
1037
|
rowIndex,
|
|
1032
1038
|
columnIndex,
|
|
1033
|
-
key: `range:${helpers_1.itemKey({ rowIndex, columnIndex })}`,
|
|
1039
|
+
key: `range:${(0, helpers_1.itemKey)({ rowIndex, columnIndex })}`,
|
|
1034
1040
|
}));
|
|
1035
1041
|
}
|
|
1036
1042
|
/* Draw frozen rows */
|
|
@@ -1059,7 +1065,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1059
1065
|
continue;
|
|
1060
1066
|
}
|
|
1061
1067
|
if (isMerged) {
|
|
1062
|
-
const cellId = helpers_1.cellIdentifier(bounds.top, bounds.left);
|
|
1068
|
+
const cellId = (0, helpers_1.cellIdentifier)(bounds.top, bounds.left);
|
|
1063
1069
|
if (mergedCellRenderMap.has(cellId)) {
|
|
1064
1070
|
continue;
|
|
1065
1071
|
}
|
|
@@ -1077,7 +1083,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1077
1083
|
rowIndex: actualRowIndex,
|
|
1078
1084
|
columnIndex: actualColumnIndex,
|
|
1079
1085
|
isMergedCell: isMerged,
|
|
1080
|
-
key: helpers_1.itemKey({
|
|
1086
|
+
key: (0, helpers_1.itemKey)({
|
|
1081
1087
|
rowIndex: actualRowIndex,
|
|
1082
1088
|
columnIndex: actualColumnIndex,
|
|
1083
1089
|
}),
|
|
@@ -1091,7 +1097,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1091
1097
|
rowIndex: actualRowIndex,
|
|
1092
1098
|
columnIndex: actualColumnIndex,
|
|
1093
1099
|
isMergedCell: isMerged,
|
|
1094
|
-
key: helpers_1.itemKey({
|
|
1100
|
+
key: (0, helpers_1.itemKey)({
|
|
1095
1101
|
rowIndex: actualRowIndex,
|
|
1096
1102
|
columnIndex: actualColumnIndex,
|
|
1097
1103
|
}),
|
|
@@ -1122,7 +1128,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1122
1128
|
continue;
|
|
1123
1129
|
}
|
|
1124
1130
|
if (isMerged) {
|
|
1125
|
-
const cellId = helpers_1.cellIdentifier(bounds.top, bounds.left);
|
|
1131
|
+
const cellId = (0, helpers_1.cellIdentifier)(bounds.top, bounds.left);
|
|
1126
1132
|
if (mergedCellRenderMap.has(cellId)) {
|
|
1127
1133
|
continue;
|
|
1128
1134
|
}
|
|
@@ -1140,7 +1146,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1140
1146
|
rowIndex: actualRowIndex,
|
|
1141
1147
|
columnIndex: actualColumnIndex,
|
|
1142
1148
|
isMergedCell: isMerged,
|
|
1143
|
-
key: helpers_1.itemKey({
|
|
1149
|
+
key: (0, helpers_1.itemKey)({
|
|
1144
1150
|
rowIndex: actualRowIndex,
|
|
1145
1151
|
columnIndex: actualColumnIndex,
|
|
1146
1152
|
}),
|
|
@@ -1154,7 +1160,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1154
1160
|
rowIndex: actualRowIndex,
|
|
1155
1161
|
columnIndex: actualColumnIndex,
|
|
1156
1162
|
isMergedCell: isMerged,
|
|
1157
|
-
key: helpers_1.itemKey({
|
|
1163
|
+
key: (0, helpers_1.itemKey)({
|
|
1158
1164
|
rowIndex: actualRowIndex,
|
|
1159
1165
|
columnIndex: actualColumnIndex,
|
|
1160
1166
|
}),
|
|
@@ -1165,10 +1171,10 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1165
1171
|
/**
|
|
1166
1172
|
* Frozen column shadow
|
|
1167
1173
|
*/
|
|
1168
|
-
const frozenColumnShadow = react_1.useMemo(() => {
|
|
1174
|
+
const frozenColumnShadow = (0, react_1.useMemo)(() => {
|
|
1169
1175
|
const frozenColumnLineX = getColumnOffset(frozenColumns);
|
|
1170
1176
|
const frozenColumnLineY = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
|
|
1171
|
-
return (react_1.default.createElement(
|
|
1177
|
+
return (react_1.default.createElement(react_konva_1.Line, { points: [frozenColumnLineX, 0, frozenColumnLineX, frozenColumnLineY], offsetX: -0.5, strokeWidth: 1, shadowForStrokeEnabled: false, strokeScaleEnabled: false, hitStrokeWidth: 0, listening: false, perfectDrawEnabled: false, ...shadowSettings }));
|
|
1172
1178
|
}, [
|
|
1173
1179
|
shadowSettings,
|
|
1174
1180
|
frozenColumns,
|
|
@@ -1180,10 +1186,10 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1180
1186
|
/**
|
|
1181
1187
|
* Frozen row shadow
|
|
1182
1188
|
*/
|
|
1183
|
-
const frozenRowShadow = react_1.useMemo(() => {
|
|
1189
|
+
const frozenRowShadow = (0, react_1.useMemo)(() => {
|
|
1184
1190
|
const frozenRowLineY = getRowOffset(frozenRows);
|
|
1185
1191
|
const frozenRowLineX = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
|
|
1186
|
-
return (react_1.default.createElement(
|
|
1192
|
+
return (react_1.default.createElement(react_konva_1.Line, { points: [0, frozenRowLineY, frozenRowLineX, frozenRowLineY], offsetY: -0.5, strokeWidth: 1, shadowForStrokeEnabled: false, strokeScaleEnabled: false, hitStrokeWidth: 0, listening: false, perfectDrawEnabled: false, ...shadowSettings }));
|
|
1187
1193
|
}, [
|
|
1188
1194
|
shadowSettings,
|
|
1189
1195
|
frozenRows,
|
|
@@ -1209,7 +1215,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1209
1215
|
continue;
|
|
1210
1216
|
}
|
|
1211
1217
|
if (isMerged) {
|
|
1212
|
-
const cellId = helpers_1.cellIdentifier(bounds.top, bounds.left);
|
|
1218
|
+
const cellId = (0, helpers_1.cellIdentifier)(bounds.top, bounds.left);
|
|
1213
1219
|
if (mergedCellRenderMap.has(cellId)) {
|
|
1214
1220
|
continue;
|
|
1215
1221
|
}
|
|
@@ -1227,7 +1233,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1227
1233
|
rowIndex: actualRowIndex,
|
|
1228
1234
|
columnIndex: actualColumnIndex,
|
|
1229
1235
|
isMergedCell: isMerged,
|
|
1230
|
-
key: helpers_1.itemKey({
|
|
1236
|
+
key: (0, helpers_1.itemKey)({
|
|
1231
1237
|
rowIndex: actualRowIndex,
|
|
1232
1238
|
columnIndex: actualColumnIndex,
|
|
1233
1239
|
}),
|
|
@@ -1241,7 +1247,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1241
1247
|
rowIndex: actualRowIndex,
|
|
1242
1248
|
columnIndex: actualColumnIndex,
|
|
1243
1249
|
isMergedCell: isMerged,
|
|
1244
|
-
key: helpers_1.itemKey({
|
|
1250
|
+
key: (0, helpers_1.itemKey)({
|
|
1245
1251
|
rowIndex: actualRowIndex,
|
|
1246
1252
|
columnIndex: actualColumnIndex,
|
|
1247
1253
|
}),
|
|
@@ -1465,7 +1471,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1465
1471
|
const y = getRowOffset(top);
|
|
1466
1472
|
const width = getColumnOffset(Math.min(columnCount, right + 1)) - x;
|
|
1467
1473
|
const height = getRowOffset(Math.min(rowCount, bottom + 1)) - y;
|
|
1468
|
-
borderStyleCells.push(utils_1.createHTMLBox({
|
|
1474
|
+
borderStyleCells.push((0, utils_1.createHTMLBox)({
|
|
1469
1475
|
...rest,
|
|
1470
1476
|
...style,
|
|
1471
1477
|
x,
|
|
@@ -1478,7 +1484,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1478
1484
|
if (isLeftBoundFrozen) {
|
|
1479
1485
|
const frozenColumnSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
|
|
1480
1486
|
getColumnOffset(left);
|
|
1481
|
-
borderStyleCellsFrozenColumns.push(utils_1.createHTMLBox({
|
|
1487
|
+
borderStyleCellsFrozenColumns.push((0, utils_1.createHTMLBox)({
|
|
1482
1488
|
...rest,
|
|
1483
1489
|
...style,
|
|
1484
1490
|
type: "border",
|
|
@@ -1494,7 +1500,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1494
1500
|
}
|
|
1495
1501
|
if (isTopBoundFrozen) {
|
|
1496
1502
|
const frozenRowSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top);
|
|
1497
|
-
borderStyleCellsFrozenRows.push(utils_1.createHTMLBox({
|
|
1503
|
+
borderStyleCellsFrozenRows.push((0, utils_1.createHTMLBox)({
|
|
1498
1504
|
...rest,
|
|
1499
1505
|
...style,
|
|
1500
1506
|
type: "border",
|
|
@@ -1512,7 +1518,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1512
1518
|
const frozenIntersectionSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top);
|
|
1513
1519
|
const frozenIntersectionSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
|
|
1514
1520
|
getColumnOffset(left);
|
|
1515
|
-
borderStyleCellsIntersection.push(utils_1.createHTMLBox({
|
|
1521
|
+
borderStyleCellsIntersection.push((0, utils_1.createHTMLBox)({
|
|
1516
1522
|
...rest,
|
|
1517
1523
|
...style,
|
|
1518
1524
|
type: "border",
|
|
@@ -1541,26 +1547,26 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1541
1547
|
/* Frozen column shadow */
|
|
1542
1548
|
const frozenColumnShadowComponent = showFrozenShadow && frozenColumns !== 0 ? frozenColumnShadow : null;
|
|
1543
1549
|
const stageChildren = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
1544
|
-
react_1.default.createElement(
|
|
1545
|
-
react_1.default.createElement(
|
|
1546
|
-
react_1.default.createElement(
|
|
1550
|
+
react_1.default.createElement(react_konva_1.Layer, null,
|
|
1551
|
+
react_1.default.createElement(react_konva_1.Group, { clipX: frozenColumnWidth, clipY: frozenRowHeight, clipWidth: containerWidth - frozenColumnWidth, clipHeight: containerHeight - frozenRowHeight },
|
|
1552
|
+
react_1.default.createElement(react_konva_1.Group, { offsetY: scrollTop, offsetX: scrollLeft },
|
|
1547
1553
|
gridLines,
|
|
1548
1554
|
cells,
|
|
1549
1555
|
cellOverlays,
|
|
1550
1556
|
ranges)),
|
|
1551
|
-
react_1.default.createElement(
|
|
1552
|
-
react_1.default.createElement(
|
|
1557
|
+
react_1.default.createElement(react_konva_1.Group, { clipX: frozenColumnWidth, clipY: 0, clipWidth: containerWidth - frozenColumnWidth, clipHeight: frozenRowHeight + frozenSpacing },
|
|
1558
|
+
react_1.default.createElement(react_konva_1.Group, { offsetY: 0, offsetX: scrollLeft },
|
|
1553
1559
|
gridLinesFrozenRow,
|
|
1554
1560
|
frozenRowCells,
|
|
1555
1561
|
frozenRowShadowComponent,
|
|
1556
1562
|
frozenRowCellOverlays)),
|
|
1557
|
-
react_1.default.createElement(
|
|
1558
|
-
react_1.default.createElement(
|
|
1563
|
+
react_1.default.createElement(react_konva_1.Group, { clipX: 0, clipY: frozenRowHeight, clipWidth: frozenColumnWidth + frozenSpacing, clipHeight: containerHeight - frozenRowHeight },
|
|
1564
|
+
react_1.default.createElement(react_konva_1.Group, { offsetY: scrollTop, offsetX: 0 },
|
|
1559
1565
|
gridLinesFrozenColumn,
|
|
1560
1566
|
frozenColumnCells,
|
|
1561
1567
|
frozenColumnShadowComponent,
|
|
1562
1568
|
frozenColumnCellOverlays)),
|
|
1563
|
-
react_1.default.createElement(
|
|
1569
|
+
react_1.default.createElement(react_konva_1.Group, { offsetY: 0, offsetX: 0, clipX: 0, clipY: 0, clipWidth: frozenColumnWidth + frozenSpacing, clipHeight: frozenRowHeight + frozenSpacing },
|
|
1564
1570
|
gridLinesFrozenIntersection,
|
|
1565
1571
|
frozenIntersectionCells,
|
|
1566
1572
|
frozenRowShadowComponent,
|
|
@@ -1573,7 +1579,7 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1573
1579
|
})
|
|
1574
1580
|
: null));
|
|
1575
1581
|
const fillHandleWidth = 8;
|
|
1576
|
-
const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(FillHandle_1.default,
|
|
1582
|
+
const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(FillHandle_1.default, { ...fillHandleDimension, stroke: selectionBorderColor, size: fillHandleWidth, borderColor: fillhandleBorderColor, ...fillHandleProps })) : null;
|
|
1577
1583
|
const selectionChildren = (react_1.default.createElement("div", { style: {
|
|
1578
1584
|
pointerEvents: "none",
|
|
1579
1585
|
} },
|
|
@@ -1641,8 +1647,8 @@ const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
|
|
|
1641
1647
|
width: containerWidth,
|
|
1642
1648
|
userSelect: "none",
|
|
1643
1649
|
}, className: "rowsncolumns-grid", ref: scrollContainerRef },
|
|
1644
|
-
react_1.default.createElement("div",
|
|
1645
|
-
react_1.default.createElement(
|
|
1650
|
+
react_1.default.createElement("div", { className: "rowsncolumns-grid-container", tabIndex: 0, ref: containerRef, ...rest },
|
|
1651
|
+
react_1.default.createElement(react_konva_1.Stage, { width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents, ...stageProps }, wrapper(stageChildren))),
|
|
1646
1652
|
selectionChildren,
|
|
1647
1653
|
showScrollbar ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
1648
1654
|
react_1.default.createElement("div", { className: "rowsncolumns-grid-scrollbar rowsncolumns-grid-scrollbar-y", tabIndex: -1, style: {
|