m9-react-data-grid 7.0.0-beta.7.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +24 -0
- package/README.md +322 -0
- package/lib/bundle.cjs +2637 -0
- package/lib/bundle.cjs.map +1 -0
- package/lib/bundle.js +2624 -0
- package/lib/bundle.js.map +1 -0
- package/lib/index.d.ts +336 -0
- package/package.json +117 -0
package/lib/bundle.cjs
ADDED
|
@@ -0,0 +1,2637 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const react = require('react');
|
|
6
|
+
const clsx = require('clsx');
|
|
7
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function styleInject(css, ref) {
|
|
10
|
+
if ( ref === void 0 ) ref = {};
|
|
11
|
+
var insertAt = ref.insertAt;
|
|
12
|
+
|
|
13
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
14
|
+
|
|
15
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
16
|
+
var style = document.createElement('style');
|
|
17
|
+
style.type = 'text/css';
|
|
18
|
+
|
|
19
|
+
if (insertAt === 'top') {
|
|
20
|
+
if (head.firstChild) {
|
|
21
|
+
head.insertBefore(style, head.firstChild);
|
|
22
|
+
} else {
|
|
23
|
+
head.appendChild(style);
|
|
24
|
+
}
|
|
25
|
+
} else {
|
|
26
|
+
head.appendChild(style);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
if (style.styleSheet) {
|
|
30
|
+
style.styleSheet.cssText = css;
|
|
31
|
+
} else {
|
|
32
|
+
style.appendChild(document.createTextNode(css));
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
var css_248z$e = ".cj343x0700-beta711{background-color:inherit;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);contain:strict;contain:size layout style paint;outline:none;overflow:hidden;overflow:clip;padding:0 8px;text-overflow:ellipsis;white-space:nowrap}.cj343x0700-beta711[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--selection-color)}.csofj7r700-beta711{position:sticky;z-index:1}.ch2wcw8700-beta711{box-shadow:2px 0 5px -2px hsla(0,0%,53%,.3)}";
|
|
37
|
+
styleInject(css_248z$e,{"insertAt":"top"});
|
|
38
|
+
|
|
39
|
+
const cell = "cj343x0700-beta711";
|
|
40
|
+
const cellClassname = `rdg-cell ${cell}`;
|
|
41
|
+
const cellFrozen = "csofj7r700-beta711";
|
|
42
|
+
const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
|
|
43
|
+
const cellFrozenLast = "ch2wcw8700-beta711";
|
|
44
|
+
const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
|
|
45
|
+
|
|
46
|
+
var css_248z$d = ".rnvodz5700-beta711{--color:#000;--border-color:#ddd;--summary-border-color:#aaa;--background-color:#fff;--header-background-color:#f9f9f9;--row-hover-background-color:#f5f5f5;--row-selected-background-color:#dbecfa;--row-selected-hover-background-color:#c9e3f8;--checkbox-color:#005194;--checkbox-focus-color:#61b8ff;--checkbox-disabled-border-color:#ccc;--checkbox-disabled-background-color:#ddd;--selection-color:#66afe9;--font-size:14px;background-color:var(--background-color);border:1px solid var(--border-color);box-sizing:border-box;color:var(--color);color-scheme:var(--color-scheme,light dark);contain:strict;contain:size layout style paint;content-visibility:auto;direction:ltr;font-size:var(--font-size);height:350px;overflow:auto;user-select:none}@supports not (contain:strict){.rnvodz5700-beta711{position:relative;z-index:0}}.rnvodz5700-beta711 *,.rnvodz5700-beta711 :after,.rnvodz5700-beta711 :before{box-sizing:inherit}.rnvodz5700-beta711.rdg-dark{--color-scheme:dark;--color:#ddd;--border-color:#444;--summary-border-color:#555;--background-color:#212121;--header-background-color:#1b1b1b;--row-hover-background-color:#171717;--row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--checkbox-color:#94cfff;--checkbox-focus-color:#c7e6ff;--checkbox-disabled-border-color:#000;--checkbox-disabled-background-color:#333}.rnvodz5700-beta711.rdg-light{--color-scheme:light}@media (prefers-color-scheme:dark){.rnvodz5700-beta711:not(.rdg-light){--color:#ddd;--border-color:#444;--summary-border-color:#555;--background-color:#212121;--header-background-color:#1b1b1b;--row-hover-background-color:#171717;--row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--checkbox-color:#94cfff;--checkbox-focus-color:#c7e6ff;--checkbox-disabled-border-color:#000;--checkbox-disabled-background-color:#333}}.vlqv91k700-beta711.r1upfr80700-beta711{cursor:move}";
|
|
47
|
+
styleInject(css_248z$d,{"insertAt":"top"});
|
|
48
|
+
|
|
49
|
+
const root = "rnvodz5700-beta711";
|
|
50
|
+
const rootClassname = `rdg ${root}`;
|
|
51
|
+
const viewportDragging = "vlqv91k700-beta711";
|
|
52
|
+
const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
|
|
53
|
+
|
|
54
|
+
var css_248z$c = ".r1upfr80700-beta711{background-color:var(--background-color);contain:strict;contain:size layout style paint;display:grid;grid-template-columns:var(--template-columns);grid-template-rows:var(--row-height);height:var(--row-height);left:0;line-height:var(--row-height);position:absolute;width:var(--row-width)}.r1upfr80700-beta711:hover{background-color:var(--row-hover-background-color)}.r1upfr80700-beta711[aria-selected=true]{background-color:var(--row-selected-background-color)}.r1upfr80700-beta711[aria-selected=true]:hover{background-color:var(--row-selected-hover-background-color)}";
|
|
55
|
+
styleInject(css_248z$c,{"insertAt":"top"});
|
|
56
|
+
|
|
57
|
+
const row = "r1upfr80700-beta711";
|
|
58
|
+
const rowClassname = `rdg-row ${row}`;
|
|
59
|
+
|
|
60
|
+
const useLayoutEffect = typeof window === 'undefined' ? react.useEffect : react.useLayoutEffect;
|
|
61
|
+
|
|
62
|
+
function useFocusRef(isSelected) {
|
|
63
|
+
const ref = react.useRef(null);
|
|
64
|
+
useLayoutEffect(() => {
|
|
65
|
+
if (!isSelected) return;
|
|
66
|
+
ref.current?.focus({
|
|
67
|
+
preventScroll: true
|
|
68
|
+
});
|
|
69
|
+
}, [isSelected]);
|
|
70
|
+
return {
|
|
71
|
+
ref,
|
|
72
|
+
tabIndex: isSelected ? 0 : -1
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
var css_248z$b = ".c4l3n6v700-beta711{align-items:center;cursor:pointer;display:flex;inset:0;justify-content:center;margin-right:1px;position:absolute}.c1bikpmb700-beta711{all:unset;margin:0;width:0}.c1eyot7g700-beta711{background-color:var(--background-color);border:2px solid var(--border-color);content:\"\";height:20px;width:20px}.c1bikpmb700-beta711:checked+.c1eyot7g700-beta711{background-color:var(--checkbox-color);box-shadow:inset 0 0 0 4px var(--background-color)}.c1bikpmb700-beta711:focus+.c1eyot7g700-beta711{border-color:var(--checkbox-focus-color)}.c1jlcvp4700-beta711{cursor:default}.c1jlcvp4700-beta711 .c1eyot7g700-beta711{background-color:var(--checkbox-disabled-background-color);border-color:var(--checkbox-disabled-border-color)}";
|
|
77
|
+
styleInject(css_248z$b,{"insertAt":"top"});
|
|
78
|
+
|
|
79
|
+
const checkboxLabel = "c4l3n6v700-beta711";
|
|
80
|
+
const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;
|
|
81
|
+
const checkboxInput = "c1bikpmb700-beta711";
|
|
82
|
+
const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
|
|
83
|
+
const checkbox = "c1eyot7g700-beta711";
|
|
84
|
+
const checkboxClassname = `rdg-checkbox ${checkbox}`;
|
|
85
|
+
const checkboxLabelDisabled = "c1jlcvp4700-beta711";
|
|
86
|
+
const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;
|
|
87
|
+
function SelectCellFormatter({
|
|
88
|
+
value,
|
|
89
|
+
isCellSelected,
|
|
90
|
+
disabled,
|
|
91
|
+
onClick,
|
|
92
|
+
onChange,
|
|
93
|
+
'aria-label': ariaLabel,
|
|
94
|
+
'aria-labelledby': ariaLabelledBy
|
|
95
|
+
}) {
|
|
96
|
+
const {
|
|
97
|
+
ref,
|
|
98
|
+
tabIndex
|
|
99
|
+
} = useFocusRef(isCellSelected);
|
|
100
|
+
function handleChange(e) {
|
|
101
|
+
onChange(e.target.checked, e.nativeEvent.shiftKey);
|
|
102
|
+
}
|
|
103
|
+
return /*#__PURE__*/jsxRuntime.jsxs("label", {
|
|
104
|
+
className: clsx(checkboxLabelClassname, disabled && checkboxLabelDisabledClassname),
|
|
105
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
106
|
+
"aria-label": ariaLabel,
|
|
107
|
+
"aria-labelledby": ariaLabelledBy,
|
|
108
|
+
ref: ref,
|
|
109
|
+
type: "checkbox",
|
|
110
|
+
tabIndex: tabIndex,
|
|
111
|
+
className: checkboxInputClassname,
|
|
112
|
+
disabled: disabled,
|
|
113
|
+
checked: value,
|
|
114
|
+
onChange: handleChange,
|
|
115
|
+
onClick: onClick
|
|
116
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
117
|
+
className: checkboxClassname
|
|
118
|
+
})]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
function ValueFormatter(props) {
|
|
123
|
+
try {
|
|
124
|
+
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
125
|
+
children: props.row[props.column.key]
|
|
126
|
+
});
|
|
127
|
+
} catch {
|
|
128
|
+
return null;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
var css_248z$a = ".g1vzro7t700-beta711{outline:none}.c1fsqdic700-beta711{stroke:currentColor;stroke-width:1.5px;fill:transparent;margin-left:4px;vertical-align:middle}.c1fsqdic700-beta711>path{transition:d .1s}";
|
|
133
|
+
styleInject(css_248z$a,{"insertAt":"top"});
|
|
134
|
+
|
|
135
|
+
const groupCellContent = "g1vzro7t700-beta711";
|
|
136
|
+
const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;
|
|
137
|
+
const caret = "c1fsqdic700-beta711";
|
|
138
|
+
const caretClassname = `rdg-caret ${caret}`;
|
|
139
|
+
function ToggleGroupFormatter({
|
|
140
|
+
groupKey,
|
|
141
|
+
isExpanded,
|
|
142
|
+
isCellSelected,
|
|
143
|
+
toggleGroup
|
|
144
|
+
}) {
|
|
145
|
+
const {
|
|
146
|
+
ref,
|
|
147
|
+
tabIndex
|
|
148
|
+
} = useFocusRef(isCellSelected);
|
|
149
|
+
function handleKeyDown({
|
|
150
|
+
key
|
|
151
|
+
}) {
|
|
152
|
+
if (key === 'Enter') {
|
|
153
|
+
toggleGroup();
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
const d = isExpanded ? 'M1 1 L 7 7 L 13 1' : 'M1 7 L 7 1 L 13 7';
|
|
157
|
+
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
158
|
+
ref: ref,
|
|
159
|
+
className: groupCellContentClassname,
|
|
160
|
+
tabIndex: tabIndex,
|
|
161
|
+
onKeyDown: handleKeyDown,
|
|
162
|
+
children: [groupKey, /*#__PURE__*/jsxRuntime.jsx("svg", {
|
|
163
|
+
viewBox: "0 0 14 8",
|
|
164
|
+
width: "14",
|
|
165
|
+
height: "8",
|
|
166
|
+
className: caretClassname,
|
|
167
|
+
"aria-hidden": true,
|
|
168
|
+
children: /*#__PURE__*/jsxRuntime.jsx("path", {
|
|
169
|
+
d: d
|
|
170
|
+
})
|
|
171
|
+
})]
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
const RowSelectionContext = /*#__PURE__*/react.createContext(undefined);
|
|
176
|
+
const RowSelectionProvider = RowSelectionContext.Provider;
|
|
177
|
+
const RowSelectionChangeContext = /*#__PURE__*/react.createContext(undefined);
|
|
178
|
+
const RowSelectionChangeProvider = RowSelectionChangeContext.Provider;
|
|
179
|
+
function useRowSelection() {
|
|
180
|
+
const rowSelectionContext = react.useContext(RowSelectionContext);
|
|
181
|
+
const rowSelectionChangeContext = react.useContext(RowSelectionChangeContext);
|
|
182
|
+
if (rowSelectionContext === undefined || rowSelectionChangeContext === undefined) {
|
|
183
|
+
throw new Error('useRowSelection must be used within DataGrid cells');
|
|
184
|
+
}
|
|
185
|
+
return [rowSelectionContext, rowSelectionChangeContext];
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
function getColSpan(column, lastFrozenColumnIndex, args) {
|
|
189
|
+
const colSpan = typeof column.colSpan === 'function' ? column.colSpan(args) : 1;
|
|
190
|
+
if (Number.isInteger(colSpan) && colSpan > 1 && (!column.frozen || column.idx + colSpan - 1 <= lastFrozenColumnIndex)) {
|
|
191
|
+
return colSpan;
|
|
192
|
+
}
|
|
193
|
+
return undefined;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
function stopPropagation(event) {
|
|
197
|
+
event.stopPropagation();
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
const nonInputKeys = new Set(['Unidentified', 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'FnLock', 'Meta', 'NumLock', 'ScrollLock', 'Shift', 'Tab', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', 'Insert', 'ContextMenu', 'Escape', 'Pause', 'Play', 'PrintScreen', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12']);
|
|
201
|
+
function isCtrlKeyHeldDown(e) {
|
|
202
|
+
return (e.ctrlKey || e.metaKey) && e.key !== 'Control';
|
|
203
|
+
}
|
|
204
|
+
function isDefaultCellInput(event) {
|
|
205
|
+
return !nonInputKeys.has(event.key);
|
|
206
|
+
}
|
|
207
|
+
function onEditorNavigation({
|
|
208
|
+
key,
|
|
209
|
+
target
|
|
210
|
+
}) {
|
|
211
|
+
if (key === 'Tab' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
|
|
212
|
+
return target.matches('.rdg-editor-container > :only-child, .rdg-editor-container > label:only-child > :only-child');
|
|
213
|
+
}
|
|
214
|
+
return false;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
function isSelectedCellEditable({
|
|
218
|
+
selectedPosition,
|
|
219
|
+
columns,
|
|
220
|
+
rows,
|
|
221
|
+
isGroupRow
|
|
222
|
+
}) {
|
|
223
|
+
const column = columns[selectedPosition.idx];
|
|
224
|
+
const row = rows[selectedPosition.rowIdx];
|
|
225
|
+
return !isGroupRow(row) && isCellEditable(column, row);
|
|
226
|
+
}
|
|
227
|
+
function isCellEditable(column, row) {
|
|
228
|
+
return column.editor != null && !column.rowGroup && (typeof column.editable === 'function' ? column.editable(row) : column.editable) !== false;
|
|
229
|
+
}
|
|
230
|
+
function getSelectedCellColSpan({
|
|
231
|
+
rows,
|
|
232
|
+
summaryRows,
|
|
233
|
+
rowIdx,
|
|
234
|
+
lastFrozenColumnIndex,
|
|
235
|
+
column,
|
|
236
|
+
isGroupRow
|
|
237
|
+
}) {
|
|
238
|
+
if (rowIdx === -1) {
|
|
239
|
+
return getColSpan(column, lastFrozenColumnIndex, {
|
|
240
|
+
type: 'HEADER'
|
|
241
|
+
});
|
|
242
|
+
}
|
|
243
|
+
if (rowIdx >= 0 && rowIdx < rows.length) {
|
|
244
|
+
const row = rows[rowIdx];
|
|
245
|
+
if (!isGroupRow(row)) {
|
|
246
|
+
return getColSpan(column, lastFrozenColumnIndex, {
|
|
247
|
+
type: 'ROW',
|
|
248
|
+
row
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
return undefined;
|
|
252
|
+
}
|
|
253
|
+
if (summaryRows) {
|
|
254
|
+
return getColSpan(column, lastFrozenColumnIndex, {
|
|
255
|
+
type: 'SUMMARY',
|
|
256
|
+
row: summaryRows[rowIdx - rows.length]
|
|
257
|
+
});
|
|
258
|
+
}
|
|
259
|
+
return undefined;
|
|
260
|
+
}
|
|
261
|
+
function getNextSelectedCellPosition({
|
|
262
|
+
cellNavigationMode,
|
|
263
|
+
columns,
|
|
264
|
+
colSpanColumns,
|
|
265
|
+
rows,
|
|
266
|
+
summaryRows,
|
|
267
|
+
minRowIdx,
|
|
268
|
+
maxRowIdx,
|
|
269
|
+
currentPosition: {
|
|
270
|
+
idx: currentIdx
|
|
271
|
+
},
|
|
272
|
+
nextPosition,
|
|
273
|
+
lastFrozenColumnIndex,
|
|
274
|
+
isCellWithinBounds,
|
|
275
|
+
isGroupRow
|
|
276
|
+
}) {
|
|
277
|
+
let {
|
|
278
|
+
idx: nextIdx,
|
|
279
|
+
rowIdx: nextRowIdx
|
|
280
|
+
} = nextPosition;
|
|
281
|
+
const setColSpan = moveRight => {
|
|
282
|
+
if (nextRowIdx >= 0 && nextRowIdx < rows.length) {
|
|
283
|
+
const row = rows[nextRowIdx];
|
|
284
|
+
if (isGroupRow(row)) return;
|
|
285
|
+
}
|
|
286
|
+
for (const column of colSpanColumns) {
|
|
287
|
+
const colIdx = column.idx;
|
|
288
|
+
if (colIdx > nextIdx) break;
|
|
289
|
+
const colSpan = getSelectedCellColSpan({
|
|
290
|
+
rows,
|
|
291
|
+
summaryRows,
|
|
292
|
+
rowIdx: nextRowIdx,
|
|
293
|
+
lastFrozenColumnIndex,
|
|
294
|
+
column,
|
|
295
|
+
isGroupRow
|
|
296
|
+
});
|
|
297
|
+
if (colSpan && nextIdx > colIdx && nextIdx < colSpan + colIdx) {
|
|
298
|
+
nextIdx = colIdx + (moveRight ? colSpan : 0);
|
|
299
|
+
break;
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
};
|
|
303
|
+
if (isCellWithinBounds(nextPosition)) {
|
|
304
|
+
setColSpan(nextIdx - currentIdx > 0);
|
|
305
|
+
}
|
|
306
|
+
if (cellNavigationMode !== 'NONE') {
|
|
307
|
+
const columnsCount = columns.length;
|
|
308
|
+
const isAfterLastColumn = nextIdx === columnsCount;
|
|
309
|
+
const isBeforeFirstColumn = nextIdx === -1;
|
|
310
|
+
if (isAfterLastColumn) {
|
|
311
|
+
if (cellNavigationMode === 'CHANGE_ROW') {
|
|
312
|
+
const isLastRow = nextRowIdx === maxRowIdx;
|
|
313
|
+
if (!isLastRow) {
|
|
314
|
+
nextIdx = 0;
|
|
315
|
+
nextRowIdx += 1;
|
|
316
|
+
}
|
|
317
|
+
} else {
|
|
318
|
+
nextIdx = 0;
|
|
319
|
+
}
|
|
320
|
+
} else if (isBeforeFirstColumn) {
|
|
321
|
+
if (cellNavigationMode === 'CHANGE_ROW') {
|
|
322
|
+
const isFirstRow = nextRowIdx === minRowIdx;
|
|
323
|
+
if (!isFirstRow) {
|
|
324
|
+
nextRowIdx -= 1;
|
|
325
|
+
nextIdx = columnsCount - 1;
|
|
326
|
+
}
|
|
327
|
+
} else {
|
|
328
|
+
nextIdx = columnsCount - 1;
|
|
329
|
+
}
|
|
330
|
+
setColSpan(false);
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
return {
|
|
334
|
+
idx: nextIdx,
|
|
335
|
+
rowIdx: nextRowIdx
|
|
336
|
+
};
|
|
337
|
+
}
|
|
338
|
+
function canExitGrid({
|
|
339
|
+
cellNavigationMode,
|
|
340
|
+
maxColIdx,
|
|
341
|
+
minRowIdx,
|
|
342
|
+
maxRowIdx,
|
|
343
|
+
selectedPosition: {
|
|
344
|
+
rowIdx,
|
|
345
|
+
idx
|
|
346
|
+
},
|
|
347
|
+
shiftKey
|
|
348
|
+
}) {
|
|
349
|
+
if (cellNavigationMode === 'NONE' || cellNavigationMode === 'CHANGE_ROW') {
|
|
350
|
+
const atLastCellInRow = idx === maxColIdx;
|
|
351
|
+
const atFirstCellInRow = idx === 0;
|
|
352
|
+
const atLastRow = rowIdx === maxRowIdx;
|
|
353
|
+
const atFirstRow = rowIdx === minRowIdx;
|
|
354
|
+
return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;
|
|
355
|
+
}
|
|
356
|
+
return false;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
const {
|
|
360
|
+
min,
|
|
361
|
+
max,
|
|
362
|
+
floor,
|
|
363
|
+
sign
|
|
364
|
+
} = Math;
|
|
365
|
+
function assertIsValidKeyGetter(keyGetter) {
|
|
366
|
+
if (typeof keyGetter !== 'function') {
|
|
367
|
+
throw new Error('Please specify the rowKeyGetter prop to use selection');
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
function getCellStyle(column, colSpan) {
|
|
371
|
+
return {
|
|
372
|
+
gridColumnStart: column.idx + 1,
|
|
373
|
+
gridColumnEnd: colSpan !== undefined ? `span ${colSpan}` : undefined,
|
|
374
|
+
left: column.frozen ? `var(--frozen-left-${column.idx})` : undefined
|
|
375
|
+
};
|
|
376
|
+
}
|
|
377
|
+
function getCellClassname(column, ...extraClasses) {
|
|
378
|
+
return clsx(cellClassname, ...extraClasses, column.frozen && cellFrozenClassname, column.isLastFrozenColumn && cellFrozenLastClassname);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
const SELECT_COLUMN_KEY = 'select-row';
|
|
382
|
+
function SelectFormatter(props) {
|
|
383
|
+
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
384
|
+
return /*#__PURE__*/jsxRuntime.jsx(SelectCellFormatter, {
|
|
385
|
+
"aria-label": "Select",
|
|
386
|
+
isCellSelected: props.isCellSelected,
|
|
387
|
+
value: isRowSelected,
|
|
388
|
+
onClick: stopPropagation,
|
|
389
|
+
onChange: (checked, isShiftClick) => {
|
|
390
|
+
onRowSelectionChange({
|
|
391
|
+
row: props.row,
|
|
392
|
+
checked,
|
|
393
|
+
isShiftClick
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
function SelectGroupFormatter(props) {
|
|
399
|
+
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
400
|
+
return /*#__PURE__*/jsxRuntime.jsx(SelectCellFormatter, {
|
|
401
|
+
"aria-label": "Select Group",
|
|
402
|
+
isCellSelected: props.isCellSelected,
|
|
403
|
+
value: isRowSelected,
|
|
404
|
+
onChange: checked => {
|
|
405
|
+
onRowSelectionChange({
|
|
406
|
+
row: props.row,
|
|
407
|
+
checked,
|
|
408
|
+
isShiftClick: false
|
|
409
|
+
});
|
|
410
|
+
},
|
|
411
|
+
onClick: stopPropagation
|
|
412
|
+
});
|
|
413
|
+
}
|
|
414
|
+
const SelectColumn = {
|
|
415
|
+
key: SELECT_COLUMN_KEY,
|
|
416
|
+
name: '',
|
|
417
|
+
width: 35,
|
|
418
|
+
maxWidth: 35,
|
|
419
|
+
resizable: false,
|
|
420
|
+
sortable: false,
|
|
421
|
+
frozen: true,
|
|
422
|
+
headerRenderer(props) {
|
|
423
|
+
return /*#__PURE__*/jsxRuntime.jsx(SelectCellFormatter, {
|
|
424
|
+
"aria-label": "Select All",
|
|
425
|
+
isCellSelected: props.isCellSelected,
|
|
426
|
+
value: props.allRowsSelected,
|
|
427
|
+
onChange: props.onAllRowsSelectionChange,
|
|
428
|
+
onClick: stopPropagation
|
|
429
|
+
});
|
|
430
|
+
},
|
|
431
|
+
formatter: SelectFormatter,
|
|
432
|
+
groupFormatter: SelectGroupFormatter
|
|
433
|
+
};
|
|
434
|
+
|
|
435
|
+
function useCalculatedColumns({
|
|
436
|
+
rawColumns,
|
|
437
|
+
columnWidths,
|
|
438
|
+
viewportWidth,
|
|
439
|
+
scrollLeft,
|
|
440
|
+
defaultColumnOptions,
|
|
441
|
+
rawGroupBy,
|
|
442
|
+
enableVirtualization
|
|
443
|
+
}) {
|
|
444
|
+
const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
|
|
445
|
+
const defaultFormatter = defaultColumnOptions?.formatter ?? ValueFormatter;
|
|
446
|
+
const defaultSortable = defaultColumnOptions?.sortable ?? false;
|
|
447
|
+
const defaultResizable = defaultColumnOptions?.resizable ?? false;
|
|
448
|
+
const {
|
|
449
|
+
columns,
|
|
450
|
+
colSpanColumns,
|
|
451
|
+
lastFrozenColumnIndex,
|
|
452
|
+
groupBy
|
|
453
|
+
} = react.useMemo(() => {
|
|
454
|
+
const groupBy = [];
|
|
455
|
+
let lastFrozenColumnIndex = -1;
|
|
456
|
+
const columns = rawColumns.map(rawColumn => {
|
|
457
|
+
const rowGroup = rawGroupBy?.includes(rawColumn.key) ?? false;
|
|
458
|
+
const frozen = rowGroup || rawColumn.frozen || false;
|
|
459
|
+
const column = {
|
|
460
|
+
...rawColumn,
|
|
461
|
+
idx: 0,
|
|
462
|
+
frozen,
|
|
463
|
+
isLastFrozenColumn: false,
|
|
464
|
+
rowGroup,
|
|
465
|
+
sortable: rawColumn.sortable ?? defaultSortable,
|
|
466
|
+
resizable: rawColumn.resizable ?? defaultResizable,
|
|
467
|
+
formatter: rawColumn.formatter ?? defaultFormatter
|
|
468
|
+
};
|
|
469
|
+
if (rowGroup) {
|
|
470
|
+
column.groupFormatter ??= ToggleGroupFormatter;
|
|
471
|
+
}
|
|
472
|
+
if (frozen) {
|
|
473
|
+
lastFrozenColumnIndex++;
|
|
474
|
+
}
|
|
475
|
+
return column;
|
|
476
|
+
});
|
|
477
|
+
columns.sort(({
|
|
478
|
+
key: aKey,
|
|
479
|
+
frozen: frozenA
|
|
480
|
+
}, {
|
|
481
|
+
key: bKey,
|
|
482
|
+
frozen: frozenB
|
|
483
|
+
}) => {
|
|
484
|
+
if (aKey === SELECT_COLUMN_KEY) return -1;
|
|
485
|
+
if (bKey === SELECT_COLUMN_KEY) return 1;
|
|
486
|
+
if (rawGroupBy?.includes(aKey)) {
|
|
487
|
+
if (rawGroupBy.includes(bKey)) {
|
|
488
|
+
return rawGroupBy.indexOf(aKey) - rawGroupBy.indexOf(bKey);
|
|
489
|
+
}
|
|
490
|
+
return -1;
|
|
491
|
+
}
|
|
492
|
+
if (rawGroupBy?.includes(bKey)) return 1;
|
|
493
|
+
if (frozenA) {
|
|
494
|
+
if (frozenB) return 0;
|
|
495
|
+
return -1;
|
|
496
|
+
}
|
|
497
|
+
if (frozenB) return 1;
|
|
498
|
+
return 0;
|
|
499
|
+
});
|
|
500
|
+
const colSpanColumns = [];
|
|
501
|
+
columns.forEach((column, idx) => {
|
|
502
|
+
column.idx = idx;
|
|
503
|
+
if (column.rowGroup) {
|
|
504
|
+
groupBy.push(column.key);
|
|
505
|
+
}
|
|
506
|
+
if (column.colSpan != null) {
|
|
507
|
+
colSpanColumns.push(column);
|
|
508
|
+
}
|
|
509
|
+
});
|
|
510
|
+
if (lastFrozenColumnIndex !== -1) {
|
|
511
|
+
columns[lastFrozenColumnIndex].isLastFrozenColumn = true;
|
|
512
|
+
}
|
|
513
|
+
return {
|
|
514
|
+
columns,
|
|
515
|
+
colSpanColumns,
|
|
516
|
+
lastFrozenColumnIndex,
|
|
517
|
+
groupBy
|
|
518
|
+
};
|
|
519
|
+
}, [rawColumns, defaultFormatter, defaultResizable, defaultSortable, rawGroupBy]);
|
|
520
|
+
const {
|
|
521
|
+
layoutCssVars,
|
|
522
|
+
totalColumnWidth,
|
|
523
|
+
totalFrozenColumnWidth,
|
|
524
|
+
columnMetrics
|
|
525
|
+
} = react.useMemo(() => {
|
|
526
|
+
const columnMetrics = new Map();
|
|
527
|
+
let left = 0;
|
|
528
|
+
let totalColumnWidth = 0;
|
|
529
|
+
let totalFrozenColumnWidth = 0;
|
|
530
|
+
let templateColumns = '';
|
|
531
|
+
let allocatedWidth = 0;
|
|
532
|
+
let unassignedColumnsCount = 0;
|
|
533
|
+
for (const column of columns) {
|
|
534
|
+
let width = getSpecifiedWidth(column, columnWidths, viewportWidth);
|
|
535
|
+
if (width === undefined) {
|
|
536
|
+
unassignedColumnsCount++;
|
|
537
|
+
} else {
|
|
538
|
+
width = clampColumnWidth(width, column, minColumnWidth);
|
|
539
|
+
allocatedWidth += width;
|
|
540
|
+
columnMetrics.set(column, {
|
|
541
|
+
width,
|
|
542
|
+
left: 0
|
|
543
|
+
});
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
const unallocatedWidth = viewportWidth - allocatedWidth;
|
|
547
|
+
const unallocatedColumnWidth = unallocatedWidth / unassignedColumnsCount;
|
|
548
|
+
for (const column of columns) {
|
|
549
|
+
let width;
|
|
550
|
+
if (columnMetrics.has(column)) {
|
|
551
|
+
const columnMetric = columnMetrics.get(column);
|
|
552
|
+
columnMetric.left = left;
|
|
553
|
+
({
|
|
554
|
+
width
|
|
555
|
+
} = columnMetric);
|
|
556
|
+
} else {
|
|
557
|
+
width = clampColumnWidth(unallocatedColumnWidth, column, minColumnWidth);
|
|
558
|
+
columnMetrics.set(column, {
|
|
559
|
+
width,
|
|
560
|
+
left
|
|
561
|
+
});
|
|
562
|
+
}
|
|
563
|
+
totalColumnWidth += width;
|
|
564
|
+
left += width;
|
|
565
|
+
templateColumns += `${width}px `;
|
|
566
|
+
}
|
|
567
|
+
if (lastFrozenColumnIndex !== -1) {
|
|
568
|
+
const columnMetric = columnMetrics.get(columns[lastFrozenColumnIndex]);
|
|
569
|
+
totalFrozenColumnWidth = columnMetric.left + columnMetric.width;
|
|
570
|
+
}
|
|
571
|
+
const layoutCssVars = {
|
|
572
|
+
'--template-columns': templateColumns
|
|
573
|
+
};
|
|
574
|
+
for (let i = 0; i <= lastFrozenColumnIndex; i++) {
|
|
575
|
+
const column = columns[i];
|
|
576
|
+
layoutCssVars[`--frozen-left-${column.idx}`] = `${columnMetrics.get(column).left}px`;
|
|
577
|
+
}
|
|
578
|
+
return {
|
|
579
|
+
layoutCssVars,
|
|
580
|
+
totalColumnWidth,
|
|
581
|
+
totalFrozenColumnWidth,
|
|
582
|
+
columnMetrics
|
|
583
|
+
};
|
|
584
|
+
}, [columnWidths, columns, viewportWidth, minColumnWidth, lastFrozenColumnIndex]);
|
|
585
|
+
const [colOverscanStartIdx, colOverscanEndIdx] = react.useMemo(() => {
|
|
586
|
+
if (!enableVirtualization) {
|
|
587
|
+
return [0, columns.length - 1];
|
|
588
|
+
}
|
|
589
|
+
const viewportLeft = scrollLeft + totalFrozenColumnWidth;
|
|
590
|
+
const viewportRight = scrollLeft + viewportWidth;
|
|
591
|
+
const lastColIdx = columns.length - 1;
|
|
592
|
+
const firstUnfrozenColumnIdx = min(lastFrozenColumnIndex + 1, lastColIdx);
|
|
593
|
+
if (viewportLeft >= viewportRight) {
|
|
594
|
+
return [firstUnfrozenColumnIdx, firstUnfrozenColumnIdx];
|
|
595
|
+
}
|
|
596
|
+
let colVisibleStartIdx = firstUnfrozenColumnIdx;
|
|
597
|
+
while (colVisibleStartIdx < lastColIdx) {
|
|
598
|
+
const {
|
|
599
|
+
left,
|
|
600
|
+
width
|
|
601
|
+
} = columnMetrics.get(columns[colVisibleStartIdx]);
|
|
602
|
+
if (left + width > viewportLeft) {
|
|
603
|
+
break;
|
|
604
|
+
}
|
|
605
|
+
colVisibleStartIdx++;
|
|
606
|
+
}
|
|
607
|
+
let colVisibleEndIdx = colVisibleStartIdx;
|
|
608
|
+
while (colVisibleEndIdx < lastColIdx) {
|
|
609
|
+
const {
|
|
610
|
+
left,
|
|
611
|
+
width
|
|
612
|
+
} = columnMetrics.get(columns[colVisibleEndIdx]);
|
|
613
|
+
if (left + width >= viewportRight) {
|
|
614
|
+
break;
|
|
615
|
+
}
|
|
616
|
+
colVisibleEndIdx++;
|
|
617
|
+
}
|
|
618
|
+
const colOverscanStartIdx = max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);
|
|
619
|
+
const colOverscanEndIdx = min(lastColIdx, colVisibleEndIdx + 1);
|
|
620
|
+
return [colOverscanStartIdx, colOverscanEndIdx];
|
|
621
|
+
}, [columnMetrics, columns, lastFrozenColumnIndex, scrollLeft, totalFrozenColumnWidth, viewportWidth, enableVirtualization]);
|
|
622
|
+
return {
|
|
623
|
+
columns,
|
|
624
|
+
colSpanColumns,
|
|
625
|
+
colOverscanStartIdx,
|
|
626
|
+
colOverscanEndIdx,
|
|
627
|
+
layoutCssVars,
|
|
628
|
+
columnMetrics,
|
|
629
|
+
totalColumnWidth,
|
|
630
|
+
lastFrozenColumnIndex,
|
|
631
|
+
totalFrozenColumnWidth,
|
|
632
|
+
groupBy
|
|
633
|
+
};
|
|
634
|
+
}
|
|
635
|
+
function getSpecifiedWidth({
|
|
636
|
+
key,
|
|
637
|
+
width
|
|
638
|
+
}, columnWidths, viewportWidth) {
|
|
639
|
+
if (columnWidths.has(key)) {
|
|
640
|
+
return columnWidths.get(key);
|
|
641
|
+
}
|
|
642
|
+
if (typeof width === 'number') {
|
|
643
|
+
return width;
|
|
644
|
+
}
|
|
645
|
+
if (typeof width === 'string' && /^\d+%$/.test(width)) {
|
|
646
|
+
return floor(viewportWidth * parseInt(width, 10) / 100);
|
|
647
|
+
}
|
|
648
|
+
return undefined;
|
|
649
|
+
}
|
|
650
|
+
function clampColumnWidth(width, {
|
|
651
|
+
minWidth,
|
|
652
|
+
maxWidth
|
|
653
|
+
}, minColumnWidth) {
|
|
654
|
+
width = max(width, minWidth ?? minColumnWidth);
|
|
655
|
+
if (typeof maxWidth === 'number') {
|
|
656
|
+
return min(width, maxWidth);
|
|
657
|
+
}
|
|
658
|
+
return width;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
function useCombinedRefs(...refs) {
|
|
662
|
+
return react.useCallback(handle => {
|
|
663
|
+
for (const ref of refs) {
|
|
664
|
+
if (typeof ref === 'function') {
|
|
665
|
+
ref(handle);
|
|
666
|
+
} else if (ref !== null && 'current' in ref) {
|
|
667
|
+
ref.current = handle;
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
}, refs);
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
function useGridDimensions() {
|
|
674
|
+
const gridRef = react.useRef(null);
|
|
675
|
+
const [gridWidth, setGridWidth] = react.useState(1);
|
|
676
|
+
const [gridHeight, setGridHeight] = react.useState(1);
|
|
677
|
+
useLayoutEffect(() => {
|
|
678
|
+
const {
|
|
679
|
+
ResizeObserver
|
|
680
|
+
} = window;
|
|
681
|
+
if (ResizeObserver == null) return;
|
|
682
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
683
|
+
const {
|
|
684
|
+
clientWidth,
|
|
685
|
+
clientHeight
|
|
686
|
+
} = gridRef.current;
|
|
687
|
+
setGridWidth(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1));
|
|
688
|
+
setGridHeight(clientHeight);
|
|
689
|
+
});
|
|
690
|
+
resizeObserver.observe(gridRef.current);
|
|
691
|
+
return () => {
|
|
692
|
+
resizeObserver.disconnect();
|
|
693
|
+
};
|
|
694
|
+
}, []);
|
|
695
|
+
return [gridRef, gridWidth, gridHeight];
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
function useLatestFunc(fn) {
|
|
699
|
+
const ref = react.useRef(fn);
|
|
700
|
+
react.useEffect(() => {
|
|
701
|
+
ref.current = fn;
|
|
702
|
+
});
|
|
703
|
+
return react.useCallback((...args) => {
|
|
704
|
+
ref.current(...args);
|
|
705
|
+
}, []);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
function useRovingCellRef(isSelected) {
|
|
709
|
+
const ref = react.useRef(null);
|
|
710
|
+
const isChildFocused = react.useRef(false);
|
|
711
|
+
const [, forceRender] = react.useState({});
|
|
712
|
+
useLayoutEffect(() => {
|
|
713
|
+
if (!isSelected) {
|
|
714
|
+
isChildFocused.current = false;
|
|
715
|
+
return;
|
|
716
|
+
}
|
|
717
|
+
if (isChildFocused.current) {
|
|
718
|
+
forceRender({});
|
|
719
|
+
return;
|
|
720
|
+
}
|
|
721
|
+
ref.current?.focus();
|
|
722
|
+
}, [isSelected]);
|
|
723
|
+
function onFocus(event) {
|
|
724
|
+
if (event.target !== ref.current) {
|
|
725
|
+
isChildFocused.current = true;
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
const isFocused = isSelected && !isChildFocused.current;
|
|
729
|
+
return {
|
|
730
|
+
ref,
|
|
731
|
+
tabIndex: isFocused ? 0 : -1,
|
|
732
|
+
onFocus
|
|
733
|
+
};
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
var css_248z$9 = ".r1v67ork700-beta711{outline:none}.r1v67ork700-beta711:after{box-shadow:inset 0 0 0 2px var(--selection-color);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}.r1v67ork700-beta711>.cj343x0700-beta711:first-child{box-shadow:inset 2px 0 0 0 var(--selection-color)}";
|
|
737
|
+
styleInject(css_248z$9,{"insertAt":"top"});
|
|
738
|
+
|
|
739
|
+
const rowSelected = "r1v67ork700-beta711";
|
|
740
|
+
const rowSelectedClassname = `rdg-row-selected ${rowSelected}`;
|
|
741
|
+
function useRovingRowRef(selectedCellIdx) {
|
|
742
|
+
const isSelected = selectedCellIdx === -1;
|
|
743
|
+
const {
|
|
744
|
+
ref,
|
|
745
|
+
tabIndex
|
|
746
|
+
} = useFocusRef(isSelected);
|
|
747
|
+
return {
|
|
748
|
+
ref,
|
|
749
|
+
tabIndex,
|
|
750
|
+
className: isSelected ? rowSelectedClassname : undefined
|
|
751
|
+
};
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
function useViewportColumns({
|
|
755
|
+
columns,
|
|
756
|
+
colSpanColumns,
|
|
757
|
+
rows,
|
|
758
|
+
summaryRows,
|
|
759
|
+
colOverscanStartIdx,
|
|
760
|
+
colOverscanEndIdx,
|
|
761
|
+
lastFrozenColumnIndex,
|
|
762
|
+
rowOverscanStartIdx,
|
|
763
|
+
rowOverscanEndIdx,
|
|
764
|
+
isGroupRow
|
|
765
|
+
}) {
|
|
766
|
+
const startIdx = react.useMemo(() => {
|
|
767
|
+
if (colOverscanStartIdx === 0) return 0;
|
|
768
|
+
let startIdx = colOverscanStartIdx;
|
|
769
|
+
const updateStartIdx = (colIdx, colSpan) => {
|
|
770
|
+
if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) {
|
|
771
|
+
startIdx = colIdx;
|
|
772
|
+
return true;
|
|
773
|
+
}
|
|
774
|
+
return false;
|
|
775
|
+
};
|
|
776
|
+
for (const column of colSpanColumns) {
|
|
777
|
+
const colIdx = column.idx;
|
|
778
|
+
if (colIdx >= startIdx) break;
|
|
779
|
+
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
780
|
+
type: 'HEADER'
|
|
781
|
+
}))) {
|
|
782
|
+
break;
|
|
783
|
+
}
|
|
784
|
+
for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
|
|
785
|
+
const row = rows[rowIdx];
|
|
786
|
+
if (isGroupRow(row)) continue;
|
|
787
|
+
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
788
|
+
type: 'ROW',
|
|
789
|
+
row
|
|
790
|
+
}))) {
|
|
791
|
+
break;
|
|
792
|
+
}
|
|
793
|
+
}
|
|
794
|
+
if (summaryRows != null) {
|
|
795
|
+
for (const row of summaryRows) {
|
|
796
|
+
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
797
|
+
type: 'SUMMARY',
|
|
798
|
+
row
|
|
799
|
+
}))) {
|
|
800
|
+
break;
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
}
|
|
805
|
+
return startIdx;
|
|
806
|
+
}, [rowOverscanStartIdx, rowOverscanEndIdx, rows, summaryRows, colOverscanStartIdx, lastFrozenColumnIndex, colSpanColumns, isGroupRow]);
|
|
807
|
+
return react.useMemo(() => {
|
|
808
|
+
const viewportColumns = [];
|
|
809
|
+
for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
|
|
810
|
+
const column = columns[colIdx];
|
|
811
|
+
if (colIdx < startIdx && !column.frozen) continue;
|
|
812
|
+
viewportColumns.push(column);
|
|
813
|
+
}
|
|
814
|
+
return viewportColumns;
|
|
815
|
+
}, [startIdx, colOverscanEndIdx, columns]);
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
function isReadonlyArray(arr) {
|
|
819
|
+
return Array.isArray(arr);
|
|
820
|
+
}
|
|
821
|
+
function useViewportRows({
|
|
822
|
+
rawRows,
|
|
823
|
+
rowHeight,
|
|
824
|
+
clientHeight,
|
|
825
|
+
scrollTop,
|
|
826
|
+
groupBy,
|
|
827
|
+
rowGrouper,
|
|
828
|
+
expandedGroupIds,
|
|
829
|
+
enableVirtualization
|
|
830
|
+
}) {
|
|
831
|
+
const [groupedRows, rowsCount] = react.useMemo(() => {
|
|
832
|
+
if (groupBy.length === 0 || rowGrouper == null) return [undefined, rawRows.length];
|
|
833
|
+
const groupRows = (rows, [groupByKey, ...remainingGroupByKeys], startRowIndex) => {
|
|
834
|
+
let groupRowsCount = 0;
|
|
835
|
+
const groups = {};
|
|
836
|
+
for (const [key, childRows] of Object.entries(rowGrouper(rows, groupByKey))) {
|
|
837
|
+
const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0 ? [childRows, childRows.length] : groupRows(childRows, remainingGroupByKeys, startRowIndex + groupRowsCount + 1);
|
|
838
|
+
groups[key] = {
|
|
839
|
+
childRows,
|
|
840
|
+
childGroups,
|
|
841
|
+
startRowIndex: startRowIndex + groupRowsCount
|
|
842
|
+
};
|
|
843
|
+
groupRowsCount += childRowsCount + 1;
|
|
844
|
+
}
|
|
845
|
+
return [groups, groupRowsCount];
|
|
846
|
+
};
|
|
847
|
+
return groupRows(rawRows, groupBy, 0);
|
|
848
|
+
}, [groupBy, rowGrouper, rawRows]);
|
|
849
|
+
const [rows, isGroupRow] = react.useMemo(() => {
|
|
850
|
+
const allGroupRows = new Set();
|
|
851
|
+
if (!groupedRows) return [rawRows, isGroupRow];
|
|
852
|
+
const flattenedRows = [];
|
|
853
|
+
const expandGroup = (rows, parentId, level) => {
|
|
854
|
+
if (isReadonlyArray(rows)) {
|
|
855
|
+
flattenedRows.push(...rows);
|
|
856
|
+
return;
|
|
857
|
+
}
|
|
858
|
+
Object.keys(rows).forEach((groupKey, posInSet, keys) => {
|
|
859
|
+
const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
|
|
860
|
+
const isExpanded = expandedGroupIds?.has(id) ?? false;
|
|
861
|
+
const {
|
|
862
|
+
childRows,
|
|
863
|
+
childGroups,
|
|
864
|
+
startRowIndex
|
|
865
|
+
} = rows[groupKey];
|
|
866
|
+
const groupRow = {
|
|
867
|
+
id,
|
|
868
|
+
parentId,
|
|
869
|
+
groupKey,
|
|
870
|
+
isExpanded,
|
|
871
|
+
childRows,
|
|
872
|
+
level,
|
|
873
|
+
posInSet,
|
|
874
|
+
startRowIndex,
|
|
875
|
+
setSize: keys.length
|
|
876
|
+
};
|
|
877
|
+
flattenedRows.push(groupRow);
|
|
878
|
+
allGroupRows.add(groupRow);
|
|
879
|
+
if (isExpanded) {
|
|
880
|
+
expandGroup(childGroups, id, level + 1);
|
|
881
|
+
}
|
|
882
|
+
});
|
|
883
|
+
};
|
|
884
|
+
expandGroup(groupedRows, undefined, 0);
|
|
885
|
+
return [flattenedRows, isGroupRow];
|
|
886
|
+
function isGroupRow(row) {
|
|
887
|
+
return allGroupRows.has(row);
|
|
888
|
+
}
|
|
889
|
+
}, [expandedGroupIds, groupedRows, rawRows]);
|
|
890
|
+
const {
|
|
891
|
+
totalRowHeight,
|
|
892
|
+
getRowTop,
|
|
893
|
+
getRowHeight,
|
|
894
|
+
findRowIdx
|
|
895
|
+
} = react.useMemo(() => {
|
|
896
|
+
if (typeof rowHeight === 'number') {
|
|
897
|
+
return {
|
|
898
|
+
totalRowHeight: rowHeight * rows.length,
|
|
899
|
+
getRowTop: rowIdx => rowIdx * rowHeight,
|
|
900
|
+
getRowHeight: () => rowHeight,
|
|
901
|
+
findRowIdx: offset => floor(offset / rowHeight)
|
|
902
|
+
};
|
|
903
|
+
}
|
|
904
|
+
let totalRowHeight = 0;
|
|
905
|
+
const rowPositions = rows.map(row => {
|
|
906
|
+
const currentRowHeight = isGroupRow(row) ? rowHeight({
|
|
907
|
+
type: 'GROUP',
|
|
908
|
+
row
|
|
909
|
+
}) : rowHeight({
|
|
910
|
+
type: 'ROW',
|
|
911
|
+
row
|
|
912
|
+
});
|
|
913
|
+
const position = {
|
|
914
|
+
top: totalRowHeight,
|
|
915
|
+
height: currentRowHeight
|
|
916
|
+
};
|
|
917
|
+
totalRowHeight += currentRowHeight;
|
|
918
|
+
return position;
|
|
919
|
+
});
|
|
920
|
+
const validateRowIdx = rowIdx => {
|
|
921
|
+
return max(0, min(rows.length - 1, rowIdx));
|
|
922
|
+
};
|
|
923
|
+
return {
|
|
924
|
+
totalRowHeight,
|
|
925
|
+
getRowTop: rowIdx => rowPositions[validateRowIdx(rowIdx)].top,
|
|
926
|
+
getRowHeight: rowIdx => rowPositions[validateRowIdx(rowIdx)].height,
|
|
927
|
+
findRowIdx(offset) {
|
|
928
|
+
let start = 0;
|
|
929
|
+
let end = rowPositions.length - 1;
|
|
930
|
+
while (start <= end) {
|
|
931
|
+
const middle = start + floor((end - start) / 2);
|
|
932
|
+
const currentOffset = rowPositions[middle].top;
|
|
933
|
+
if (currentOffset === offset) return middle;
|
|
934
|
+
if (currentOffset < offset) {
|
|
935
|
+
start = middle + 1;
|
|
936
|
+
} else if (currentOffset > offset) {
|
|
937
|
+
end = middle - 1;
|
|
938
|
+
}
|
|
939
|
+
if (start > end) return end;
|
|
940
|
+
}
|
|
941
|
+
return 0;
|
|
942
|
+
}
|
|
943
|
+
};
|
|
944
|
+
}, [isGroupRow, rowHeight, rows]);
|
|
945
|
+
let rowOverscanStartIdx = 0;
|
|
946
|
+
let rowOverscanEndIdx = rows.length - 1;
|
|
947
|
+
if (enableVirtualization) {
|
|
948
|
+
const overscanThreshold = 4;
|
|
949
|
+
const rowVisibleStartIdx = findRowIdx(scrollTop);
|
|
950
|
+
const rowVisibleEndIdx = findRowIdx(scrollTop + clientHeight);
|
|
951
|
+
rowOverscanStartIdx = max(0, rowVisibleStartIdx - overscanThreshold);
|
|
952
|
+
rowOverscanEndIdx = min(rows.length - 1, rowVisibleEndIdx + overscanThreshold);
|
|
953
|
+
}
|
|
954
|
+
return {
|
|
955
|
+
rowOverscanStartIdx,
|
|
956
|
+
rowOverscanEndIdx,
|
|
957
|
+
rows,
|
|
958
|
+
rowsCount,
|
|
959
|
+
totalRowHeight,
|
|
960
|
+
isGroupRow,
|
|
961
|
+
getRowTop,
|
|
962
|
+
getRowHeight,
|
|
963
|
+
findRowIdx
|
|
964
|
+
};
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
var css_248z$8 = ".h1j9yp5q700-beta711{cursor:pointer;display:flex}.h1j9yp5q700-beta711:focus{outline:none}.h1e6at1o700-beta711{flex-grow:1;overflow:hidden;overflow:clip;text-overflow:ellipsis}.a1t8izji700-beta711{fill:currentColor}.a1t8izji700-beta711>path{transition:d .1s}";
|
|
968
|
+
styleInject(css_248z$8,{"insertAt":"top"});
|
|
969
|
+
|
|
970
|
+
const headerSortCell = "h1j9yp5q700-beta711";
|
|
971
|
+
const headerSortCellClassname = `rdg-header-sort-cell ${headerSortCell}`;
|
|
972
|
+
const headerSortName = "h1e6at1o700-beta711";
|
|
973
|
+
const headerSortNameClassname = `rdg-header-sort-name ${headerSortName}`;
|
|
974
|
+
const arrow = "a1t8izji700-beta711";
|
|
975
|
+
const arrowClassname = `rdg-sort-arrow ${arrow}`;
|
|
976
|
+
function SortableHeaderCell({
|
|
977
|
+
onSort,
|
|
978
|
+
sortDirection,
|
|
979
|
+
priority,
|
|
980
|
+
children,
|
|
981
|
+
isCellSelected
|
|
982
|
+
}) {
|
|
983
|
+
const {
|
|
984
|
+
ref,
|
|
985
|
+
tabIndex
|
|
986
|
+
} = useFocusRef(isCellSelected);
|
|
987
|
+
function handleKeyDown(event) {
|
|
988
|
+
if (event.key === ' ' || event.key === 'Enter') {
|
|
989
|
+
event.preventDefault();
|
|
990
|
+
onSort(event.ctrlKey || event.metaKey);
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
function handleClick(event) {
|
|
994
|
+
onSort(event.ctrlKey || event.metaKey);
|
|
995
|
+
}
|
|
996
|
+
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
997
|
+
ref: ref,
|
|
998
|
+
tabIndex: tabIndex,
|
|
999
|
+
className: headerSortCellClassname,
|
|
1000
|
+
onMouseDown: handleClick,
|
|
1001
|
+
onKeyDown: handleKeyDown,
|
|
1002
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
1003
|
+
className: headerSortNameClassname,
|
|
1004
|
+
children: children
|
|
1005
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
1006
|
+
children: [sortDirection !== undefined && /*#__PURE__*/jsxRuntime.jsx("svg", {
|
|
1007
|
+
viewBox: "0 0 12 8",
|
|
1008
|
+
width: "12",
|
|
1009
|
+
height: "8",
|
|
1010
|
+
className: arrowClassname,
|
|
1011
|
+
"aria-hidden": true,
|
|
1012
|
+
children: /*#__PURE__*/jsxRuntime.jsx("path", {
|
|
1013
|
+
d: sortDirection === 'ASC' ? 'M0 8 6 0 12 8' : 'M0 0 6 8 12 0'
|
|
1014
|
+
})
|
|
1015
|
+
}), priority]
|
|
1016
|
+
})]
|
|
1017
|
+
});
|
|
1018
|
+
}
|
|
1019
|
+
|
|
1020
|
+
var css_248z$7 = ".c6l2wv1700-beta711{touch-action:none}.c6l2wv1700-beta711:after{bottom:0;content:\"\";cursor:col-resize;position:absolute;right:0;top:0;width:10px}";
|
|
1021
|
+
styleInject(css_248z$7,{"insertAt":"top"});
|
|
1022
|
+
|
|
1023
|
+
const cellResizable = "c6l2wv1700-beta711";
|
|
1024
|
+
const cellResizableClassname = `rdg-cell-resizable ${cellResizable}`;
|
|
1025
|
+
function HeaderCell({
|
|
1026
|
+
column,
|
|
1027
|
+
colSpan,
|
|
1028
|
+
isCellSelected,
|
|
1029
|
+
onColumnResize,
|
|
1030
|
+
allRowsSelected,
|
|
1031
|
+
onAllRowsSelectionChange,
|
|
1032
|
+
sortColumns,
|
|
1033
|
+
onSortColumnsChange,
|
|
1034
|
+
selectCell,
|
|
1035
|
+
shouldFocusGrid
|
|
1036
|
+
}) {
|
|
1037
|
+
const {
|
|
1038
|
+
ref,
|
|
1039
|
+
tabIndex,
|
|
1040
|
+
onFocus
|
|
1041
|
+
} = useRovingCellRef(isCellSelected);
|
|
1042
|
+
const sortIndex = sortColumns?.findIndex(sort => sort.columnKey === column.key);
|
|
1043
|
+
const sortColumn = sortIndex !== undefined && sortIndex > -1 ? sortColumns[sortIndex] : undefined;
|
|
1044
|
+
const sortDirection = sortColumn?.direction;
|
|
1045
|
+
const priority = sortColumn !== undefined && sortColumns.length > 1 ? sortIndex + 1 : undefined;
|
|
1046
|
+
const ariaSort = sortDirection && !priority ? sortDirection === 'ASC' ? 'ascending' : 'descending' : undefined;
|
|
1047
|
+
const className = getCellClassname(column, column.headerCellClass, column.resizable && cellResizableClassname);
|
|
1048
|
+
function onPointerDown(event) {
|
|
1049
|
+
if (event.pointerType === 'mouse' && event.buttons !== 1) {
|
|
1050
|
+
return;
|
|
1051
|
+
}
|
|
1052
|
+
const {
|
|
1053
|
+
currentTarget,
|
|
1054
|
+
pointerId
|
|
1055
|
+
} = event;
|
|
1056
|
+
const {
|
|
1057
|
+
right
|
|
1058
|
+
} = currentTarget.getBoundingClientRect();
|
|
1059
|
+
const offset = right - event.clientX;
|
|
1060
|
+
if (offset > 11) {
|
|
1061
|
+
return;
|
|
1062
|
+
}
|
|
1063
|
+
function onPointerMove(event) {
|
|
1064
|
+
const width = event.clientX + offset - currentTarget.getBoundingClientRect().left;
|
|
1065
|
+
if (width > 0) {
|
|
1066
|
+
onColumnResize(column, width);
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
function onLostPointerCapture() {
|
|
1070
|
+
currentTarget.removeEventListener('pointermove', onPointerMove);
|
|
1071
|
+
currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
|
|
1072
|
+
}
|
|
1073
|
+
currentTarget.setPointerCapture(pointerId);
|
|
1074
|
+
currentTarget.addEventListener('pointermove', onPointerMove);
|
|
1075
|
+
currentTarget.addEventListener('lostpointercapture', onLostPointerCapture);
|
|
1076
|
+
}
|
|
1077
|
+
function onSort(ctrlClick) {
|
|
1078
|
+
if (onSortColumnsChange == null) return;
|
|
1079
|
+
const {
|
|
1080
|
+
sortDescendingFirst
|
|
1081
|
+
} = column;
|
|
1082
|
+
if (sortColumn === undefined) {
|
|
1083
|
+
const nextSort = {
|
|
1084
|
+
columnKey: column.key,
|
|
1085
|
+
direction: sortDescendingFirst ? 'DESC' : 'ASC'
|
|
1086
|
+
};
|
|
1087
|
+
onSortColumnsChange(sortColumns && ctrlClick ? [...sortColumns, nextSort] : [nextSort]);
|
|
1088
|
+
} else {
|
|
1089
|
+
let nextSortColumn;
|
|
1090
|
+
if (sortDescendingFirst && sortDirection === 'DESC' || !sortDescendingFirst && sortDirection === 'ASC') {
|
|
1091
|
+
nextSortColumn = {
|
|
1092
|
+
columnKey: column.key,
|
|
1093
|
+
direction: sortDirection === 'ASC' ? 'DESC' : 'ASC'
|
|
1094
|
+
};
|
|
1095
|
+
}
|
|
1096
|
+
if (ctrlClick) {
|
|
1097
|
+
const nextSortColumns = [...sortColumns];
|
|
1098
|
+
if (nextSortColumn) {
|
|
1099
|
+
nextSortColumns[sortIndex] = nextSortColumn;
|
|
1100
|
+
} else {
|
|
1101
|
+
nextSortColumns.splice(sortIndex, 1);
|
|
1102
|
+
}
|
|
1103
|
+
onSortColumnsChange(nextSortColumns);
|
|
1104
|
+
} else {
|
|
1105
|
+
onSortColumnsChange(nextSortColumn ? [nextSortColumn] : []);
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
function onClick() {
|
|
1110
|
+
selectCell(column.idx);
|
|
1111
|
+
}
|
|
1112
|
+
function handleFocus(event) {
|
|
1113
|
+
onFocus(event);
|
|
1114
|
+
if (shouldFocusGrid) {
|
|
1115
|
+
selectCell(0);
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
function getCell() {
|
|
1119
|
+
if (column.headerRenderer) {
|
|
1120
|
+
return /*#__PURE__*/jsxRuntime.jsx(column.headerRenderer, {
|
|
1121
|
+
column: column,
|
|
1122
|
+
sortDirection: sortDirection,
|
|
1123
|
+
priority: priority,
|
|
1124
|
+
onSort: onSort,
|
|
1125
|
+
allRowsSelected: allRowsSelected,
|
|
1126
|
+
onAllRowsSelectionChange: onAllRowsSelectionChange,
|
|
1127
|
+
isCellSelected: isCellSelected
|
|
1128
|
+
});
|
|
1129
|
+
}
|
|
1130
|
+
if (column.sortable) {
|
|
1131
|
+
return /*#__PURE__*/jsxRuntime.jsx(SortableHeaderCell, {
|
|
1132
|
+
onSort: onSort,
|
|
1133
|
+
sortDirection: sortDirection,
|
|
1134
|
+
priority: priority,
|
|
1135
|
+
isCellSelected: isCellSelected,
|
|
1136
|
+
children: column.name
|
|
1137
|
+
});
|
|
1138
|
+
}
|
|
1139
|
+
return column.name;
|
|
1140
|
+
}
|
|
1141
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1142
|
+
role: "columnheader",
|
|
1143
|
+
"aria-colindex": column.idx + 1,
|
|
1144
|
+
"aria-selected": isCellSelected,
|
|
1145
|
+
"aria-sort": ariaSort,
|
|
1146
|
+
"aria-colspan": colSpan,
|
|
1147
|
+
ref: ref,
|
|
1148
|
+
tabIndex: shouldFocusGrid ? 0 : tabIndex,
|
|
1149
|
+
className: className,
|
|
1150
|
+
style: getCellStyle(column, colSpan),
|
|
1151
|
+
onFocus: handleFocus,
|
|
1152
|
+
onClick: onClick,
|
|
1153
|
+
onPointerDown: column.resizable ? onPointerDown : undefined,
|
|
1154
|
+
children: getCell()
|
|
1155
|
+
});
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
var css_248z$6 = ".h10tskcx700-beta711{background-color:var(--header-background-color);contain:strict;contain:size layout style paint;display:grid;font-weight:700;grid-template-columns:var(--template-columns);grid-template-rows:var(--header-row-height);height:var(--header-row-height);line-height:var(--header-row-height);outline:none;position:sticky;top:0;width:var(--row-width);z-index:3}.h10tskcx700-beta711[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--selection-color)}";
|
|
1159
|
+
styleInject(css_248z$6,{"insertAt":"top"});
|
|
1160
|
+
|
|
1161
|
+
const headerRow = "h10tskcx700-beta711";
|
|
1162
|
+
const headerRowClassname = `rdg-header-row ${headerRow}`;
|
|
1163
|
+
function HeaderRow({
|
|
1164
|
+
columns,
|
|
1165
|
+
allRowsSelected,
|
|
1166
|
+
onAllRowsSelectionChange,
|
|
1167
|
+
onColumnResize,
|
|
1168
|
+
sortColumns,
|
|
1169
|
+
onSortColumnsChange,
|
|
1170
|
+
lastFrozenColumnIndex,
|
|
1171
|
+
selectedCellIdx,
|
|
1172
|
+
selectCell,
|
|
1173
|
+
shouldFocusGrid
|
|
1174
|
+
}) {
|
|
1175
|
+
const {
|
|
1176
|
+
ref,
|
|
1177
|
+
tabIndex,
|
|
1178
|
+
className
|
|
1179
|
+
} = useRovingRowRef(selectedCellIdx);
|
|
1180
|
+
const cells = [];
|
|
1181
|
+
for (let index = 0; index < columns.length; index++) {
|
|
1182
|
+
const column = columns[index];
|
|
1183
|
+
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
1184
|
+
type: 'HEADER'
|
|
1185
|
+
});
|
|
1186
|
+
if (colSpan !== undefined) {
|
|
1187
|
+
index += colSpan - 1;
|
|
1188
|
+
}
|
|
1189
|
+
cells.push(/*#__PURE__*/jsxRuntime.jsx(HeaderCell, {
|
|
1190
|
+
column: column,
|
|
1191
|
+
colSpan: colSpan,
|
|
1192
|
+
isCellSelected: selectedCellIdx === column.idx,
|
|
1193
|
+
onColumnResize: onColumnResize,
|
|
1194
|
+
allRowsSelected: allRowsSelected,
|
|
1195
|
+
onAllRowsSelectionChange: onAllRowsSelectionChange,
|
|
1196
|
+
onSortColumnsChange: onSortColumnsChange,
|
|
1197
|
+
sortColumns: sortColumns,
|
|
1198
|
+
selectCell: selectCell,
|
|
1199
|
+
shouldFocusGrid: shouldFocusGrid && index === 0
|
|
1200
|
+
}, column.key));
|
|
1201
|
+
}
|
|
1202
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1203
|
+
role: "row",
|
|
1204
|
+
"aria-rowindex": 1,
|
|
1205
|
+
ref: ref,
|
|
1206
|
+
tabIndex: tabIndex,
|
|
1207
|
+
className: clsx(headerRowClassname, className),
|
|
1208
|
+
children: cells
|
|
1209
|
+
});
|
|
1210
|
+
}
|
|
1211
|
+
const HeaderRow$1 = /*#__PURE__*/react.memo(HeaderRow);
|
|
1212
|
+
|
|
1213
|
+
var css_248z$5 = ".c6ra8a3700-beta711,.cq910m0700-beta711{background-color:#ccf}.cq910m0700-beta711.c6ra8a3700-beta711{background-color:#99f}";
|
|
1214
|
+
styleInject(css_248z$5,{"insertAt":"top"});
|
|
1215
|
+
|
|
1216
|
+
const cellCopied = "c6ra8a3700-beta711";
|
|
1217
|
+
const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
|
|
1218
|
+
const cellDraggedOver = "cq910m0700-beta711";
|
|
1219
|
+
const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
|
|
1220
|
+
function Cell({
|
|
1221
|
+
column,
|
|
1222
|
+
colSpan,
|
|
1223
|
+
isCellSelected,
|
|
1224
|
+
isCopied,
|
|
1225
|
+
isDraggedOver,
|
|
1226
|
+
row,
|
|
1227
|
+
rowIdx,
|
|
1228
|
+
dragHandle,
|
|
1229
|
+
onRowClick,
|
|
1230
|
+
onRowDoubleClick,
|
|
1231
|
+
onRowChange,
|
|
1232
|
+
selectCell,
|
|
1233
|
+
...props
|
|
1234
|
+
}) {
|
|
1235
|
+
const {
|
|
1236
|
+
ref,
|
|
1237
|
+
tabIndex,
|
|
1238
|
+
onFocus
|
|
1239
|
+
} = useRovingCellRef(isCellSelected);
|
|
1240
|
+
const {
|
|
1241
|
+
cellClass
|
|
1242
|
+
} = column;
|
|
1243
|
+
const className = getCellClassname(column, typeof cellClass === 'function' ? cellClass(row) : cellClass, isCopied && cellCopiedClassname, isDraggedOver && cellDraggedOverClassname);
|
|
1244
|
+
function selectCellWrapper(openEditor) {
|
|
1245
|
+
selectCell(row, column, openEditor);
|
|
1246
|
+
}
|
|
1247
|
+
function handleClick() {
|
|
1248
|
+
selectCellWrapper(column.editorOptions?.editOnClick);
|
|
1249
|
+
onRowClick?.(row, column);
|
|
1250
|
+
}
|
|
1251
|
+
function handleContextMenu() {
|
|
1252
|
+
selectCellWrapper();
|
|
1253
|
+
}
|
|
1254
|
+
function handleDoubleClick() {
|
|
1255
|
+
selectCellWrapper(true);
|
|
1256
|
+
onRowDoubleClick?.(row, column);
|
|
1257
|
+
}
|
|
1258
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1259
|
+
role: "gridcell",
|
|
1260
|
+
"aria-colindex": column.idx + 1,
|
|
1261
|
+
"aria-selected": isCellSelected,
|
|
1262
|
+
"aria-colspan": colSpan,
|
|
1263
|
+
"aria-readonly": !isCellEditable(column, row) || undefined,
|
|
1264
|
+
ref: ref,
|
|
1265
|
+
tabIndex: tabIndex,
|
|
1266
|
+
className: className,
|
|
1267
|
+
style: getCellStyle(column, colSpan),
|
|
1268
|
+
onClick: handleClick,
|
|
1269
|
+
onDoubleClick: handleDoubleClick,
|
|
1270
|
+
onContextMenu: handleContextMenu,
|
|
1271
|
+
onFocus: onFocus,
|
|
1272
|
+
...props,
|
|
1273
|
+
children: !column.rowGroup && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1274
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(column.formatter, {
|
|
1275
|
+
column: column,
|
|
1276
|
+
row: row,
|
|
1277
|
+
rowIdx: rowIdx,
|
|
1278
|
+
isCellSelected: isCellSelected,
|
|
1279
|
+
onRowChange: onRowChange
|
|
1280
|
+
}), dragHandle]
|
|
1281
|
+
})
|
|
1282
|
+
});
|
|
1283
|
+
}
|
|
1284
|
+
const Cell$1 = /*#__PURE__*/react.memo(Cell);
|
|
1285
|
+
|
|
1286
|
+
function Row({
|
|
1287
|
+
className,
|
|
1288
|
+
rowIdx,
|
|
1289
|
+
selectedCellIdx,
|
|
1290
|
+
isRowSelected,
|
|
1291
|
+
copiedCellIdx,
|
|
1292
|
+
draggedOverCellIdx,
|
|
1293
|
+
lastFrozenColumnIndex,
|
|
1294
|
+
row,
|
|
1295
|
+
viewportColumns,
|
|
1296
|
+
selectedCellEditor,
|
|
1297
|
+
selectedCellDragHandle,
|
|
1298
|
+
onRowClick,
|
|
1299
|
+
onRowDoubleClick,
|
|
1300
|
+
rowClass,
|
|
1301
|
+
setDraggedOverRowIdx,
|
|
1302
|
+
onMouseEnter,
|
|
1303
|
+
top,
|
|
1304
|
+
height,
|
|
1305
|
+
onRowChange,
|
|
1306
|
+
selectCell,
|
|
1307
|
+
...props
|
|
1308
|
+
}, ref) {
|
|
1309
|
+
const {
|
|
1310
|
+
ref: rowRef,
|
|
1311
|
+
tabIndex,
|
|
1312
|
+
className: rovingClassName
|
|
1313
|
+
} = useRovingRowRef(selectedCellIdx);
|
|
1314
|
+
const handleRowChange = useLatestFunc(newRow => {
|
|
1315
|
+
onRowChange(rowIdx, newRow);
|
|
1316
|
+
});
|
|
1317
|
+
function handleDragEnter(event) {
|
|
1318
|
+
setDraggedOverRowIdx?.(rowIdx);
|
|
1319
|
+
onMouseEnter?.(event);
|
|
1320
|
+
}
|
|
1321
|
+
className = clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, rovingClassName, rowClass?.(row), className);
|
|
1322
|
+
const cells = [];
|
|
1323
|
+
for (let index = 0; index < viewportColumns.length; index++) {
|
|
1324
|
+
const column = viewportColumns[index];
|
|
1325
|
+
const {
|
|
1326
|
+
idx
|
|
1327
|
+
} = column;
|
|
1328
|
+
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
1329
|
+
type: 'ROW',
|
|
1330
|
+
row
|
|
1331
|
+
});
|
|
1332
|
+
if (colSpan !== undefined) {
|
|
1333
|
+
index += colSpan - 1;
|
|
1334
|
+
}
|
|
1335
|
+
const isCellSelected = selectedCellIdx === idx;
|
|
1336
|
+
if (isCellSelected && selectedCellEditor) {
|
|
1337
|
+
cells.push(selectedCellEditor);
|
|
1338
|
+
} else {
|
|
1339
|
+
cells.push(/*#__PURE__*/jsxRuntime.jsx(Cell$1, {
|
|
1340
|
+
column: column,
|
|
1341
|
+
colSpan: colSpan,
|
|
1342
|
+
row: row,
|
|
1343
|
+
isCopied: copiedCellIdx === idx,
|
|
1344
|
+
isDraggedOver: draggedOverCellIdx === idx,
|
|
1345
|
+
isCellSelected: isCellSelected,
|
|
1346
|
+
dragHandle: isCellSelected ? selectedCellDragHandle : undefined,
|
|
1347
|
+
onRowClick: onRowClick,
|
|
1348
|
+
onRowDoubleClick: onRowDoubleClick,
|
|
1349
|
+
onRowChange: handleRowChange,
|
|
1350
|
+
selectCell: selectCell,
|
|
1351
|
+
rowIdx: rowIdx
|
|
1352
|
+
}, column.key));
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
return /*#__PURE__*/jsxRuntime.jsx(RowSelectionProvider, {
|
|
1356
|
+
value: isRowSelected,
|
|
1357
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1358
|
+
role: "row",
|
|
1359
|
+
ref: useCombinedRefs(ref, rowRef),
|
|
1360
|
+
tabIndex: tabIndex,
|
|
1361
|
+
className: className,
|
|
1362
|
+
onMouseEnter: handleDragEnter,
|
|
1363
|
+
style: {
|
|
1364
|
+
top,
|
|
1365
|
+
'--row-height': `${height}px`
|
|
1366
|
+
},
|
|
1367
|
+
...props,
|
|
1368
|
+
children: cells
|
|
1369
|
+
})
|
|
1370
|
+
});
|
|
1371
|
+
}
|
|
1372
|
+
const Row$1 = /*#__PURE__*/react.memo(Row);
|
|
1373
|
+
const RowWithRef = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef(Row));
|
|
1374
|
+
|
|
1375
|
+
function GroupCell({
|
|
1376
|
+
id,
|
|
1377
|
+
groupKey,
|
|
1378
|
+
childRows,
|
|
1379
|
+
isExpanded,
|
|
1380
|
+
isCellSelected,
|
|
1381
|
+
column,
|
|
1382
|
+
row,
|
|
1383
|
+
groupColumnIndex,
|
|
1384
|
+
toggleGroup: toggleGroupWrapper
|
|
1385
|
+
}) {
|
|
1386
|
+
const {
|
|
1387
|
+
ref,
|
|
1388
|
+
tabIndex,
|
|
1389
|
+
onFocus
|
|
1390
|
+
} = useRovingCellRef(isCellSelected);
|
|
1391
|
+
function toggleGroup() {
|
|
1392
|
+
toggleGroupWrapper(id);
|
|
1393
|
+
}
|
|
1394
|
+
const isLevelMatching = column.rowGroup && groupColumnIndex === column.idx;
|
|
1395
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1396
|
+
role: "gridcell",
|
|
1397
|
+
"aria-colindex": column.idx + 1,
|
|
1398
|
+
"aria-selected": isCellSelected,
|
|
1399
|
+
ref: ref,
|
|
1400
|
+
tabIndex: tabIndex,
|
|
1401
|
+
className: getCellClassname(column),
|
|
1402
|
+
style: {
|
|
1403
|
+
...getCellStyle(column),
|
|
1404
|
+
cursor: isLevelMatching ? 'pointer' : 'default'
|
|
1405
|
+
},
|
|
1406
|
+
onClick: isLevelMatching ? toggleGroup : undefined,
|
|
1407
|
+
onFocus: onFocus,
|
|
1408
|
+
children: (!column.rowGroup || groupColumnIndex === column.idx) && column.groupFormatter && /*#__PURE__*/jsxRuntime.jsx(column.groupFormatter, {
|
|
1409
|
+
groupKey: groupKey,
|
|
1410
|
+
childRows: childRows,
|
|
1411
|
+
column: column,
|
|
1412
|
+
row: row,
|
|
1413
|
+
isExpanded: isExpanded,
|
|
1414
|
+
isCellSelected: isCellSelected,
|
|
1415
|
+
toggleGroup: toggleGroup
|
|
1416
|
+
})
|
|
1417
|
+
}, column.key);
|
|
1418
|
+
}
|
|
1419
|
+
const GroupCell$1 = /*#__PURE__*/react.memo(GroupCell);
|
|
1420
|
+
|
|
1421
|
+
var css_248z$4 = ".g1yxluv3700-beta711:not([aria-selected=true]){background-color:var(--header-background-color)}.g1yxluv3700-beta711>.cj343x0700-beta711:not(:last-child):not(.ch2wcw8700-beta711){border-right:none}";
|
|
1422
|
+
styleInject(css_248z$4,{"insertAt":"top"});
|
|
1423
|
+
|
|
1424
|
+
const groupRow = "g1yxluv3700-beta711";
|
|
1425
|
+
const groupRowClassname = `rdg-group-row ${groupRow}`;
|
|
1426
|
+
function GroupedRow({
|
|
1427
|
+
id,
|
|
1428
|
+
groupKey,
|
|
1429
|
+
viewportColumns,
|
|
1430
|
+
childRows,
|
|
1431
|
+
rowIdx,
|
|
1432
|
+
row,
|
|
1433
|
+
top,
|
|
1434
|
+
height,
|
|
1435
|
+
level,
|
|
1436
|
+
isExpanded,
|
|
1437
|
+
selectedCellIdx,
|
|
1438
|
+
isRowSelected,
|
|
1439
|
+
selectGroup,
|
|
1440
|
+
toggleGroup,
|
|
1441
|
+
...props
|
|
1442
|
+
}) {
|
|
1443
|
+
const {
|
|
1444
|
+
ref,
|
|
1445
|
+
tabIndex,
|
|
1446
|
+
className
|
|
1447
|
+
} = useRovingRowRef(selectedCellIdx);
|
|
1448
|
+
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
|
|
1449
|
+
function handleSelectGroup() {
|
|
1450
|
+
selectGroup(rowIdx);
|
|
1451
|
+
}
|
|
1452
|
+
return /*#__PURE__*/jsxRuntime.jsx(RowSelectionProvider, {
|
|
1453
|
+
value: isRowSelected,
|
|
1454
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1455
|
+
role: "row",
|
|
1456
|
+
"aria-level": level,
|
|
1457
|
+
"aria-expanded": isExpanded,
|
|
1458
|
+
ref: ref,
|
|
1459
|
+
tabIndex: tabIndex,
|
|
1460
|
+
className: clsx(rowClassname, groupRowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, className),
|
|
1461
|
+
onClick: handleSelectGroup,
|
|
1462
|
+
style: {
|
|
1463
|
+
top,
|
|
1464
|
+
'--row-height': `${height}px`
|
|
1465
|
+
},
|
|
1466
|
+
...props,
|
|
1467
|
+
children: viewportColumns.map(column => /*#__PURE__*/jsxRuntime.jsx(GroupCell$1, {
|
|
1468
|
+
id: id,
|
|
1469
|
+
groupKey: groupKey,
|
|
1470
|
+
childRows: childRows,
|
|
1471
|
+
isExpanded: isExpanded,
|
|
1472
|
+
isCellSelected: selectedCellIdx === column.idx,
|
|
1473
|
+
column: column,
|
|
1474
|
+
row: row,
|
|
1475
|
+
groupColumnIndex: idx,
|
|
1476
|
+
toggleGroup: toggleGroup
|
|
1477
|
+
}, column.key))
|
|
1478
|
+
})
|
|
1479
|
+
});
|
|
1480
|
+
}
|
|
1481
|
+
const GroupRowRenderer = /*#__PURE__*/react.memo(GroupedRow);
|
|
1482
|
+
|
|
1483
|
+
function SummaryCell({
|
|
1484
|
+
column,
|
|
1485
|
+
colSpan,
|
|
1486
|
+
row,
|
|
1487
|
+
isCellSelected,
|
|
1488
|
+
selectCell
|
|
1489
|
+
}) {
|
|
1490
|
+
const {
|
|
1491
|
+
ref,
|
|
1492
|
+
tabIndex,
|
|
1493
|
+
onFocus
|
|
1494
|
+
} = useRovingCellRef(isCellSelected);
|
|
1495
|
+
const {
|
|
1496
|
+
summaryFormatter: SummaryFormatter,
|
|
1497
|
+
summaryCellClass
|
|
1498
|
+
} = column;
|
|
1499
|
+
const className = getCellClassname(column, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
|
|
1500
|
+
function onClick() {
|
|
1501
|
+
selectCell(row, column);
|
|
1502
|
+
}
|
|
1503
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1504
|
+
role: "gridcell",
|
|
1505
|
+
"aria-colindex": column.idx + 1,
|
|
1506
|
+
"aria-colspan": colSpan,
|
|
1507
|
+
"aria-selected": isCellSelected,
|
|
1508
|
+
ref: ref,
|
|
1509
|
+
tabIndex: tabIndex,
|
|
1510
|
+
className: className,
|
|
1511
|
+
style: getCellStyle(column, colSpan),
|
|
1512
|
+
onClick: onClick,
|
|
1513
|
+
onFocus: onFocus,
|
|
1514
|
+
children: SummaryFormatter && /*#__PURE__*/jsxRuntime.jsx(SummaryFormatter, {
|
|
1515
|
+
column: column,
|
|
1516
|
+
row: row,
|
|
1517
|
+
isCellSelected: isCellSelected
|
|
1518
|
+
})
|
|
1519
|
+
});
|
|
1520
|
+
}
|
|
1521
|
+
const SummaryCell$1 = /*#__PURE__*/react.memo(SummaryCell);
|
|
1522
|
+
|
|
1523
|
+
var css_248z$3 = ".skuhp55700-beta711.r1upfr80700-beta711{grid-template-rows:var(--summary-row-height);height:var(--summary-row-height);line-height:var(--summary-row-height);position:sticky;z-index:3}.sf8l5ub700-beta711>.cj343x0700-beta711{border-top:2px solid var(--summary-border-color)}";
|
|
1524
|
+
styleInject(css_248z$3,{"insertAt":"top"});
|
|
1525
|
+
|
|
1526
|
+
const summaryRow = "skuhp55700-beta711";
|
|
1527
|
+
const summaryRowBorderClassname = "sf8l5ub700-beta711";
|
|
1528
|
+
const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
|
|
1529
|
+
function SummaryRow({
|
|
1530
|
+
rowIdx,
|
|
1531
|
+
row,
|
|
1532
|
+
viewportColumns,
|
|
1533
|
+
bottom,
|
|
1534
|
+
lastFrozenColumnIndex,
|
|
1535
|
+
selectedCellIdx,
|
|
1536
|
+
selectCell,
|
|
1537
|
+
'aria-rowindex': ariaRowIndex
|
|
1538
|
+
}) {
|
|
1539
|
+
const {
|
|
1540
|
+
ref,
|
|
1541
|
+
tabIndex,
|
|
1542
|
+
className
|
|
1543
|
+
} = useRovingRowRef(selectedCellIdx);
|
|
1544
|
+
const cells = [];
|
|
1545
|
+
for (let index = 0; index < viewportColumns.length; index++) {
|
|
1546
|
+
const column = viewportColumns[index];
|
|
1547
|
+
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
1548
|
+
type: 'SUMMARY',
|
|
1549
|
+
row
|
|
1550
|
+
});
|
|
1551
|
+
if (colSpan !== undefined) {
|
|
1552
|
+
index += colSpan - 1;
|
|
1553
|
+
}
|
|
1554
|
+
const isCellSelected = selectedCellIdx === column.idx;
|
|
1555
|
+
cells.push(/*#__PURE__*/jsxRuntime.jsx(SummaryCell$1, {
|
|
1556
|
+
column: column,
|
|
1557
|
+
colSpan: colSpan,
|
|
1558
|
+
row: row,
|
|
1559
|
+
isCellSelected: isCellSelected,
|
|
1560
|
+
selectCell: selectCell
|
|
1561
|
+
}, column.key));
|
|
1562
|
+
}
|
|
1563
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1564
|
+
role: "row",
|
|
1565
|
+
"aria-rowindex": ariaRowIndex,
|
|
1566
|
+
ref: ref,
|
|
1567
|
+
tabIndex: tabIndex,
|
|
1568
|
+
className: clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, summaryRowClassname, className, rowIdx === 0 && summaryRowBorderClassname),
|
|
1569
|
+
style: {
|
|
1570
|
+
bottom
|
|
1571
|
+
},
|
|
1572
|
+
children: cells
|
|
1573
|
+
});
|
|
1574
|
+
}
|
|
1575
|
+
const SummaryRow$1 = /*#__PURE__*/react.memo(SummaryRow);
|
|
1576
|
+
|
|
1577
|
+
var css_248z$2 = ".cis5rrm700-beta711.rdg-cell{padding:0}";
|
|
1578
|
+
styleInject(css_248z$2,{"insertAt":"top"});
|
|
1579
|
+
|
|
1580
|
+
const cellEditing = "cis5rrm700-beta711";
|
|
1581
|
+
function EditCell({
|
|
1582
|
+
column,
|
|
1583
|
+
colSpan,
|
|
1584
|
+
row,
|
|
1585
|
+
rowIdx,
|
|
1586
|
+
onRowChange,
|
|
1587
|
+
onClose
|
|
1588
|
+
}) {
|
|
1589
|
+
const frameRequestRef = react.useRef();
|
|
1590
|
+
const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
|
|
1591
|
+
const commitOnOutsideMouseDown = useLatestFunc(() => {
|
|
1592
|
+
onRowChange(row, true);
|
|
1593
|
+
});
|
|
1594
|
+
function cancelFrameRequest() {
|
|
1595
|
+
cancelAnimationFrame(frameRequestRef.current);
|
|
1596
|
+
}
|
|
1597
|
+
react.useEffect(() => {
|
|
1598
|
+
if (!commitOnOutsideClick) return;
|
|
1599
|
+
function onWindowCaptureMouseDown() {
|
|
1600
|
+
frameRequestRef.current = requestAnimationFrame(commitOnOutsideMouseDown);
|
|
1601
|
+
}
|
|
1602
|
+
addEventListener('mousedown', onWindowCaptureMouseDown, {
|
|
1603
|
+
capture: true
|
|
1604
|
+
});
|
|
1605
|
+
return () => {
|
|
1606
|
+
removeEventListener('mousedown', onWindowCaptureMouseDown, {
|
|
1607
|
+
capture: true
|
|
1608
|
+
});
|
|
1609
|
+
cancelFrameRequest();
|
|
1610
|
+
};
|
|
1611
|
+
}, [commitOnOutsideClick, commitOnOutsideMouseDown]);
|
|
1612
|
+
const {
|
|
1613
|
+
cellClass
|
|
1614
|
+
} = column;
|
|
1615
|
+
const className = getCellClassname(column, 'rdg-editor-container', typeof cellClass === 'function' ? cellClass(row) : cellClass, !column.editorOptions?.renderFormatter && cellEditing);
|
|
1616
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1617
|
+
role: "gridcell",
|
|
1618
|
+
"aria-colindex": column.idx + 1,
|
|
1619
|
+
"aria-colspan": colSpan,
|
|
1620
|
+
"aria-selected": true,
|
|
1621
|
+
className: className,
|
|
1622
|
+
style: getCellStyle(column, colSpan),
|
|
1623
|
+
onMouseDownCapture: commitOnOutsideClick ? cancelFrameRequest : undefined,
|
|
1624
|
+
children: column.editor != null && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1625
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(column.editor, {
|
|
1626
|
+
column: column,
|
|
1627
|
+
row: row,
|
|
1628
|
+
onRowChange: onRowChange,
|
|
1629
|
+
onClose: onClose
|
|
1630
|
+
}), column.editorOptions?.renderFormatter && /*#__PURE__*/jsxRuntime.jsx(column.formatter, {
|
|
1631
|
+
column: column,
|
|
1632
|
+
row: row,
|
|
1633
|
+
rowIdx: rowIdx,
|
|
1634
|
+
isCellSelected: true,
|
|
1635
|
+
onRowChange: onRowChange
|
|
1636
|
+
})]
|
|
1637
|
+
})
|
|
1638
|
+
});
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
var css_248z$1 = ".c1w9bbhr700-beta711{background-color:var(--selection-color);bottom:0;cursor:move;height:8px;position:absolute;right:0;width:8px}.c1w9bbhr700-beta711:hover{background-color:var(--background-color);border:2px solid var(--selection-color);height:16px;width:16px}";
|
|
1642
|
+
styleInject(css_248z$1,{"insertAt":"top"});
|
|
1643
|
+
|
|
1644
|
+
const cellDragHandle = "c1w9bbhr700-beta711";
|
|
1645
|
+
const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
|
|
1646
|
+
function DragHandle({
|
|
1647
|
+
rows,
|
|
1648
|
+
columns,
|
|
1649
|
+
selectedPosition,
|
|
1650
|
+
latestDraggedOverRowIdx,
|
|
1651
|
+
isCellEditable,
|
|
1652
|
+
onRowsChange,
|
|
1653
|
+
onFill,
|
|
1654
|
+
setDragging,
|
|
1655
|
+
setDraggedOverRowIdx
|
|
1656
|
+
}) {
|
|
1657
|
+
function handleMouseDown(event) {
|
|
1658
|
+
if (event.buttons !== 1) return;
|
|
1659
|
+
setDragging(true);
|
|
1660
|
+
window.addEventListener('mouseover', onMouseOver);
|
|
1661
|
+
window.addEventListener('mouseup', onMouseUp);
|
|
1662
|
+
function onMouseOver(event) {
|
|
1663
|
+
if (event.buttons !== 1) onMouseUp();
|
|
1664
|
+
}
|
|
1665
|
+
function onMouseUp() {
|
|
1666
|
+
window.removeEventListener('mouseover', onMouseOver);
|
|
1667
|
+
window.removeEventListener('mouseup', onMouseUp);
|
|
1668
|
+
setDragging(false);
|
|
1669
|
+
handleDragEnd();
|
|
1670
|
+
}
|
|
1671
|
+
}
|
|
1672
|
+
function handleDragEnd() {
|
|
1673
|
+
const overRowIdx = latestDraggedOverRowIdx.current;
|
|
1674
|
+
if (overRowIdx === undefined) return;
|
|
1675
|
+
const {
|
|
1676
|
+
rowIdx
|
|
1677
|
+
} = selectedPosition;
|
|
1678
|
+
const startRowIndex = rowIdx < overRowIdx ? rowIdx + 1 : overRowIdx;
|
|
1679
|
+
const endRowIndex = rowIdx < overRowIdx ? overRowIdx + 1 : rowIdx;
|
|
1680
|
+
updateRows(startRowIndex, endRowIndex);
|
|
1681
|
+
setDraggedOverRowIdx(undefined);
|
|
1682
|
+
}
|
|
1683
|
+
function handleDoubleClick(event) {
|
|
1684
|
+
event.stopPropagation();
|
|
1685
|
+
updateRows(selectedPosition.rowIdx + 1, rows.length);
|
|
1686
|
+
}
|
|
1687
|
+
function updateRows(startRowIdx, endRowIdx) {
|
|
1688
|
+
const {
|
|
1689
|
+
idx,
|
|
1690
|
+
rowIdx
|
|
1691
|
+
} = selectedPosition;
|
|
1692
|
+
const column = columns[idx];
|
|
1693
|
+
const sourceRow = rows[rowIdx];
|
|
1694
|
+
const updatedRows = [...rows];
|
|
1695
|
+
const indexes = [];
|
|
1696
|
+
for (let i = startRowIdx; i < endRowIdx; i++) {
|
|
1697
|
+
if (isCellEditable({
|
|
1698
|
+
rowIdx: i,
|
|
1699
|
+
idx
|
|
1700
|
+
})) {
|
|
1701
|
+
const updatedRow = onFill({
|
|
1702
|
+
columnKey: column.key,
|
|
1703
|
+
sourceRow,
|
|
1704
|
+
targetRow: rows[i]
|
|
1705
|
+
});
|
|
1706
|
+
if (updatedRow !== rows[i]) {
|
|
1707
|
+
updatedRows[i] = updatedRow;
|
|
1708
|
+
indexes.push(i);
|
|
1709
|
+
}
|
|
1710
|
+
}
|
|
1711
|
+
}
|
|
1712
|
+
if (indexes.length > 0) {
|
|
1713
|
+
onRowsChange?.(updatedRows, {
|
|
1714
|
+
indexes,
|
|
1715
|
+
column
|
|
1716
|
+
});
|
|
1717
|
+
}
|
|
1718
|
+
}
|
|
1719
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1720
|
+
className: cellDragHandleClassname,
|
|
1721
|
+
onMouseDown: handleMouseDown,
|
|
1722
|
+
onDoubleClick: handleDoubleClick
|
|
1723
|
+
});
|
|
1724
|
+
}
|
|
1725
|
+
|
|
1726
|
+
const initialPosition = {
|
|
1727
|
+
idx: -1,
|
|
1728
|
+
rowIdx: -2,
|
|
1729
|
+
mode: 'SELECT'
|
|
1730
|
+
};
|
|
1731
|
+
function DataGrid({
|
|
1732
|
+
columns: rawColumns,
|
|
1733
|
+
rows: rawRows,
|
|
1734
|
+
summaryRows,
|
|
1735
|
+
rowKeyGetter,
|
|
1736
|
+
onRowsChange,
|
|
1737
|
+
rowHeight,
|
|
1738
|
+
headerRowHeight: rawHeaderRowHeight,
|
|
1739
|
+
summaryRowHeight: rawSummaryRowHeight,
|
|
1740
|
+
selectedRows,
|
|
1741
|
+
onSelectedRowsChange,
|
|
1742
|
+
sortColumns,
|
|
1743
|
+
onSortColumnsChange,
|
|
1744
|
+
defaultColumnOptions,
|
|
1745
|
+
groupBy: rawGroupBy,
|
|
1746
|
+
rowGrouper,
|
|
1747
|
+
expandedGroupIds,
|
|
1748
|
+
onExpandedGroupIdsChange,
|
|
1749
|
+
onRowClick,
|
|
1750
|
+
onRowDoubleClick,
|
|
1751
|
+
onScroll,
|
|
1752
|
+
onColumnResize,
|
|
1753
|
+
onFill,
|
|
1754
|
+
onPaste,
|
|
1755
|
+
cellNavigationMode: rawCellNavigationMode,
|
|
1756
|
+
enableVirtualization,
|
|
1757
|
+
rowRenderer,
|
|
1758
|
+
noRowsFallback,
|
|
1759
|
+
className,
|
|
1760
|
+
style,
|
|
1761
|
+
rowClass,
|
|
1762
|
+
'aria-label': ariaLabel,
|
|
1763
|
+
'aria-labelledby': ariaLabelledBy,
|
|
1764
|
+
'aria-describedby': ariaDescribedBy,
|
|
1765
|
+
'data-testid': testId,
|
|
1766
|
+
editableRowIdxs
|
|
1767
|
+
}, ref) {
|
|
1768
|
+
rowHeight ??= 35;
|
|
1769
|
+
const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
|
|
1770
|
+
const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
|
|
1771
|
+
const RowRenderer = rowRenderer ?? Row$1;
|
|
1772
|
+
const cellNavigationMode = rawCellNavigationMode ?? 'NONE';
|
|
1773
|
+
enableVirtualization ??= true;
|
|
1774
|
+
const [scrollTop, setScrollTop] = react.useState(0);
|
|
1775
|
+
const [scrollLeft, setScrollLeft] = react.useState(0);
|
|
1776
|
+
const [columnWidths, setColumnWidths] = react.useState(() => new Map());
|
|
1777
|
+
const [selectedPosition, setSelectedPosition] = react.useState(initialPosition);
|
|
1778
|
+
const [copiedCell, setCopiedCell] = react.useState(null);
|
|
1779
|
+
const [isDragging, setDragging] = react.useState(false);
|
|
1780
|
+
const [draggedOverRowIdx, setOverRowIdx] = react.useState(undefined);
|
|
1781
|
+
const prevSelectedPosition = react.useRef(selectedPosition);
|
|
1782
|
+
const latestDraggedOverRowIdx = react.useRef(draggedOverRowIdx);
|
|
1783
|
+
const lastSelectedRowIdx = react.useRef(-1);
|
|
1784
|
+
const [gridRef, gridWidth, gridHeight] = useGridDimensions();
|
|
1785
|
+
const headerRowsCount = 1;
|
|
1786
|
+
const summaryRowsCount = summaryRows?.length ?? 0;
|
|
1787
|
+
const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight;
|
|
1788
|
+
const isSelectable = selectedRows != null && onSelectedRowsChange != null;
|
|
1789
|
+
const isHeaderRowSelected = selectedPosition.rowIdx === -1;
|
|
1790
|
+
const allRowsSelected = react.useMemo(() => {
|
|
1791
|
+
const {
|
|
1792
|
+
length
|
|
1793
|
+
} = rawRows;
|
|
1794
|
+
return length !== 0 && selectedRows != null && rowKeyGetter != null && selectedRows.size >= length && rawRows.every(row => selectedRows.has(rowKeyGetter(row)));
|
|
1795
|
+
}, [rawRows, selectedRows, rowKeyGetter]);
|
|
1796
|
+
const {
|
|
1797
|
+
columns,
|
|
1798
|
+
colSpanColumns,
|
|
1799
|
+
colOverscanStartIdx,
|
|
1800
|
+
colOverscanEndIdx,
|
|
1801
|
+
layoutCssVars,
|
|
1802
|
+
columnMetrics,
|
|
1803
|
+
totalColumnWidth,
|
|
1804
|
+
lastFrozenColumnIndex,
|
|
1805
|
+
totalFrozenColumnWidth,
|
|
1806
|
+
groupBy
|
|
1807
|
+
} = useCalculatedColumns({
|
|
1808
|
+
rawColumns,
|
|
1809
|
+
columnWidths,
|
|
1810
|
+
scrollLeft,
|
|
1811
|
+
viewportWidth: gridWidth,
|
|
1812
|
+
defaultColumnOptions,
|
|
1813
|
+
rawGroupBy: rowGrouper ? rawGroupBy : undefined,
|
|
1814
|
+
enableVirtualization
|
|
1815
|
+
});
|
|
1816
|
+
const {
|
|
1817
|
+
rowOverscanStartIdx,
|
|
1818
|
+
rowOverscanEndIdx,
|
|
1819
|
+
rows,
|
|
1820
|
+
rowsCount,
|
|
1821
|
+
totalRowHeight,
|
|
1822
|
+
isGroupRow,
|
|
1823
|
+
getRowTop,
|
|
1824
|
+
getRowHeight,
|
|
1825
|
+
findRowIdx
|
|
1826
|
+
} = useViewportRows({
|
|
1827
|
+
rawRows,
|
|
1828
|
+
groupBy,
|
|
1829
|
+
rowGrouper,
|
|
1830
|
+
rowHeight,
|
|
1831
|
+
clientHeight,
|
|
1832
|
+
scrollTop,
|
|
1833
|
+
expandedGroupIds,
|
|
1834
|
+
enableVirtualization
|
|
1835
|
+
});
|
|
1836
|
+
const viewportColumns = useViewportColumns({
|
|
1837
|
+
columns,
|
|
1838
|
+
colSpanColumns,
|
|
1839
|
+
colOverscanStartIdx,
|
|
1840
|
+
colOverscanEndIdx,
|
|
1841
|
+
lastFrozenColumnIndex,
|
|
1842
|
+
rowOverscanStartIdx,
|
|
1843
|
+
rowOverscanEndIdx,
|
|
1844
|
+
rows,
|
|
1845
|
+
summaryRows,
|
|
1846
|
+
isGroupRow
|
|
1847
|
+
});
|
|
1848
|
+
const hasGroups = groupBy.length > 0 && typeof rowGrouper === 'function';
|
|
1849
|
+
const minColIdx = hasGroups ? -1 : 0;
|
|
1850
|
+
const maxColIdx = columns.length - 1;
|
|
1851
|
+
const minRowIdx = -1;
|
|
1852
|
+
const maxRowIdx = headerRowsCount + rows.length + summaryRowsCount - 2;
|
|
1853
|
+
const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition);
|
|
1854
|
+
const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
|
|
1855
|
+
const selectRowLatest = useLatestFunc(selectRow);
|
|
1856
|
+
const selectAllRowsLatest = useLatestFunc(selectAllRows);
|
|
1857
|
+
const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
|
|
1858
|
+
const selectViewportCellLatest = useLatestFunc((row, column, enableEditor) => {
|
|
1859
|
+
const rowIdx = rows.indexOf(row);
|
|
1860
|
+
selectCell({
|
|
1861
|
+
rowIdx,
|
|
1862
|
+
idx: column.idx
|
|
1863
|
+
}, enableEditor);
|
|
1864
|
+
});
|
|
1865
|
+
const selectGroupLatest = useLatestFunc(rowIdx => {
|
|
1866
|
+
selectCell({
|
|
1867
|
+
rowIdx,
|
|
1868
|
+
idx: -1
|
|
1869
|
+
});
|
|
1870
|
+
});
|
|
1871
|
+
const selectHeaderCellLatest = useLatestFunc(idx => {
|
|
1872
|
+
selectCell({
|
|
1873
|
+
rowIdx: -1,
|
|
1874
|
+
idx
|
|
1875
|
+
});
|
|
1876
|
+
});
|
|
1877
|
+
const selectSummaryCellLatest = useLatestFunc((summaryRow, column) => {
|
|
1878
|
+
const rowIdx = summaryRows.indexOf(summaryRow) + headerRowsCount + rows.length - 1;
|
|
1879
|
+
selectCell({
|
|
1880
|
+
rowIdx,
|
|
1881
|
+
idx: column.idx
|
|
1882
|
+
});
|
|
1883
|
+
});
|
|
1884
|
+
const toggleGroupLatest = useLatestFunc(toggleGroup);
|
|
1885
|
+
useLayoutEffect(() => {
|
|
1886
|
+
if (!selectedCellIsWithinSelectionBounds || selectedPosition.idx === prevSelectedPosition.current.idx && selectedPosition.rowIdx === prevSelectedPosition.current.rowIdx || selectedPosition.mode === 'EDIT') {
|
|
1887
|
+
prevSelectedPosition.current = selectedPosition;
|
|
1888
|
+
return;
|
|
1889
|
+
}
|
|
1890
|
+
prevSelectedPosition.current = selectedPosition;
|
|
1891
|
+
scrollToCell(selectedPosition);
|
|
1892
|
+
});
|
|
1893
|
+
react.useImperativeHandle(ref, () => ({
|
|
1894
|
+
element: gridRef.current,
|
|
1895
|
+
scrollToColumn(idx) {
|
|
1896
|
+
scrollToCell({
|
|
1897
|
+
idx
|
|
1898
|
+
});
|
|
1899
|
+
},
|
|
1900
|
+
scrollToRow(rowIdx) {
|
|
1901
|
+
const {
|
|
1902
|
+
current
|
|
1903
|
+
} = gridRef;
|
|
1904
|
+
if (!current) return;
|
|
1905
|
+
current.scrollTo({
|
|
1906
|
+
top: getRowTop(rowIdx),
|
|
1907
|
+
behavior: 'smooth'
|
|
1908
|
+
});
|
|
1909
|
+
},
|
|
1910
|
+
selectCell,
|
|
1911
|
+
reInitSelectPosition() {
|
|
1912
|
+
setSelectedPosition(initialPosition);
|
|
1913
|
+
}
|
|
1914
|
+
}));
|
|
1915
|
+
const handleColumnResize = react.useCallback((column, width) => {
|
|
1916
|
+
setColumnWidths(columnWidths => {
|
|
1917
|
+
const newColumnWidths = new Map(columnWidths);
|
|
1918
|
+
newColumnWidths.set(column.key, width);
|
|
1919
|
+
return newColumnWidths;
|
|
1920
|
+
});
|
|
1921
|
+
onColumnResize?.(column.idx, width);
|
|
1922
|
+
}, [onColumnResize]);
|
|
1923
|
+
const setDraggedOverRowIdx = react.useCallback(rowIdx => {
|
|
1924
|
+
setOverRowIdx(rowIdx);
|
|
1925
|
+
latestDraggedOverRowIdx.current = rowIdx;
|
|
1926
|
+
}, []);
|
|
1927
|
+
function selectRow({
|
|
1928
|
+
row,
|
|
1929
|
+
checked,
|
|
1930
|
+
isShiftClick
|
|
1931
|
+
}) {
|
|
1932
|
+
if (!onSelectedRowsChange) return;
|
|
1933
|
+
assertIsValidKeyGetter(rowKeyGetter);
|
|
1934
|
+
const newSelectedRows = new Set(selectedRows);
|
|
1935
|
+
if (isGroupRow(row)) {
|
|
1936
|
+
for (const childRow of row.childRows) {
|
|
1937
|
+
const rowKey = rowKeyGetter(childRow);
|
|
1938
|
+
if (checked) {
|
|
1939
|
+
newSelectedRows.add(rowKey);
|
|
1940
|
+
} else {
|
|
1941
|
+
newSelectedRows.delete(rowKey);
|
|
1942
|
+
}
|
|
1943
|
+
}
|
|
1944
|
+
onSelectedRowsChange(newSelectedRows);
|
|
1945
|
+
return;
|
|
1946
|
+
}
|
|
1947
|
+
const rowKey = rowKeyGetter(row);
|
|
1948
|
+
if (checked) {
|
|
1949
|
+
newSelectedRows.add(rowKey);
|
|
1950
|
+
const previousRowIdx = lastSelectedRowIdx.current;
|
|
1951
|
+
const rowIdx = rows.indexOf(row);
|
|
1952
|
+
lastSelectedRowIdx.current = rowIdx;
|
|
1953
|
+
if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
|
|
1954
|
+
const step = sign(rowIdx - previousRowIdx);
|
|
1955
|
+
for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
|
|
1956
|
+
const row = rows[i];
|
|
1957
|
+
if (isGroupRow(row)) continue;
|
|
1958
|
+
newSelectedRows.add(rowKeyGetter(row));
|
|
1959
|
+
}
|
|
1960
|
+
}
|
|
1961
|
+
} else {
|
|
1962
|
+
newSelectedRows.delete(rowKey);
|
|
1963
|
+
lastSelectedRowIdx.current = -1;
|
|
1964
|
+
}
|
|
1965
|
+
onSelectedRowsChange(newSelectedRows);
|
|
1966
|
+
}
|
|
1967
|
+
function selectAllRows(checked) {
|
|
1968
|
+
if (!onSelectedRowsChange) return;
|
|
1969
|
+
assertIsValidKeyGetter(rowKeyGetter);
|
|
1970
|
+
const newSelectedRows = new Set(selectedRows);
|
|
1971
|
+
for (const row of rawRows) {
|
|
1972
|
+
const rowKey = rowKeyGetter(row);
|
|
1973
|
+
if (checked) {
|
|
1974
|
+
newSelectedRows.add(rowKey);
|
|
1975
|
+
} else {
|
|
1976
|
+
newSelectedRows.delete(rowKey);
|
|
1977
|
+
}
|
|
1978
|
+
}
|
|
1979
|
+
onSelectedRowsChange(newSelectedRows);
|
|
1980
|
+
}
|
|
1981
|
+
function toggleGroup(expandedGroupId) {
|
|
1982
|
+
if (!onExpandedGroupIdsChange) return;
|
|
1983
|
+
const newExpandedGroupIds = new Set(expandedGroupIds);
|
|
1984
|
+
if (newExpandedGroupIds.has(expandedGroupId)) {
|
|
1985
|
+
newExpandedGroupIds.delete(expandedGroupId);
|
|
1986
|
+
} else {
|
|
1987
|
+
newExpandedGroupIds.add(expandedGroupId);
|
|
1988
|
+
}
|
|
1989
|
+
onExpandedGroupIdsChange(newExpandedGroupIds);
|
|
1990
|
+
}
|
|
1991
|
+
function handleKeyDown(event) {
|
|
1992
|
+
if (!(event.target instanceof Element)) return;
|
|
1993
|
+
const isCellEvent = event.target.closest('.rdg-cell') !== null;
|
|
1994
|
+
const isRowEvent = hasGroups && event.target.matches('.rdg-row, .rdg-header-row');
|
|
1995
|
+
if (!isCellEvent && !isRowEvent) return;
|
|
1996
|
+
const {
|
|
1997
|
+
key,
|
|
1998
|
+
keyCode
|
|
1999
|
+
} = event;
|
|
2000
|
+
const {
|
|
2001
|
+
rowIdx
|
|
2002
|
+
} = selectedPosition;
|
|
2003
|
+
if (selectedCellIsWithinViewportBounds && onPaste != null && isCtrlKeyHeldDown(event) && !isGroupRow(rows[rowIdx]) && selectedPosition.mode === 'SELECT') {
|
|
2004
|
+
const cKey = 67;
|
|
2005
|
+
const vKey = 86;
|
|
2006
|
+
if (keyCode === cKey) {
|
|
2007
|
+
handleCopy();
|
|
2008
|
+
return;
|
|
2009
|
+
}
|
|
2010
|
+
if (keyCode === vKey) {
|
|
2011
|
+
handlePaste();
|
|
2012
|
+
return;
|
|
2013
|
+
}
|
|
2014
|
+
}
|
|
2015
|
+
if (isRowIdxWithinViewportBounds(rowIdx)) {
|
|
2016
|
+
const row = rows[rowIdx];
|
|
2017
|
+
if (isGroupRow(row) && selectedPosition.idx === -1 && (key === 'ArrowLeft' && row.isExpanded || key === 'ArrowRight' && !row.isExpanded)) {
|
|
2018
|
+
event.preventDefault();
|
|
2019
|
+
toggleGroup(row.id);
|
|
2020
|
+
return;
|
|
2021
|
+
}
|
|
2022
|
+
}
|
|
2023
|
+
switch (event.key) {
|
|
2024
|
+
case 'Escape':
|
|
2025
|
+
setCopiedCell(null);
|
|
2026
|
+
closeEditor();
|
|
2027
|
+
return;
|
|
2028
|
+
case 'ArrowUp':
|
|
2029
|
+
case 'ArrowDown':
|
|
2030
|
+
case 'ArrowLeft':
|
|
2031
|
+
case 'ArrowRight':
|
|
2032
|
+
case 'Tab':
|
|
2033
|
+
case 'Home':
|
|
2034
|
+
case 'End':
|
|
2035
|
+
case 'PageUp':
|
|
2036
|
+
case 'PageDown':
|
|
2037
|
+
navigate(event);
|
|
2038
|
+
break;
|
|
2039
|
+
default:
|
|
2040
|
+
handleCellInput(event);
|
|
2041
|
+
break;
|
|
2042
|
+
}
|
|
2043
|
+
}
|
|
2044
|
+
function handleScroll(event) {
|
|
2045
|
+
const {
|
|
2046
|
+
scrollTop,
|
|
2047
|
+
scrollLeft
|
|
2048
|
+
} = event.currentTarget;
|
|
2049
|
+
setScrollTop(scrollTop);
|
|
2050
|
+
setScrollLeft(scrollLeft);
|
|
2051
|
+
onScroll?.(event);
|
|
2052
|
+
}
|
|
2053
|
+
function getRawRowIdx(rowIdx) {
|
|
2054
|
+
return hasGroups ? rawRows.indexOf(rows[rowIdx]) : rowIdx;
|
|
2055
|
+
}
|
|
2056
|
+
function updateRow(rowIdx, row) {
|
|
2057
|
+
if (typeof onRowsChange !== 'function') return;
|
|
2058
|
+
const rawRowIdx = getRawRowIdx(rowIdx);
|
|
2059
|
+
if (row === rawRows[rawRowIdx]) return;
|
|
2060
|
+
const updatedRows = [...rawRows];
|
|
2061
|
+
updatedRows[rawRowIdx] = row;
|
|
2062
|
+
onRowsChange(updatedRows, {
|
|
2063
|
+
indexes: [rawRowIdx],
|
|
2064
|
+
column: columns[selectedPosition.idx]
|
|
2065
|
+
});
|
|
2066
|
+
}
|
|
2067
|
+
function commitEditorChanges() {
|
|
2068
|
+
if (columns[selectedPosition.idx]?.editor == null || selectedPosition.mode === 'SELECT' || selectedPosition.row === selectedPosition.originalRow) {
|
|
2069
|
+
return;
|
|
2070
|
+
}
|
|
2071
|
+
updateRow(selectedPosition.rowIdx, selectedPosition.row);
|
|
2072
|
+
}
|
|
2073
|
+
function handleCopy() {
|
|
2074
|
+
const {
|
|
2075
|
+
idx,
|
|
2076
|
+
rowIdx
|
|
2077
|
+
} = selectedPosition;
|
|
2078
|
+
setCopiedCell({
|
|
2079
|
+
row: rawRows[getRawRowIdx(rowIdx)],
|
|
2080
|
+
columnKey: columns[idx].key
|
|
2081
|
+
});
|
|
2082
|
+
}
|
|
2083
|
+
function handlePaste() {
|
|
2084
|
+
if (!onPaste || !onRowsChange || copiedCell === null || !isCellEditable(selectedPosition)) {
|
|
2085
|
+
return;
|
|
2086
|
+
}
|
|
2087
|
+
const {
|
|
2088
|
+
idx,
|
|
2089
|
+
rowIdx
|
|
2090
|
+
} = selectedPosition;
|
|
2091
|
+
const targetRow = rawRows[getRawRowIdx(rowIdx)];
|
|
2092
|
+
const updatedTargetRow = onPaste({
|
|
2093
|
+
sourceRow: copiedCell.row,
|
|
2094
|
+
sourceColumnKey: copiedCell.columnKey,
|
|
2095
|
+
targetRow,
|
|
2096
|
+
targetColumnKey: columns[idx].key
|
|
2097
|
+
});
|
|
2098
|
+
updateRow(rowIdx, updatedTargetRow);
|
|
2099
|
+
}
|
|
2100
|
+
function handleCellInput(event) {
|
|
2101
|
+
if (!selectedCellIsWithinViewportBounds) return;
|
|
2102
|
+
const row = rows[selectedPosition.rowIdx];
|
|
2103
|
+
if (isGroupRow(row)) return;
|
|
2104
|
+
const {
|
|
2105
|
+
key,
|
|
2106
|
+
shiftKey
|
|
2107
|
+
} = event;
|
|
2108
|
+
if (selectedPosition.mode === 'EDIT') {
|
|
2109
|
+
if (key === 'Enter') {
|
|
2110
|
+
commitEditorChanges();
|
|
2111
|
+
closeEditor();
|
|
2112
|
+
}
|
|
2113
|
+
return;
|
|
2114
|
+
}
|
|
2115
|
+
if (isSelectable && shiftKey && key === ' ') {
|
|
2116
|
+
assertIsValidKeyGetter(rowKeyGetter);
|
|
2117
|
+
const rowKey = rowKeyGetter(row);
|
|
2118
|
+
selectRow({
|
|
2119
|
+
row,
|
|
2120
|
+
checked: !selectedRows.has(rowKey),
|
|
2121
|
+
isShiftClick: false
|
|
2122
|
+
});
|
|
2123
|
+
event.preventDefault();
|
|
2124
|
+
return;
|
|
2125
|
+
}
|
|
2126
|
+
const column = columns[selectedPosition.idx];
|
|
2127
|
+
column.editorOptions?.onCellKeyDown?.(event);
|
|
2128
|
+
if (event.isDefaultPrevented()) return;
|
|
2129
|
+
if (isCellEditable(selectedPosition) && isDefaultCellInput(event)) {
|
|
2130
|
+
setSelectedPosition(({
|
|
2131
|
+
idx,
|
|
2132
|
+
rowIdx
|
|
2133
|
+
}) => ({
|
|
2134
|
+
idx,
|
|
2135
|
+
rowIdx,
|
|
2136
|
+
mode: 'EDIT',
|
|
2137
|
+
row,
|
|
2138
|
+
originalRow: row
|
|
2139
|
+
}));
|
|
2140
|
+
}
|
|
2141
|
+
}
|
|
2142
|
+
function handleEditorRowChange(row, commitChanges) {
|
|
2143
|
+
if (selectedPosition.mode === 'SELECT') return;
|
|
2144
|
+
if (commitChanges) {
|
|
2145
|
+
updateRow(selectedPosition.rowIdx, row);
|
|
2146
|
+
closeEditor();
|
|
2147
|
+
} else {
|
|
2148
|
+
setSelectedPosition(position => ({
|
|
2149
|
+
...position,
|
|
2150
|
+
row
|
|
2151
|
+
}));
|
|
2152
|
+
}
|
|
2153
|
+
}
|
|
2154
|
+
function handleOnClose(commitChanges) {
|
|
2155
|
+
if (commitChanges) {
|
|
2156
|
+
commitEditorChanges();
|
|
2157
|
+
}
|
|
2158
|
+
closeEditor();
|
|
2159
|
+
}
|
|
2160
|
+
function isColIdxWithinSelectionBounds(idx) {
|
|
2161
|
+
return idx >= minColIdx && idx <= maxColIdx;
|
|
2162
|
+
}
|
|
2163
|
+
function isRowIdxWithinViewportBounds(rowIdx) {
|
|
2164
|
+
return rowIdx >= 0 && rowIdx < rows.length;
|
|
2165
|
+
}
|
|
2166
|
+
function isCellWithinSelectionBounds({
|
|
2167
|
+
idx,
|
|
2168
|
+
rowIdx
|
|
2169
|
+
}) {
|
|
2170
|
+
return rowIdx >= minRowIdx && rowIdx <= maxRowIdx && isColIdxWithinSelectionBounds(idx);
|
|
2171
|
+
}
|
|
2172
|
+
function isCellWithinViewportBounds({
|
|
2173
|
+
idx,
|
|
2174
|
+
rowIdx
|
|
2175
|
+
}) {
|
|
2176
|
+
return isRowIdxWithinViewportBounds(rowIdx) && isColIdxWithinSelectionBounds(idx);
|
|
2177
|
+
}
|
|
2178
|
+
function isCellEditable(position) {
|
|
2179
|
+
return isCellWithinViewportBounds(position) && isSelectedCellEditable({
|
|
2180
|
+
columns,
|
|
2181
|
+
rows,
|
|
2182
|
+
selectedPosition: position,
|
|
2183
|
+
isGroupRow
|
|
2184
|
+
});
|
|
2185
|
+
}
|
|
2186
|
+
function selectCell(position, enableEditor) {
|
|
2187
|
+
if (!isCellWithinSelectionBounds(position)) return;
|
|
2188
|
+
commitEditorChanges();
|
|
2189
|
+
if (enableEditor && isCellEditable(position)) {
|
|
2190
|
+
const row = rows[position.rowIdx];
|
|
2191
|
+
setSelectedPosition({
|
|
2192
|
+
...position,
|
|
2193
|
+
mode: 'EDIT',
|
|
2194
|
+
row,
|
|
2195
|
+
originalRow: row
|
|
2196
|
+
});
|
|
2197
|
+
} else if (selectedPosition.mode !== 'SELECT' || selectedPosition.idx !== position.idx || selectedPosition.rowIdx !== position.rowIdx) {
|
|
2198
|
+
setSelectedPosition({
|
|
2199
|
+
...position,
|
|
2200
|
+
mode: 'SELECT'
|
|
2201
|
+
});
|
|
2202
|
+
}
|
|
2203
|
+
}
|
|
2204
|
+
function closeEditor() {
|
|
2205
|
+
if (selectedPosition.mode === 'SELECT') return;
|
|
2206
|
+
setSelectedPosition(({
|
|
2207
|
+
idx,
|
|
2208
|
+
rowIdx
|
|
2209
|
+
}) => ({
|
|
2210
|
+
idx,
|
|
2211
|
+
rowIdx,
|
|
2212
|
+
mode: 'SELECT'
|
|
2213
|
+
}));
|
|
2214
|
+
}
|
|
2215
|
+
function scrollToCell({
|
|
2216
|
+
idx,
|
|
2217
|
+
rowIdx
|
|
2218
|
+
}) {
|
|
2219
|
+
const {
|
|
2220
|
+
current
|
|
2221
|
+
} = gridRef;
|
|
2222
|
+
if (!current) return;
|
|
2223
|
+
if (typeof idx === 'number' && idx > lastFrozenColumnIndex) {
|
|
2224
|
+
rowIdx ??= selectedPosition.rowIdx;
|
|
2225
|
+
if (!isCellWithinSelectionBounds({
|
|
2226
|
+
rowIdx,
|
|
2227
|
+
idx
|
|
2228
|
+
})) return;
|
|
2229
|
+
const {
|
|
2230
|
+
clientWidth
|
|
2231
|
+
} = current;
|
|
2232
|
+
const column = columns[idx];
|
|
2233
|
+
const {
|
|
2234
|
+
left,
|
|
2235
|
+
width
|
|
2236
|
+
} = columnMetrics.get(column);
|
|
2237
|
+
let right = left + width;
|
|
2238
|
+
const colSpan = getSelectedCellColSpan({
|
|
2239
|
+
rows,
|
|
2240
|
+
summaryRows,
|
|
2241
|
+
rowIdx,
|
|
2242
|
+
lastFrozenColumnIndex,
|
|
2243
|
+
column,
|
|
2244
|
+
isGroupRow
|
|
2245
|
+
});
|
|
2246
|
+
if (colSpan !== undefined) {
|
|
2247
|
+
const {
|
|
2248
|
+
left,
|
|
2249
|
+
width
|
|
2250
|
+
} = columnMetrics.get(columns[column.idx + colSpan - 1]);
|
|
2251
|
+
right = left + width;
|
|
2252
|
+
}
|
|
2253
|
+
const isCellAtLeftBoundary = left < scrollLeft + totalFrozenColumnWidth;
|
|
2254
|
+
const isCellAtRightBoundary = right > clientWidth + scrollLeft;
|
|
2255
|
+
if (isCellAtLeftBoundary) {
|
|
2256
|
+
current.scrollLeft = left - totalFrozenColumnWidth;
|
|
2257
|
+
} else if (isCellAtRightBoundary) {
|
|
2258
|
+
current.scrollLeft = right - clientWidth;
|
|
2259
|
+
}
|
|
2260
|
+
}
|
|
2261
|
+
if (typeof rowIdx === 'number' && isRowIdxWithinViewportBounds(rowIdx)) {
|
|
2262
|
+
const rowTop = getRowTop(rowIdx);
|
|
2263
|
+
const rowHeight = getRowHeight(rowIdx);
|
|
2264
|
+
if (rowTop < scrollTop) {
|
|
2265
|
+
current.scrollTop = rowTop;
|
|
2266
|
+
} else if (rowTop + rowHeight > scrollTop + clientHeight) {
|
|
2267
|
+
current.scrollTop = rowTop + rowHeight - clientHeight;
|
|
2268
|
+
}
|
|
2269
|
+
}
|
|
2270
|
+
}
|
|
2271
|
+
function getNextPosition(key, ctrlKey, shiftKey) {
|
|
2272
|
+
const {
|
|
2273
|
+
idx,
|
|
2274
|
+
rowIdx
|
|
2275
|
+
} = selectedPosition;
|
|
2276
|
+
const row = rows[rowIdx];
|
|
2277
|
+
const isRowSelected = selectedCellIsWithinSelectionBounds && idx === -1;
|
|
2278
|
+
if (key === 'ArrowLeft' && isRowSelected && isGroupRow(row) && !row.isExpanded && row.level !== 0) {
|
|
2279
|
+
let parentRowIdx = -1;
|
|
2280
|
+
for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
|
|
2281
|
+
const parentRow = rows[i];
|
|
2282
|
+
if (isGroupRow(parentRow) && parentRow.id === row.parentId) {
|
|
2283
|
+
parentRowIdx = i;
|
|
2284
|
+
break;
|
|
2285
|
+
}
|
|
2286
|
+
}
|
|
2287
|
+
if (parentRowIdx !== -1) {
|
|
2288
|
+
return {
|
|
2289
|
+
idx,
|
|
2290
|
+
rowIdx: parentRowIdx
|
|
2291
|
+
};
|
|
2292
|
+
}
|
|
2293
|
+
}
|
|
2294
|
+
switch (key) {
|
|
2295
|
+
case 'ArrowUp':
|
|
2296
|
+
return {
|
|
2297
|
+
idx,
|
|
2298
|
+
rowIdx: rowIdx - 1
|
|
2299
|
+
};
|
|
2300
|
+
case 'ArrowDown':
|
|
2301
|
+
return {
|
|
2302
|
+
idx,
|
|
2303
|
+
rowIdx: rowIdx + 1
|
|
2304
|
+
};
|
|
2305
|
+
case 'ArrowLeft':
|
|
2306
|
+
return {
|
|
2307
|
+
idx: idx - 1,
|
|
2308
|
+
rowIdx
|
|
2309
|
+
};
|
|
2310
|
+
case 'ArrowRight':
|
|
2311
|
+
return {
|
|
2312
|
+
idx: idx + 1,
|
|
2313
|
+
rowIdx
|
|
2314
|
+
};
|
|
2315
|
+
case 'Tab':
|
|
2316
|
+
return {
|
|
2317
|
+
idx: idx + (shiftKey ? -1 : 1),
|
|
2318
|
+
rowIdx
|
|
2319
|
+
};
|
|
2320
|
+
case 'Home':
|
|
2321
|
+
if (isRowSelected) return {
|
|
2322
|
+
idx,
|
|
2323
|
+
rowIdx: 0
|
|
2324
|
+
};
|
|
2325
|
+
return {
|
|
2326
|
+
idx: 0,
|
|
2327
|
+
rowIdx: ctrlKey ? minRowIdx : rowIdx
|
|
2328
|
+
};
|
|
2329
|
+
case 'End':
|
|
2330
|
+
if (isRowSelected) return {
|
|
2331
|
+
idx,
|
|
2332
|
+
rowIdx: rows.length - 1
|
|
2333
|
+
};
|
|
2334
|
+
return {
|
|
2335
|
+
idx: maxColIdx,
|
|
2336
|
+
rowIdx: ctrlKey ? maxRowIdx : rowIdx
|
|
2337
|
+
};
|
|
2338
|
+
case 'PageUp':
|
|
2339
|
+
{
|
|
2340
|
+
if (selectedPosition.rowIdx === minRowIdx) return selectedPosition;
|
|
2341
|
+
const nextRowY = getRowTop(rowIdx) + getRowHeight(rowIdx) - clientHeight;
|
|
2342
|
+
return {
|
|
2343
|
+
idx,
|
|
2344
|
+
rowIdx: nextRowY > 0 ? findRowIdx(nextRowY) : 0
|
|
2345
|
+
};
|
|
2346
|
+
}
|
|
2347
|
+
case 'PageDown':
|
|
2348
|
+
{
|
|
2349
|
+
if (selectedPosition.rowIdx >= rows.length) return selectedPosition;
|
|
2350
|
+
const nextRowY = getRowTop(rowIdx) + clientHeight;
|
|
2351
|
+
return {
|
|
2352
|
+
idx,
|
|
2353
|
+
rowIdx: nextRowY < totalRowHeight ? findRowIdx(nextRowY) : rows.length - 1
|
|
2354
|
+
};
|
|
2355
|
+
}
|
|
2356
|
+
default:
|
|
2357
|
+
return selectedPosition;
|
|
2358
|
+
}
|
|
2359
|
+
}
|
|
2360
|
+
function navigate(event) {
|
|
2361
|
+
if (selectedPosition.mode === 'EDIT') {
|
|
2362
|
+
const onNavigation = columns[selectedPosition.idx].editorOptions?.onNavigation ?? onEditorNavigation;
|
|
2363
|
+
if (!onNavigation(event)) return;
|
|
2364
|
+
}
|
|
2365
|
+
const {
|
|
2366
|
+
key,
|
|
2367
|
+
shiftKey
|
|
2368
|
+
} = event;
|
|
2369
|
+
let mode = cellNavigationMode;
|
|
2370
|
+
if (key === 'Tab') {
|
|
2371
|
+
if (canExitGrid({
|
|
2372
|
+
shiftKey,
|
|
2373
|
+
cellNavigationMode,
|
|
2374
|
+
maxColIdx,
|
|
2375
|
+
minRowIdx,
|
|
2376
|
+
maxRowIdx,
|
|
2377
|
+
selectedPosition
|
|
2378
|
+
})) {
|
|
2379
|
+
commitEditorChanges();
|
|
2380
|
+
return;
|
|
2381
|
+
}
|
|
2382
|
+
mode = cellNavigationMode === 'NONE' ? 'CHANGE_ROW' : cellNavigationMode;
|
|
2383
|
+
}
|
|
2384
|
+
event.preventDefault();
|
|
2385
|
+
const ctrlKey = isCtrlKeyHeldDown(event);
|
|
2386
|
+
const nextPosition = getNextPosition(key, ctrlKey, shiftKey);
|
|
2387
|
+
if (nextPosition.rowIdx === selectedPosition.rowIdx && nextPosition.idx === selectedPosition.idx) {
|
|
2388
|
+
return;
|
|
2389
|
+
}
|
|
2390
|
+
const nextSelectedCellPosition = getNextSelectedCellPosition({
|
|
2391
|
+
columns,
|
|
2392
|
+
colSpanColumns,
|
|
2393
|
+
rows,
|
|
2394
|
+
summaryRows,
|
|
2395
|
+
minRowIdx,
|
|
2396
|
+
maxRowIdx,
|
|
2397
|
+
lastFrozenColumnIndex,
|
|
2398
|
+
cellNavigationMode: mode,
|
|
2399
|
+
currentPosition: selectedPosition,
|
|
2400
|
+
nextPosition,
|
|
2401
|
+
isCellWithinBounds: isCellWithinSelectionBounds,
|
|
2402
|
+
isGroupRow
|
|
2403
|
+
});
|
|
2404
|
+
selectCell(nextSelectedCellPosition);
|
|
2405
|
+
}
|
|
2406
|
+
function getDraggedOverCellIdx(currentRowIdx) {
|
|
2407
|
+
if (draggedOverRowIdx === undefined) return;
|
|
2408
|
+
const {
|
|
2409
|
+
rowIdx
|
|
2410
|
+
} = selectedPosition;
|
|
2411
|
+
const isDraggedOver = rowIdx < draggedOverRowIdx ? rowIdx < currentRowIdx && currentRowIdx <= draggedOverRowIdx : rowIdx > currentRowIdx && currentRowIdx >= draggedOverRowIdx;
|
|
2412
|
+
return isDraggedOver ? selectedPosition.idx : undefined;
|
|
2413
|
+
}
|
|
2414
|
+
function getDragHandle(rowIdx) {
|
|
2415
|
+
if (selectedPosition.rowIdx !== rowIdx || selectedPosition.mode === 'EDIT' || hasGroups || onFill == null) {
|
|
2416
|
+
return;
|
|
2417
|
+
}
|
|
2418
|
+
return /*#__PURE__*/jsxRuntime.jsx(DragHandle, {
|
|
2419
|
+
rows: rawRows,
|
|
2420
|
+
columns: columns,
|
|
2421
|
+
selectedPosition: selectedPosition,
|
|
2422
|
+
isCellEditable: isCellEditable,
|
|
2423
|
+
latestDraggedOverRowIdx: latestDraggedOverRowIdx,
|
|
2424
|
+
onRowsChange: onRowsChange,
|
|
2425
|
+
onFill: onFill,
|
|
2426
|
+
setDragging: setDragging,
|
|
2427
|
+
setDraggedOverRowIdx: setDraggedOverRowIdx
|
|
2428
|
+
});
|
|
2429
|
+
}
|
|
2430
|
+
function getCellEditor(rowIdx) {
|
|
2431
|
+
const isOutsideEditableRows = Array.isArray(editableRowIdxs) ? !editableRowIdxs.includes(selectedPosition.rowIdx) : selectedPosition.rowIdx !== rowIdx;
|
|
2432
|
+
if (isOutsideEditableRows || selectedPosition.mode === 'SELECT') return;
|
|
2433
|
+
const {
|
|
2434
|
+
idx,
|
|
2435
|
+
row
|
|
2436
|
+
} = selectedPosition;
|
|
2437
|
+
const column = columns[idx];
|
|
2438
|
+
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
2439
|
+
type: 'ROW',
|
|
2440
|
+
row
|
|
2441
|
+
});
|
|
2442
|
+
return /*#__PURE__*/jsxRuntime.jsx(EditCell, {
|
|
2443
|
+
column: column,
|
|
2444
|
+
colSpan: colSpan,
|
|
2445
|
+
row: row,
|
|
2446
|
+
rowIdx: selectedPosition.rowIdx,
|
|
2447
|
+
onRowChange: handleEditorRowChange,
|
|
2448
|
+
onClose: handleOnClose
|
|
2449
|
+
}, column.key);
|
|
2450
|
+
}
|
|
2451
|
+
function getViewportRows() {
|
|
2452
|
+
const rowElements = [];
|
|
2453
|
+
let startRowIndex = 0;
|
|
2454
|
+
const {
|
|
2455
|
+
idx: selectedIdx,
|
|
2456
|
+
rowIdx: selectedRowIdx
|
|
2457
|
+
} = selectedPosition;
|
|
2458
|
+
const startRowIdx = selectedCellIsWithinViewportBounds && selectedRowIdx < rowOverscanStartIdx ? rowOverscanStartIdx - 1 : rowOverscanStartIdx;
|
|
2459
|
+
const endRowIdx = selectedCellIsWithinViewportBounds && selectedRowIdx > rowOverscanEndIdx ? rowOverscanEndIdx + 1 : rowOverscanEndIdx;
|
|
2460
|
+
for (let viewportRowIdx = startRowIdx; viewportRowIdx <= endRowIdx; viewportRowIdx++) {
|
|
2461
|
+
const isRowOutsideViewport = viewportRowIdx === rowOverscanStartIdx - 1 || viewportRowIdx === rowOverscanEndIdx + 1;
|
|
2462
|
+
const rowIdx = isRowOutsideViewport ? selectedRowIdx : viewportRowIdx;
|
|
2463
|
+
let rowColumns = viewportColumns;
|
|
2464
|
+
const selectedColumn = columns[selectedIdx];
|
|
2465
|
+
if (selectedColumn !== undefined) {
|
|
2466
|
+
if (isRowOutsideViewport) {
|
|
2467
|
+
rowColumns = [selectedColumn];
|
|
2468
|
+
} else if (selectedRowIdx === rowIdx && !viewportColumns.includes(selectedColumn)) {
|
|
2469
|
+
rowColumns = selectedIdx > viewportColumns[viewportColumns.length - 1].idx ? [...viewportColumns, selectedColumn] : [...viewportColumns.slice(0, lastFrozenColumnIndex + 1), selectedColumn, ...viewportColumns.slice(lastFrozenColumnIndex + 1)];
|
|
2470
|
+
}
|
|
2471
|
+
}
|
|
2472
|
+
const row = rows[rowIdx];
|
|
2473
|
+
const top = getRowTop(rowIdx) + headerRowHeight;
|
|
2474
|
+
if (isGroupRow(row)) {
|
|
2475
|
+
({
|
|
2476
|
+
startRowIndex
|
|
2477
|
+
} = row);
|
|
2478
|
+
const isGroupRowSelected = isSelectable && row.childRows.every(cr => selectedRows.has(rowKeyGetter(cr)));
|
|
2479
|
+
rowElements.push(/*#__PURE__*/jsxRuntime.jsx(GroupRowRenderer, {
|
|
2480
|
+
"aria-level": row.level + 1,
|
|
2481
|
+
"aria-setsize": row.setSize,
|
|
2482
|
+
"aria-posinset": row.posInSet + 1,
|
|
2483
|
+
"aria-rowindex": headerRowsCount + startRowIndex + 1,
|
|
2484
|
+
"aria-selected": isSelectable ? isGroupRowSelected : undefined,
|
|
2485
|
+
id: row.id,
|
|
2486
|
+
groupKey: row.groupKey,
|
|
2487
|
+
viewportColumns: rowColumns,
|
|
2488
|
+
childRows: row.childRows,
|
|
2489
|
+
rowIdx: rowIdx,
|
|
2490
|
+
row: row,
|
|
2491
|
+
top: top,
|
|
2492
|
+
height: getRowHeight(rowIdx),
|
|
2493
|
+
level: row.level,
|
|
2494
|
+
isExpanded: row.isExpanded,
|
|
2495
|
+
selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
|
|
2496
|
+
isRowSelected: isGroupRowSelected,
|
|
2497
|
+
selectGroup: selectGroupLatest,
|
|
2498
|
+
toggleGroup: toggleGroupLatest
|
|
2499
|
+
}, row.id));
|
|
2500
|
+
continue;
|
|
2501
|
+
}
|
|
2502
|
+
startRowIndex++;
|
|
2503
|
+
let key;
|
|
2504
|
+
let isRowSelected = false;
|
|
2505
|
+
if (typeof rowKeyGetter === 'function') {
|
|
2506
|
+
key = rowKeyGetter(row);
|
|
2507
|
+
isRowSelected = selectedRows?.has(key) ?? false;
|
|
2508
|
+
} else {
|
|
2509
|
+
key = hasGroups ? startRowIndex : rowIdx;
|
|
2510
|
+
}
|
|
2511
|
+
rowElements.push(/*#__PURE__*/jsxRuntime.jsx(RowRenderer, {
|
|
2512
|
+
"aria-rowindex": headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1,
|
|
2513
|
+
"aria-selected": isSelectable ? isRowSelected : undefined,
|
|
2514
|
+
rowIdx: rowIdx,
|
|
2515
|
+
row: row,
|
|
2516
|
+
viewportColumns: rowColumns,
|
|
2517
|
+
isRowSelected: isRowSelected,
|
|
2518
|
+
onRowClick: onRowClick,
|
|
2519
|
+
onRowDoubleClick: onRowDoubleClick,
|
|
2520
|
+
rowClass: rowClass,
|
|
2521
|
+
top: top,
|
|
2522
|
+
height: getRowHeight(rowIdx),
|
|
2523
|
+
copiedCellIdx: copiedCell !== null && copiedCell.row === row ? columns.findIndex(c => c.key === copiedCell.columnKey) : undefined,
|
|
2524
|
+
selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
|
|
2525
|
+
draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
|
|
2526
|
+
setDraggedOverRowIdx: isDragging ? setDraggedOverRowIdx : undefined,
|
|
2527
|
+
lastFrozenColumnIndex: lastFrozenColumnIndex,
|
|
2528
|
+
onRowChange: handleFormatterRowChangeLatest,
|
|
2529
|
+
selectCell: selectViewportCellLatest,
|
|
2530
|
+
selectedCellDragHandle: getDragHandle(rowIdx),
|
|
2531
|
+
selectedCellEditor: getCellEditor(rowIdx)
|
|
2532
|
+
}, key));
|
|
2533
|
+
}
|
|
2534
|
+
return rowElements;
|
|
2535
|
+
}
|
|
2536
|
+
if (selectedPosition.idx > maxColIdx || selectedPosition.rowIdx > maxRowIdx) {
|
|
2537
|
+
setSelectedPosition(initialPosition);
|
|
2538
|
+
setDraggedOverRowIdx(undefined);
|
|
2539
|
+
}
|
|
2540
|
+
if (selectedPosition.mode === 'EDIT' && rows[selectedPosition.rowIdx] !== selectedPosition.originalRow) {
|
|
2541
|
+
closeEditor();
|
|
2542
|
+
}
|
|
2543
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2544
|
+
role: hasGroups ? 'treegrid' : 'grid',
|
|
2545
|
+
"aria-label": ariaLabel,
|
|
2546
|
+
"aria-labelledby": ariaLabelledBy,
|
|
2547
|
+
"aria-describedby": ariaDescribedBy,
|
|
2548
|
+
"aria-multiselectable": isSelectable ? true : undefined,
|
|
2549
|
+
"aria-colcount": columns.length,
|
|
2550
|
+
"aria-rowcount": headerRowsCount + rowsCount + summaryRowsCount,
|
|
2551
|
+
className: clsx(rootClassname, className, isDragging && viewportDraggingClassname),
|
|
2552
|
+
style: {
|
|
2553
|
+
...style,
|
|
2554
|
+
'--header-row-height': `${headerRowHeight}px`,
|
|
2555
|
+
'--row-width': `${totalColumnWidth}px`,
|
|
2556
|
+
'--summary-row-height': `${summaryRowHeight}px`,
|
|
2557
|
+
...layoutCssVars
|
|
2558
|
+
},
|
|
2559
|
+
ref: gridRef,
|
|
2560
|
+
onScroll: handleScroll,
|
|
2561
|
+
onKeyDown: handleKeyDown,
|
|
2562
|
+
"data-testid": testId,
|
|
2563
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(HeaderRow$1, {
|
|
2564
|
+
columns: viewportColumns,
|
|
2565
|
+
onColumnResize: handleColumnResize,
|
|
2566
|
+
allRowsSelected: allRowsSelected,
|
|
2567
|
+
onAllRowsSelectionChange: selectAllRowsLatest,
|
|
2568
|
+
sortColumns: sortColumns,
|
|
2569
|
+
onSortColumnsChange: onSortColumnsChange,
|
|
2570
|
+
lastFrozenColumnIndex: lastFrozenColumnIndex,
|
|
2571
|
+
selectedCellIdx: isHeaderRowSelected ? selectedPosition.idx : undefined,
|
|
2572
|
+
selectCell: selectHeaderCellLatest,
|
|
2573
|
+
shouldFocusGrid: !selectedCellIsWithinSelectionBounds
|
|
2574
|
+
}), rows.length === 0 && noRowsFallback ? noRowsFallback : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2575
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2576
|
+
style: {
|
|
2577
|
+
height: max(totalRowHeight, clientHeight)
|
|
2578
|
+
}
|
|
2579
|
+
}), /*#__PURE__*/jsxRuntime.jsx(RowSelectionChangeProvider, {
|
|
2580
|
+
value: selectRowLatest,
|
|
2581
|
+
children: getViewportRows()
|
|
2582
|
+
}), summaryRows?.map((row, rowIdx) => {
|
|
2583
|
+
const isSummaryRowSelected = selectedPosition.rowIdx === headerRowsCount + rows.length + rowIdx - 1;
|
|
2584
|
+
return /*#__PURE__*/jsxRuntime.jsx(SummaryRow$1, {
|
|
2585
|
+
"aria-rowindex": headerRowsCount + rowsCount + rowIdx + 1,
|
|
2586
|
+
rowIdx: rowIdx,
|
|
2587
|
+
row: row,
|
|
2588
|
+
bottom: summaryRowHeight * (summaryRows.length - 1 - rowIdx),
|
|
2589
|
+
viewportColumns: viewportColumns,
|
|
2590
|
+
lastFrozenColumnIndex: lastFrozenColumnIndex,
|
|
2591
|
+
selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
|
|
2592
|
+
selectCell: selectSummaryCellLatest
|
|
2593
|
+
}, rowIdx);
|
|
2594
|
+
})]
|
|
2595
|
+
})]
|
|
2596
|
+
});
|
|
2597
|
+
}
|
|
2598
|
+
const DataGrid$1 = /*#__PURE__*/react.forwardRef(DataGrid);
|
|
2599
|
+
|
|
2600
|
+
var css_248z = ".t1u15qzo700-beta711{appearance:none;background-color:var(--background-color);border:2px solid #ccc;box-sizing:border-box;color:var(--color);font-family:inherit;font-size:var(--font-size);height:100%;padding:0 6px;vertical-align:top;width:100%}.t1u15qzo700-beta711:focus{border-color:var(--selection-color);outline:none}.t1u15qzo700-beta711::placeholder{color:#999;opacity:1}";
|
|
2601
|
+
styleInject(css_248z,{"insertAt":"top"});
|
|
2602
|
+
|
|
2603
|
+
const textEditor = "t1u15qzo700-beta711";
|
|
2604
|
+
const textEditorClassname = `rdg-text-editor ${textEditor}`;
|
|
2605
|
+
function autoFocusAndSelect(input) {
|
|
2606
|
+
input?.focus();
|
|
2607
|
+
input?.select();
|
|
2608
|
+
}
|
|
2609
|
+
function TextEditor({
|
|
2610
|
+
row,
|
|
2611
|
+
column,
|
|
2612
|
+
onRowChange,
|
|
2613
|
+
onClose
|
|
2614
|
+
}) {
|
|
2615
|
+
return /*#__PURE__*/jsxRuntime.jsx("input", {
|
|
2616
|
+
className: textEditorClassname,
|
|
2617
|
+
ref: autoFocusAndSelect,
|
|
2618
|
+
value: row[column.key],
|
|
2619
|
+
onChange: event => onRowChange({
|
|
2620
|
+
...row,
|
|
2621
|
+
[column.key]: event.target.value
|
|
2622
|
+
}),
|
|
2623
|
+
onBlur: () => onClose(true)
|
|
2624
|
+
});
|
|
2625
|
+
}
|
|
2626
|
+
|
|
2627
|
+
exports.Row = RowWithRef;
|
|
2628
|
+
exports.SELECT_COLUMN_KEY = SELECT_COLUMN_KEY;
|
|
2629
|
+
exports.SelectCellFormatter = SelectCellFormatter;
|
|
2630
|
+
exports.SelectColumn = SelectColumn;
|
|
2631
|
+
exports.SortableHeaderCell = SortableHeaderCell;
|
|
2632
|
+
exports.TextEditor = TextEditor;
|
|
2633
|
+
exports.ToggleGroupFormatter = ToggleGroupFormatter;
|
|
2634
|
+
exports.ValueFormatter = ValueFormatter;
|
|
2635
|
+
exports["default"] = DataGrid$1;
|
|
2636
|
+
exports.useRowSelection = useRowSelection;
|
|
2637
|
+
//# sourceMappingURL=bundle.cjs.map
|